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

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