visualwit | layout 18: alacrity (tabula rasa)

/*-- Alacrity (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: #EDEDED;
		color: #393939; 
		font-size: .95em; 
		margin: 100px 0px 0px 0px; 
		font-family: arial narrow, sans-serif;
		}

a { 
		color: #6B1432;
		text-decoration: none;
		}

a:hover {
		color: #3F3F3F;
		}

.ljuser {
		font-family: impact, sans-serif;
		font-weight: lighter;

}

input, textarea {
		padding: 2px; 
		background-color: #fefefe;
		color: #3F3F3F;
		border: 1px solid #3F3F3F;
		}

::-moz-selection { 
		background-color: #6a6a6a; 
		color: #fefefe; 
		}

q { 
		font-style: italic; 
		}

blockquote {
		background-color: #EAEAEA;
		padding: 8px; 
		margin: 15px 55px 15px 15px; 
		text-align: justify;
		}

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

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

img {

}

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

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

#primary { 
		float: center; 
		margin: 0px;   
		width: ; 
		}

/*--- titles ---*/

#header { 
		padding: 10px;   
		margin: 20px 0px 0px 0px; 	
		}

h1#title { 
		letter-spacing: -0.03em;
		line-height: 55%;
		color: #6B1432; 	
		text-align: right;
		font-size: 3em;
		text-transform: lowercase;
		font-weight: lighter; 
		font-family: impact, sans-serif;
		}

h2#subtitle { 
		color: #6a6a6a; 	
		text-align: right;
		font-size: 2em;
		text-transform: lowercase;
		font-weight: lighter; 
		font-family: impact, sans-serif;

}

h2#pagetitle { 
		display: none; 
		}

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

#secondary { 
		width:  ;  
		}
		
		.two-columns-right #secondary {  
		width: 75%; 
		top: 170px;

position: absolute;
 		z-index: 100px;

margin: 0px 0px 20px 0; 
		}

.page-top { 
		display: none; 
		}

/*--- sidebar ---*/

.module { 
		MARGIN: 5px; 	
		text-align: right; 
		padding: 0px;	
		background-color: #3F3F3F;  
		color: #cdcdcd;  
		}

.module a { 	
		text-align: right;
		color: #fefefe;   
		}

.module-content {
		padding: 10px;

}

h2.module-header {  
		display: none;	
		}

.module-active, .module-search, .module-cuttagcontrols, .module-userprofile, .module-customtext, .module-typelist, .module-tags_list, .module-pagesummary, .module-calendar, .module-syndicate, .module-powered, .module-time, .module-credit {
		height: 150px; 
		overflow: auto; 
		overflow-x: hidden; 
		overflow-y: auto;
		background-color: #3F3F3F;  
		width: 30%; 
 		float: left;
		display: none;   
		}

ul.module-list li { 
		display: inline; 
		margin: 0px 5px 20px 0; 
		list-style: none; 
		padding: 5px 5px 10px 5px; 
		}

.module-navlinks { 
		text-align: left;
		font-size: 0px;
		background-color: #EDEDED;
		position: absolute;
 		top: -115px;
 		z-index: 80px;
		margin: 20px 0px 0px 0px;  
		font-weight: lighter;
		text-transform: lowercase;
		}
		
		.module-navlinks a { color: #EDEDED;}

.module-navlinks ul.module-list {
 		display: inline;
		padding: 0; 
		margin: 0;  
		}

.module-navlinks ul.module-list li { 
		display: inline; 
		margin: 0px 5px 20px 0; 
		list-style: none; 
		padding: 5px 5px 10px 5px; 
		}

.no-navstrip .module-navlinks {
		top: 0;
		}

/*--- navigation links images (from dryicons.com) ---*/

.module-navlinks a[href*=".dreamwidth.org/"] {
		background: transparent url(http://i40.tinypic.com/20h5wd3.jpg) no-repeat scroll 50% 0;
		padding: 0px 0px 65px 65px;
		}

.module-navlinks a[href*="/archive"] {
		background: transparent url(http://i41.tinypic.com/213kcwg.png) no-repeat scroll 50% 0;
		padding: 0px 0px 65px 65px;
		}

.module-navlinks a[href*="/read"] {
		background: transparent url(http://i40.tinypic.com/j0zeps.png) no-repeat scroll 50% 0;
		padding: 0px 0px 65px 65px;
		}

.module-navlinks a[href*="/network"] {
		background: transparent url(http://i39.tinypic.com/34osunk.png) no-repeat scroll 50% 0;
		padding: 0px 0px 65px 65px;
		}

.module-navlinks a[href*="/tag"] {
		background: transparent url(http://i44.tinypic.com/qob05k.png) no-repeat scroll 50% 0;
		padding: 0px 0px 65px 65px;
		}

.module-navlinks a[href*="/memories"] {
		background: transparent url(http://i40.tinypic.com/10r4fm9.png) no-repeat scroll 50% 0;
		padding: 0px 0px 65px 65px;
		}

.module-navlinks a[href*="/profile"] {
		background: transparent url(http://i42.tinypic.com/2eec4si.png) no-repeat scroll 50% 0;
		padding: 0px 0px 65px 65px;
		}

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

.navigation { 
		background-color: #3F3F3F;  
		color: #fefefe;  
		text-align: center; 
		padding: 5px; 
		margin: 0px 0px 0px 0px; 	
		letter-spacing: -0.07em;
		font-size: 1.2em;
		text-transform: lowercase;
		font-weight: lighter; 
		}

.navigation a { 
		color: #fefefe;  
		}

.topnav { 
		display: none; 	
		}

.bottomnav { 
		margin: 0px 0px 0px 0px; 
		background-color: #3F3F3F;
		background-image: url(''); 
		font-size: 1.75em;
		}

.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 ---*/

.entry { 
		background-color: #fefefe;   
		margin: 0px 0px 20px 0px;
		}

.entry .userpic { 
		float: left; 
		margin: 20px 10px 10px -128px; 
		}

.entry .userpic img { 
		background-color: #3F3F3F;
		background-image: url(''); 
		border: 1px solid #2d2d2d;		
		padding: 15px;	
		}

.entry-content { 
		padding: 10px 10px 10px 10px; 
		min-height: 100px; 
		margin: -5px 0px 0px 150px;
		}

.entry .header { 
		background-color: #3F3F3F;
		background-image: url(''); 
		padding: 10px 10px 10px 10px; 
		margin: 0px 0px 10px 0px; 
		text-align: left;
		font-weight: lighter;
		}

.poster { 
		padding: 5px; 
		}

.access-filter, .restrictions { 
		float: right;
		margin-top: -25px; 
		}

.entry-title { 
		color: #fefefe; 
		letter-spacing: -0.07em;
		font-size: 2em;
		text-transform: lowercase;
		font-weight: lighter;
		}

.entry-title a { 
		padding: 3px 5px 5px 5px;
		color: #fefefe; 
		}

.datetime, .datetime a {  
		color: #fefefe; 
		text-transform: lowercase;
		}

.entry .datetime a {  
		color: #3F3F3F; 
		}

.entry .datetime {
		width: 128px;
		text-align: center;
		float: left; 
		margin-top: 175px;
		font-style: italic;
		font-weight: lighter; 
		font-family: georgia, serif;
		color: #3F3F3F; 
		}

.entry .date {
		padding-top: 20px; 
		display: block; 
		width: 128px; 
		}

.entry .time {
		margin-top: -40px;
		display: block;
		width: 128px; 
		font-size: 18pt;
		text-align: center;
		}

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

.metadata { 
		padding: 10px 15px 5px 15px; 
		margin: 0px;  
		text-transform: lowercase; 
		margin-left: 150px; 
		background-color: #fefefe;  
		}

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: #6B1432;
		text-align: right; 
		text-transform: lowercase; 
		display: inline; 
		}

.tag { 
		padding: 15px; 
		text-transform: lowercase;
		margin-right: 0px; 
		background-color: #fefefe;  
		}

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

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: 5px 5px 0px 5px; 
		list-style: none; 
		text-align: right;
		margin: 0px; 
 		margin-right: 0px; 
		background-color: #fefefe;  
		}

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

ul.entry-interaction-links { 
		padding: 5px; 
		text-align: right; 
		margin: 0px; 
		margin-right: 0px; 
		background-color: #fefefe;  
		}

ul.entry-interaction-links li { 
		display: inline; 
		list-style: none;  
		letter-spacing: -0.07em;
		font-size: 1.75em;
		text-transform: lowercase;
		font-weight: lighter;
		margin: 0px 5px 0x 0px;
		padding: 0px; 
		}

ul.entry-interaction-links a { 
		color: #3F3F3F; 
		}

.tag, .entry-interaction-links, .entry-management-links, .comment-interaction-links, .comment-management-links {
		margin-left: 150px; 
		}

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

.month { 
		padding: 0px;
		background-color: #fefefe; 
		margin: 0px 0px 0px 0px; 
		}

table.month { 
		border: 0px;
		padding: 15px; 
		}

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

.month caption { 
		display: none; 
		}

.month h3 { 
		background-color: #3F3F3F;
		background-image: url(''); 
		padding: 10px 10px 10px 10px; 
		padding: 12px; 
		color: #fefefe; 
		letter-spacing: -0.07em;
		font-size: 2em;
		text-align: right; 
		text-transform: lowercase; 
		font-weight: lighter; 
		}

.day-date { 
		background-color: #3F3F3F;  
 		margin: 0px 0px 0px 0px; 
		padding: 5px; 
		color: #fefefe; 
		letter-spacing: -0.07em;
		font-size: 1.5em;
		text-transform: lowercase; 
		font-weight: lighter; 
		}

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

.month th { 
		background-color: #3f3f3f; 
		color: #fefefe; 
		margin: 0px 2px; 
		padding: 5px; 
		font-size: 1.5em; 
		font-weight: lighter; 
		text-transform: lowercase; 
		border: 1px solid #3f3f3f; 
		}

.month td { 
		padding: 15px; 
		border: 1px solid #3f3f3f; 
		}

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

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

.month td.day-has-entries p { 
		text-align: right; 
		font-size: 1.5em; 
		font-weight: lighter; 
		padding: 0px 0px 0px 5px; 
		}

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

.page-tags .tags-container { 
		background-color: #fefefe;
		margin: 0px 0px 0px 0px; 
		}

.page-tags .tags-container h2 { 
		background-color: #3F3F3F;
		background-image: url(''); 
		padding: 10px 10px 10px 10px; 
		color: #fefefe; 
		letter-spacing: -0.07em;
		font-size: 2em;
		text-transform: lowercase; 
		font-weight: lighter; 
		}

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

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

/*--- comments ---*/

.comment { 
		margin: 0px 0px 20px 0px;	
 		background-color: #fefefe;  	
		}

.comment-content { 
		padding: 30px 10px 10px 10px; 
		min-height: 100px; 
		margin: -15px 0px 0px 150px;
		}

.comment-pages {
		background-color: #3F3F3F;
		background-image: url(''); 
		padding: 10px;  
		text-align: center;
		color: #fefefe; 
		}

.comment-pages a {
		color: #fefefe; 
		}

.comment .header { 
		background-color: #3F3F3F;
		background-image: url(''); 
		padding: 10px;  
		margin: 0px 0px 10px 0px; 
		letter-spacing: -0.07em;
		color: #fefefe; 
		text-align: left;
		text-transform: lowercase;
		font-weight: lighter;
		}

.comment-title { 
		color: #fefefe; 
		letter-spacing: -0.07em;
		font-weight: lighter;
		font-size: 2em;
		text-transorm: lowercase;
		}

.comment-title a { 
		color: #fefefe; 
		font-weight: lighter;
		}

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

textarea.textbox  { 
		width: 85% !important; 
		border: 1px solid #3F3F3F;
		}

.poster-ip { 
		background-color: #fefefe;  
		margin-top: 5px;
		display: none; 
		}

.comment .userpic { 
		float: left; 
		margin: 20px 10px 10px 10px; 
		}

.comment .userpic img { 
		background-color: #3F3F3F;
		background-image: url(''); 
		border: 1px solid #2d2d2d;		
		padding: 15px;	
		}

.bottomcomment { 
		background-color: #fefefe; 
		padding: 10px; 
		margin: 0px 0px 0px 0px;	
		}

div.comment div.footer { 
 		margin-right: 0px; 
		background-color: #fefefe; 
		padding: 0px 10px 0px 10px; 
		font-weight: lighter; 
		text-transform: lowercase; 
		}

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

ul.comment-management-links {
		padding: 2px; 
		list-style: none; 
		text-align: right;
		margin: 0px; 
		background-color: #fefefe;  
		}

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

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

ul.comment-interaction-links li { 
		display: inline; 
		list-style: none;  
		letter-spacing: -0.07em;
		font-size: 1.75em;
		text-transform: lowercase;
		font-weight: lighter; 
		margin: 0px 5px 0px 0px;
		padding: 0px; 
		}

ul.comment-interaction-links a { 
		color: #6B1432; 
		}

#qrform table { 
		border: 0!important; 
		}

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

.entry-content, .tag, ul.entry-interaction-links, ul.entry-management-links, ul.comment-interaction-links, ul.comment-management-links {
		background-color: #fefefe;  
		margin-left: 150px; 
		}

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

div.ContextualPopup {
		margin: auto;
 		text-align: left; 
		width: 300px;
		color: #6B1432;
		text-transform: lowercase;
		}

div.ContextualPopup div.Inner {
		background-color: #fefefe; 	
		color: #6B1432!important;
		border: 0px;
		border: 1px solid #3F3F3F;
		}

div.ContextualPopup .Content {
		background-color: #fefefe; 
		border: 0;
		margin: auto;
		}

div.ContextualPopup .Userpic {
		padding: 10px;
		margin:  5px;
		background-color: #3F3F3F;
		background-image: url(''); 
		}

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

div.ContextualPopup .Relation {
		text-transform: lowercase;
		color: #6B1432;
		}

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

#lj_controlstrip_statustext {
		color: #EDEDED;
		}

#lj_controlstrip a  {
		color: #fefefe;
		}

table#lj_controlstrip td {
		background-color: #3F3F3F;
		border: 0px solid #fefefe;
		color: #fefefe;
		text-transform: lowercase;
		}

#lj_controlstrip input {
		background-color: #fefefe;
		padding: 2px; 
		color: #3F3F3F;
		text-transform: lowercase;
		border: 1px solid #3F3F3F;
		}

/*------- mini icons from pinvoke & dryicons.com -------*/

/*-- user icons (community and user) --*/

.ljuser img {  
		width: 0px; 
		height: 0px; 
		background: transparent url(http://i41.tinypic.com/ibifdv.png) no-repeat 0 0 !important;  
		padding: 15px 16px 0px 2px  !important;
 		vertical-align: baseline !important;
		}

.ljuser img[src*="user.png"] { 
		background: transparent url(http://i41.tinypic.com/ibifdv.png) no-repeat 0 0 !important;  
		padding: 15px 16px 0px 2px !important; 
		}

.ljuser img[src*="community.png"] { 
		width: 0;  
		height: 0; 
		background: transparent url(http://i42.tinypic.com/vzde6w.png) no-repeat scroll 0 0 !important; 
		padding: 15px 16px 0px 1px !important; 
		}

.ljuser img[src*="feed.png"] { 
		width: 0;  
		height: 0; 
		background: transparent url(http://i39.tinypic.com/3c7xi.png) no-repeat scroll 0 0 !important; 
		padding: 15px 16px 0px 2px !important; 
		}

NOTES:
★- Navigation icons from dryicons.com
★- No sidebar!
★- Want to tweak the code (color, font, etc)? Go for it =D

DIRECTIONS:
★- Select Journal Style
★- Select any Tabula Rasa style layout.
★- Then select "2 Column (sidebar on right)". This is important.
★- Go to Custom CSS and uncheck the "Use layout's stylesheet(s)" option.
★- Paste code in 'Custom Stylesheet' text box

QUESTIONS?
★- See the Layout FAQ. Otherwise ask here and we'll go from there.
★-

style_system is also available for more CSS help.

Flat | Top-Level Comments Only

From:

silverflight8

It's a beautiful layout! I did want to ask, though: where do you get the images for your icons (like up at the top: home, calendar, profile, etc)?

arobynsung

Thank you!
From dryicons.com. I have a tutorial for the code to switch them here.

Edited ( ) Date: 2012-03-04 05:57 am (UTC)

Thanks!

faere

This layout is gorgeous! I've saved it to my memories and will credit you when used. Thank you so much :)

Thank you!

funkybrewsta

I seem to be having some problems. I set things up as instruction but the icons at the top are doing this funky thing. What should I do?

the usual quick check to get troubleshooting started: did you make sure you have sidebar on right selected?

yep! I even tried to switch it to the left which did work but gave me a constant horizontal scroll bar.

I THINK I GOT IT!
Do you by any chance have the navigation strip disabled?

And there's a discussion on the navstrip over here at

style_system.

It might also be worth posting a new entry asking how to modify this layout without the navstrip as unfortunately that CSS knowledge is beyond amateur-me.

Indeed I do have it turned off. Ah well. I'll post there later today and see if I get anything. Thanks!

aetherna

Thank you so much for this theme! Looks nice and beautiful. :3

surpassingly

I'm using this on one of my communities and crediting you -- thank you so much!

Visual Wit

★ Robyn's Graphics & Things ★

layout 18: alacrity (tabula rasa)

layout 18: alacrity (tabula rasa)

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Great theme!

no subject

Profile

January 2015

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags