ERIE ❚ 017 ( feat. opacity and yet another muselist )

[deloreans]

MY WHOLE BRAIN IS CRYING RIGHT NOW

NAME ♕ FANDOM

<lj-raw><div style="width: 320px"><span style="float: left"><img src="* * * INSERT ICON HERE * * *" style="border:10px solid #000000"></span><br> <div style="width: 200px; background-color: #000000; height: 14pt; text-align: center; vertical-align: middle; padding-left: 120px"><font style="font-family: verdana; font-size: 8pt; letterspacing: 0px; color: #ffffff"><b>NAME</b> ♕ <i>FANDOM</i> </font></div> <div style="text-align: right; padding-top: 5px"><img style="opacity:0.75;" src="* * * INSERT ICON HERE * * *" height="62px" width="62px"> <img style=" opacity:0.5;" src="* * * INSERT ICON HERE * * *" height="62px" width="62px"> <img style=" opacity:0.25;" src="* * * INSERT ICON HERE * * *" height="62px" width="62px"></div> </div></lj-raw>

VARIATIONS ON A THEME

NAME ♕ FANDOM

<lj-raw><div style="width: 320px"><span style="float: left"><img src="* * * INSERT ICON HERE * * *" style="border:10px solid #000000"></span><div style="text-align: right; padding-top: 10px"><img style="opacity:0.75;" src="* * * INSERT ICON HERE * * *" height="62px" width="62px"> <img style=" opacity:0.5;" src="* * * INSERT ICON HERE * * *" height="62px" width="62px"> <img style="opacity:0.25;" src="* * * INSERT ICON HERE * * *" height="62px" width="62px"></div> <div style="width: 200px; background-color: #000000; height: 14pt; text-align: center; vertical-align: middle; padding-left: 120px"><font style="font-family: verdana; font-size: 8pt; letterspacing: 0px; color: #ffffff"><b>NAME</b> ♕ <i>FANDOM</i> </font></div> </div> </lj-raw>

NAME ♕ FANDOM

username ♕ game

.

<lj-raw><div style="width: 340px"><span style="float: left"><img src="* * * INSERT ICON HERE * * *" style="border:10px solid #000000"></span><br> <div style="width: 220px; background-color: #000000; height: 14pt; text-align: center; vertical-align: middle; margin-left: 120px"><font style="font-family: verdana; font-size: 8pt; letterspacing: 0px; color: #ffffff"><b>NAME</b> ♕ <i>FANDOM</i> </font></div> <div style="width: 240px; background-color: #ababab; height: 14pt; text-align: center; vertical-align: middle; margin-left: 120px"><font style="font-family: verdana; font-size: 8pt; letterspacing: 0px; color: #ffffff"><b>username</b> ♕ <i>game</i> </font></div> <div style="text-align: left; padding-top: 5px"><span style="opacity: 0.1">.</span><img style="opacity:0.75;" src="* * * INSERT ICON HERE * * *" height="67px" width="67px"> <img style=" opacity:0.5;" src="* * * INSERT ICON HERE * * *" height="67px" width="67px"> <img style=" opacity:0.25;" src="* * * INSERT ICON HERE * * *" height="67px" width="67px"></div> </div> </lj-raw>

VARIATION COURTESY OF THE FABULOUS demimonde

NAME!!

GAME → INFO

FANDOM | CANON / ORIGINAL?

<lj-raw><div style="width: 320px"><span style="float: left"><img src="ICON GOES HERE" style="border:10px solid #000000"></span><br> <div style="width: 200px; background-color: #000000; height: 14pt; text-align: center; vertical-align: middle; padding-left: 120px"><font style="font-family: verdana; font-size: 8pt; letterspacing: 0px; color: #ffffff"><b>NAME!!</a> </font></div> <div style="width: 200px; background-color: #000000; height: 14pt; text-align: center; vertical-align: middle; padding-left: 120px"><font style="font-family: verdana; font-size: 8pt; letterspacing: 0px; color: #ffffff"><a href= "LINK">GAME</a> → <a href= "LINK">INFO</a></font></div> <div style="text-align: right; padding-top: 5px"><img style="opacity:0.75;" src="ICON GOES HERE" height="62px" width="62px"> <img style=" opacity:0.5;" src="ICON GOES HERE" height="62px" width="62px"> <img style=" opacity:0.25;" src="ICON GOES HERE" height="62px" width="62px"></div> <div style="width: 320px; background-color: #000000; height: 14pt; text-align: center; vertical-align: middle;"><font style="font-family: verdana; font-size: 8pt; letterspacing: 0px; color: #ffffff"><b>FANDOM</b> | <i>CANON / ORIGINAL?</i></font></div> </div></lj-raw>
please credit demimonde if you use this!

NOTES AND HOW TO MODIFY

••• if you want to use different icons and remove the fading effect, simply remove the part of the code that says [style="opacity:xx;"]
••• i suggest keeping all the size values the same!
••• coded on firefox and viewed on the dreamwidth site default. i thiiiink there's a vertical problem alignment when viewed on custom pages and i'm working on a fix for that.
••• HOLY FUCK it looks insane on safari idk what it looks like on chrome ok viewed on site default on safari and chrome it should be ok now
••• feel free to customize the codes for your own use!
••• if you do use/tweak the code, please also feel free to link them here / share them!

⇒ like what you see? why not subscribe and/or comment ♥
⇒ credit to either deloreans or whaleparties

Comments

[demimonde]

THIS IS SOME SWEETASS CODING RIGHT HERE TYVM

query: would it be possible (could i even figure out how to do this myself probably, if you did not mind) to add a second line of centered text below NAME & FANDOM? i include game & an info link for mine, but i really want to use this format o_o

[demimonde]

i had some help, figured out how to modify it the way i wanted, all credited and etc :3 ty!

[deloreans]

aha i'm sorry it took me so long to respond i was working on a tweak for what you requested but i see it won't be necessary. i'm totally fine with people customizing the codes for their own use and yours looks so gorgeous and way cleaner than what i was able to cobble together ehehe. thank you so much for commenting! ♥

[demimonde]

i'm slowly trying to learn how to do these things myself so the long pause actually was good for me! ...even tho i ended up making sad eyes at glazedmacguffin until she fixed the bottom bar for me, ha ha

♥ no problem

[demimonde]

oh if you wanted, the alteration:

<lj-raw><div style="width: 320px"><span style="float: left"><img src="ICON GOES HERE" style="border:10px solid #000000"></span><br> <div style="width: 200px; background-color: #000000; height: 14pt; text-align: center; vertical-align: middle; padding-left: 120px"><font style="font-family: verdana; font-size: 8pt; letterspacing: 0px; color: #ffffff"><b>NAME!!</a> </font></div> <div style="width: 200px; background-color: #000000; height: 14pt; text-align: center; vertical-align: middle; padding-left: 120px"><font style="font-family: verdana; font-size: 8pt; letterspacing: 0px; color: #ffffff"><a href= "LINK">GAME</a> → <a href= "LINK">INFO</a></font></div> <div style="text-align: right; padding-top: 5px"><img style="opacity:0.75;" src="ICON GOES HERE" height="62px" width="62px"> <img style=" opacity:0.5;" src="ICON GOES HERE" height="62px" width="62px"> <img style=" opacity:0.25;" src="ICON GOES HERE" height="62px" width="62px"></div> <div style="width: 320px; background-color: #000000; height: 14pt; text-align: center; vertical-align: middle;"><font style="font-family: verdana; font-size: 8pt; letterspacing: 0px; color: #ffffff"><b>FANDOM</b> | <i>CANON / ORIGINAL?</i></font></div> </div></lj-raw>

[deloreans]

aha yeah i'm trying to cram as much css as my brain can take too! it's definitely (an incredible) trial and (an insane amount of) error for me. i've updated the post with your altered code with proper credit ♥ thank you so much for sharing your coding! hearts in my eyes right now ok

[demimonde]

JUST WHEN I THOUGHT I'D MASTERED TABLES, THE GREAT LEAP OVER my face

♥_♥ any time!