mistojen | cr chart: bubbles

it started casual. nothing deep, just a little bit of small talk.

CHARACTER NAME journalname gamejournal

'bubbles' design by mistojen

instructions:

Replace the following:
- ICON1-ICON4 (and feel free to add or delete sections from this piece)
- LYRICSGOHERE (this is a cut tag, fancied up, so change the LYRICSGOHERE to whatever you want your cut text to say.)
- ENTRYURL (you'll have to post the entry, grab the link for it, and then go back in and edit the URL into this spot)
- SQUAREGIF (best when at least 200x200)
- CHARACTER NAME
- JOURNALNAME
- GAMEJOURNAL (which can be removed if you don't want it, or replaced with your plurk or whatever you want there)
- CRICON1-CRICON7 (you can remove any of these, but I would recomment starting from the bottom and working your way up when deleting these sections).
If you add more than one of your characters, you'll need to change CHAR1 to whatever corresponding character number or link you've got listed in the navigation section. I've defaulted it at CHAR1-CHAR4 but you can change those to the character names, just make sure that the corresponding character in the table below has the same a name="" as your a href="#" in the navigation.
Fill in the character name and relationship for each of the CR sections. All images should be square or as close to it as possible for the best aesthetic. They will all resize themselves accordingly.
Make sure you check the box that says Disable Auto-Formatting located below the subject line and above the content box for your entry it self.
Please do not remove credit.
If you have any questions or run into hiccups, please feel free to comment below and I'll try to get back to you ASAP to help.
Profit.

to change the colors:

#000

the code:

<lj-raw><span style="display: inline;"> 
<a href="#CHAR1"><img src="ICON1" style="width: 70px; height: 70px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; margin-left: 7px;"></a> 
<a href="#CHAR2"><img src="ICON2" style="width: 70px; height: 70px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; margin-left: 7px;"></a> 
<a href="#CHAR3"><img src="ICON3" style="width: 70px; height: 70px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; margin-left: 7px;"></a> 
<a href="#CHAR4"><img src="ICON4" style="width: 70px; height: 70px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; margin-left: 7px;"></a> </span></lj-raw>

<div style="padding:5px; text-weight: bold; font-family: Cambria,Georgia,serif; font-size:25px; color: #000; line-height: 1.1em; letter-spacing:-1pt; text-shadow: 1pt 1pt 1pt #DBDBDB; font-style: italic;">LYRICSGOHERE<a href="ENTRYURL" style="text-decoration:none; color: #000;">.</a> <span style="display:none;"><lj-cut></span></div>

<div style="display: inline-block; float: left; width: 340px; height: 300px;">
   <div style="width: 200px; height: 150px; float: left;"><a name="CHAR1"><img src="SQUAREGIF" style="border: 1px solid #000; padding: 2px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; width: 150px; height: 150px;"></a>
	<p style="font-family: Cambria,Georgia,serif; font-size: 13px;margin-top: -2px; margin-left: 15px;">CHARACTER NAME
	<user name="journalname">
	<user name="gamejournal"></p>
   </div>
   <div style="width: 120px; height: 200px;float: right;margin-right: 20px;">
	<span title="character name • relationship"><img src="CRICON1" style="width: 50px; height: 50px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; margin-left: -100px; margin-top: -20px;"></span><br>
	<span title="character name • relationship"><img src="CRICON2" style="width: 50px; height: 50px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; margin-left: 40px; margin-top: -30px;"></span><br>
	<span title="character name • relationship"><img src="CRICON3" style="width: 50px; height: 50px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; margin-left: -75px; margin-top: -15px;"></span><br>
	<span title="character name • relationship"><img src="CRICON4" style="width: 50px; height: 50px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; margin-left: 60px; margin-top: -30px;"></span><br>
	<span title="character name • relationship"><img src="CRICON5" style="width: 50px; height: 50px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; margin-left: -90px; margin-top: -20px;"></span><br>
	<span title="character name • relationship"><img src="CRICON6" style="width: 50px; height: 50px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; margin-left: 40px; margin-top: -30px;"></span><br>
	<span title="character name • relationship"><img src="CRICON7" style="width: 50px; height: 50px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; margin-left: -110px; margin-top: -20px;"></span><br>
   </div>
</div>

<center><div style="display: block;width:700px; height: 30px; margin-top: -15px; margin-bottom: 20px;font-family: 'century gothic'; text-align: center; font-size: 9px; letter-spacing: 3px; color: #b5b5b5;">'bubbles' design by <a href="http://mistojen.dreamwidth.org/" style="color: #858585; text-decoration: none;">mistojen</a></div></center>

</div>
</td></tr></table>
<br><br>

Flat | Top-Level Comments Only

I have no idea if you'll still get this comment, but is there any way to add more small bubbles for CR, without making a mess?

Yeah, you absolutely can, it's just a little bit tricksy, how many do you want to add and for how many characters on your cr chart? Like above, I have four characters, but if you're only doing it for one or two characters, you could probably just add another big image of your character to utilize the small ones for additional CR. If you wanted to add more to several characters, you'd need to widen the div wrap from 700px to whatever extra you'll need based on how many more bubbles you need/want to add.

...that made sense in my head but reading it back, I'm not sure it does...sorry about that. Let me know if that's too confusing or if you follow.

Oh wow, thank you for getting back to me so fast! I'm looking to add... Probably another row's worth for several characters. Would that mean extending the dive wrap by 50 pixels?

You caught me at a good time lol.

So...I just gave it a shot and I lied. At least, for me, it's kind of making a mess. I can't get the next row of images to line up correctly with the others after making margin adjustments, but you might have better luck, I'm sort of rushing unfortunately. I just wanted to answer you again while I had access to a desktop and before I forgot.

What I did notice while I was in there, though, is that there's a div with a width of 340 and a div with a width of 120, both of which will also need to be adjusted, I believe. But I would think that 50px should do it.

Haha, well I'm glad.

Hey, no problem - I'm thankful that you tested it out! I may try giving it a shot, myself, or I may go with your "start an extra slot" suggestion!

At any rate, thank you very much! And this code is really amazing!

Edited 2018-07-18 22:38 (UTC)

I'm sure if I had the time to like sit down and really fiddle with it, it'd be fine, but I only have about fifteen minutes before I have to leave to be somewhere for a few hours, so I don't have the luxury right now. Which, yeah, means that maybe you might have better luck fiddling than I did. I would be really interested to see the code if/when you get it to work, if you don't mind sharing! I'd like to add the steps into the instructions (I'll credit you for the addendum), if you don't mind.

You're so welcome and I'm glad you like it!

cr chart: bubbles

no subject

no subject

no subject

no subject

no subject

no subject