dusktilldawn | Layout: Dreamwalker (Reply)

Title: Dreamwalker
Credit to:

dusktilldawn
Base style: Tabula Rasa
Type: Full layout, CSS
Best resolution: Variable width
Tested in: Firefox. IE8 doesn't support the rounded corners, so it won't appear half as nice.
Features: Has custom comment pages. Fluid width entries, fluid width sidebar, fluid text. Tiny icons by Pinvoke.

Click the image for large preview.

Code:

/* ---------------------------------------
/* Theme: Dreamwalker
/* Author: sunrisetr @ dreamwidth
/* 
/* Based on the Plain Tabula Rasa theme.
/* Please credit sunrisetr @ dreamwidth
/* or dusktilldawn @ dreamwidth
/* somewhere on your journal or profile.
/* 
/* Resources: I See Clouds
/* http://www.colourlovers.com/pattern/
/* 493932/i_see_clouds!!
/*
/* Tiny Icons: Pinvoke
/* http://p.yusukekamiyamane.com/
/*
/* Feel free to modify as you wish for
/* your personal use. Redistributing is
/* forbidden.
--------------------------------------- */

/* ---------------------------------------
	The basic stuff
--------------------------------------- */

body {
background: #EBEBEB url("http://imgur.com/M6VpE.png");
color: #000;
margin: 50px 0;
padding: 0;
font-family: Tahoma, Arial, sans-serif;
font-size: 0.875em;
line-height: 1.2em;
}

blockquote {
width: 70%;
margin: 0 auto;
padding: 20px;
border: 2px solid #EBEBEB;
border-radius: 10px;
-moz-border-radius: 10px;
background: #F0F1F2;
color: #707070;
}

a, a:link, a:visited, a:active {
color: #4EBDCF;
text-decoration: none;
}

a:hover {
border-bottom: 1px solid;
}

span.ljuser a b {
color: #4EBDCF;
padding-left: 1px;
}

span.ljuser a:hover {
border-bottom: 0px;
}

code, kbd, pre, tt {
font-family: monospace;
font-size: 1.5em;
line-height: 1.2em;
}

input, textarea {
background-color: #FFFFFF;
color: #000000;
border: 1px solid #B0E0E8;
}

::-moz-selection { 
background-color: #B0E0E8; 
color: #128DA1; 
}

q { 
font-style: italic; 
}

ul {
list-style: circle;
list-style-position: outside;
}

ol li {
list-style-position: inside;
list-style: lower-roman;
}

/* ---------------------------------------
	Page layout
--------------------------------------- */

#canvas {
width: 90%;
margin: 0 auto;
}

#primary {
width: 77%;
float: left;
}

.two-columns-right #secondary {
width: 22%;
float: right;
}

.two-columns-right #tertiary {
clear: both;
display: none;
}

/* ---------------------------------------
	Header and footer
--------------------------------------- */

#header {
display: none;
}

#footer {
clear: both;
display: none;
}

/* ---------------------------------------
	Navigation
--------------------------------------- */

div.navigation {
text-align: center;
width: 30%;
margin: 0 auto;
padding: 1px 0px;
}

div.navigation li {
display: inline;
padding: 0px 5px;
}

.bottomnav ul {
display: inline;
text-align: center;
margin: 0px;
padding: 0px;
}

li.page-back, li.page-forward {
display: inline;
list-style: none;
padding: 10px;
margin: 0px auto;
text-transform: uppercase;
}

li.page-back a, li.page-forward a{
color: #128DA1;
}

li.page-separator {
display: none;
}

div#entries.hfeed .topnav {
display:none;
}

/* ---------------------------------------
	Recent entries view
--------------------------------------- */

div.entry {
background: #FFF;
margin: 15px;
padding: 20px;
-moz-border-radius: 60px;
border-radius: 60px;
}

div.entry-content { 
margin: 10px 0 0 0;
font-size: 0.75em; 
}

div.entry div.header { 
padding: 0; 
margin: 0 0 10px 0; 
border-bottom: 3px dotted #B0E0E8;
background: #F0F1F2;
border-radius: 40px 40px 0px 0px;
-moz-border-radius: 40px 40px 0px 0px;
}

h3.entry-title { 
margin: 0; 
padding: 10px 20px;
font-style: italic; 
font-size: 1.5em;
line-height: 1.1em; 
font-family: Georgia;
text-transform: lowercase;
letter-spacing: 0px;
}

h3.entry-title a {
border-bottom: 0px !important; 
}

.datetime { 
font: 0.8em Tahoma; 
text-transform: uppercase; 
color: #4EBDCF;
}

.datetime a {
color: #4EBDCF; 
}

.security-public span.datetime {
margin-left: 12px;
}

span.access-filter {
margin-left: 10px;
}

span.access-filter img {
padding-left: 12px;
}

div.entry div.userpic { 
display: inline; 
float: left; 
margin: 10px 10px 10px 0px;
}

div.entry div.userpic img { 
width: 70px; 
height: 70px; 
border: 5px solid #B0E0E8;
border-radius: 5px;
-moz-border-radius: 5px;
}

div.entry div.userpic a { 
border: 0px !important;
}

.metadata { 
margin: 20px 0px 0px 0px;
padding: 0px; 
text-align: right; 
}

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

div.metadata ul li { 
list-style: none; 
font-size: 0.7em; 
font-weight: normal; 
font-family: Tahoma;
color: #707070; 
}

span.metadata-label-location, span.metadata-label-mood, span.metadata-label-music, span.tag-text { 
display: none; 
}

span.metadata-item-location {
padding: 4px 20px 4px 0; 
background: transparent url("http://imgur.com/3tAqt.png") no-repeat scroll 100% 50%;
}

span.metadata-item-music {
padding: 4px 20px 4px 0; 
background: transparent url("http://imgur.com/r3q4w.png") no-repeat scroll 100% 50%;
}

span.metadata-item-mood {
padding: 4px 20px 4px 0; 
background: transparent url("http://imgur.com/OY8wc.png") no-repeat scroll 100% 50%;
}

div.tag {
text-align: right; 
}

div.tag ul { 
padding: 0px 20px 0px 0px; 
background: transparent url("http://imgur.com/akwUn.png") no-repeat scroll 100% 50%;
margin: 0px; 
}

div.tag ul li { 
display: inline; 
list-style: none; 
font-size: 0.7em; 
text-transform: lowercase; 
color: #4EBDCF; 
}

ul.entry-management-links { 
padding: 0; 
margin: 30px 0 0 0; 
text-align:center; 
}

ul.entry-management-links li {
display: inline; 
list-style: none; 
font-weight: normal; 
text-transform: lowercase; 
color: #4EBDCF; 
letter-spacing: 0; 
padding: 0px 5px; 
}

ul.entry-management-links li a {
border-bottom: 0px;
}

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

ul.entry-interaction-links li { 
display: inline; 
list-style: none; 
font-size: 1.2em; 
font-weight: normal; 
font-family: Georgia;
font-style: italic;
text-transform: lowercase; 
color: #4EBDCF; 
letter-spacing: 0; 
padding: 0px 5px; 
}

/* ---------------------------------------
	Comments
--------------------------------------- */

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

div.comment { 
background: #FFF; 
margin: 15px;
padding: 20px;
-moz-border-radius: 60px;
border-radius: 60px;
}

div.comment div.contents { 
margin: 10px 0 30px 0;
}

div.comment-content {
padding: 10px 0px 0px 0px;
font-size: 0.75em;
}

div.comment div.userpic { 
display: inline; 
float: left; 
margin: 10px 10px 10px 0px; 
}

div.comment div.header {
background: #F0F1F2;
border-radius: 40px 40px 0px 0px;
-moz-border-radius: 40px 40px 0px 0px;
border-bottom: 1px dotted #4EBDCF;
}

div.comment-title h4 {
padding: 10px 0px;
margin: 0px 20px;
font-family: Georgia;
font-style: italic;
text-transform: lowercase;
}

div.comment .datetime {
padding: 0px 10px;
}

div.comment div.userpic img { 
width: 70px; 
height: 70px; 
border: 5px solid #B0E0E8;
border-radius: 5px;
-moz-border-radius: 5px;
}

ul.comment-management-links, ul.comment-management-links li {
display: inline;
list-style: none;
padding: 3px;
}

ul.comment-management-links li a {
border-bottom: 0px;
}

ul.comment-interaction-links {
font-family: Georgia;
font-style: italic;
text-transform: lowercase;
list-style: none;
padding: 0px;
margin: 0 auto;
text-align: right;
margin: 0px 10px;
}

ul.comment-interaction-links li {
display: inline;
padding: 0px 5px;
}

#qrformdiv {
padding: 20px 0px;
}

#qrform table {
border: 1px solid #128DA1 !important;
background: #F0F1F2;
font-size: 0.75em;
margin: 0 auto;
}

table.talkform {
border: 1px solid #128DA1;
background: #F0F1F2;
margin: 0 auto;
font-size: 0.75em;
}

div.bottomcomment ul.entry-interaction-links {
margin: 10px 0px;
}

div.bottomcomment ul.entry-interaction-links a {
color: #128DBA;
}

div.bottomcomment {
text-align:center;
}

/* ---------------------------------------
	Modules
--------------------------------------- */

div.module {
background: #FFF;
margin: 15px 0px;
padding: 20px 15px 20px;
-moz-border-radius: 60px;
border-radius: 60px;
}

h2.module-header {
color: #4EBDCF;
font-family: Georgia;
font-size: 1.8em;
font-style: italic;
font-weight: lighter;
letter-spacing: -1px;
text-align: center;
text-transform: lowercase;
border-bottom: 2px dotted #B0E0E8;
margin: 5px 10px;
padding: 0px 0px 3px 0px;
}

h2.module-header a {
color: #4EBDCF;
border-bottom: 0px;
}

div.module-content {
text-align: left;
font-size: 0.75em;
}

div.module-content li {
list-style: circle;
}

div.module-content li a {
color: #000000;
}

div.module-navlinks div.module-content {
background: #FFFFFF;
border-radius: 40px;
-moz-border-radius: 40px;
padding: 10px 0px;
}

div.module-navlinks ul.module-list {
padding: 0px;
}

div.module-navlinks li {
list-style-image: url("http://imgur.com/NyKYo.png");
list-style-position: inside;
padding: 5px 30px;
border-bottom: 2px dotted #B0E0E8;
font-style: italic;
font-family: Georgia;
font-weight: lighter;
letter-spacing: -1px;
color: #4EBDCF;
font-size: 1.5em;
}

div.module-navlinks li a {
text-transform: lowercase;
color: #4EBDCF;
border-bottom: 0px !important;
font-size: 1.5em;
}

div.module-navlinks li a:active, div.module-navlinks li a:hover {
color: #FFB900;
}

div.module-navlinks li:hover {
background: #F0F1F2;
}

div.module-navlinks li:hover a {
color: #FFB900;
}

div.module-userprofile div.module-content {
text-align: center;
}

div.module-userprofile div.userpic img {
width: 70px; 
height: 70px; 
border: 5px solid #B0E0E8;
border-radius: 5px;
-moz-border-radius: 5px;
}

div.module-userprofile div.userpic a { 
border: 0px !important;
}

div.module-userprofile div.journal-name { 
font-family: Tahoma;
font-size: 1.2em;
margin: 5px 0px;
}

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

ul.userlite-interaction-links li {
display: inline;
list-style: none;
}

ul.userlite-interaction-links li a {
border-bottom: 0px;
}

div.manage-tags-link {
text-align: right;
padding: 0px 15px 0px 0px;
text-transform: lowercase;
}

div.module-calendar div.module-content {
font-size: 0.9em;
}

div.module-content table {
text-align: center;
margin: 0px auto;
}

div.module-content td, th {
padding: 3px 7px;
}

div.module-syndicate div.module-content {
text-align: center;
}

div.module-customtext div.module-content {
padding: 0px 20px;
}

/* ---------------------------------------
	Tags view
--------------------------------------- */

body.page-tags div#primary div.inner {
background: #FFFFFF;
border-radius: 60px;
-moz-border-radius: 60px;
margin: 15px;
padding: 20px;
font-size: 0.75em;
}

.tags-container h2 {
color: #128DA1;
font-family: Georgia;
padding: 0px 0px 0px 20px;
}

ul.ljtaglist li {
list-style: circle;
}

ul.ljtaglist li a {
color: #000000;
}

div.tags-container div.manage-tags-link {
font-family: Georgia;
font-style: italic;
text-transform: lowercase;
}

/* ---------------------------------------
	Archive view
--------------------------------------- */

/* 	Year view month by month		  */

body.page-archive div#primary div.inner {
background: #FFFFFF;
border-radius: 60px;
-moz-border-radius: 60px;
margin: 15px;
padding: 20px;
}

body.page-archive div.navigation ul {
margin: 0px;
padding: 0px;
}

body.page-archive div.navigation li {
font-family: Georgia;
font-size: 1.2em;
}

div#archive-year div.navigation div.inner {
margin: 0px;
padding: 0px;
}

div.year {
text-align: center;
}

div.year div.inner {
margin: 10px 0px !important;
padding: 0px !important;
}

div.year div.month div.inner {
margin: 0px !important;
padding: 0px !important;
}

div.year div.month div.header {
font-family: Georgia;
color: #4EBDCF;
font-style: italic;
font-size: 1.2em;
}

div.year table.month {
text-align: center;
margin: 0px auto;
font-size: 0.8em;
}

div.year table caption {
display: none;
}

div.year td {
height: 3em;
line-height: 0.5em;
}

div.year td, th {
padding: 5px 7px;
vertical-align: top;
}

div.year div.month div.footer {
font-family: Georgia;
color: #4EBDCF;
font-style: italic;
font-size: 0.75em;
text-transform: lowercase;
margin: 10px 0px;
}

/* 	Entries per month		  */

body.page-month div#primary div.inner {
background: #FFFFFF;
border-radius: 60px;
-moz-border-radius: 60px;
margin: 15px;
padding: 20px;
}

div#archive-month div.inner {
margin: 0px !important;
}

div#archive-month div.navigation {
width: auto;
height: auto;
margin: 0 auto;
padding: 0;
}

div#archive-month div.navigation ul {
margin: 0px;
padding: 0px;
display: inline;
}

div#archive-month div.navigation li {
font-family: Georgia;
font-size: 1.2em;
display: inline;
}

div#archive-month div.month div.inner {
margin: 0px;
padding: 0px;
}

div#archive-month h3.entry-title {
padding: 10px 0px;
font-size: 1em;
display: inline;
margin: 0px 5px;
}

div#archive-month div.tag {
text-align: left;
}

div#archive-month div.tag ul { 
text-align: left;
padding: 0px 0px 0px 20px; 
background: transparent url("http://imgur.com/akwUn.png") no-repeat;
margin: 0px; 
}

/* 	Day view		  */

h3.day-date {
color: #128DA1;
font-family: Georgia;
padding: 0px 0px 0px 20px;
}

/* ---------------------------------------
	Contextual popup
--------------------------------------- */

div.ContextualPopup {
margin: auto;
text-align: left; 
font-family: Tahoma, Arial, sans-serif;
}

div.ContextualPopup div.Inner {
border: 1px solid #128DA1;
}

div.ContextualPopup .Content {
border: 0px solid #128DA1;
margin: auto;
}

div.ContextualPopup .Userpic {
margin: 5px;
padding: 0px;
border: 5px solid #B0E0E8;
border-radius: 5px;
-moz-border-radius: 5px;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited, div.ContextualPopup div.Inner a:link {
text-decoration: none !important;
color: #4EBDCF !important;
}

/* ---------------------------------------
	Tiny icons
--------------------------------------- */

img[src*="locked.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/rTp6p.png") no-repeat scroll 100% 50%}
img[src*="private.png"]{ height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/PHSvu.png") no-repeat scroll 100% 50%}
img[src*="user.png"]{ height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/Vth7X.png") no-repeat scroll 100% 50%}
img[src*="community.png"]{ height: 0px; width: 0px; padding: 0 0px 16px 16px !important; background: transparent url("http://imgur.com/BaRO5.png") no-repeat scroll 100% 50%}

img[src*="edit.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/pnyfe.png") no-repeat scroll 100% 50%}
img[src*="tag_edit.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/Gxkmd.png") no-repeat scroll 100% 50%}
img[src*="memories_add.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/BS3h8.png") no-repeat scroll 100% 50%}
img[src*="tellafriend.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/YPo1V.png") no-repeat scroll 100% 50%}
img[src*="track.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/axDiU.png") no-repeat scroll 100% 50%}

img[src*="delete.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/40ir3.png") no-repeat scroll 100% 50%}
img[src*="screen.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/pKD4g.png") no-repeat scroll 100% 50%}
img[src*="unscreen.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/dXfsZ.png") no-repeat scroll 100% 50%}
img[src*="freeze.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/1fHNN.png") no-repeat scroll 100% 50%}

img[src*="previous.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/nE2Iv.png") no-repeat scroll 100% 50%}
img[src*="next.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/hSeTl.png") no-repeat scroll 100% 50%}

img[src*="subscription_add.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/OEsFb.png") no-repeat scroll 100% 50%}
img[src*="subscription_remove.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/Ujqa9.png") no-repeat scroll 100% 50%}
img[src*="access_grant.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/arcpc.png") no-repeat scroll 100% 50%}
img[src*="access_modify.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/IE9Ne.png") no-repeat scroll 100% 50%}
img[src*="post.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/iwqgO.png") no-repeat scroll 100% 50%}
img[src*="message.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/88t2r.png") no-repeat scroll 100% 50%}

img[src*="anonymous.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/0hkFt.png") no-repeat scroll 100% 50%}
img[src*="openid.png"] { height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent url("http://imgur.com/TjmtL.png") no-repeat scroll 100% 50%}

Notes:

While all sidebar modules are supported, the layout is designed for having the navigation links as the topmost item on the sidebar. You may want to keep that in mind when you install it.

Sadly, Internet Explorer 8 does not support rounded corners, which I've gratuitously abused in this layout. Sorry, IE users. You can still install the layout, it's just that you won't have the rounded borders. IE9 beta users, though, are good to go.

You may want to save the header image and the tiny icons used to your own webspace just in case. I can't guarantee how long they will be up.

Questions? Ideas? Found a bug or want me to fix something? Don't hesitate to drop a comment! I'm new to making DW layouts, so any recommendations you'd make, especially ones that'd streamline and clean up the code, would be welcome.

Rules:

Please credit sunrisetr or dusktilldawn.

Modify the code at will for personal use, but don't redistribute.

Installation Instructions:

Under Organize, go to the Select Style menu.

Select Tabula Rasa as your layout.

Select Plain as your theme.

Set your Page Layout to 2 Column (Sidebar on Right). This is important, I can't guarantee how the layout will look for you otherwise.

In the Custom CSS page, uncheck "Use layout's stylesheet(s)" .

Copy and paste the code above in the Custom CSS box.

Enjoy!

S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Dusk till Dawn

Random bouts of layoutalicious inspiration

Layout: Dreamwalker (Reply)

Layout: Dreamwalker

Code:

Notes:

Rules:

Installation Instructions:

November 2010

Most Popular Tags

Expand Cut Tags