dreamwidthlayouts | Flutterby for Tabula Rasa

Title: Flutterby
Credit to:

megwrites
Base style: Tabula Rasa
Type: Layout in CSS
Best resolution: Any
Tested in: Chrome, Safari, Firefox
Features: Color and background easily customizable, readable, and very simple.

Click picture for larger preview. You can also see a live preview (for now) at:

megwrites

ETA: The problem with the navigation module is fixed! Thanks to stormy for pointing it out and the suggestion!

1. In the menu under "Organize", go to "Select Journal Style"

2. Select the style "Tabula Rasa" (any version of it will do, but I suggest using the simplest/plainest version). Make sure "Two columns, side bar on right" is chosen.

3. Then go to Customize Your Theme

4. Once there, click on "Modules" in the sidebar.

5. In the Module section make sure ALL BOXES under "Main Module Section" are unchecked except for the one labeled "Navigation". It should be checked. The number beside it should be "1".

6. Next, make sure ALL BOXES under "Second Module Section" are unchecked except for Search and Cut Tag Controls. They should be listed as '15' and '16' respectively.

7. Then find the "Customize CSS" link on the side menu. Go to that page. Unclick the option for "Use layout's stylesheet(s)". In the large empty box paste the code below, then click "save changes" and you're done!

/* Cleaned CSS: */
/* Cleaned CSS: */
/*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: #939393;
    }

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

Customization:

- Customizing the colors are very easy. Simply run a search and replace for the various colors used, replacing the old colors with what you want, where you want.

- As for backgrounds, at the very top of the code where it reads "background:url(insertthinghere)", simply insert the URL for the particular background you like. The background used in this version comes from

chamberten over on livejournal and they have lots more there. The one I'm using is on my free photobucket account, so please just go there, right click and save the image on your own computer and to your own site of choice. I say this because if photobucket decides I went over my allowed bandwidth on a free account, both your background and mine will stop working and that won't be good.

- You can add a header if you want, but you'll have to fool around with the code yourself, or I can try to help you somewhat. This version isn't really designed for it, but it isn't impossible to do.

- You can, if you want, have your profile info (with userpic) and calendar and tags list on there, but they won't show up very good depending on your background. You can fiddle with the code to give them solid color backgrounds if you like. I'll try to help if you have questions. However, part of the point of this layout was to have something colorful, eyecatch, but very simple. I get a little frustrated by all the bells and whistles on some layouts because it clogs up the page for me and messes up the spacing. With this layout, it's stripped down. Entries, navigation menu, name at the top.

Flat | Top-Level Comments Only

Looks cute. The only thing I see is that you used a fixed position for the navigation box so on larger screens it'll overlap the entries. You could specify percentages to fix this if you wanted.

Thank you so much for the feedback and the suggestion. I went and fixed that. I don't know why I used em for that instead of percentages. Guess I had a bit of a brain fart. Anyway, thanks for helping and I'm glad you like!

This is simply beautiful!

Very pretty layout!

Ooh, I love the whimsical nature to this! Did you make the images, or are they freely available for redistribution? (I ask because if they're freely redistributable, or something you made, I'd love for you to submit them to

dreamscapes to potentially be a system style!)

The background came from a user,

chamberten and on their site, what I could read said that use was okay as long as one commented and credited them. Unfortunately the rest is in Russian, which I sadly can't read.

I took this to mean that non-commercial use of it was okay so long as one credited them and commented to let them know. If this was in error, let me know.

Oh, no, don't worry about it for personal use or for letting others use it; I was just wondering whether you knew if the image was under a license that would let us redistribute it (which it isn't, if it's not explicitly Creative Commons-licensed). I should've read the post more closely; my apologies!

I talked to the person who made the images, Chamberten, and she said that it would be okay if we used it for this. I can forward you the messages we exchanged if you like.

Unfortunately something like that isn't enough for us to be able to use a graphic; it either has to be explicitly creative commons-licensed or the creator has to be willing to submit a contributor licensing agreement to us. (It's a pain, but we have to be super careful about intellectual property, since we redistribute everything that's submitted to us as part of our open source package.) Still! Thank you for trying. :)

using this layout, very nice and simple :)
thank you!!

I loved it! using in a community with credit!

This is very cute.

But, I have a question, the Search and Cut Tag Controls appear in the Main Module section D:

Hello! I've been using this layout in my comm for awhile but only recently noticed that custom date entries are... not working properly.

Like, I made this entry today, but I set its date at one year ago. Normally, it would've appear at previous page or so, but with this layout I see it at the first page, because it's a recently uploaded entry.

Is there a way to fix it?

This depends. Did you click the "don't allow on reading pages" box when you posted it or not. Because that effects whether the out-of-date entry is seen according to it's posting date or the date you gave it. If you didn't, check that box and then see what it does.

Sorry this isn't working the way you want it to, let me know if that helps!

... and I just noticed that I can't make backdated entries in comms. Whoops ^^;

No, don't apologize; it's quite alright. Thank you for answering!

Flutterby for Tabula Rasa

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject