dreamwidthlayouts | Layout: Let It Enfold You (Tabula Rasa)

Entry tags:

Layout: Let It Enfold You (Tabula Rasa)

Title: Let It Enfold You
Credit to:

dusktilldawn
Base style: Tabula Rasa
Type: Full layout, CSS
Best resolution: Variable width
Tested in: IE, Firefox
Features: Has custom comment pages. Fluid width entries, fixed width sidebar.

Now with tweaked version after feedback! Click the images for larger previews.


v1: Userpic outside, smaller content column	v2: Userpic inside, larger content column

Code and instructions are here at

dusktilldawn.

Enjoy!

Flat | Top-Level Comments Only

Thank you so much! It's really great to know the positives and the negatives. If something in the CSS is weird or hard to understand, let me know.

I'll experiment with extending the header. Do you think it would be better if the userpic was "inside" the entry content (so the content column would be wider, if you get my drift), or just if the header was extended over the userpic "column"?

I'm always a fan of keeping the entry content as large as possible, because my journals are always about posting fic. But I think I'm an iconoclast; most other journals I see don't do that.

I'm playing with your CSS right now on one of my other journals. Heh, heh. I think it's very clean and organized, which is a big plus.

I'm a fan of keeping the entry content large too, but I think that's just because I tend to be long-winded, and so do my friends! Tiny content columns don't feel like they encourage writing lots.

So happy that you think the code is organized, to me it felt like one huge mess at points!

As for the header, how do you feel about this? Larger column for content + inline userpic.

Yes! That's really beautiful, I think.

Here's the CSS for it! :) Thanks again for your input.

/* ---------------------------------------
/* theme: let it enfold you
/* author: sunrisetr @ dreamwidth
/* 
/* Based on the Plain Tabula Rasa theme.
/* Please credit sunrisetr @ dreamwidth
/* somewhere on your journal or profile.
/* 
/* Resources: Pink Cotton
/* http://www.colourlovers.com/pattern/
/* 392256/Pink_Cotton
/*
/* Feel free to modify as you wish for
/* your personal use. Redistributing is
/* forbidden.
/*
/* Edited to use inline userpics instead
/* of a column.
--------------------------------------- */

/* ---------------------------------------
	The basics
--------------------------------------- */

body {
background:none repeat scroll 0 0 #F8F3E5;
color:#2D231C;
font-family:Helvetica,sans-serif;
font-size:0.875em;
line-height:1.2em;
margin: 60px 0;
}

hr {
color:#2D231C;
}

code, kbd, pre, tt, textarea {
font-family: monospace;
}

textarea {
background-color: #F8F3E5;
color: #2D231C;
border: 1px solid #2D231C;
padding: 5px;
}

blockquote {
width: 70%;
border: 1px dashed #2D231C;
background-color: #F8F3E5;
color: #6B5344; 
margin: 15px 15px 15px 100px;
padding: 15px;
}

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

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

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

#canvas {
margin:0 auto;
text-align:justify;
width:75%;
}

#primary {
background: #F8F3E5;
}

.two-columns-left #secondary, .three-columns-sides #secondary {
float:left;
margin-left:-15em;
width:15em;
background: #6B5344;
text-align: right;
}

.page-entry #primary .entry .header {
border-bottom: 2px dashed #EB6F6F;
}

#secondary > .inner:first-child {
padding:0;
}

#tertiary {
display: none;
}

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

#header {
background:url("http://i.imgur.com/T4iE2.png") repeat scroll 0 0 transparent;
border:2px dashed #2D231C;
height:40px;
text-align:right;
}

h1#title, h2#subtitle, h2#pagetitle {
display: none;
}

#footer {
background: #F8F3E5;
float: right;
text-align: right;
width: 77.3%;
}

#footer a {
text-transform: uppercase;
font-size: 12px;
}

#footer a, a:link, a:visited, a:active,
.footer .tag a, a:link, a:visited, a:active {
font-family: Helvetica !important;
font-style: normal;
}

/* ---------------------------------------
	Link styling
--------------------------------------- */

#primary a, a:link, a:visited, a:active {
font-style: normal;
}

#secondary a, a:link, a:visited, a:active {
font-family: Helvetica !important;
font-style: normal;
}

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

h3.entry-title {
font-size: 25px;
letter-spacing: -1px;
text-transform: lowercase;
text-shadow: 1px 1px 1px #A79C8E;
line-height: 1.1em;
}

h3.entry-title a, a:link, a:active, a:hover, a:visited {
text-decoration: none;
color: #EB6F6F;
padding: 0;
text-transform: lowercase;
font-style: normal;
font-family: Georgia !important;
}

.entry .header {
border-bottom: 2px dashed #EB6F6F;
}

.datetime, .datetime .date a {
color: #2D231C;
font-family: Georgia !important;
font-size: 11px;
letter-spacing: -1px;
line-height: 1.5em;
}

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

div.entry div.userpic img { 
width: 70px; 
height: 70px; 
border: 5px solid #6B5344; 
}

.entry-content {
padding: 15px 0px 20px;
border-top: 2px dashed #F1BBBA;
font-size: 12px;
}

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

.entry-content a, a:link, a:visited, a:active {
text-decoration: none;
font-family: Helvetica !important;
color: #EB6F6F;
}

.entry-content a:hover {
border-bottom: 1px dotted #EB6F6F;
}

#primary .separator-after {
background: url("http://i.imgur.com/T4iE2.png");
width: 400px;
margin: 0 auto 20px auto;
height: 2px;
border: 1px dashed #2D231C;
}

.entry-management-links {
text-align:center;
}

.entry-interaction-links {
text-align:right;
}

.entry-interaction-links .entry-permalink {
display:none;
}

ul.entry-interaction-links a {
font-family: Georgia !important;
font-size: 16px;
font-style: italic !important;
}

ul.entry-interaction-links a:hover {
border-bottom: 1px dotted;
}

.metadata {
font-family:Helvetica;
font-size: 10px;
line-height:1em;
}

.metadata .metadata-label {
font-weight:bold;
}

.footer .tag, .footer .tag a {
font-family:Helvetica;
font-size:10px;
font-weight:bold;
line-height:1em;
}

.footer .tag a:hover {
border-bottom: 1px dotted;
}

/* ---------------------------------------
	Sidebar
--------------------------------------- */

h2.module-header {
color:#F1BBBA;
font-family:Helvetica;
font-size:13px;
font-weight:lighter;
letter-spacing:1px;
text-align:center !important;
text-transform:uppercase;
border-bottom: 1px dashed !important;
}

h2.module-header a {
color:#F1BBBA;
font-family:Helvetica;
font-size:13px;
font-weight:lighter;
letter-spacing:1px;
text-align:center;
text-transform:uppercase;
}

/* ---------------------------------------
	Sidebar main browsing
	links styling
--------------------------------------- */

div.module-navlinks ul.module-list { 
padding: 0; 
margin: 0; 
list-style: none;
color: #F1BBBA;
}

div.module-navlinks ul.module-list li {
border:2px outset #2D231C;
color:#F1BBBA;
line-height:1.2em;
list-style:none outside none;
margin:0;
padding:5px 10px;
}

div.module-navlinks ul.module-list a {
color:#F1BBBA;
font-family:Helvetica;
letter-spacing:1px;
text-transform:uppercase;
font-size: 12px;
}

div.module-navlinks ul.module-list li:hover {
border: 2px outset #857D71;
color:#EB9F9F;
background: #A79C8E;
}

div.module-navlinks ul.module-list li:hover a {
color:#EB6F6F;
font-family:Helvetica;
letter-spacing:1px;
text-transform:uppercase;
font-weight:500;
}

/* ---------------------------------------
	Other sidebar modules
--------------------------------------- */

.module-calendar, .module-tags_list, .module-pagesummary, .module-userprofile, .module-syndicate,
.module-customtext, .module-typelist {
border:2px outset #2D231C;
padding: 5px 10px;
font-family: Helvetica;
font-size: 12px;
}

.module-tags_list .module-content, .module-pagesummary .module-content, .module-userprofile .module-content, .module-syndicate .module-content, .module-customtext .module-content, .module-typelist .module-content {
padding: 5px 10px;
}

.module-tags_list .module-content .manage-tags-link {
display: none;
}

.module-tags_list ul, .module-pagesummary ul, .module-typelist ul {
text-align: left;
list-style-type: circle;
}

.module-calendar .module-content a:hover, .module-tags_list ul a:hover, .module-pagesummary ul a:hover,
.module-typelist ul a:hover  {
border-bottom: 1px dotted;
}

.module-calendar table {
margin:5px auto;
text-align: right !important;
}

.module-calendar table td {
padding: 2px;
}

.module-content img {
border:5px solid #A79C8E;
}

.module-content ul img {
border:0px;
}

.journal-name {
color:#EB6F6F;
}

.module-customtext {
text-align:left;
}

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

/* ---------------------------------------
	Single-entry page view
	and comment settings
--------------------------------------- */

.page-entry .entry-content {
border-top: 0px !important;
}

.page-entry .entry .contents {
border-top: 2px dashed #F1BBBA;
padding-top: 10px;
}

#comments .separator { 
display:none; 
}

.comment .header {
padding-bottom: 5px;
}

.comment-title a {
font-size: 16px;
font-weight: bold;
font-family: Georgia !important;
}

.comment-title a:hover {
border-bottom: 1px dotted;
}

.comment .userpic {
display: block; 
float: left; 
padding-bottom: 10px;
padding-right: 10px; 
}

.comment .userpic img { 
width: 70px; 
height: 70px; 
border: 5px solid #6B5344;
background: #F8F3E5;
}

.comment-content {
padding-top: 10px;
border-top: 1px dashed #6B5344;
font-size: 12px;
padding-bottom: 20px;
}

ul.comment-management-links {
display:inline;
text-align:left;
}

ul.comment-interaction-links {
display:block;
text-align:right;
}

ul.comment-interaction-links a {
font-style:italic !important;
font-family: Georgia !important;
}

ul.comment-interaction-links a:hover {
border-bottom: 1px dotted;
}

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

.page-top {
display:none;
}

div.navigation {
text-align:center;
}

div.navigation ul a {
font-family:Helvetica !important;
text-transform:uppercase !important;
color:#EB6F6F !important;
}

div.navigation ul a:hover {
border-bottom: 1px dashed;
}

/* ---------------------------------------
	Various archive views
--------------------------------------- */

div#archive-year .separator {
display:none;
}

table.month { 
border-top: 1px dashed #EB6F6F;
padding-top: 16px;
}

table.month td, table.month th { 
border: none;
padding: 3px !important;
vertical-align:top;
text-align:left;
}

.month caption { 
display: none; 
}

.month-wrapper .header {
text-align:center;
color: #EB6F6F;
text-transform:uppercase;
}

.month-wrapper .footer {
text-align:center;
margin-top:0px;
margin-bottom:20px;
font-size:11px;
}

.month-wrapper .footer a {
font-style:italic !important;
font-family:Georgia !important;
}

h3.day-date {
text-transform:uppercase;
}

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

.tags-container h2 {
color: #EB6F6F;
text-transform: uppercase;
border-bottom: 1px dashed;
font-size: 16px;
}

.tags-container ul {
list-style: circle;
}

.tags-container ul a {
font-family: Helvetica !important;
color: #2D231C;
font-size: 12px;
}

.tags-container ul a:hover {
border-bottom: 1px dotted;
}

.tags-container h2 {
color: #EB6F6F;
text-transform: uppercase;
border-bottom: 1px dashed;
}

.tags-container .manage-tags-link a {
font-size: 11px !important;
font-style: italic !important;
font-family: Georgia !important;
}

I love this layout, too--the colors are gorgeous! But I also second the idea that I would like to see the userpic inside the entry content, and then the content column were wider.

Mem'ing this, as I would love to use it shortly!

Flat | Top-Level Comments Only

Layout: Let It Enfold You (Tabula Rasa)

no subject

no subject

no subject

no subject

no subject

no subject