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

[obscurus_phantasma]

Excellent, thank you, kindly!

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