CODE | sempiternal

[manual]

- - -

LIVE PREVIEW

THERE WILL BE NO PEACEFUL REVOLUTION.

CHARACTER NAME canon « journal «	CHARACTER NAME canon « journal «
CHARACTER NAME canon « journal «	CHARACTER NAME canon « journal «

ICON ON RIGHT

CHARACTER NAME » CANON » JOURNAL

CHARACTER NAME » CANON » JOURNAL

COLOR VARIANT

NAME CANON « JOURNAL «

NAME CANON « JOURNAL «

NAME CANON « JOURNAL «

#7f82b7 | #0b5a5a | #ff208c

- - -
ps: best viewed in ff/chrome, 1074x768 res and higher
pps: if any of the text linebreaks - like if the name or canon takes up two lines instead of one - ctrl+f top: 15px; and change 15 to 5.

with header text: <span style="font-size: 16pt; font-family: 'ms gothic', courier, sans-serif; color: #000; letter-spacing: 1pt; text-transform: uppercase;">THERE WILL BE NO PEACEFUL REVOLUTION.</span><br /><br /><table style="font-size: 10pt; font-family: 'ms gothic', courier, sans-serif; color: #000; letter-spacing: 1pt; text-transform: uppercase;"><tr><td width="250px"><div style="width: 100px; height: 100px; align: float; background: url(IMGURL); background-position: center; background-repeat: no-repeat;"><div style="width: 150px; background: #ebebeb; position: relative; top: 15px; left: 90px; padding: 5px; text-align: right; opacity: 0.8;">NAME<br /><small>CANON «<br /><a href="http://USERNAME.dreamwidth.org/" style="color: crimson; text-decoration: none;">JOURNAL</a> «</small></div></div></td></tr></table>

icon on left: <table style="font-size: 10pt; font-family: 'ms gothic', courier, sans-serif; color: #000; letter-spacing: 1pt; text-transform: uppercase;"><tr><td width="250px"><div style="width: 100px; height: 100px; align: float; background: url(IMGURL); background-position: center; background-repeat: no-repeat;"><div style="width: 150px; background: #ebebeb; position: relative; top: 15px; left: 90px; padding: 5px; text-align: right; opacity: 0.8;">NAME<br /><small>CANON «<br /><a href="http://USERNAME.dreamwidth.org/" style="color: crimson; text-decoration: none;">JOURNAL</a> «</small></div></div></td></tr></table>

icon on right: <table style="font-size: 10pt; font-family: 'ms gothic', courier, sans-serif; color: #000; letter-spacing: 1pt; text-transform: uppercase;"><tr><td width="250px"><div style="width: 100px; height: 100px; align: right; background: url(IMGURL); position: relative; left: 150px; background-repeat: no-repeat;"><div style="width: 150px; background: #ebebeb; position: relative; top: 15px; right: 150px; padding: 5px; text-align: left; opacity: 0.8;">NAME<br /><small>» CANON<br /> » <a href="http://USERNAME.dreamwidth.org/" style="color: crimson; text-decoration: none;">JOURNAL</a></small></div></div></td></tr></table>

color variant: <table style="font-size: 10pt; font-family: 'ms gothic', courier, sans-serif; color: #000; letter-spacing: 1pt; text-transform: uppercase;"><tr><td width="255px"><div style="width: 100px; height: 100px; align: float; background: url(http://www.dreamwidth.org/userpic/6400789/1579154); background-position: center; background-repeat: no-repeat;"><div style="width: 150px; background: #ebebeb; position: relative; top: 15px; left: 90px; border-left: 10px solid #BORDERCOLOR; padding: 5px; text-align: right; opacity: 0.8;">NAME<br /><small>CANON «<br /><a href="http://USERNAME.dreamwidth.org/" style="color: crimson; text-decoration: none;">JOURNAL</a> «</small></div></div></td></tr></table>

Comments

[wehappyfew]

Why must you make such pretty things? B(

[manual]

Because I like pretty things :c!!! And tables are fun, man.

[adeolucror]

...Just when I got my muselist coded this happens...

This is beautiful, by the way.

[manual]

Yo thanks, I'm glad you liked it c:!

[sodapops]

u lil talented nugget

now i want to change my muselist again

because of you

and your pretty pretty things ;u;

[manual]

i like being the cause of visual distress given the chance, what can i say? B)!!!

[yanyan]

I love this! Definitely using.

[satirize]

nooo. now i have to change my muselist. THIS IS GORGEOUS DANZZZ.

[telltale_commas]

This is lovely and I'd love to try it out, but I can't seem to get the tables to go next to each other like you have here, they just stack vertically. :< Any tips?

[manual]

Hi! Which version are you using, and can I see the code you ended up with? Let's see what we can do.

[telltale_commas]

Actually I tried another one from you just to see how it looked, and liked it better with my layout, haha. Thanks for the offer to help, but I'll use Crowning Glory instead. :)

[amusements]

I needed to update my muselist. This gave me the incentive to do it. I love the look of it.

[ditz]

Ooh, these are great! I snagged 'em for a muselist revamp. Thanks!

But I also can't seem to have more than one in a row; they automatically become vertical unlike with the preview. I even tried non-breaking spaces.

Here's where I put mine, for reference.

[manual]

Hmm, try this one:

<table style="font-size: 10pt; font-family: 'ms gothic', courier, sans-serif; color: #000; letter-spacing: 1pt; text-transform: uppercase;"><tr><td width="250px"><div style="width: 100px; height: 100px; align: float; background: url(IMGURL1); background-position: center; background-repeat: no-repeat;"><div style="width: 150px; background: #ebebeb; position: relative; top: 15px; left: 90px; padding: 5px; text-align: right; opacity: 0.8;">NAME1<br /><small>CANON1 «<br /><a href="http://USERNAME1.dreamwidth.org/" style="color: crimson; text-decoration: none;">JOURNAL1</a> «</small></div></div></td><td width="250px"><div style="width: 100px; height: 100px; align: float; background: url(IMGURL2); background-position: center; background-repeat: no-repeat;"><div style="width: 150px; background: #ebebeb; position: relative; top: 15px; left: 90px; padding: 5px; text-align: right; opacity: 0.8;">NAME2<br /><small>CANON2 «<br /><a href="http://USERNAME2.dreamwidth.org/" style="color: crimson; text-decoration: none;">JOURNAL2</a> «</small></div></div></td><td width="250px"><div style="width: 100px; height: 100px; align: float; background: url(IMGURL3); background-position: center; background-repeat: no-repeat;"><div style="width: 150px; background: #ebebeb; position: relative; top: 15px; left: 90px; padding: 5px; text-align: right; opacity: 0.8;">NAME3<br /><small>CANON3 «<br /><a href="http://USERNAME3.dreamwidth.org/" style="color: crimson; text-decoration: none;">JOURNAL3</a> «</small></div></div></td></tr></table>

Copy/paste the [tr]...[/tr] tags for a new row, and just from [td]...[/td] for a new column. Make sure you paste directly after the [/td] tag of the column you want the new one to show up on. Let me know if this works out?

also A+ comm name

[ditz]

I had school and RP to eat me up so I only updated my muselist now BUT THANK YOU SO MUCH IT WORKS YAY

LOL THANKS I WAS SURPRISED NO ONE SNATCHED IT UP

[twistingkage]

I used this to revamp my muse list! It looks really great, thank you so much!

[teenyoda]

This is really nice and I've used it to redo my own muselist, with a little bit of tweaking on the size and the font. Thanks.

[reymonkey]

No matter what I do or how diligently I copy and paste the coding exactly, The text above the table (ie. 'THERE WILL BE NO PEACEFUL REVOLUTION.') appears with a huge space between it and the table itself. even plain old text put before the table ends up with a giant space you have to scroll down before you see the table. Can anyone tell me what I'm doing wrong?

[manual]

Hello! Could you link me to it?

[reymonkey]

Here you go. The text above the tables is a little funky because I was trying different things.

[manual]

Try removing the [br/] tags for the span text. I'm still doublechecking the source code to see why there's a giant space, but removing those tags should shorten the space at least.

[reymonkey]

Done, still a giant space. The text over the second table, in fact, has no formatting whatsoever and is immediately before the [table] tag without so much as an actual space in the sense of hitting the spacebar, and there's still a giant page-scrolling gap between it and the table. Is it my whole journal format or something?

[reymonkey]

A friend made it work by taking out all the [br] and I don't understand why that seems to work, but it did... Moved it to my main contact post where it belongs here.