New Layout: Water Lily

[roddy]

Layout Name: Water Lily
Version: 2.01
Creator: Roddy of the Frozen Peas (roddy)

Derivative Information:
Based on the Wordpress "Water Lily" layout found at Theme Junction, where it is released free under the GPL. Attribution has been added to the CSS code.

Some notes:
If you look at the original Water Lily theme, you'll notice that they do some cool CSS tricks with the date. I was hoping to get that same effect here, but the physical layout of the Tabula Rasa layout made it impossible for me to do so. I will keep trying, though, so keep your eyes open for a new version of Water Lily at some point.

Additionally, I have run out of energy and have not yet converted this layout into S2. Sorry. But it is fully installable on top of a blank Tabula Rasa with the CSS code I've included below.

Screenshots:

CSS Code


/*
Theme Name: Water Lily
Theme URI: http://www.themesjunction.com/theme/water_lily_wordpress_template-1012.html
Description: a clean and simple fixed width, 2-columns layout with the sidebar on the right.
Author: Themes Junction
*/

/*
Theme Name: Water Lily
Version: 2.01 (Dreamwidth)
Author: Roddy of the Frozen Peas
*/

/* This theme is licensed under the GNU Public License (GPL). */

html,
body {
font: 12px arial,verdana,sans-serif;
padding:0px;
margin:0px;
background-color:#054b65;

}

div#canvas {
clear: both;
width: 1000px;
padding:0;
margin:0px;
}

div#canvas>div.inner{
float: left;
width: 1000px;
padding:0px;
margin-top:0px;
margin:0px;
background: url(content-bg.gif) repeat-y center;
}

a
{
color:#0b7772;
}

hr {
display: none;
}

h1, h2, h3, p {
padding: 0;
margin: 0;
}

h2 {
margin-top:0;
font-size:16px;
}
h3 {
margin:0;
font-size:14px;
}
h2 a:hover, h2 a:visited, h2 a {
text-decoration:none;
}

body.page-archive div#primary {
text-align: center;
}
body.page-archive div#primary table {
margin: 10px auto;
}
body.page-archive div#primary div.month-wrapper {
margin-bottom: 25px;
}

/****** HEADER ******/
#header {
height:417px;
width: 1000px;
background:#EFD195 ;
padding:0px;
margin:0px auto;
background:url(header.jpg) no-repeat top center;
float:none;
}
#header h1#title
{
font:44px gramond, 'times new roman';
color:#ebebeb;
text-align:left;
padding: 290px 0px 0px 100px;
height:50px;
}

#header h2#subtitle /* subtitle */
{
text-decoration: none;
margin: 0px;
font-family: arial;
padding-left:150px;
color: #ebebeb;
font:14px arial;
text-align:left;
font-weight:normal;
}

#header h2#pagetitle { /* page title */
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#315a6d;
font-size:11px;
font-variant:small-caps;
width: 250px;
overflow-x: hidden;
overflow-y: hidden;
position: absolute;
top: 426px;
left: 60px;
}

body.no-navstrip #header h2#pagetitle{
top: 380px;
}

/***** ENTRIES ******/
div#primary {
margin: 0 0 0 50px;
float:left;
width:640px;
}

div.entry-wrapper {
margin-top:0px;
}

div.entry {
width:640px;
margin:0;
padding-top:0;
padding-right:16px;
color:#335a7a;
float:none;
display:block;
margin-bottom:30px;
clear:both;
position: relative;
text-align: justify;
}


div.entry div.header {
width:635px;
height:80px;
color:#351c17;
background:url(post-top.gif) no-repeat;
padding-top:10px;
}

div.entry div.header h3 {
font: 20px arial,verdana;
text-align:left;
overflow:visible;
margin-bottom:0;
padding:0;
padding-left:10px;
float:left;
}

div.entry div.header h3 a {
color:#335a7a;
font-weight:normal;
text-decoration: none;
}

div.entry div.header span.datetime {
clear:left;
height:25px;
float:right;
color:#005349;
text-align:left;
margin-top:0;
font:11px verdana;
padding-left:10px;
margin-right: 15px;
}

div.restrictions-none div.restrictions-none div.entry div.header span.datetime {
margin-right: 75px;
}
body.page-entry div.entry div.header span.datetime {
padding-left: 150px;
}
body.page-entry div.journal-type-C div.header span.datetime {
padding-left: 10px;
}
div.journal-type-C div.header span.datetime {
margin-top: -2px;
}
div.journal-type-C div.header h3 {
margin-top: -5px;
}

div.entry div.header span a {
text-decoration:none;
color:#326c82;
text-align:left;
}
div.entry div.header span a:hover {
text-decoration:underline;
color:#b5516d;
}

div.entry p {
margin:0px;
text-align: justify;
}

div.entry a:hover {
color:#338116;
}

div.entry div.footer {
clear: both;
font-size:10px;
color:#728493;
text-align:left;
width:640px;
padding: 0;
height:40px;
float:none;
display:block;
position:relative;
background:url(postbottom.gif) no-repeat bottom;
}

div.entry div.footer a {
text-decoration:none;
color:#728493;
}

div.entry div.footer div.tag {
float:left;
padding-left:20px;
margin-top:0px;
text-align:center;
height:20px;
padding-top:20px;
}
div.entry div.footer div.tag ul {
padding-left: 5px;
}
div.entry div.footer ul {
display: inline;
}

div.entry div.footer ul.entry-interaction-links {
float:right;
margin-top:0px;
text-align:right;
height:20px;
padding-top:20px;
padding-right:20px;
}

div.entry div.footer ul.entry-management-links {
float: left;
margin-left: 20px;
margin-top: 0px;
text-align: center;
height: 20px;
padding-top: 20px;
display: inline;
}

div.entry div.footer ul li {
display: inline;
list-style: none;
}

hr.below-reply-container,
hr.above-entry-interaction-links {
display: none;
}

div.entry span.poster
{
position: absolute;
display: block;
top: 2.6em;
left: 10px;
}

div.journal-type-C span.poster {
top: 3.5em;
}

div.entry div.userpic {
display: inline;
float: left;
margin: 0px;
}
div.entry div.userpic img {
border: 0;
margin-right: 10px;
}

div.entry div.contents {
margin-left: 10px;
margin-right: 10px;
}

div.entry a{
color:#326c82;
}

div.entry div.bottom-metadata {
clear: both;
margin-bottom: -20px;
padding-bottom: 0px;
}

div.entry div.bottom-metadata ul {
list-style: none;
padding-left: 0px;
margin-left: 0px;
}

div.entry div.bottom-metadata ul li {
padding-left: 0px;
margin-left: 0px;
}

div.entry div.bottom-metadata span.metadata-label {
font-weight: bold;
}

div.entry div.bottom-metadata a {
text-decoration: none;
}

div.entry div.header span.restrictions {
float: right;
height: 55px;
width: 60px;
text-align: center;
display: block;
}

/****** SIDEBAR ********/

div.navigation ul li {
display: inline;
list-style: none;
background-image: none;
margin-bottom: 25px;
}

div.navigation ul li.page-back {
float: left;
}

div.navigation ul li.page-separator {
display: none;
height: 0; width: 0;
margin: 0; padding: 0;
}

div.navigation ul li.page-forward {
float: right;
margin-right: 50px;
}
div.module-navlinks ,
div#secondary {
clear: right;
}

div#canvas > div.inner > div.module-navlinks,
div#secondary,
div#tertiary {
width:250px;
margin-left:0px;
margin-top:0px;
float:right;
clear: right;
}

div#secondary,
div#tertiary {
margin-right: 50px;
}

div#secondary ul,
div#tertiary ul {
margin: 0 0 10px 0;
padding:0;
}
div.module-navlinks ul li,
div#secondary ul li,
div#tertiary ul li {
list-style-type: none;
margin-left:0px;
list-style-image: none;
color:#8A832C;
padding:5px 0 5px 20px;
font:12px arial;
font-weight:bold;
background:url(arrow.gif) no-repeat left;
}
div#secondary ul ul li ,
div#tertiary ul ul li{
list-style-type: disc;
padding:0;
margin-left:5px;
color:#8A832C;
}
div#secondary p,
div#tertiary p {
margin:0;
font: 10px arial,verdana,sans-serif;
}
div#secondary a,
div#tertiary a {
color:#0b7772;
text-decoration:none;
}
div#secondary a:hover,
div#tertiary a:hover {
text-decoration:underline;
}

/******* USER PROFILE MODULE ********/
div#secondary div.module-userprofile div.userpic,
div#secondary div.module-userprofile div.journal-name {
margin-right: 50px;
text-align: center;
}

div#secondary div.module-userprofile div.module-content ul.userlite-interaction-links,
ul.userlite-interaction-links {
margin: 10px 50px 0px 0px;
padding:0;
list-style: none;
background: none;
text-align: center;
}

div.module-navlinks ul li {
margin-bottom: 0px;
}

div#secondary div.module-userprofile div.module-content ul.userlite-interaction-links li,
ul.userlite-interaction-links li {
display: inline;
list-style: none;
background: none;
background-image: none;
padding-left: 5px;
}

div#secondary div.module-syndicate div.module-content {
margin-right: 50px;
text-align: center;
}

/****** MODULE ********/
div.module {
margin-left: 0px;
}
div.module h2.module-header {
font:14px arial;
color:#156d61;
text-align:left;
font-weight:bold;
padding:16px 0 0 59px;
height:25px;
margin:0;
border:none;
margin-bottom:5px;
background:url(topbar.gif) no-repeat top left;
}

div.module-content {
margin-left: 30px;
}

/***** FOOTER ******/
#footer {
color:#af7b37;
font: 12px arial,verdana,sans-serif;
text-align:center;
height:76px;
float:left;
position:relative;
width:1000px;
margin:0px;
background:url(footer.gif) no-repeat bottom center;
}
#footer p,
#footer a
{
color:#afc2d0;
text-align:center;
margin-top:35px;
float:left;
width:1000px;

}
#footer a
{
color:#a7b8c5;
text-decoration:underline;
}

/******** COMMENTS *********/

div#comments {
margin-left: 25px;
}

div.comment-thread,
div.comment {
clear: both;
padding-top: 10px;
}

div.comment {
border: 1px solid #0b7772;
}

div.comment div.header div.comment-title {
font-weight: bold;
font-size: 2em;
min-height: 1em;
margin-top: -1em;
margin-left: 0.5em;
text-shadow: 1px 1px 2px #eaeaea;
}

div.comment div.header div.comment-title a {
text-decoration: none;
background-color: #d9e8ea;
}

div.comment div.header span.datetime {
float: right;
margin-top: -0.5em;
margin-right: 10px;
font-weight: bold;
}
div.comment div.contents span.poster-ip,
div.comment div.contents span.poster {
float: right;
clear: right;
margin-right: 10px;
font-weight: bold;
}
div.comment div.contents div.comment-content {
clear: right;
padding: 0px 10px;
text-align: justify;
}

div.comment div.contents div.userpic {
float: left;
margin: 0px 10px;
}
div.comment div.footer {
clear: both;
min-height: 2em;
}

div.comment div.footer ul,
div.comment div.footer ul li,
div#comments div.bottomcomment ul li{
display: inline;
padding-left: 5px;
list-style: none;
}
div.comment div.footer ul.comment-management-links,
div.comment div.footer span.multiform-checkbox{
float: left;
margin: 5px;
font-weight: bold;
}
div.comment div.footer ul.comment-interaction-links {
float: right;
margin: 5px;
font-weight: bold;
}

div#comments div.bottomcomment {
text-align: center;
}


/****** OTHER ********/

div.module table {
margin-left: -10px;
}

table {
width:190px;
color:#0b7772;
text-align:center;
}

td
{
color:#7d9aac;
}


code {
display: block;
margin: 10px 25px 0px;
border: 1px dashed #054b65;
color: #054b65;
padding: 5px;
background-color: #b8ced5;
}


Installation instruction will be found at layouttree forthwith.

Last updated: 3 September 2010