megwrites

Let me know if anything looks weird in the browser you're using or if something is not accessible anymore or things like that. I sorta designed this layout (well, sorta). I mostly just tinkered and chopped away at the basic CSS for Tabula Rasa until it did what I wanted it to do.

You'll need to turn off all your modules except the navigation, unless you want to modify that as well. It may look funky if you don't.

And yes, you can borrow it if you like. And feel free to modify anything and everything. Credit would be super nice.

So, here it is. I call it "Flutterby" and it works with Tabula Rasa:

It looks like this (click for bigger view):

ETA: The problem with the navigation module has been fixed! Sorry for that!

/* Cleaned CSS: */
/*Flutterby for Tabula Rasa*/
/*Modifications by megwrites.dreamwidth.org*/
/*background by chamberten.livejournal.com*/

<!--
body {
    padding: 0;
    background: url(http://i158.photobucket.com/albums/t113/fictiontheory/butterflies-1.jpg) #ece5ce fixed;
    font-family: Georgia, sans-serif; font-size: 1em;
    color: #000000;
    line-height: 1.4em;
    text-align: center;
    }

img { border: none; }

a { text-decoration: none; }
a, a:link { color: #5f8a92;   }
a:visited { color: #8da8ad; }
a:hover { color: #acc5c9; }

q { font-style: italic; }

#canvas {
    margin: 0 auto;
    padding: 5% 0 5% 15%;
    text-align: justify;
    width: 85%;
}

#primary {
    float: left;
    width: 65%;
    text-align: justify;
    margin: 0 0.6em 0 0;
    }

#secondary {
    float: right;
position: fixed;
    width: 13%;
    margin: 50px 0 0 750px;
    padding: 0 1em;
    font-size: 1.5em;
    color: #00000;
}

#tertiary {
    clear: both;
    width: 65%;
    background-color: #dd4466;
    line-height: 125%;
    }

#tertiary > .inner:first-child { }

#tertiary .separator-after { clear: both; }

/*--- header + footer ---*/

#header 
#footer {
    background: #aaccccc;
    width: 100%;
    font-size: 3em;
    text-transform: lowercase;
    clear: both;
    margin-top: 10px;
}

#footer a, #footer a:link, #footer a:active { #aacccc; }
#footer a:visited { #aacccc; }
#footer a:hover { #acc5c9; }

#footer .inner { padding: 10px; }

/*--- prev/next navigation ---*/

li.page-back, li.page-forward {
    display: inline;
    list-style: none;
    padding: 5px 5px 5px 5px;
    margin-bottom: 0px;
    background: #ffffff;}

li.page-separator { display: none; }

div.navigation ul {
    display: inline;
    padding: 0;
    margin: 0;
    }

/*--- entry ---*/

.entry {
    background: #ffffff;
    color: #000000;
    padding: 10px;
    margin: 0 0 10px 0;
    font-family: Georgia, sans-serif; font-size: 0.95em;
    }

.entry-content { margin: 10px 0 0 0; 
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;}

.entry .header {
    padding: 0;
    margin: 0 0 10px 0;
    border-bottom: 1px dashed #000000;
    }

h3.entry-title {
    margin: 0;
    padding: 0;
    font-family: Georgia, sans-serif; font-size: 1.35em;
    font-weight: normal;
   font-style: italic;
    letter-spacing: 1px;
    color: #dd4466;
    }

h3.entry-title a { color: #dd4466; }

.datetime {
    font-family: Helvetica, sans-serif; font-size: 0.9em;
    text-transform: uppercase;
    color: #939393;
    }
.datetime a { color: #939393; }

div.entry div.userpic {
    display: block;
    float: left;
    margin: 0 0 0 -100px;
    }

div.entry div.userpic img {
    width: 70px;
    height: 70px; /*FIXME -- this shouldn't be hardcoded */
    border: 5px solid #ffbb77;
    }

span.poster {
    font-family: Helvetica, sans-serif; font-size: 0.6em;
    text-transform: uppercase;
    }

.metadata { margin: 1.25em 0 0 0; }

.metadata.top-metadata { margin: 15px 0 1.25em 0; }

div.metadata ul {
    padding: 0;
    margin: 0;
    }

div.metadata ul li {
    list-style: none;
    font-size: 100%;
    font-weight: normal;
    text-transform: lowercase;
    color: #939393;
    letter-spacing: 0;
    padding: 0;
    }

span.tag-text {
    font-size: 100%;
    text-transform: lowercase;
    }

div.tag ul {
    padding: 0 0 0 13px;
    margin: 0;
    display: inline;
    }

div.tag ul li {
    display: inline;
    list-style: none;
    font-size: 100%;
    font-weight: normal;
    text-transform: lowercase;
    color: #939393;
    letter-spacing: 0;
    padding: 0;
    }

ul.entry-management-links {
    padding: 0;
    margin: 10px 0 0 0;
    }

ul.entry-management-links li {

display: inline;
    list-style: none;
    font-size: 100%;
    font-weight: normal;
    text-transform: lowercase;
    color: #939393;
    letter-spacing: 0;
    padding: 0 5px 0 0;
margin-left: 45px;
    }

ul.entry-interaction-links {
    padding: 0 0 5px 0;
    margin: 10px 0 0 0;
    text-align: center;
    }

ul.entry-interaction-links li {

align: center;
    display: inline;
    list-style: none;
    font-size: 100%;
    font-weight: normal;
    text-transform: uppercase;
    color: #939393;
    letter-spacing: 0;
    padding: 0 5px 0 0;
    }

/*-- archive --*/

li.active {
    list-style: none;
    display: inline;
    padding: 0;
    margin: 10px;
    }

.month {
    background-color: #ffffff;
    padding: 20px;
    margin: 0;
    }

.month h3 {
    font-family: Georgia, sans-serif; font-size: 0.7em;
    font-weight: normal;
    text-transform: lowercase;
    letter-spacing: 1px;
    padding: 0;
    margin: 0;
    text-align: right;
    }

.navigation ul { display: inline; }
.navigation li { display: inline; list-style: none; }

table.month { border: 0; }
.month caption { display: none; }
.month th {
    text-align: center;
    margin: 0 2px;
    text-transform: lowercase;
    font-weight: normal;
    }
.month td.day {
    font-weight: normal;
    color: #939393;
    }
.month td.day-has-entries {
    font-weight: normal;
    color: #939393;
    }
.month td.day-has-entries p {
    padding: 0 0 0 5px;
    margin: 0;
    display: inline;
    }
.month table {
    width: 100%;
    border: 0;
    margin: auto;
    }

td.day {
    padding: 10px;
    border: 0;
    text-align: center;
    }

/*-- tags --*/

.page-tags .tags-container {
    background-color: #ffffff;
    font-family: Georgia, sans-serif; font-size: 1em;
    padding: 10px;
    margin: 0 0 10px 0;
    }

.page-tags .tags-container h2 {
    margin: 0 0 10px 0;
    padding: 0;
    font-family: Georgia, sans-serif; font-size: 0.7em;
    border-width: 0 0 1px 0;
    border-style: dotted;
    border-color: #d4d4d4;
    font-weight: normal;
    text-transform: lowercase;
    letter-spacing: 1px;
    color: #939393;
    }

.page-tags .ljtaglist { margin: 0; padding: 0; }
.page-tags .ljtaglist li {
    padding: 0 0 0 10px;
    margin: 0;
    text-transform: lowercase;
    letter-spacing: 0;
    list-style: none;
    }
.page-tags .tags_cloud { text-align: center; }

/*--- comments ---*/

#comments { font-family: Georgia, sans-serif; font-size: 0.95em; }

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

input, textarea {
    background-color: #ffffff;
    color: #939393;
    padding: 2px;
    border: 1px solid #d4d4d4;
    font-family: Helvetica, sans-serif; 
    font-size: 80%;
    }

textarea.textbox  { width: 90%!important; }

.poster-ip {
    font-family: Helvetica, sans-serif; font-size: 0.6em;
    text-transform: uppercase;
    color: #939393;
    display: block;
    text-align: left;
    }

div.comment div.userpic {
    display: block;
    float: left;
    margin: 0 0 0 -110px;
    }

div.comment div.userpic img {
    width: 70px;
    height: 70px; /*FIXME: don't hardcode userpic sizes!*/
    border: 5px solid #7a6a53;
    }

.comment {
    background: #ffffff;
    padding: 20px;
    margin: 0;
    }
.comment-wrapper { margin: 20px 0; padding: 0; }
.comment-content { margin: 10px 0; }

.bottomcomment, .comments-message {
    background: #ffffff;
    padding: 20px;
    margin: 0;
    }

.comment-management-links ul, .comment-interaction-links ul { margin: 0; padding: 0; list-style: none; }
.comment-management-links li, .comment-interaction-links li { display: inline; }

#qrform table { border: 0!important; }

.comment-poster {
    font-family: Helvetica, sans-serif; font-size: 0.6em;
    text-transform: uppercase;
    color: #939393;
    }

.comment-management-links ul, .comment-interaction-links ul { margin: 0; padding: 0; list-style: none; }
.comment-management-links li, .comment-interaction-links li { display: inline; }

table.talkform {
    background: #ffffff;
    font-family: Georgia, sans-serif; font-size: 0.95em;
    padding: 10px;
    margin: 0 0 10px 0;
    }

/*-- modules --*/

#secondary .module {
    font-family: Georgia, sans-serif; font-size: 0.8em;
    }

#tertiary .module {
    float: left;
    padding: 0.5em 2em;
    font-family: Georgia, sans-serif; font-size: 0.8em;
    }
#secondary .module-navlinks { font-family: Georgia, sans-serif; font-size: 0.8em; }

#tertiary .module-navlinks {
    margin: 0;
    padding: 1em 5%;
    width: 90%;
    }

.module-navlinks {
    padding: 10px;
    margin: 0 0 0 -0.8em;
    background-color: #dd4466;
    text-transform: lowercase;
    }

.module-navlinks ul.module-list {
    padding: 0;
    margin: 0;
    list-style: none;
    }
.module-navlinks ul.module-list li {
    padding: 0;
    margin: 0;
    list-style: none;
    }
.module-navlinks ul.module-list li a, .module-navlinks ul.module-list li a:link { color: #acc5c9; }
.module-navlinks ul.module-list li a:visited { color: #dbe6e7; }
.module-navlinks ul.module-list li a:hover { color: #cbdadc; }

.module-calendar { text-align: center; }
.module-customtext {
    padding: 0;
    margin: 20px 0 0 0;
    text-align: center;
    }

#secondary .module-customtext { color: #7a6a53; }

.module-header {
    color: #939393;
    font-family: Georgia, sans-serif; font-size: 1em;
    font-weight: normal;
    letter-spacing: 1px;
    text-align: left;
    text-transform: lowercase;
    border-style: dotted;
    border-width: 0 0 1px 0;
    border-color: #d4d4d4;
    }

.module-customtext .module-header { text-align: center; }

#secondary .module-header a,
#secondary .module-header a:link,
#secondary .module-header a:visited,
#secondary .module-header a:hover
    { color: #7a6a53; }

#tertiary .module-header a,
#tertiary .module-header a:link,
#tertiary .module-header a:visited,
#tertiary .module-header a:hover
    { color: #939393;  }

.module-userprofile .journal-name,
.module-userprofile .userpic
    { text-align: center; }

.module-userprofile .userpic img { border:5px solid #7a6a53; }

ul.userlite-interaction-links {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
    text-align: center;
    }

ul.userlite-interaction-links li {
    display: inline;
    padding: 0 0.2em;
    }

.module-tags_cloud, .module-time, .module-powered { width: 90%; }

.manage-tags-link {
    text-align: right;
    font-size: smaller;
    text-transform: uppercase;
    }

.module-time, .module-powered {
    border-style:dotted;
    border-width: 0 0 1px 0;
    border-color: #d4d4d4;
    letter-spacing: 1px;
    line-height: 125%;
    text-align: center;
    padding-top: 1em;
    }

.module-search .search-form { margin: .2em auto; }
.module-search .search-box { margin: .2em; }

#tertiary .module-content ul {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: disc;
    margin-left: 1em;
    padding-left: 0;
    }

#tertiary .module-content li {
    margin: 0.5em 0;
    line-height: 100%;
    }

/*-- extras --*/

div.ContextualPopup {
    position: relative;
    margin: 0;
    text-align: justify;
    font-weight: normal;
    font-family: Helvetica, sans-serif; 
    font-size: 50%;
    color: #939393;
    line-height: 1.8em;
    }

div.ContextualPopup div.Inner {
    color: #939393 !important;
    border: 1px dotted #d4d4d4;
    background: #ffffff !important;
    padding: 10px;
    }

div.ContextualPopup .Userpic {
    margin: 5px;
    border: 1px dotted #d4d4d4;
    background: #ffffff !important;
    padding: 5px;
    }

blockquote {
    background: #f5f5f5;
    border: 2px solid #e6e6e6;
    font-size: 100%;
    font-style: italic;
    padding: 40px 20px;
    margin: 20px;
    color: #848484;
    }

hr {
    color: transparent;
    height: 1px;
    border-style: none;
    border-bottom: 3px double #e6e6e6;
    }
}    --->

So, let me know if there are any problems and I hope people will like this layout!

Flat | Top-Level Comments Only

From:

smw

How pretty! I quite like it.

From:

megwrites

Oh, thanks! :)

From:

aidadesigns

Really gorgeous layout! There is something off about the navigation, as it shows up like this on my monitor (22" widescreen):

http://img717.imageshack.us/img717/9008/megwrites.png

float: right; position fixed for #secondary is most likely the cause, as it stays in that location as I scroll, and covers up portions of text in the entries. :(

From:

megwrites

You're right, the problem was there. I think at some point I was using em when I first started on this and then decided percentages would be better but overlooked that one.

Anyway, it's fixed and should be good to go. Let me know if there are any other problems! :)

And thank you. I'm glad that you like it.

From:

aidadesigns

It still stays in place when I scroll. :( Did you fix it in your layout?

From:

megwrites

How do you mean stays in place?

Is it staying up at the top or is it staying right at the middle of the screen even when you scroll down?

From:

aidadesigns

It stays in the middle and covers the entry as I scroll. Example -->

http://img832.imageshack.us/img832/6934/megwrites2.png

its is now next to this comment box.

From:

megwrites

The navigation box is meant to stay in place and follow you as you scroll. That's part of the layout's design. However, it shouldn't cover any entries or comment boxes at all. There should be a margin between entries and the navigation box.

Right now, all I'm seeing is this: http://i158.photobucket.com/albums/t113/fictiontheory/Screenshot2012-01-05at63717PM.png

BTW, what browser are you using? That might be affecting things.

Here's a version of the layout where the navigation box stays put.

/* Cleaned CSS: */
/*Modifications by megwrites.dreamwidth.org*/
/*background by chamberten.livejournal.com*/

img { border: none; }

a { text-decoration: none; }
a, a:link { color: #5f8a92;   }
a:visited { color: #8da8ad; }
a:hover { color: #acc5c9; }

q { font-style: italic; }

#canvas {
    margin: 0 auto;
    padding: 5% 0 5% 15%;
    text-align: justify;
    width: 85%;
}

#primary {
    float: left;
    width: 65%;
    text-align: justify;
    margin: 0 0.6em 0 0;
    }

#secondary {
    float: right;
position: relative;
    width: 13%;
    margin: 50px 125px -10px 50px;
    padding: 0 1em;
    font-size: 1.5em;
    color: #00000;
}