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]

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