Shop Forum More Submit  Join Login
Awkward Speech Bubble by SimplySilent Awkward Speech Bubble by SimplySilent
I was inspired by `CypherVisor to try and create custom box resources, so here's another one! :la:

Here's a little speech bubble I found that you can use as an awkward bubble or an even more awkward content box.

Update: The code below will align your speech bubble to the left. To align to the right side, delete the <div class="al"> at the beginning of each code.




Speech Bubble Above Icon/Content Box

Paste the following right before the icon or content box:

<div class="al"><div class="gmbutton2town moarbuttons"><span class="grbubbletip watcher"><span>I'm an Awkward Bubble</span></span></div></div>


Speech Bubble within Content Box

The code for a content box normally looks like this:

<div class="stash-upload-box"><div class="pp"><div class="pp" align="center">Content Box Text</div></div></div>


Right before the Content Box Text, insert the speech bubble code from above like so (underlined text is the inserted speech bubble code):

<div class="stash-upload-box"><div class="pp"><div class="pp" align="center"><div class="al"><div class="gmbutton2town moarbuttons"><span class="grbubbletip watcher"><span>Awkward Bubble Text
</span></span></div></div>
Content Box Text</div></div></div></div>



Awkward Content Box

The code is the same as a regular speech bubble, but you must include line breaks so that your text doesn't go off the widget.



More Resources

Check out more Custom Box Resources by `CypherVisor
Also see his Custom Box + Journal Tips n Tricks for more help.
Add a Comment:
 
:iconstarshame:
starshame Featured By Owner Jun 7, 2018  Hobbyist Digital Artist
is there a way to change the color of it?
Reply
:iconiittle-dove:
Iittle-dove Featured By Owner Feb 25, 2018
Using! This is very helpful!
Although, I do have one concern. When I tried to add more than one icon to the bubble, it glitched and looked odd. I'm not sure if I just exceeded the limit or not. ^^'
Reply
:iconcolorfulhoovednights:
ColorfulHoovedNights Featured By Owner Edited Jan 19, 2018  Hobbyist Digital Artist
Many thanks for this find. The color matches my format really well.

My only confusion is how you managed to place in an icon without a space above it like mine?
I had to grab invisible unicode (                   ) to even get the image to appear without text.

If I can't find an answer I guess I'll have to measure out the pixel height and extend the actual images canvas to match
Gfd by ColorfulHoovedNights
I did a lot of experimentation and realized just how bizarrely this box functions. It's like half content box half... mysterious and fickle code.
Sadly I lost the coding but I managed to send an image to the border of the widget without the speech box visible.
Basically using this as a roundabout way to nudge an image way past the context box. Very odd.
Reply
:iconokita17:
okita17 Featured By Owner Sep 17, 2017
Is there a way for the speech bubble to be coming from the opposite side?
Reply
:iconc3lestialwolf:
C3lestialWolf Featured By Owner Aug 14, 2017
using <3
Reply
:iconkhushi-1428:
Khushi-1428 Featured By Owner Aug 3, 2017  Hobbyist Digital Artist
Oh! This is really good! Using! :D
Reply
:iconhybridsart:
hybridsart Featured By Owner Feb 23, 2017  Hobbyist Digital Artist
How do I add an image into the awkward content box? Im using the <img src="DIRECT-IMAGE-URL"> but it isn't working. Is there a size limit?
Reply
:icondays1nthedust:
Days1nTheDust Featured By Owner Jan 31, 2017  Hobbyist Digital Artist
The only problem im having is the little arrow that signifies that the person is speaking isnt there, its just a rounded box!
Reply
:icongoosetooth:
goosetooth Featured By Owner Jan 13, 2017  Hobbyist General Artist
how do you add a content box? ):
Reply
:icongauzzine:
Gauzzine Featured By Owner May 12, 2017  Hobbyist General Artist
Black custom Box with Grey- White Box there are plenty more if you want a different one
Reply
:icongoosetooth:
goosetooth Featured By Owner May 13, 2017  Hobbyist General Artist
this one's perfectly fine I just don't understand the coding 
Reply
:icongauzzine:
Gauzzine Featured By Owner May 13, 2017  Hobbyist General Artist
Oh. I'm really not that good at explaining. Sorry but I can't really help you there. 
Reply
:icongoosetooth:
goosetooth Featured By Owner May 20, 2017  Hobbyist General Artist
it's ok thanks anyways
Reply
:icondead--roses:
dead--roses Featured By Owner Edited Jan 5, 2017  Hobbyist Traditional Artist
I can't figure out the "awkward context box" code.
Can somebody help me?
EDIT: Nevermind, I got it! :'D
Reply
:iconbiacksmith:
bIacksmith Featured By Owner Nov 22, 2016  Student Digital Artist
what custom box is this? the blue one? i'm in love with it ;o;
Reply
:iconfrosticee:
Frosticee Featured By Owner Nov 22, 2016
Using!
Reply
:iconraionxdesu:
raionxdesu Featured By Owner Sep 3, 2016  Hobbyist
using~
Reply
:iconbakagummi:
bakagummi Featured By Owner Mar 19, 2016
Yey using ^^
Reply
:iconassilemdraws:
AssilemDraws Featured By Owner Feb 29, 2016  Student Digital Artist
I'm having trouble with coding so that my icon hovers over my context box.
Could I please have some help?
Reply
:iconminilooni:
minilooni Featured By Owner Feb 15, 2016  Student Artist
I'm trying to put in an icon and it's not working could someone help?
Reply
:iconbadtimeanimation:
BadTimeAnimation Featured By Owner Feb 19, 2016  Student Artist
: iconenekagerou: without the space, or if any other user : icon[USER]: :)
Reply
:iconminilooni:
minilooni Featured By Owner Feb 19, 2016  Student Artist
Like this?
:iconenekagerou:
When i do that it doesn't seem it to work at all
Reply
:iconbadtimeanimation:
BadTimeAnimation Featured By Owner Feb 19, 2016  Student Artist
Oh, I'm not really sure then. it might be where you place it- in that case it'd be right after the CSS.
Reply
:iconminilooni:
minilooni Featured By Owner Feb 19, 2016  Student Artist
Well thanks for helping anyway!
Reply
:iconbadtimeanimation:
BadTimeAnimation Featured By Owner Feb 19, 2016  Student Artist
My pleasure.
Reply
:iconokamorei:
Okamorei Featured By Owner Jan 20, 2016  Hobbyist Digital Artist
Does this coding no longer work? Cause I've tried putting this in a custom widget on my profile page and all that shows up is the awkward speech bubble, the content box along with the text doesn't even show up :/
Reply
:iconm1ffed:
M1ffed Featured By Owner Jan 25, 2016  Hobbyist Digital Artist
If you still need this question answered, yes, it does! I just applied it to my own page before seeing your comment. C: However, not sure what's wrong with yours though? 
Reply
:iconmoonxviii:
MoonXviii Featured By Owner Dec 16, 2015  Hobbyist General Artist
Hello, I'm trying to recreate the third example in the picture and I'm rather confused with how it works or if I'm even doing the coding correctly? I keep trying but it only ends up looking like this; Screen Shot 2015-12-16 at 8.19.32 PM . 
Reply
:iconani-kitten:
Ani-Kitten Featured By Owner Dec 4, 2015  Hobbyist Digital Artist
ah its not working for me, when i paste it in my context box the bubble doesn't even appear :c
Reply
:iconvoidburn:
VoidBurn Featured By Owner Nov 25, 2015  Hobbyist General Artist
Is there anyway to flip the triangle part on this so it's pointing the other direction? 
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Nov 28, 2015
Nope. It's all hard-coded into the CSS by DeviantART, so all we can do is find it and use it, but not change it. :)
Reply
:iconvoidburn:
VoidBurn Featured By Owner Nov 28, 2015  Hobbyist General Artist
Ahh dang it xD Oh well.. Thank you!~ :hug:
Reply
:iconsunken-sailor:
Sunken-Sailor Featured By Owner Oct 6, 2015  Student Digital Artist
im so confused! can you please help clarify?
Reply
:iconraiiningstars:
RaiiningStars Featured By Owner Sep 19, 2015
How do you do the awkward  context bo without the triangle ;;A;; i tried everything but nothing worked
Reply
:iconxshimsa:
xShimsa Featured By Owner Edited Aug 3, 2015
My content box ate it ROFL xD Saw the update after fixing it from being eaten by my content box, thank you ;u;
Reply
:iconbugaboos:
BugaBoos Featured By Owner Jul 31, 2015  Hobbyist Digital Artist
I dont see how people are having issues with this, its fairly easy and quick to do.
Reply
:iconmssilvs:
Mssilvs Featured By Owner Jul 23, 2015
Welp, I dunno how to get this to work /:
Reply
:iconspirit--queen:
Spirit--queen Featured By Owner Jul 22, 2015
Someone please help. Im trying to get the icon over the custom box result but the directions are confusing.
Reply
:iconcaptain-starburst:
Captain-Starburst Featured By Owner Jun 19, 2015  Student General Artist
the only problem i have this, is that whenever i try any of these, it works BUT
my custom box is OVER the icon / speech bubble.
any help??
Reply
:iconxshimsa:
xShimsa Featured By Owner Aug 3, 2015
Space them from each other, fixed mine ;y; Press enter twice at the end of the speech bubble if at the top. Enter twice at the end of the content things if at the end of the box. Hope this helps if you still need it <3
Reply
:icongokuist:
Gokuist Featured By Owner May 25, 2015  Hobbyist Digital Artist
Really cute :meow:
Reply
:iconrehquq:
RehQuQ Featured By Owner May 6, 2015
Its very hard to understand
Reply
:iconqrimm:
qrimm Featured By Owner Apr 4, 2015  Student Artist
how do u align it to the center?
Reply
:iconoddhatt:
Oddhatt Featured By Owner Jun 29, 2015  Hobbyist Digital Artist
< div align="center">
remove the space, and align your text !! for example,

< div align="center">get your body over here, body text.< /div>


^^^ remove the spaces :heart:
Reply
:icondiamonddog777:
DiamondDog777 Featured By Owner Apr 2, 2015
Can someone please help me with this? >n<
Reply
:iconche-rrry:
che-rrry Featured By Owner Apr 5, 2015
Unfortunately, I think you can only use it if you're a premium member, sorry!!
Reply
:icondiamonddog777:
DiamondDog777 Featured By Owner Apr 5, 2015
Oh I was the other day. ^^;

It just expired. But thanks for that information!
Reply
Add a Comment:
 
×





Details

Submitted on
July 25, 2013
Image Size
26.0 KB
Resolution
613×702
Link
Thumb

Stats

Views
51,040 (4 today)
Favourites
3,366 (who?)
Comments
154
Downloads
76