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!

an interesting monster

New layout! (Reply)

New layout!

Expand Cut Tags