code: muselist

[efficio]

ACTIVE SEMI-ACTIVE INACTIVE VOICETESTING

ACTIVE

	NAME	CANON	journal
	NAME	CANON	journal
	NAME	CANON	journal
	NAME	CANON	journal

SEMI-ACTIVE

	NAME	CANON	journal
	NAME	CANON	journal
	NAME	CANON	journal
	NAME	CANON	journal
	NAME	CANON	journal
	NAME	CANON	journal

INACTIVE

	NAME	CANON	journal
	NAME	CANON	journal
	NAME	CANON	journal

VOICETESTING

NAME

CANON

journal

muselist: floral I've been trying to come up with a nice muselist you can flip through for a while; hopefully this one works! This one is heavily based on a code I'm particularly fond of, Papilio by tessisamess. It's pretty straightforward. <!-- START --> marks the beginning of a character row and <!-- END --> marks the end of one. Just copy and paste all the way from before <!-- START --> to right after <!-- END --> to make a new row. Replace NAME with your character's name, CANON with whatever book/TV show/movie/video game/etc. your character is from, and JOURNAL with their journal name! Replace USERPIC with a link to the icon you want showing up on the side. As far as customization goes, if you want to change any of the sections/titles on the sidebar, just do a find and replace for the word! To change the background image for the sidebar, just replace BACKGROUNDIMG; I used this floral pattern. There isn't much color, but if you want to change it, the background color is #fafafa and the border is #ccc. CODE: <center><raw-code><div style="margin:0 auto;width:819px;font-family:helvetica;font-size:12px;"> <div style="width:200px;text-align:center;border:1px solid #ccc;display:inline-block;overflow:hidden;margin-right:10px;border-radius: 15px;"><div style="background:url( BACKGROUNDIMG )center no-repeat;background-size:cover;height:300px;color:#fafafa;border:10px solid #fafafa;border-radius: 20px;"> <div style="font-size:12px;text-transform:uppercase;margin-top: 85px;text-shadow: 1px 1px 1px rgba(0,0,0,0.2);" align="center"> <a href="#ACTIVE" style="display:block;width: 150px;background:rgba(250,250,250,0.9);color:#000;padding:5px;margin:5px 0px;text-decoration:none;border-radius: 25px;">ACTIVE</a> <a href="#SEMI-ACTIVE" style="display:block;width: 150px;background:rgba(250,250,250,0.9);color:#000;padding:5px;margin:5px 0px;text-decoration:none;border-radius: 25px;">SEMI-ACTIVE</a> <a href="#INACTIVE" style="display:block;width: 150px;background:rgba(250,250,250,0.9);color:#000;padding:5px;margin:5px 0px;text-decoration:none;border-radius: 25px;">INACTIVE</a> <a href="#VOICETESTING" style="display:block;width: 150px;background:rgba(250,250,250,0.9);color:#000;padding:5px;margin:5px 0px;text-decoration:none;border-radius: 25px;">VOICETESTING</a> </div> </div></div> <div style="width:400px;height:320px;text-align:center;background:#fafafa;border:1px solid #ccc;display:inline-block;overflow:hidden;text-align:justify;line-height:155%;border-radius: 15px;"> <a name="ACTIVE"></a><div style="height:300px;overflow:auto;border:10px solid #fafafa;line-height: 50px;"> <div style="font-size: 25px;font-weight: bold;text-align: center;padding:10px;">ACTIVE</div> <table width="380" style="text-transform: uppercase;font-size: 12px;"><tbody> <!-- START --> <tr><td style="vertical-align: middle;"><img src="USERPIC" width="50" style="border-radius: 15px;"></td> <td><b>NAME</b></td> <td><i>CANON</i></td> <td><user name=JOURNAL></td></tr> <!-- END --> </tbody></table> </div> <a name="SEMI-ACTIVE"></a><div style="height:300px;overflow:auto;border:10px solid #fafafa;line-height: 50px;"> <div style="font-size: 25px;font-weight: bold;text-align: center;padding:10px;">SEMI-ACTIVE</div> <table width="380" style="text-transform: uppercase;font-size: 12px;"><tbody> <!-- START --> <tr><td style="vertical-align: middle;"><img src="USERPIC" width="50" style="border-radius: 15px;"></td> <td><b>NAME</b></td> <td><i>CANON</i></td> <td><user name=JOURNAL></td></tr> <!-- END --> </tbody></table> </div> <a name="INACTIVE"></a><div style="height:300px;overflow:auto;border:10px solid #fafafa;line-height: 50px;"> <div style="font-size: 25px;font-weight: bold;text-align: center;padding:10px;">INACTIVE</div> <table width="380" style="text-transform: uppercase;font-size: 12px;"><tbody> <!-- START --> <tr><td style="vertical-align: middle;"><img src="USERPIC" width="50" style="border-radius: 15px;"></td> <td><b>NAME</b></td> <td><i>CANON</i></td> <td><user name=JOURNAL></td></tr> <!-- END --> </tbody></table> </div> <a name="VOICETESTING"></a><div style="height:300px;overflow:auto;border:10px solid #fafafa;line-height: 50px;"> <div style="font-size: 25px;font-weight: bold;text-align: center;padding:10px;">VOICETESTING</div> <table width="380" style="text-transform: uppercase;font-size: 12px;"><tbody> <!-- START --> <tr><td style="vertical-align: middle;"><img src="USERPIC" width="50" style="border-radius: 15px;"></td> <td><b>NAME</b></td> <td><i>CANON</i></td> <td><user name=JOURNAL></td></tr> <!-- END --> </tbody></table> </div> </div></raw-code>

Comments

[dancingmd]

Snagged this for a CR chart, it was exactly what I was looking for, thank you!

[riotact]

snagged this for a muse list! nice and easy code, but still pretty. thanks! :]

[plentyofwords]

Hi!

Is there a way to add 4 more tabs on the side? Thank you!

[efficio]

You should be able to do that by copy and pasting four more sections and changing the "a name"s to whatever you want them to be, then C&Ping the tab HTML four times; you might need to adjust the spacing a bit. Each tab links to an "anchor", which is the "a name" for each section/div, so you'll need to make sure the tab links match up with whatever anchor name you gave the new sections you made.

[fastesthackeralive]

Still me just a different journal but how do I adjust the spacing?

[efficio]

Sorry for the belated response! You can do that by adjusting the margins.

[chambery]

I love this code so much I'm using it - but I have a question! What would you suggest to help make it neater for names/titles that take more than one line? I have a lot of those.

[efficio]

Try this code! Does that look neater?

[chambery]

It looks excellent, thank you so much! Though now I realize I can't read the text well because I use the Gradation site skin on a different machine (it's grey on white, ouch). What can I add to make the list contents stay black regardless?

[efficio]

You should be able to accomplish this by making sure the font color is set to 'black' or '#000' for all the text you want to be black.

[chambery]

got it, thank you so much (again!)

[efficio]

You're welcome! c:

[avismalus]

hi! i really love how this looks, and i want to use it, but one of my character's journal name is long and ends up pushing the text onto 2 lines and makes it look weird. i think this is a similar issue to what chambery had, but is there a way to fix this without completely changing the look into a vertical one? i really like how it looks in this format, is there a way to make less space between the "name" "canon" "journal" categories? thank you! also sorry for my ignorance lol, i know very little about coding and couldn't figure it out myself though i did try!

[efficio]

Hi! You should be able to fix that by editing the line-height property. You can put that in the overall table or just in the individual row. It would look something like <tr style="line-height:100%;"> if you chose to do it in the row.

[narwhaling]

This is so gorgeous, thank you for sharing!

[nicholajsmuses]

Thank you for sharing this lovely code! It's nice and very easy to use.