21st: ackerman

[yanyan]

For muselist/navigation posts. Ideal image size is 240px x 480px. While you do have to replace HEXCODE with the hexcode of your choice, this code also uses rgba. It uses four number values; the fourth is the opacity of the color, which is measured from 0 to 1. Convert your hex codes to rgb codes here. You can change the position of the transparent text by changing the value of top: -280px; and text-align: center;

Levi | Attack on Titan levi

Mikasa Ackerman | Attack on Titan mikasa

Armin Arlert | Attack on Titan Armin

CODE
<raw-code> <center> <table> <tr> <td> <div style="width: 240px; height: 480px; border: 1px solid HEXCODE; border-radius: 8px; overflow: hidden;"> <a href="LINK HERE"><img src="240px x 480px IMAGE HERE" style="width: 240px; height: 480px;"></a> <div style="position: relative; top: -64px; height: 20px; width: 100%; padding: 4px; background: rgba(215,195,162,0.8);"> <span style="font: small-caps 14px tahoma, sans-serif; color: #000;">TEXT HERE</span> </div> <div style="position: relative; top: -280px; text-align: center;"> <span style="font: 60px futura, 'century gothic', sans-serif; text-transform: uppercase; color: rgba(215,195,162,0.5);">TRANSPARENT TEXT HERE</span> </div> </div> </td> <td> <div style="width: 240px; height: 480px; border: 1px solid #d7c3a2; border-radius: 8px; overflow: hidden;"> <a href="LINK HERE"><img src="240px x 480px IMAGE HERE" style="width: 240px; height: 480px;"></a> <div style="position: relative; top: -64px; height: 20px; width: 100%; padding: 4px; background: rgba(215,195,162,0.8);"> <span style="font: small-caps 14px tahoma, sans-serif; color: #000;">TEXT HERE</span> </div> <div style="position: relative; top: -280px; text-align: center;"> <span style="font: 60px futura, 'century gothic', sans-serif; text-transform: uppercase; color: rgba(215,195,162,0.5);">TRANSPARENT TEXT HERE</span> </div> </div> </td> <td> <div style="width: 240px; height: 480px; border: 1px solid HEXCODE; border-radius: 8px; overflow: hidden;"> <a href="LINK HERE"><img src="240px x 480px IMAGE HERE" style="width: 240px; height: 480px;"></a> <div style="position: relative; top: -64px; height: 20px; width: 100%; padding: 4px; background: rgba(215,195,162,0.8);"> <span style="font: small-caps 14px tahoma, sans-serif; color: #000;">TEXT HERE</span> </div> <div style="position: relative; top: -280px; text-align: center;"> <span style="font: 60px futura, 'century gothic', sans-serif; text-transform: uppercase; color: rgba(215,195,162,0.5);">TRANSPARENT TEXT HERE</span> </div> </div> </td> </tr> </table> <small>code by <user name=cawaii></small> </raw-code>

Character Information Permissions Character Relationships Application Contact/Concrit

Armin Arlert | Attack on Titan Armin

CODE
<table> <tr> <td style="width: 180px; vertical-align: bottom; padding: 4px;"> <div style="height: 20px; width: 176px; padding: 4px; margin-bottom: 1px; border-left: 4px solid black; background: HEXCODE;"> <a href="LINK" style="text-decoration: none;"><span style="font: small-caps 14px tahoma, sans-serif; color: #000;">Character Information</span></a> </div> <div style="height: 20px; width: 176px; padding: 4px; margin-bottom: 1px; border-left: 4px solid black; background: HEXCODE;"> <a href="LINK" style="text-decoration: none;"><span style="font: small-caps 14px tahoma, sans-serif; color: #000;">Permissions</span></a> </div> <div style="height: 20px; width: 176px; padding: 4px; margin-bottom: 1px; border-left: 4px solid black; background: HEXCODE;"> <a href="LINK" style="text-decoration: none;"><span style="font: small-caps 14px tahoma, sans-serif; color: #000;">Character Relationships</span></a> </div> <div style="height: 20px; width: 176px; padding: 4px; margin-bottom: 1px; border-left: 4px solid black; background: HEXCODE;"> <a href="LINK" style="text-decoration: none;"><span style="font: small-caps 14px tahoma, sans-serif; color: #000;">Application</span></a> </div> <div style="height: 20px; width: 176px; padding: 4px; margin-bottom: 1px; border-left: 4px solid black; background: HEXCODE;"> <a href="LINK" style="text-decoration: none;"><span style="font: small-caps 14px tahoma, sans-serif; color: #000;">Contact/Concrit</span></a> </div> </td> <td> <div style="width: 240px; height: 480px; border: 1px solid HEXCODE; border-radius: 8px; overflow: hidden;"> <a href="LINK HERE"><img src="240px x 480px IMAGE HERE" style="width: 240px; height: 480px;"></a> <div style="position: relative; top: -64px; height: 20px; width: 100%; padding: 4px; background: rgba(215,195,162,0.8);"> <span style="font: small-caps 14px tahoma, sans-serif; color: #000;">TEXT HERE</span> </div> <div style="position: relative; top: -280px; text-align: center;"> <span style="font: 60px futura, 'century gothic', sans-serif; text-transform: uppercase; color: rgba(215,195,162,0.5);">TRANSPARENT TEXT HERE</span> </div> </div> </td> </tr> </table>

Comments

[ditz]

HI THIS IS AUSTE ANYWAY I REALLY LOVE THIS CODE CAN'T YOU TELL

But when I try to post the navigation to my journal, the text gets all off-center, orz. I've already changed the hex codes around and stuff too.

[yanyan]

Thank you!

To the first <td style="width: 180px; vertical-align: bottom; padding: 4px;">, add text-align: left;

That should fix the problem for the navigation links! Do the same thing to the second cell if the same happens to the box on the right.

[ditz]

It doesn't work for me, I'm almost convinced I'm doing it wrong, orz.

[pocketprince]

Try adding <raw-code> to the beginning of the entry. I had a similar problem until I did that.

[ditz]

/late because school and other things

Oh, thank you very much!

[pocketprince]

Adore this code. I had some much smaller images done for a muselist style I ended up not using, so I edited this code a bit to fit my muselist needs and I am so happy with it.

The smaller images meant I had to move stuff around and omit the transparent text, but I still like it.

[yanyan]

wow I'm late but... oh my gosh, that's so cute. Thanks for showing this to me; I like seeing what other people can come up with using the code!

[sponsorigami]

Thank you for this code! I used it here with some adjustments. Since you said you liked seeing what people did with it, I thought I'd drop a link.

[some_kinda_hero]

This.is.AWESOME. Using, will credit; ta!

Duh, forgot link : TA DA!

[strifed]

I love this!

Using and have you credited! Keep up the good work. :) I'm loving all of your codes!

I'll also be using the navigation ones for the actual character journals themselves. I'll be back with links :)