megwrites | New layout!

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

I've just checked and I have the same problem

aidadesigns has. The nav links stay put in the middle of my screen and they definitely go over the entries.

I thought that maybe that had something to do with my browsing the internet with Firefox all zoomed in (ctrl ++ is my BFF), but no, I zoomed out until the font was unreadable and the nav links still stayed in the middle of the page.

I'm on FF 9.0.1. Dunno if this helps

I'm still trying to figure out why this is happening. I have FF 9.0.1 as well and I've been testing it in that browser and I'm still not getting anything like what you have seen.

BTW, are you on a Mac or a PC and are you using Windows or what? I think that MIGHT be part of it. I don't know.

I'm really baffled as to why this is happening, because other people are saying it works just fine for them.

I have no idea why this is happening either. I'd include a screenshot, but I think it's useless, considering how it's exactly the same as

adadesigns. But if you need it, I'll take it Let me know.

I'm on a PC running Windows 7 Ultimate

ETA: maybe FF addons somehow mess with the layout? ALthough I have no idea how
I have:
-adblock plus
-add to search bar 2
-addon compatibility reporter
-FEBE 7.0.2
-livejournal addon 9.5
-Remove table 0.5.0.1
-Snap link plus 2.2.1
-Undo closed tabs 3.7.1
-IE tab 2 (disabled)

Edited 2012-01-06 19:24 (UTC)

New layout!

no subject

no subject

no subject