dreamwidthlayouts | Wavy Gravy (Blanket)

Title: Wavy Gravy
Credit to:

sistabro
Base style: Blanket
Type: Full layout CSS
Best resolution: Variable width
Tested in: IE9, Chrome, and Firefox 5 on a PC
Features: 1 column, fluid width, fixed bottom navigation including Previous #, Next #, and Top of page links

Image Preview | Live Preview

(Also a repost. I accidentally deleted the first entry for this somehow *face palm*)

Installation Instructions

1. On the Select Journal Style page, find the Blanket Peach layout and click "Apply theme".

2. Go to the Customize Journal Style Modules page. Uncheck everything in the first section, Column. YOU MUST SELECT NAVIGATION in the section section, Fixed.

3. Go to the Customize Journal Style Presentation page, and set the size of icons to Full. Also set them to appear on the right side of the page.

3. Finally, go to the Customize Journal Style Custom CSS page. Deselect the "Use layout's stylesheets(s)" checkbox. Then copy and paste the CSS code from the text box below into the Custom CSS box. Save.

/**Wavy Gravy. A Dreamwidth Blanket layout, by sistabro**/
/** For easy modification, here are the color codes
Light blue/teal used for unfollowed and nave links: #278faf
Darker blue for followed links in entry, also default bgcolor: #1a6884
Green for hovering over links: #a8c048
Dark almost black bgcolor for footer and header: #0d0b16
Slightly lighter dark gray used only as background for selectlists in the control panel: #2d2925

If you don't want a background image, delete the "url(http://....)" bit in the first line of code. Similarly, to change the background, just change the address to point to your image. If you want your background image not to repeat, add "no-repeat" (no quotes) after the url(http://...) bit.

Content width is 90%. To change, just find and replace with the percentage you would like. The Previous # and Next # link positions in the bottom navigation section are set at 5.25%. If you change the width, to make those links line up with the content edges, replace 5.25% with the number derived from this formula: ((100%-yourContentWidth%)/2)+.25%.

To use, go to the page to Customize your theme: http://www.dreamwidth.org/customize/options
1. Set your theme to Blanket:Peach.
2. Under modules, turn off all the items in the Column section and make sure Navigation in the Fixed section is selected
3. Go to Custom CSS and uncheck "User layout's stylesheets(s). Copy and past this code into the Use embedded CSS text box. Save.

**/

body {padding: 0; margin: 0; text-align: center; color: #000000; background: #1a6884 url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3/3267.png); background-attachment:fixed; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; overflow-x:hidden; overflow-y:auto; }

a, a:active {text-decoration: none; color: #278faf; outline:0;}
a:hover {color: #a8c048;}

#canvas {margin: 10px auto 3em auto; text-align: left; padding: 0;}
#content {padding: 0 0 20px 0; margin: 0;}
#primary {width: 90%; margin: 0 auto;  z-index: 0; padding: 0;}

/*--- header + footer ---*/
#header {width: 90%; margin: 1em auto 1em auto; background-color: #0d0b16;}
#header>.inner {border-left: 0px solid #0d0b16; padding: 2em 2em;}
#footer {display: float; clear: both; margin: 0 auto 0 auto; width: 90%;}
.navigation {padding: 10px; text-align: center; color:#278faf; margin-bottom:20px;}
.topnav {display:none!important;}

li.page-back, li.page-forward, .page-top {list-style: none; padding: 0.1em; margin: 0 0 0 0; background: #0d0b16; bottom: 2.5em;; text-transform:uppercase; font-size: 0.665em; }
.page-top {position:fixed; right:46.5%;z-index: 5;}
li.page-back {position: fixed; left: 0em;  text-align:left; padding-left:5.25%; z-index: 5;}
li.page-forward { position: fixed; right: 0em;  text-align: right; padding-right:5.25%; z-index: 5;}
li.page-separator {display: none;}
div.navigation ul {display: inline; padding: 0; margin: 0 0 0 0; align: center;}

/*--- header texts ---*/
div#header h1#title {font-weight: normal; text-transform: uppercase; letter-spacing: 0; padding: 0; margin: 0; color: #a8c048; font-family: sans-serif; font-size: 1.2em;}
div#header h2#subtitle {font-weight: normal; text-transform: lowercase; letter-spacing: 1px; padding: 0; margin: 0; color: #278faf; font-family: sans-serif; font-size: 1em;}
div#header h2#pagetitle {font-weight: normal; text-transform: uppercase; letter-spacing: 1px; padding: 0; margin: 1em 0 0 0; color: #278faf; font-family: sans-serif; font-size: 1em;}

/*--- navigation links ---*/
div.module-navlinks {position: fixed; bottom: 0; z-index: 2;  padding-bottom: 0.5em; width: 100%; margin: 0 auto; color: #a8c048;background-color: #0d0b16; text-align:center;  padding-top: 1.4em;}
div.module-navlinks ul.module-list {display: inline; padding: 0; margin: 0 0 0 0; text-transform: uppercase;  }
div.module-navlinks ul.module-list li {display: inline; margin: 0 0 0 0; list-style: none; padding-right; 13px; padding-left: 13px; font-size: 0.665em; }

/*--- modules ---*/

#secondary {width: 90%; margin: 0 auto; z-index: 0; padding: 0; background-color: #ffffff; display:none;}
#secondary>.inner {border-left: none; padding: 4em 2em; display:none}

#secondary .module {float: left; margin: 2em 1em;}
#secondary .module-header, #secondary .module-header a {font-family: arial!important;color: #099aaf;}
#secondary .separator-after {clear: both;}
.module-tags_cloud {margin: 3em 0; width: 100%; float: none;}
.module-tags_cloud .module-content {padding: 0 3em 1em 3em;}

#secondary .module-content {text-align: left;}
#secondary .module-content ul { list-style: outside; margin-left: 1em;  padding-left: 0;}
#secondary .module-content li {margin: .5em 0;}
.module-photo .module-content {text-align: center;}
.module-user-links .module-content {text-align: center;}
ul.userlite-interaction-links {list-style: none; margin-left: 0; padding-left: 0;}
ul.userlite-interaction-links li {display: inline; padding: 0 .20em;}
.module-credit {font-family:arial!important;}
.module-credit dt, .module-credit dd {display: inline; margin: 0; padding: 0;}
.module-credit dt {font-weight: normal; margin-right: 0.5em;}

/*--- entry ---*/
div.entry {padding-top: 10px; padding-left: 25px; padding-right: 25px; padding-bottom: 10px; margin: 10px 0 10px 0; border-left: 0px solid #F2EBD7;background-color: #ffffff;}
div.entry-content {margin: 40px 0 0 0;padding-bottom: 5px; background-color: #ffffff; font-size: 0.82em; color:#000000;}
.page-recent div.entry-content {margin: 45px 0 0 0;}
.entry-content img {max-width:90%;}
.entry a:visited {color: #1a6884;}
.entry a:hover, a:visited a:hover {color: #a8c048;}
.entry a:active, a {color: #278faf;}

div.header {background-color: #ffffff; padding: 0; margin: 10px 100px 10px auto;  }
h3.entry-title {font-weight: normal; text-transform: none; letter-spacing: -1; padding: 0; margin: 5px auto 10px auto; font-family: sans-serif; font-size: 1.3em; color: #1a6884;background-color: #ffffff; }
h3.entry-title a {color: #1a6884;background-color: #ffffff;}

div.metatype {margin: 5px 0 20px 0; vertical-align:middle;}

.datetime {font-size: 0.7em; font-weight: normal; text-transform: lowercase; letter-spacing: 1px; margin: 5px 0 20px 2px; color: #2d2925;background-color: #ffffff; vertical-align:middle;}
.datetime a {color: #2d2925; background-color: #ffffff;}

.entry .userpic {display: block; float: right; margin: -60px 0px 10px 10px; vertical-align:top; padding: 0;}
.userpic img { max-width:100px;height: 100px; padding: 0; border: none;}
.page-recent .entry .userpic {display: block; float: right; margin: -100px 0px 10px 10px; vertical-align:top; padding: 0;}
.page-recent .entry .userpic img {max-width:80px; height:80px; }

span.poster {font-size: 0.9em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; color: #2d2925; background-color: #ffffff; color: #aeaeae;}

div.metadata {margin: .8em 0 0 0; background-color: #ffffff;}
div.metadata ul {padding: 0; margin: 0;}
div.metadata ul li {list-style: none; font-size: 0.7em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0; color: #2d2925;}
span.metadata-label-location, span.metadata-label-mood, span.metadata-label-music {}
span.metadata-item-location {padding: 0;}
span.metadata-item-mood {padding: 0;}
span.metadata-item-music {padding: 0;}

span.tag-text {text-transform: lowercase; color: #2d2925; font-size:.7em;}
div.tag ul {padding: 0; margin: 0; display: inline; background-color: #ffffff;}
div.tag ul li {display: inline; list-style: none; font-size: 0.7em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0; color: #c8c8c8;}

ul.entry-management-links {text-align:center; padding-top: 0; margin: .7em 0 0 0;}
ul.entry-management-links li {display: inline; list-style: none; font-size: 0.8em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0 15px 0 0; color: #c8c8c8;}

ul.entry-interaction-links {text-align: center;background-color: #ffffff;}
ul.entry-interaction-links li {display: inline; list-style: none; font-size: 0.75em; font-weight: normal; text-transform: uppercase; letter-spacing: 0; color: #0D0B16; text-align: center; padding-right: 15px;}
.entry-interaction-links a {padding-right: 15px;}

.entry-content li,
.comment-content li {
    list-style-position: inside;
    }

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

input, textarea {background: #ffffff; margin-left: 2px; margin-right: 2px;border: 1px solid #aaaaaa; }
textarea.textbox  {width: 100% !important; border: 1px solid #aaaaaa; }
.textbox  {width: 100% !important; border: 1px solid #aaaaaa; }

.comment {margin: 0 auto 0.1em auto; background: #ffffff; padding: 10px 20px 10px 20px; border-top: 0px solid #1a6884; font-size: 0.8em;}

.comment-content img {max-width:90%;}
.comment a:visited {color: #1a6884;}
.comment a:hover, a:visited a:hover {color: #a8c048;}
.comment a:active, a {color: #278faf;}

.comment .userpic {display: block; float: right; margin: -36px 0px 10px 10px; vertical-align:top; padding: 0;}
.comment .userpic img {max-width:80px; height:80px;}

.comment .datetime {background-color:transparent;text-transform:lowercase; font-size: .7em;}
.comment .poster {background-color:transparent;text-transform:lowercase; font-size: 1em; color: #aeaeae;}
.comment .poster-ip {background-color:transparent;text-transform:lowercase; font-size: .625em; color: #aeaeae;}
.comment-content {padding-top:25px;padding-bottom:15px; }
.bottomcomment {display:none; margin: 0 auto 2em auto; padding: 0 2em 0 2em; border-left: 0px solid #0d0b16; background-color: #ffffff;}
.comment-management-links, .comment-interaction-links {margin-top: 5px; padding-right: 15px;}
.comment-management-links {text-align:right; padding-right: 15px;}
.comment-interaction-links a {padding-right: 15px;}
.comment-interaction-links {text-align:right; }
.comment-management-links li, .comment-interaction-links li {display: inline; padding-right:15px;}
.multiform-checkbox {display:none;padding-top:20px!important;text-align:right!important;}
#qrform table {text-align: center;border: 0!important;}

/*--- archive ---*/

li.active {list-style: none; display: inline; text-transform: uppercase; padding: 0; margin: 0; text-align: center; color: #278faf;}
.month {margin: 1em auto 1em auto; padding: 2em 2em; background-color: #ffffff;}
.month h3 {font-size: 1em; font-weight: normal; text-transform: none; letter-spacing: 1px; padding-right: 50px; margin: 0; text-align: right; color: #a8c048;}

.page-archive div.navigation ul {display: inline; }
.page-archive div.navigation li {display: inline; list-style: none; } 
.page-month div.navigation ul {display: inline; }
.page-month div.navigation li {display: inline; list-style: none; } 
.page-archive div.navigation {background-color: #ffffff; padding: 20px 10px 20px 10px;}
.page-month div.navigation {background-color: #ffffff; padding: 20px 10px 20px 10px;}

.month th {font-size: 0.9em; font-weight: normal; text-transform: uppercase; padding: 5px; text-align: center; color: #a8c048; border: 1px solid #2d2925; background-color: #0d0b16; border: }
.month table {width: auto; cellspacing: 0; margin: auto; }
.month caption {display: none;}

.month dt {font-weight: bold; width:300px; margin-bottom:15px; margin-left:30px;}
.month dt a {font-weight:bold;}

.month dd h3 {text-align:left;}
.month dd .tag {display:none;}

td.day-empty {border: 1px solid #2d2925;}
td.day {height:50px;width:50px;padding: 0; spacing: 0; border: 1px solid #2d2925; background-color:#ffffff; vertical-align:top; text-align:center; font-weight:bold; font-family:arial; padding-top:5px;}

.month .footer {text-align:center;}
.day day-has-entries a {text-align:center;}

/*--- tags ---*/
.tags-container h2 {font-size: 1.3em; font-weight: normal; text-transform: none; letter-spacing: 1px; padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; margin: 0; text-align: left; color: #1a6884;}
.page-tags .tags-container {margin: 0; padding-left:40px; border-lbottom: 1px solid #000000; background-color: #ffffff; font-size: .82em; font-weight: normal; text-transform: lowercase; letter-spacing: 1px; padding-top: 5px; padding-left: 20px; padding-right: 20px; padding-bottom:10px; margin: 0; text-align: left; color: #0D0B16;}}
.tags-container {line-height: 100%;margin-bottom: 2px;}
.tags-container .manage-tags-link {margin-left: 20px; margin-bottom: 15px; padding-bottom: 25px; text-transform:none; font-weight:bold; font-size:1em;}
.page-tags .tags-container ul {margin: .75em; padding: 0;}
.page-tags .tags-container ul li {margin: 0 0 0 1em; padding: 0; list-style: none;}

/*--- control strip ---*/
#lj_controlstrip {background:#0d0b16; color:#278FAF; } 
#lj_controlstrip_statustext {color:#278faf; font-weight:normal;}
#lj_controlstrip a {color:#a8c048;}
#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search, 
#lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_login td, 
#lj_controlstrip td td {border:none !important;}
#lj_controlstrip input {background:#278faf !important;color:#ffffff !important; border:none;}
#lj_controlstrip_search_submit, input#Logout, #lj_controlstrip input#search  {background:#278faf !important;color:#ffffff !important; border: none;}
#lj_controlstrip .ljuser a b {color:#278fsf;; text-decoration:none !important;}
#lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password {background: #278faf; color:#ffffff;}
#lj_controlstrip input#xc_remember, #lj_controlstrip_search_input_text, #lj_controlstrip select {background:#2d2925; color:#ffffff; border:none;}

/*---misc--*/
.empty-day {width: 15px!important; padding: 2px; text-align:center!important;}
.entry-day {width: 15px!important; padding: 2px; text-align:center!important;}
.module-calendar {font-family: arial!important;}
.module-calendar th {width: 15px!important; padding: 2px; text-align:center!important;}
.module-calendar td a {color: #333333;text-align:center!important;}
.entry-permalink {display:none!important;}

#postform {padding: 20px;margin-bottom: 20px;text-align: center;}
.talkform {width: 90%!important;}
#qrformdiv {border-top: 1px solid #eeeeee; padding: 15px;}
.talkform td {text-align:left;}

div.ContextualPopup div.Inner {background:transparent!important;color: #333029 !important;border:none;padding:10px;width: 245px;font-family:"arial", sans-serif;font-size: 8pt;}
div.ContextualPopup .Content {padding:12px 15px;margin-right:80px;line-height: 1.4;background-color: #fff;}
div.ContextualPopup .Userpic {padding:10px;margin:0px;background-color: #fff;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {text-decoration: none !important;font-weight: normal; font-family: arial;color: #777 !important;text-transform: uppercase;}
div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:hover {text-decoration: none !important;font-weight: normal;color: #0085d2 !important;}
div.ContextualPopup .Relation {letter-spacing:0px;border-bottom: 3px solid #000;margin-bottom:4px;padding-bottom:4px;}

.manage-tags-link {margin-top: 20px;}
.module-customtext .module-content {padding-left:30px;}

Notes

Colors and background:

Light blue/teal used for unfollowed and navigation links: #278faf
Darker blue for followed links in entry, also default bgcolor: #1a6884
Green for hovering over links: #a8c048
Dark almost black bgcolor for footer and header: #0d0b16
Slightly lighter dark gray used only as background for selectlists in the control panel: #2d2925

Background image: http://colourlovers.com.s3.amazonaws.com/images/patterns/3/3267.png

I recommend downloading the background image and uploading it somewhere else just for your own use.

Flat | Top-Level Comments Only

Heh - you still rule - check out my shiny new journal \o/

Oh, that is lovely. I love the background :D

Thanks so much! Check out mine!

Haha, I've since credited you.

Lovely! I really like the background you used :)

This is amazing. I've used it and credited you. :)

Thank you! I'm really happy you've found it useful :D

TOTES AWESOME. I love it! Thank you! ♥

Thank you! I'm glad you like it :)

this is marvellous! used (with some modifications) on

whengreatsatansgone, with credit, thank you so much :)

Glad you liked it! :)

(deleted comment)

Not a problem! Glad you like the layout :)

Wavy Gravy (Blanket)

Installation Instructions

Notes

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject