code | mike & julie

[manual]

- - - - -

SOME TITLE
link / link / link / link / linklink / link
↺YOUR CATEGORY
charactername canon ( journal )	charactername canon ( journal )	charactername canon ( journal )	charactername canon ( journal )

- - - - -

CODE FOR "MIKE"
<table style="font-family: Helvetica, Optima, Arial, sans-serif; font-size: 10pt; text-transform: uppercase;"><tr><td colspan="5" style="text-align: center; padding: 10px; font-weight: 100;"><span style="font-size: 4em; letter-spacing: 8pt;"><a name="top"></a>SOME TITLE</span></td></tr> <tr><td colspan="4" style="text-align: center; padding: 20px 0 30px 0; font-weight: 100;"><span style="letter-spacing: 1pt;"><a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a><a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a></span></td></tr> <!-- THE RED HEADER TEXT --!> <tr><td colspan="4" style="padding: 20px 0 0 0; line-height: 1.8em;"><a name="faves"></a><span style="color: #ff0000; font-size: 4em; letter-spacing: -3pt; padding: -10pt;"><a href="#top" style="text-decoration: none; color: #ff0000;">↺</a>YOUR CATEGORY</span><hr style="border: 1px solid #ff0000;" /></td></tr> <!-- WHERE YOUR CHARACTERS GO --!> <tr><td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td> <td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td> <td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td> <td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td></tr></table>


- - - - - - -




- - - - -

HEADER TITLE
link / link / link / link / link / link / link /
CHARACTERNAME JOURNAL	CHARACTERNAME JOURNAL	CHARACTERNAME JOURNAL	CHARACTERNAME JOURNAL

- - - - -

CODE FOR "JULIE"
<raw-code><table style="font-family: Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif; text-transform: uppercase;"><tr><td colspan="4" style="text-align: center; padding: 10px; font-weight: 100;"><span style="font-size: 4em; letter-spacing: 8pt;">HEADER TITLE</span></td></tr> <!-- YOUR MENU LINKS --!> <tr><td colspan="4" style="text-align: center; padding: 20px 0 30px 0; font-weight: 100;"><span style="letter-spacing: 1pt;"><a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a></span></td></tr> <!-- YOUR CHARACTERS COME IN AFTER THIS LINE --!> <a name="LINK"></a> <tr><td style="text-align: center; padding:10px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ff00ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;"> <div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td><td style="text-align: center; padding:10px; height: 100px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ff00ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;"> <div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td><td style="text-align: center; padding:10px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ff00ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;"> <div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td><td style="text-align: center; padding:10px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ffb2ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;"> <div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td></TR></table></raw-code>

NOTES:
— ask if something messes up etc etc
— FOR MIKE: the refresh text icon thingie automatically links to the top of the table.
— FOR JULIE: if you want to replace the color overlay thing, ctrl+f #ff00ff and replace it with the hex code of your choice.
— [a name=""] tags are for linking within the same table/document; if you want to just link out to a different page for the top menu, just replace name with href.
— if you're linking within the table, make sure your target name and target link match! don't remove the # sign if you do. just replace the word.

Comments

[isleofapples]

Using Mike on this journal, with credit. Thank you.

[bequeath]

using julie for my muselist and you are, as usual, flawless

[millennialfalcon]

Using Mike here! (with some minor edits)

these codes are beautiful!

[banah]

Will be using Mike at some point in this journal. :D Thank you.

[quixotic]

Mike is great! Using it for my journal.

[fears_the_hood]

A friend of mine is using Julie here. However, for some odd reasons the character names and the links under them aren't centering. They're off balance. I looked at the coding myself and I can't find what's wrong with it.

[manual]

hello! i found a temporary fix over here (just copy/paste and plug it in), but i'm trying to replicate the issue on my end and it's not happening for me; i'll get back to you when i figure it out!

[fears_the_hood]

Thank you! The temporary fix did the trick. So I'm not sure what in the world happened with the other one but this one is better and much appreciated.

[myks]

Hi!

I love the code, but how do you get it to look right when you want to use more than one header? I am using Mike but I can't figure it out.

Thanks.