muselist: bloop (FIXED)

[transilience]

Active

PENELOPE
USERNAME

here is some text

Adam
username

some more flavor text underneath this one for you, best regards

María Cristina
username

here is some more text

Archibald
username

here is some more text in the text box underneath

Inactive

Hepzibah
username
tagline text

Mandy
username
fandom

Jean-Philippe
username
P. B. Name

Tom
username
The Arithmancer

McKinley
username
gamename

P. J.
username
other brief text

find/replace: headings, box text 252A51 • headings text, boxes F7F5E5 • boxes edge 89ADAC • icon borders 5D7481 • link/accent 961001

misc. notes: really super long character names without spaces are contraindicated. if you need longer flavor text for your actives you can remove "height: 250px;" and it should still work, just not as neatly.

<div style="width: 700px; margin: auto;"> <div style="width: 690px; padding: 10px; background-color: #252A51; color: #F7F5E5; border-radius: 7px; font-family: Candara, Verdana, sans-serif; font-size: 16pt; letter-spacing: 0.2em; text-align: left; text-transform: uppercase;"> Active </div> <div style="width: 680px; margin: 0px 0px 30px 50px; font-family: Candara, Verdana, sans-serif; font-size: 10pt;"> <!-- UNIT BEGIN --> <div style="display: inline-block; vertical-align: top; width: 110px; height: 250px; margin: 20px; padding: 5px; border: 1px solid #89ADAC; border-radius: 5px; background-color: #F7F5E5; color: #252A51; text-align: center; line-height: 12pt;"> <img src="ICONURL" style="display: block; margin: 5px auto 30px; height: 100px; width: 100px; border-radius: 8px; box-shadow: 0px 0px 0px 20px #5D7481;"> <span style="color: #961001; text-transform: uppercase; font-weight: bold; font-size: 125%; letter-spacing: 2px; padding-left: 2px;">CHARACTER</span> <br><a href="LINKURL" style="color: #961001; text-decoration: none;">USERNAME</a> <p>FLAVORTEXT </div> <!-- UNIT END --> </div> <div style="width: 690px; padding: 10px; background-color: #252A51; color: #F7F5E5; border-radius: 7px; font-family: Candara, Verdana, sans-serif; font-size: 16pt; letter-spacing: 0.2em; text-align: left; text-transform: uppercase;">Inactive</div> <div style="width: 680px; margin: 0px 0px 30px 50px; font-family: Candara, Verdana, sans-serif; font-size: 10pt;"> <!-- UNIT BEGIN --> <div style="display: inline-block; vertical-align: top; width: 180px; height: 50px; margin: 15px; padding: 5px; border: 1px solid #89ADAC; border-radius: 5px; background-color: #F7F5E5; color: #252A51; text-align: center; line-height: 12pt;"> <img src="ICONURL" style="height: 50px; width: 50px; border-radius: 5px; float: left; margin-right: 15px; box-shadow: 0px 0px 0px 12px #5D7481;"> <span style="color: #961001; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; padding-left: 2px;">CHARACTER</span> <br><a href="LINKURL" style="color: #961001; text-decoration: none;">USERNAME</a> <br>TAGLINE </div> <!-- UNIT END --> </div> </div>

Comments

[plentyofwords]

Hi!

Love the code, but how do you get more than one block in a row?

[transilience]

Sorry, I don't quite understand.

[plentyofwords]

when I copy the blocks, they line up vertically instead of all in one row like the example above.

[transilience]

...ooooooh okay I see what I did there, whoops. Try it now?

[plentyofwords]

Perfect! Thank you!

[transilience]

No problem! Sorry I borked it the first time.