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

[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: