dreamscapes | Line Up (TABULA RASA)

Theme || Layout: Line Up (Modernity) || Tabula Rasa
Author:

timeasmymeasure
Layout Submission Type: CSS layout based off Tabula Rasa

Image Preview: http://i52.tinypic.com/200wety.jpg

Image Info: No images

Additional Info: CSS currently only works with "2 column sidebar right" but please feel free to fix that and anything else that needs fixing/changing. The name for this particular color scheme is Modernity.

CSS:

/*-- Line Up (Tabula Rasa) --*/
/*--  select "2 Column (sidebar on right)" --*/
/*-- stylesheet by arobynsung @ visualwit for DW --*/

/*--- main ---*/

* {
		margin: 0px; 
		padding: 0px;
		}

BODY { 
		background-image: url(''); 
		background-color: #f0f0f0;
		color: #323232; 
		font-size: 1em; 
		margin: 30px 0px 0px 0px; 
		font-family: Franklin Gothic Book, sans-serif;
		}

a, a:link, a:visited { 
		color: #db3f3f;
		text-decoration: none;
		}

a:hover {
		color: #2d2d2d;
		}

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

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

::-moz-selection { 
		background-color: #ededed; 
		color: #2d2d2d; 
		}

q { 
		font-style: italic; 
		}

blockquote {
		margin: 10px 10px 10px 50px;
		padding: 5px;
		width: 88%;
		border-top: 5px solid #2d2d2d;
		border-bottom: 5px solid #db3f3f;
		}

ul {
		margin: 5px 0px 5px 15px;
		list-style: square;
		list-style-position: inside;
		}

ol li {
		margin: 5px 0px 5px 15px;
		list-style-position: inside;
		list-style: decimal;
		}

/*--- containers and things ---*/

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

#primary { 
		float: right; 
		margin: 0px;   
		width: 76%; 
		}

/*--- titles ---*/

#header { 
		padding: 10px; 
		background-color: #FFFFFF;   
		margin: 0px 0px 15px 0px; 		
		border-top: 10px solid #db3f3f;
		}

h1#title { 
		font-weight: bold; 
		color: #2d2d2d; 
		font-size: 1.3em; 
		text-transform: uppercase;
		}

h2#subtitle { 
		color: #2d2d2d;
		font-size: 1.23em; 
		font-weight: lighter; 
		text-transform: lowercase;
		}

h2#pagetitle { 
		font-size: 1.21em; 
		display: none; 
		}

/*-- journal navigation --*/

div.module-navlinks { 
		font-size: 1.2em; 
		text-align: right;
		list-style: none; 
		}

div.module-navlinks ul.module-list { 
		text-transform: uppercase;
		}

/*--- sidebar options ---*/

.two-columns-right #secondary { 
		float: left; 
		width: 23%; 
		margin: 0; 
		}

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

.two-columns-right #tertiary .module { 
		float: left; 
		}

/*--- sidebar ---*/

.module { 	
		background-color: #FFFFFF;   
		margin: 0px 0px 15px 0px; 		
		border-top: 10px solid #2d2d2d;
		}

.module-content { 
		padding: 10px; 
		}

h2.module-header {
		background-color: #db3f3f;   
		padding: 3px; 
		margin: 0px 0px; 
		color: #ffffff; 
		font-size: 1.2em; 
		font-weight: normal; 
		text-transform: uppercase; 
		}

h2.module-header a { 
		color: #ffffff; 
		}

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

div.module-content div.userpic img { 
		height: 70px;
		width: 70px;
		padding: 5px; 
		background-color: #2d2d2d;   
		border: 3px solid #db3f3f;
		}

div.journal-name {  
		text-transform: uppercase; 
		margin: 5px 0px 0px 0px; 
		text-align: center; 
 		}

div.journal-website-name { 
		text-transform: uppercase; 
		text-align: center; 
		}

ul.userlite-interaction-links { 
		margin: 5px 0px 0px 0px; 
		list-style: none; 
		text-align: center; 
		}

ul.userlite-interaction-links li { 
		margin: 0px auto; 
		display: inline; 
		list-style: none; 
		text-align: center; 
		}

ul.module-list { 
		list-style: none; 
		}

ul.module-list li { 
		padding: 0px 0px 0px 5px; 
		list-style: none; 
		}

ul.module-list-item { 
		list-style: none; 
		}

ul.module-list-item li { 
		padding: 0px 0px 0px 5px; 
		list-style: none; 
		}

div.manage-tags-link { 
		margin: 10px 0px 0px 0px;
		text-transform: uppercase; 
		text-align: right; 
		}

div.module-calendar table { 
		text-align: center; 
		margin: auto; 
		width: 55%; 
		}

div.module-calendar th { 
		text-transform: uppercase; 
		background-color: #FFFFFF;
		border: 1px solid #2d2d2d; 
		}

div.module-calendar td.empty-day { 
		text-transform: uppercase; 
		background-color: #FFFFFF; 
		border: 1px solid #2d2d2d; 
		}

div.module-calendar td.entry-day { 
		text-transform: uppercase; 
		background-color: #FFFFFF; 
		border: 1px solid #db3f3f; 
		}

/*--- navigation (for entries) ---*/

.navigation { 
		text-align: center; 
		padding: 5px; 
		background-color: #2d2d2d;   
		margin: 0px 0px 15px 0px; 		
		border-top: 10px solid #db3f3f;
		font-size: 1.2em; 
		text-transform: uppercase;
		}

.navigation a{ 
		color: #ffffff;
		}

.page-separator { 
		padding: 10px; 
		}

div.navigation ul { 
		display: inline; 
		}

div.navigation li { 
		display: inline; 
		list-style: none; 
		}

li.page-back, li.page-forward {
		display: inline; 
		list-style: none; 
		}

/*--- entries ---*/

div.entry { 
		margin: 0px 0px 15px 0px;
		background-color: #db3f3f;   
		border-top: 10px solid #2d2d2d;
		}

div.entry div.userpic { 
		float: right; 
		margin: 0px 8px 20px 20px; 
		}

div.entry div.userpic img { 
		padding: 5px; 
		background-color: #FFFFFF;   
		border: 5px solid #2d2d2d;
		}

.userpic {
		min-width: 120px;
		}

div.entry-content { 
		background-color: #FFFFFF;  
		padding: 15px; 
		padding-top: 30px; 
		margin: 0px; 
		margin-right: 140px; 
		margin-top: -10px; 
		}

div.entry div.header { 
		padding: 5px 10px 5px 10px; 
		margin: 0px 0px 5px 0px; 
		margin-right: 140px; 
		background-color: #FFFFFF;  
		}

.entry-poster { 
		background-color: #FFFFFF;  
		padding: 5px;
		margin-top: -5px; 
		float: right; 
		}

h3.entry-title { 
		color: #2d2d2d; 
		text-transform: uppercase; 
		font-weight: normal; 
		}

h3.entry-title a { 
		color: #2d2d2d; 
		}

.datetime {  
		text-transform: uppercase; 
		color: #db3f3f; 
		font-size: 0.75em; 
		}

.datetime a {  
		color: #db3f3f; 
		}

/*--- currents and tags ---*/

.metadata { 
		font-size: 0.85em; 
		padding: 10px 15px 5px 15px; 
		margin: 0px;  
		text-transform: uppercase; 
		margin-right: 140px; 
		background-color: #FFFFFF;  
		}

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

div.metadata ul li { 
		list-style: none; 
		padding: 0px; 
		margin: 0px; 
		}

span.metadata-item-location, span.metadata-item-music, span.metadata-item-mood, div.tag ul  { 
		color: #db3f3f;
		text-align: right; 
		text-transform: uppercase; 
		display: inline; 
		}

.metadata img {
		display: none;
		}

div.tag { 
		font-size: 0.85em; 
		padding: 15px; 
		text-transform: uppercase;
		margin-right: 140px; 
		background-color: #FFFFFF;  
		}

span.tag-text { 
		text-transform: uppercase;
		}

div.tag ul li { 
		text-align: right; 
		display: inline; 
		list-style: none; 
		font-weight: normal; 
		margin: 5px 5px 0px 0px; 
		}

ul.entry-management-links {
		padding: 2px; 
		list-style: none; 
		text-align: center;
		margin: 0px; 
 		margin-right: 140px; 
		background-color: #FFFFFF;  
		}

ul.entry-management-links li { 
		margin: 0px auto; 
		display: inline; 
		list-style: none; 
		text-align: center; 
		}

ul.entry-interaction-links { 
		padding: 2px; 
		text-align: center; 
		margin: 0px; 
		margin-right: 140px; 
		background-color: #FFFFFF;  
		}

ul.entry-interaction-links li { 
		display: inline; 
		list-style: none;  
		font-weight: normal; 
		font-size: 1.152em; 
		color: #2d2d2d; 
		text-transform: uppercase; 
		margin: 0px 5px 0px 0px;
		padding: 0px; 
		}

ul.entry-interaction-links a { 
		color: #2d2d2d; 
		}

li.active { 
		list-style: none; 
		display: inline; 
		margin: 10px; 
		}

/*--- archive page ---*/

.month { 
		padding: 20px; 
		background-color: #FFFFFF; 
		margin: 0px 0px 15px 0px; 		
		border-top: 10px solid #2d2d2d;
		}

table.month { 
		border: 0px solid #db3f3f;
		}

.month table { 
		width: 100%; 
		margin: auto; 
		}

.month caption { 
		display: none; 
		}

.month h3 { 
		color: #2d2d2d; 
		font-size: 1.2em; 
		font-weight: normal;
		text-transform: uppercase; 
		}

.month th { 
		background-color: #2d2d2d; 
		color: #ffffff; 
		margin: 0px 2px; 
		padding: 5px 2px; 
		font-size: 1.15em; 
		font-weight: normal; 
		text-transform: uppercase; 
		border: 1px solid #db3f3f; 
		}

.month td.day { 
		border: 1px solid #db3f3f; 
		font-weight: normal; 
		}

td.day { 
		padding: 10px;
		}

.month td.day-has-entries {
		background-color: #ffffff; 
		font-weight: normal; 
		}

.month td.day-has-entries p { 
		font-size: 1.14em; 
		font-weight: bold; 
		padding: 0px 0px 0px 5px; 
		}

/*--- tags page ---*/

.page-tags .tags-container { 
		background-color: #FFFFFF;
		margin: 0px 0px 10px 0px; 
		border-top: 10px solid #2d2d2d;
		}

.page-tags h2 { 
		padding: 5px 10px 5px 10px; 
		font-size: 1.2em; 
		color: #2d2d2d;
		font-weight: normal; 
		text-transform: uppercase; 
		}

.page-tags .ljtaglist { 
		padding: 10px; 
		}

.manage-tags-link { 
		padding: 10px; 
		}

/*--- comments ---*/

.comment { 
		margin: 0px 0px 15px 0px;
		background-color: #db3f3f;   
		border-top: 10px solid #2d2d2d;
		}

.bottomcomment { 
		background-color: #FFFFFF; 
		padding: 10px; 
		margin: 0px; 
		border-top: 10px solid #2d2d2d;
		}

.comment-content {
 		background-color: #FFFFFF;  
		padding: 15px; 
		padding-top: 30px; 
		margin: 0px; 
		margin-right: 140px; 
		margin-top: -10px; 
		}

div.comment div.header { 
		padding: 5px 10px 5px 10px; 
		margin: 0px 0px 5px 0px; 
		margin-right: 140px; 
		background-color: #FFFFFF;   
		color: #2d2d2d; 
		text-transform: uppercase; 
		}

div.comment div.header a {  
		font-weight: lighter;  
		font-size: 1.15em; 
		color: #2d2d2d; 
		}

.comment-poster { 
		background-color: #FFFFFF;  
		padding: 5px;
		margin-top: -5px; 
		float: right; 
		}

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

textarea.textbox  { 
		width: 80% !important; 
		color: #2d2d2d;
		border: 1px solid #2d2d2d;
		}

.poster-ip { 
		background-color: #FFFFFF;
		float: right; 
		}

div.comment div.userpic { 
		float: right; 
		margin: 0px 8px 20px 20px; 
		}

div.comment div.userpic img { 
		padding: 5px; 
		background-color: #FFFFFF;   
		border: 5px solid #2d2d2d;
		}

div.comment div.footer { 
 		margin-right: 140px; 
		background-color: #FFFFFF; 
		padding: 0px 10px 0px 10px; 
		font-weight: bold; 
		color: #2d2d2d; 
		text-transform: uppercase; 
		}

.comment-management-links ul, .comment-interaction-links ul {
		list-style: none; 
		}

ul.comment-management-links { 
		padding: 2px; 
		text-align: center; 
		margin: 0px; 
		background-color: #FFFFFF;  
		}

ul.comment-management-links li { 
		margin: 0px auto; 
		display: inline; 
		list-style: none; 
		text-align: center; 
		}

ul.comment-interaction-links { 
		padding: 2px; 
		text-align: center; 
		margin: 0px; 
		background-color: #FFFFFF;  
		}

ul.comment-interaction-links li { 
		display: inline; 
		list-style: none;  
		font-weight: normal; 
		font-size: 1.152em; 
		color: #2d2d2d; 
		text-transform: uppercase; 
		margin: 0px 5px 0px 0px;
		padding: 0px; 
		}

ul.comment-interaction-links a { 
		color: #2d2d2d; 
		}

#qrform table { 
		border: 0!important; 
		}
		
		.comment-poster {  
		text-transform: uppercase; 
		}

table.talkform { 
		background-color: #FFFFFF; 
		margin: 0px 0px 10px 0px; 
		padding: 10px; 
		}

/*--- contextual pop-up ---*/

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

div.ContextualPopup div.Inner {
		background-color: #FFFFFF; 	
		color: #2d2d2d!important;
		border: 1px solid #2d2d2d;
		}

div.ContextualPopup .Userpic {
		padding: 3px;
		margin:  5px;
		background-color: #db3f3f;
		border: 2px solid #2d2d2d;
		}

div.ContextualPopup .Content {
		background-color: #FFFFFF; 
		border: 0px solid #2d2d2d;
		margin: auto;
		}

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

div.ContextualPopup .Relation {
		text-transform: uppercase;
		color: #2d2d2d;
		}

/*--- navigation bar ---*/

table#lj_controlstrip td {
		background-color: #FFFFFF; 
		border: 0px solid #FFFFFF;
		border-top: 5px solid #2d2d2d;
		color: #323232;
		text-transform: uppercase;
		font-family: Tahoma, Arial, sans-serif;
		}

#lj_controlstrip input {
		background-color: #FFFFFF;
		padding: 0px 5px 0px 5px;
		color: #323232;
		text-transform: uppercase;
		border: 1px solid #2d2d2d;
		}

#lj_controlstrip a  {
		color: #db3f3f;
		}

Originally posted over here.

Flat | Top-Level Comments Only

I like this very much.

Thank you!

i don't think you've ever made a css layout that i didn't think was completely awesome, but i absolutely love how beautifully balanced this design is. even the blockquote. maybe especially the blockquote.

(we have a thing about good blockquotes in layouts. probably because we use it so much in posting, so we see it all the time.)

Aww, thank you! I'm really glad you like it (and I do have a special place in my css heart for good blockquotes, so I'm really happy you like these) =DD

This is lovely.

Thank you so much :)

This is really pretty. I omfg really want this to be live. Like, now. (Just like almost every other layout you've made, seriously.)

Aww, thank you!!

Hey TAMM,

I've started working on this so here's a link to preview if you wanna have a look:

http://www.dreamwidth.org/customize/preview_redirect?themeid=240357

I have one question so far: would you object to having the profile icon restored to its full size? Shrinking icons by changing width and height only works when you have square icons. Non-standard icons get distorted and, to implement it correctly you need to change the image attributes at the source, the way we're doing it in entries and comments. I feel implementing another option for the profile module would be a bit over the top, though. :)

Also I've realized I had mostly converted For the Bold if you ever wanted to submit it. I think I was intrigued by the sidebar on the right but is actually on the left bit and wanted to see if it would cause unforeseen problems during conversion. Here's a link to the preview as well:

http://www.dreamwidth.org/customize/preview_redirect?themeid=208186

Hello :)
Please feel free to tweak whatever needs tweaking for DW/accessibility/coding reasons. You always do such great work, I trust your judgement.

I'll post for the bold as soon as I get to my desktop. Writing this comment on a mobile device and the typing is annoying :p

Thanks for tackling this!

I read your comment (on my mobile too) but forgot to answer: thank you for being always so accommodating. <3

Sorry for the delay. I've finally found time and energy to finish patching this and it's now up for review. I'll work on For the Bold ASAP. No promises, though. ;)

Edit: This just went in!

Edited 2012-04-04 12:25 (UTC)

Thanks so much for all your work!!!

This is such a well-balanced layout. I used it for awhile as custom CSS, but I'm glad it's getting the "official seal" and that more DW folks will stumble upon it's majesty!

Line Up (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