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

That's gorgeous!

It's really gorgeous, great colors, and I love how you handled the sidebar, especially the navigation links. I'm also a fan of justified text, which I know is not the style now, but it always looks better to me unless the entry area is very narrow. And you've used very readable color combinations, which is very important to me with my current eye problems.

I'll probably snoop in your CSS for tips. What would you think about extending the pattern over the user icon? I think that would look a little more unified.

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!

Oh, it's so pretty! I love the soft color scheme, and the design is very elegant. I'm going to second the comment about possibly extending the header to include the userpic, though -- it seems a little odd to my eye otherwise.

Thanks so very much *blush*

How do you feel about this, as far as the header goes?

You work fast! That fixes any problems I had with it, yep. :Db

Thanks for your input! The CSS for that is here, in case you're interested. :)

Oh wow, lovely!

Kudos for making such a gorgeous layout!

using it now, very cool, thanks

Beautiful! Thanks! :)

Layout: Let It Enfold You (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

no subject


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