mistojen | navigation page: greenleaf

character name

'greenleaf' design by mistojen

instructions:

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.
SQUAREIMG image should be at least 200x200 and square, obviously.
IMGURL image needs to be at least 250px wide, but the image will resize itself to fit if the original is bigger than that.
Please do not remove credit.
If you have any questions or run into problems, don't be shy!
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>

<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></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

'greenleaf' design by mistojen

instructions:

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.
SQUAREIMG image should be at least 200x200 and square, obviously.
IMGURL image needs to be at least 250px wide, but the image will resize itself to fit if the original is bigger than that.
Please do not remove credit.
If you have any questions or run into problems, don't be shy!
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>

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

</td></tr></table></center></lj-raw>

Flat | Top-Level Comments Only

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.

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

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

No worries! All a part of the troubleshooting process.

navigation page: greenleaf

no subject

no subject

no subject