[CODE] Free Dahlia de Mai Table
#1
Style 2: Graphical with Inner Transparency
Instructions:
    [*]Requires two images: outer image with the usual gradient styling, and inner image that is transparent .PNG. Can be solid .PNG to do a color overlay or a graphical .PNG as illustrated here. Solid gradient image goes on the .ddm-template class; transparent .PNG goes in the nested .inner class.[*]Can be made to top-aligned style or bottom-aligned style -- remember, if switching to top-aligned, you must also adjust .inner {margin:10px 10px 250px 10px;} (top, right, bottom, left margin).[*]Works best with very wide images -- 450 -- 500px wide.[*].inner class uses border-radius CSS3 styling.
Credit:
Dahlia image courtesy of Gerardstolk@Flickr

[html]

OOC here!


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, erat at egestas congue, leo felis ultricies sapien, quis pretium mi nibh nec erat. Nullam a venenatis risus. Vestibulum fermentum ultrices semper. “Donec pellentesque condimentum pretium.” Cras ante nulla, interdum id volutpat et, lacinia sed augue. Aenean vitae libero sed quam ultricies facilisis ac quis velit.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, erat at egestas congue, leo felis ultricies sapien, quis pretium mi nibh nec erat. Nullam a venenatis risus. Vestibulum fermentum ultrices semper. “Donec pellentesque condimentum pretium.” Cras ante nulla, interdum id volutpat et, lacinia sed augue. Aenean vitae libero sed quam ultricies facilisis ac quis velit.


Image courtesy of Gerardstolk@Flickr; table by the Mentors!

<style>
.ddm-template .ooc {font-style:italic; }
p.template-credit {text-indent:0px; text-align:center; font-size:10px; font-style:italic; width:500px; text-align:center; margin:0px auto;}
.ddm-template p {padding:2px 0px; margin:0px; text-indent:35px;}
.ddm-template b {color:#A2152C; letter-spacing:-.2px; }
.ddm-template { background-color:#EEE0E4; background-image:url(http://soulsrpg.com/images/pride/templa ... mplate.png); background-position:bottom center; background-repeat:no-repeat; border:2px solid #FFFFFF; outline:1px solid #000000; font-family: georgia, serif; font-size:12px; color:#1B2127; letter-spacing:.4px; word-spacing:.3px; line-height:16px; width:500px; text-align:left; margin:0px auto; }
.ddm-template .inner {margin:10px 10px 250px 10px; padding:10px; background-image:url(http://soulsrpg.com/images/pride/templates/ddmbg.png); background-repeat:no-repeat; background-position: top center; border:1px solid #000000; border-radius:20px;-moz-border-radius:20px; -webkit-border-radius:20px;}
</style>[/html]

Code:
[doHTML]<div class="ddm-template"><div class="inner">
<p class="ooc">OOC here!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, erat at egestas congue, leo felis ultricies sapien, quis pretium mi nibh nec erat. Nullam a venenatis risus. Vestibulum fermentum ultrices semper. <b>“Donec pellentesque condimentum pretium.”</b> Cras ante nulla, interdum id volutpat et, lacinia sed augue. Aenean vitae libero sed quam ultricies facilisis ac quis velit.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, erat at egestas congue, leo felis ultricies sapien, quis pretium mi nibh nec erat. Nullam a venenatis risus. Vestibulum fermentum ultrices semper. <b>“Donec pellentesque condimentum pretium.”</b> Cras ante nulla, interdum id volutpat et, lacinia sed augue. Aenean vitae libero sed quam ultricies facilisis ac quis velit.</p>

</div></div>
<p class="template-credit">Image courtesy of [URL=http://www.flickr.com/photos/gerardstolk/4999229138/]Gerardstolk@Flickr[/URL]; table by <a href="?viewtopic.php?t=17301">the Mentors!</a></p>
<style>
.ddm-template .ooc {font-style:italic; }
p.template-credit {text-indent:0px; text-align:center; font-size:10px; font-style:italic; width:500px; text-align:center; margin:0px auto;}
.ddm-template p {padding:2px 0px; margin:0px; text-indent:35px;}
.ddm-template b {color:#A2152C; letter-spacing:-.2px; }
.ddm-template { background-color:#EEE0E4; background-image:url(http://soulsrpg.com/images/pride/templates/ddmtemplate.png); background-position:bottom center; background-repeat:no-repeat; border:2px solid #FFFFFF; outline:1px solid #000000; font-family: georgia, serif; font-size:12px; color:#1B2127; letter-spacing:.4px; word-spacing:.3px; line-height:16px; width:500px; text-align:left; margin:0px auto; }
.ddm-template .inner {margin:10px 10px 250px 10px; padding:10px; background-image:url(http://soulsrpg.com/images/pride/templates/ddmbg.png); background-repeat:no-repeat; background-position: top center; border:1px solid #000000; border-radius:20px;-moz-border-radius:20px; -webkit-border-radius:20px;}
</style>[/doHTML]


Forum Jump: