[09] - misc; speech bubbles

[loupnoir]

What is this strange feeling I keep having? This cold... even now?

I AM LA REVACHOLIÈRE. I AM THE CITY.

What do you mean, you are the city?

I AM A FRAGMENT OF THE WORLD SPIRIT, THE GENIUS LOCI OF REVACHOL. MY HEART IS THE WIND CORRIDOR. THE BOTTOM OF MY AIR IS RED. I HAVE A HUNDRED THOUSAND LUMINOUS ARMS. COME MORNING, I CARRY INDUSTRIAL DUST AND LET IT SETTLE ON TREE LEAVES. I SHAKE THE DUST FROM THOSE LEAVES AND ONTO YOUR COAT. I'VE SEEN YOU, I'VE SEEN YOU! I'VE SEEN YOU WITH HER — AND I'VE SEEN YOU WITHOUT HER. I'VE SEEN YOU ON THE CRESCENT OF THE HILL.

She's speaking fast because she is afraid.

< isopods >
SPEECH BUBBLES

Simple speech bubbles for NPC dialogue, instant messaging, etc. This is kind of an old template that uses tables, so it might be a little janky in places. Feel free to modify and make it better (or worse?)

INSTRUCTIONS:

→ The image is meant to be 100 x 100, the same size as a Dreamwidth icon, but you can play around with this if you'd like.

→ The speech bubble resizes based on how much or how little you type!

→ Mobile-friendly! Kind of.

→ Need help or have any other questions? Let me know in the comments below!

COLOR PRESETS:

→ Default Color: #cccccc

LEFT ICON SPEECH BUBBLE:
<raw-code> <center> <!-- START OF LEFT ICON SPEECH BUBBLE --> <table style="border: 0px; width: 100%; margin-top: 10px; margin-bottom: 10px;"> <tbody> <!-- BEGIN QUOTE BLOCK --> <tr style="margin-top: 10px; margin-bottom: 10px;"> <td style="vertical-align: top; width: 110px;"> <!--ICON HERE--> <img src="ICON URL HERE" style="float: left; border-radius: 20px; width: 100px;"> <!--ICON END--> </td> <td style="vertical-align: top;"> <div style="margin-left: -10px; margin-top: 25px; width: 0px; height: 0px; float: left; border-top: 10px solid transparent; border-right: 20px solid #cccccc; border-bottom: 10px solid transparent; position: relative; z-index: 25;"></div> <div style="margin-left: 9px; margin-top: -45px; padding: 20px; width: 100%; height: auto; float: left; background-color: #cccccc; color: #000; position: relative; border-radius: 20px; font-family: Georgia; font-size: 1.1em;"> <em> PUT SOME TEXT HERE </em> </div> </td> </tr> <!-- END QUOTE BLOCK --> <!-- FEEL FREE TO PASTE MORE QUOTE BLOCKS UNDER HERE, AS LONG AS THEY'RE FACING THE SAME DIRECTION--> <!-- FEEL FREE TO PASTE MORE QUOTE BLOCKS ABOVE HERE, AS LONG AS THEY'RE FACING THE SAME DIRECTION--> </tbody> </table> <!-- END OF LEFT ICON SPEECH BUBBLE --> <!---CREDIT, DO NOT DELETE--> <span style="padding: 5px; margin-right: 10px; color: white; font-size: 10px;"><a style="text-decoration: none;" href="https://isopods.dreamwidth.org/8408.html">< isopods ></a></span> </center> </raw-code>

RIGHT ICON SPEECH BUBBLE:
<raw-code> <center> <!-- START OF RIGHT ICON SPEECH BUBBLE --> <table style="border: 0px; width: 100%; margin-top: 10px; margin-bottom: 10px;"> <tbody> <!-- BEGIN QUOTE BLOCK --> <tr style="margin-top: 10px; margin-bottom: 10px;"> <td style="vertical-align: top;"> <div style="margin-right: -10px; margin-top: 25px; width: 0px; height: 0px; float: right; border-top: 10px solid transparent; border-left: 20px solid #cccccc; border-bottom: 10px solid transparent; position: relative; z-index: 25;"></div> <div style="margin-right: 9px; margin-top: -45px; padding: 20px; width: 100%; height: auto; float: right; background-color: #cccccc; color: #000; position: relative; border-radius: 20px; font-family: Georgia; font-size: 1.1em;"> <em> PUT SOME TEXT HERE </em> </div> </td> <td style="vertical-align: top; width: 110px;"> <!--ICON HERE--> <img src="ICON URL" style="float: right; border-radius: 20px; width: 100px;"> <!--ICON END--> </td> </tr> <!-- END QUOTE BLOCK --> <!-- FEEL FREE TO PASTE MORE QUOTE BLOCKS UNDER HERE, AS LONG AS THEY'RE FACING THE SAME DIRECTION--> <!-- FEEL FREE TO PASTE MORE QUOTE BLOCKS ABOVE HERE, AS LONG AS THEY'RE FACING THE SAME DIRECTION--> </tbody> </table> <!-- END OF RIGHT ICON SPEECH BUBBLE --> <!---CREDIT, DO NOT DELETE--> <span style="padding: 5px; margin-right: 10px; color: white; font-size: 10px;"><a style="text-decoration: none;" href="https://isopods.dreamwidth.org/8408.html">< isopods ></a></span> </center> </raw-code>

Comments

[gnash]

Hello! Just wondering if this is able to be without italics - was looking at the code but unsure where to find it! Thank you!

[loupnoir]

Hi! The italics is a result of the em tags surrounding the text in the speech bubbles. If you just delete those, you should be able to style the text in the way that you want!

[gnash]

thank you so much!! wow i feel dumb <3