navigation page: greenleaf

[mistojen]

character name link one link two link three link four

'greenleaf' design by mistojen

instructions:

1. Replace the following:
   • CHARACTERNAME (if the name is too long, you can change the "font-size: 45px" in this div to something smaller until the name fits. Alternately, you can pop a <*br> [remove the asterisk] in between the character's first name and their last name and add "line-height:1em;" into that div.)
   • SQUAREIMG
   • IMGURL
   • And for each link box URLGOESHERE and LINKTEXT.
2. SQUAREIMG image should be at least 200x200 and square, obviously.
3. IMGURL image needs to be at least 250px wide, but the image will resize itself to fit if the original is bigger than that.
4. Please do not remove credit.
5. If you have any questions or run into problems, don't be shy!
6. Enjoy!

to change the colors:

rgb(36,107,53) rgba(36,107,53,.5) #fff

the code:
<lj-raw><center><table><tr><td> <div style="width: 600px;"> <div style="display: inline-block; float: left; width: 340px; margin-right: 10px;"> <div style="font-family: 'Calisto MT','Bookman Old Style',Bookman,'Goudy Old Style',Garamond,'Hoefler Text','Bitstream Charter',Georgia,serif; font-size: 45px; font-weight: bold; font-style: italic; color: rgb(36,107,53); text-align: center;text-shadow: -2px 2px 2px rgba(150, 150, 150, 1); text-transform: lowercase;">CHARACTERNAME</div> <div style="margin-left: 25px; margin-top: 30px;"><img style="padding: 5px; -moz-border-radius-topright: 90px; -webkit-border-top-right-radius: 90px; border-top-right-radius: 90px; -moz-border-radius-bottomleft: 90px; -webkit-border-bottom-left-radius: 90px; border-bottom-left-radius: 90px; width: 200px; border: 3px solid rgba(36,107,53,.5);" src="SQUAREIMG"></div> </div> <div style="display: inline-block; float: left; width: 250px;margin-top: 25px;"> <img src="IMGURL" style="opacity: 0.75; width: 250px; height: auto;"> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 10px 0; background-color: rgba(36,107,53,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 10px 0; background-color: rgba(36,107,53,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 10px 0; background-color: rgba(36,107,53,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 10px 0; background-color: rgba(36,107,53,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> </div> </div></td></tr> <tr><td> <div style="display: block;width: 600px;text-align: center; font-family: 'century gothic'; font-size: 11px;">'greenleaf' design by <a style="color: #000; text-decoration: none;" href="http://mistojen.dreamwidth.org/">mistojen</a></div> </td></tr></table></center></lj-raw>

character name link one link two link three link four link five link six link seven link eight link nine

'greenleaf' design by mistojen

instructions:

1. Replace the following:
   • CHARACTERNAME (if the name is too long, you can change the "font-size: 45px" in this div to something smaller until the name fits. Alternately, you can pop a <*br> [remove the asterisk] in between the character's first name and their last name and add "line-height:1em;" into that div.)
   • SQUAREIMG
   • SQUAREIMG2
   • IMGURL
   • And for each link box URLGOESHERE and LINKTEXT.
2. SQUAREIMG image should be at least 200x200 and square, obviously.
3. IMGURL image needs to be at least 250px wide, but the image will resize itself to fit if the original is bigger than that.
4. Please do not remove credit.
5. If you have any questions or run into problems, don't be shy!
6. Enjoy!

to change the colors:

rgb(36,107,53) rgba(36,107,53,.5) #fff

the code:
<lj-raw><center><table><tr><td> <div style="width: 600px;"> <div style="display: inline-block; float: left; width: 340px; margin-right: 10px;"> <div style="font-family: 'Calisto MT','Bookman Old Style',Bookman,'Goudy Old Style',Garamond,'Hoefler Text','Bitstream Charter',Georgia,serif; font-size: 45px; font-weight: bold; font-style: italic; color: rgb(36,107,53); text-align: center;text-shadow: -2px 2px 2px rgba(150, 150, 150, 1); text-transform: lowercase;">CHARACTERNAME</div> <div style="margin-top: 60px;"><img style="margin-left: 35px;padding: 5px; -moz-border-radius-topright: 90px; -webkit-border-top-right-radius: 90px; border-top-right-radius: 90px; -moz-border-radius-bottomleft: 90px; -webkit-border-bottom-left-radius: 90px; border-bottom-left-radius: 90px; width: 200px; border: 3px solid rgba(36,107,53,.5);" src="SQUAREIMG"></div> <img style="margin-left: 35px;padding: 5px; -moz-border-radius-topleft: 90px;-webkit-border-top-left-radius: 90px; border-top-left-radius: 90px;-moz-border-radius-bottomright: 90px;-webkit-border-bottom-right-radius: 90px;border-bottom-right-radius: 90px; width: 200px; border: 3px solid rgba(36,107,53,.5);" src="SQUAREIMG2"></div> </div> <div style="display: inline-block; float: left; width: 250px;margin-top: 25px;"> <img src="IMGURL" style="opacity: 0.75; width: 250px; height: auto;"> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 5px 0; background-color: rgba(36,107,53,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 5px 0; background-color: rgba(36,107,53,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 5px 0; background-color: rgba(36,107,53,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 5px 0; background-color: rgba(36,107,53,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 5px 0; background-color: rgba(36,107,53,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 5px 0; background-color: rgba(36,107,53,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 5px 0; background-color: rgba(36,107,53,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 5px 0; background-color: rgba(36,107,53,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 5px 0; background-color: rgba(36,107,53,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> </div> </div> </td></tr> <tr><td> <div style="display: block;width: 600px;text-align: center; font-family: 'century gothic'; font-size: 11px;">'greenleaf' design by <a style="color: #000; text-decoration: none;" href="http://mistojen.dreamwidth.org/">mistojen</a></div> </td></tr></table></center></lj-raw>

Comments

[ifyoulovethem]

Thank you for the layout! I altered the colors and shapes a bit, to use with this account. It goes really well with the gold leaf style, :P

[mistojen]

That looks great, thanks for sharing it! And you're very welcome, I'm glad you like it :)

[obscurus_phantasma]

Excellent, thank you, kindly!

[mistojen]

You're so welcome, glad you like it!

[obscurus_phantasma]

Just in case you wanted to see what I did with your awesomeness - Class schedule for character.

[mistojen]

Oh that looks really cool! What a neat way to utilize it, I love that! Thanks for sharing it ♥

[obscurus_phantasma]

Most welcome. ^^

[ichoosefight]

Hey! Just popping in to tell you it looks like this code broke somehow. the two cells aren't overlapped anymore, or even side-by-side. I'm working on fixing it for the page I've used it on but I figured you might have an easier time coming up with solutions, if you're so inclined.

[mistojen]

I've just tried copying and pasting the main code and redoing it with the images you have on your journal, and it turned out fine? https://mistojen2.dreamwidth.org/42381.html

I'm not sure how yours got muddled up, but I've fixed it, you'll just have to go back in and do your URLs and link text.

I hope that helps!

ETA: It looks like the padding is a little off on these, though, so I'll fiddle with it more tonight when I get home. Thanks for the heads up!

<lj-raw><center><table><tr><td> <div style="width: 600px;"> <div style="display: inline-block; float: left; width; 340px; margin-right: 10px;"> <div style="font-family: 'Calisto MT','Bookman Old Style',Bookman,'Goudy Old Style',Garamond,'Hoefler Text','Bitstream Charter',Georgia,serif; font-size: 45px; font-weight: bold; font-style: italic; color: rgb(107,36,107); text-align: center;text-shadow: -2px 2px 2px rgba(150, 150, 150, 1); text-transform: lowercase;">stephanie brown</div> <div style="margin-top: 60px;"><img style="margin-left: 35px;padding: 5px; -moz-border-radius-topright: 90px; -webkit-border-top-right-radius: 90px; border-top-right-radius: 90px; -moz-border-radius-bottomleft: 90px; -webkit-border-bottom-left-radius: 90px; border-bottom-left-radius: 90px; width: 200px; border: 3px solid rgba(107,36,107,.5);" src="https://i.imgur.com/WnMr41c.gif"></div> <img style="margin-left: 35px;padding: 5px; -moz-border-radius-topleft: 90px;-webkit-border-top-left-radius: 90px; border-top-left-radius: 90px;-moz-border-radius-bottomright: 90px;-webkit-border-bottom-right-radius: 90px;border-bottom-right-radius: 90px; width: 200px; border: 3px solid rgba(107,36,107,.5);" src="https://i.imgur.com/KCNKcdU.gif"></div> </div> <div style="display: inline-block; float: left; width: 250px;margin-top: 25px;"> <img src="https://i.imgur.com/lYi4Adg.jpg" style="opacity: 0.75; width: 250px; height: auto;"> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 5px 0; background-color: rgba(107,36,107,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 5px 0; background-color: rgba(107,36,107,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 5px 0; background-color: rgba(107,36,107,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 5px 0; background-color: rgba(107,36,107,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 5px 0; background-color: rgba(107,36,107,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 5px 0; background-color: rgba(107,36,107,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 5px 0; background-color: rgba(107,36,107,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 5px 0; background-color: rgba(107,36,107,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> <a href="URLGOESHERE" style="text-decoration: none;"><div style="width: 250px; padding: 5px 0; background-color: rgba(107,36,107,.5); color: #fff; text-align: center; font-family: 'arial black'; font-size: 20px;-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); margin-bottom: 8px;">LINKTEXT</div></a> </div> </div> </td></tr> <tr><td> <div style="display: block;width: 600px;text-align: center; font-family: 'century gothic'; font-size: 11px;">'greenleaf' design by <a style="color: #000; text-decoration: none;" href="http://mistojen.dreamwidth.org/">mistojen</a></div> </td></tr></table></center></lj-raw></textara>

[ichoosefight]

here's the really weird thing, it still looks broken to me in the same exact way. I guess there must just be something wrong with my browser or settings :|b Thanks for the updated code though! I've fiddled with it so much I would never have found the right padding settings again.

[mistojen]

Yeahhh that's super weird! This is what I see:



No problem, sorry it's still giving you trouble! :(

[ichoosefight]

No worries! All a part of the troubleshooting process.