You Are Here Muselist

[mistojen]

You Are Here Muselist

Header Title Character Name canon goes here gamename, gamename Character Name canon goes here gamename Character Name canon goes here inactive/homeless Character Name canon goes here PSL only Character Name canon goes here gamename, gamename Character Name canon goes here gamename Character Name canon goes here PSLs Character Name canon goes here gamename

'you are here' design by mistojen

code:

<table style="width: 900px; font-family: arial, helvetica, sans-serif; 13px;"> <tr valign="top"> <td> <!----HEADER----> <div class="header" style="width: 900px; background-color: #0BA5D9; padding: 10px; font-family: georgia, 'times new roman', serif; font-size: 60px; color: #fff; text-shadow: -1px 1px 2px rgba(0, 0, 0, 1); font-style: italic; text-align: center; -moz-border-radius-topleft: 70%;-webkit-border-top-left-radius: 70%; border-top-left-radius: 70%;-moz-border-radius-bottomright: 70%;-webkit-border-bottom-right-radius: 70%;border-bottom-right-radius: 70%;">HEADERTITLE</div> <!-----END HEADER----> <!----SINGLE CHARACTER----> <div style="width: 200px; margin: 20px 10px; display: inline-block; float: left; text-align: center;"> <a href="http://JOURNALNAME.dreamwidth.org/"><div style="width: 82px; height: 82px; background-color: #000; -moz-border-radius-topleft: 90px;-webkit-border-top-left-radius: 90px; border-top-left-radius: 90px;-moz-border-radius-topright: 90px;-webkit-border-top-right-radius: 90px;border-top-right-radius: 90px;-moz-border-radius-bottomleft: 90px;-webkit-border-bottom-left-radius: 90px;border-bottom-left-radius: 90px; -moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg); margin: 20px auto; overflow: hidden; border: 2px solid #0BA5D9;"><img src="IMGURL" style="-moz-transform: rotate(315deg);-webkit-transform: rotate(315deg);-o-transform: rotate(315deg);-ms-transform: rotate(315deg);transform: rotate(315deg);margin-top: -6px; margin-left: -2px;"></div></a> <div><span style="font-family: georgia, 'times new roman', serif; font-size: 20px; font-style: italic; text-shadow: -1px 1px 2px rgba(0, 0, 0, 1);color: #0BA5D9;">CHARACTERNAME</span><br>CANON<br><user name="gamename">, <user name="gamename"></div> </div> <!-----END SINGLE CHARACTER-----> <!----DO NOT EDIT OR ADD BELOW THIS POINT-----> </td></tr> <tr style="height: 20px;"><td> </td></tr> <tr><td><div style="width:900px; display:block; font-family: 'century gothic'; font-size: 9px; letter-spacing: 3px; color: #000; text-align: center;">'you are here' design by <a href="http://mistojen.dreamwidth.org/" style="color: #000; text-decoration: none;">mistojen</a></div></td></tr></table></center>

code for additional headers:

</td></tr> <tr valign="top"> <td> <!----HEADER----> <div class="header" style="width: 900px; background-color: #0BA5D9; padding: 10px; font-family: georgia, 'times new roman', serif; font-size: 60px; color: #fff; text-shadow: -1px 1px 2px rgba(0, 0, 0, 1); font-style: italic; text-align: center; -moz-border-radius-topleft: 70%;-webkit-border-top-left-radius: 70%; border-top-left-radius: 70%;-moz-border-radius-bottomright: 70%;-webkit-border-bottom-right-radius: 70%;border-bottom-right-radius: 70%;">HEADERTITLE</div> <!-----END HEADER---->

color change:

#0BA5D9

instructions:

1. Copy code from the text box above.
2. Edit the following:
   • HEADERTITLE
   • JOURNALNAME
   • IMGURL (image must be 100x100 or icon-sized)
   • CHARACTERNAME
   • CANON
   • GAMENAME with either the game you play on, an open post link, or whatever else you'd like here.
3. Make sure you check the box that says Disable Auto-Formatting located below the subject line and above the content box for your entry itself.
4. You can add as many characters and headers to this without messing up the code, however if a characters name or the games they're in take up more than one line, you may need to change the font size for the name or wrap a font or span tag around the games to lower the font so that it's one line.
   • UPDATED NOTE: However, if you add more than one header, you're going to need to close the td and tr tags (by adding <*/td><*/tr>) after the last character div in the first header and start new <*tr valign="top"> <*td> tags for the new headers.
5. If you prefer to have three across rather than four across, change the width of the class="header" div and the table to 680px from the 900px that's already there.
6. Please do not remove credit.
7. As always, if you have questions, drop a line in the comments and I'll get back to you to help as soon as I can to troubleshoot with you.
8. Enjoy!

Comments

[kittened]

hey, I was wondering why the background doesn't show up blue here?

[mistojen]

Your journal's layout settings are overriding it. If you want to have the proper padding and color on that header, to override, it looks like changing the attributes to the following will do it (it's going to be too wide for 4 across on your journal, by the way, so you'll want to follow step 5 to keep from overlapping outside the confines of the entry box.

background-color: #0BA5D9 !important;
padding: 40px 10px !important;

[kittened]

One more..... what did I do here?

[mistojen]

Followed my instructions when I forgot to add a caveat to them lol.

You have to close the table cells and rows and start a new set for the new header. I've updated the instructions to reflect this. I totally forgot that it was an issue. I've also added an extra copy and paste box with the code you'll need to stick in after your last character from the first header to make it easier.

[kittened]

ooooh okay lol! Thanks!