visualwit | layout 003: Warm Practicality (Transmogrified)

/*-- Warm Practicality (Transmogrified) --*/
/*-- stylesheet by ravenclawbest @ visualwit for DW --*/

/*--- main ---*/

BODY { 
		background-image: url(''); 
		background-color: #ECECEC;
		color: #333333; 
		font-size: 11px; 
		line-height: 160%;
		margin: auto; 
		font-family: arial, sans-serif;
		}

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

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

a:hover {
		color: #767676;
		}

img {
		border: none;
		}

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

input, textarea {
		background-color: #f7f7f7;
		color: #919191;
		border: 1px solid #919191;
		}

::-moz-selection { 
		background: #f7f7f7; 
		color: #5e5e5e; 
		}

blockquote {
		border-left: 15px solid #F7C76D;
		margin: 15px 15px 5px 50px;
		padding: 10px;
		width: 70%;
		}

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

#container {
		margin: auto;
		margin-top: 20px; 
		width: 85%;
		}

#wrap {
		padding: 0px 220px 0px 0px;
		}

#content {
		width: 100%;
		float: left;
		}

/*--- headers ---*/

#header {
		display: none;
		background: #EEAB2D;
		color: #FFFFFF;
		padding: 10px 0px 10px 0px;
		}

#header h1 {
		color: #FFFFFF;
		font-size: 20px;
		}

/*-- header links (recent, tags, etc) --*/

.module-section-one {
		background: #E07160;
		text-align: center;
		letter-spacing: 0.1em;
		font-size: 16px; 
		font-weight: bold; 
		font-variant: small-caps;
		font-family: "Lucida Sans", sans-serif;
		}

.module-section-one ul {
		padding: 15px 0px 15px 0px;
		}

.module-section-one li {
		display: inline;
		list-style: none;
		padding: 10px 10px 10px 10px;
		}

.module-section-one li a {
		color: #FFFFFF;
		}

.module-section-one li a:hover {
		color: #FCED9A;
		}

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

.navigation {
		background: #FFFFFF;
		margin: 0px 10px 0px 0px;
		padding: 10px;
		text-align: left;
		text-transform: uppercase;
		}

.navigation ul {
		
		}

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

.navigation li a {
		color: #EEAB2D;
		}

.navigation .page-back a:before, .navigation .page-forward a:after {
		vertical-align: 40%;
		}

/*--- entries ---*/

.entry, .text_noentries_day {
		background: #FFFFFF;
		padding: 10px;
		position: relative;
		margin-bottom: 20px;
		}

.text_noentries_day {
		margin-top: 20px;
		margin-bottom: 20px;
		}

.entry .userpic a {
		float: right;
		margin: -35px 10px 10px 10px;
		}

.entry .userpic img {
		border: 5px solid #F7C76D;
		}

.entry-title, .entry-title a {
		color: #E07160;
		font-size: 14px; 
		font-variant: small-caps;
		}

.datetime, .datetime a {
		font-size: 10px; 
		text-transform: uppercase;
		}

.entry-poster {
		border-bottom: 1px solid #C2C2C2; 
		display: block;
		margin-bottom: 10px; 
		}

.entry ul li {
		list-style: disc;
		margin-left: 50px;
		padding-left: 0px;
		}

.entry ol li {
		list-style: decimal-leading-zero;
		margin-left: 50px;
		padding-left: 0px;
		}

.entry-wrapper .entry, .text_noentries_day {
		padding: 10px;
		margin-right: 10px;
		border-bottom: 5px solid #C2C2C2;
		}

.entry .footer {
		text-align: center;
		text-transform:uppercase; 
		}

.entry .footer hr {
		display: none;
		}

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

.tag {
		font-size: 10px; 
		color: #4f4f4f;
		text-align: left;
		margin: 10px 0px 10px 0px;
		border-bottom: 1px solid #C2C2C2; 
		}
 
		.metadata-label {
		color: #4f4f4f;
		}

.metadata a, .tag a {
		color: #EEAB2D;
		}

.metadata {
		padding: 5px;
		color: #EEAB2D;
		font-size: 10px; 
		text-align: right;
		margin: 5px 0px 0px 0px;
		text-transform:uppercase;
		border-bottom: 1px solid #C2C2C2; 
		}

.entry .metadata li {
		list-style: none;
		}

.tag ul {
		display: inline;
		}

.tag li, .footer li {
		display: inline; 
		list-style: none; 
		margin-left: 0 !important;
		}

/*--- comments ---*/

.comment {
		background: #FFFFFF;
		padding: 10px;
		position: relative;
		margin-bottom: 20px;
		margin-right: 10px;
		border-bottom: 5px solid #C2C2C2;
		}

.comment-wrapper .comment-title, .comment-wrapper .comment-title a {
		color: #E07160;
		font-size: 14px; 
		font-variant: small-caps;
		}

.comment .userpic a {
		float: right;
		margin: -35px 10px 10px 10px;
		}

.comment .userpic img {
		border: 5px solid #F7C76D;
		}

.comment-poster {
		border-bottom: 1px solid #C2C2C2; 
		display: block;
		margin-bottom: 10px; 
		}

.page-reply .entry-wrapper {
		margin-top: 20px;
		}

#postform {
		border: 1px solid #f4f4f4;
		margin: 20px;
		}

#commenttext {
		width: 80%;
		}

.poster-ip {
		color: #E07160;
		text-transform: uppercase;
		}

#qrdiv table, #qrformdiv table, form #qrform {
		background: #f4f4f4; 
		border: 1px solid #f4f4f4 !important;
		}

.comment .footer {
		margin: 20px 0px 10px 0px;
		padding: 5px 0px 0px 0px;
		border-top: 1px solid #C2C2C2; 
		text-align: center;
		text-transform:uppercase; 
		}

/*--- management links (entries & comments) ---*/

.entry-management-links, .entry-interaction-links, .comment-management-links, .comment-interaction-links {
		text-align: right; 
		display: inline;
		}

.entry-management-links li, .entry-interaction-links li, .comment-management-links li, .comment-interaction-links li {
		display: inline; 
		list-style: none; 
		padding: 5px;
		}

.entry-management-links li a, .comment-management-links li a,
.comment-interaction-links .thread a {
		background-image: url(http://s.dreamwidth.org/stc/transmogrified/permalink.gif);
		background-repeat: no-repeat;
		background-position: 0% 50%;
		padding-left: 14px;
		color: #E07160;
		}

.entry-management-links .edit_entry a, .comment-management-links .delete_comment a,
.comment-management-links .edit_comment a {
		background-image: url(http://s.dreamwidth.org/stc/transmogrified/edit.gif);
		}

.entry-management-links .edit_tags a, .comment-interaction-links .parent a {
		background-image: url(http://s.dreamwidth.org/stc/transmogrified/tag.gif);
		}

.entry-management-links .mem_add a, .entry-management-links .watch_comments a,
.comment-management-links .watch_thread a {
		background-image: url(http://s.dreamwidth.org/stc/transmogrified/memories.gif);
		}

.entry-management-links .link_prev a {
		background-image: url(http://s.dreamwidth.org/stc/transmogrified/previous.gif);
		}

.entry-management-links .link_next a {
		background-image: url(http://s.dreamwidth.org/stc/transmogrified/next.gif);
		}

.entry-interaction-links li a, .entry-management-links .tell_friend a,
.comment-interaction-links li a { 
		background-image: url(http://s.dreamwidth.org/stc/transmogrified/comment.gif);
		background-repeat: no-repeat;
		background-position: 0% 50%;
		padding-left: 14px;  
		display: inline;
		color: #E07160;
		}

.comment-management-links .delete_comment a {
		background-image: url(http://s.dreamwidth.org/stc/transmogrified/delete.gif);
		}

.comment-wrapper- .comment {
		padding: 10px;
		margin-right: 10px;
		border-bottom: 5px solid #C2C2C2;
		}

/*--- modules (aka sidebar) ---*/

.module-section-two {
		float: left;
		width: 220px;
		padding: 0px;
		margin: 0px -220px 0px 0px;
		}

.module-section-two .module {
		background: #FFFFFF;
		padding: 10px 10px 10px 10px;
		margin: 0px 0px 10px 0px;
		border-bottom: 5px solid #C2C2C2;
		}

.module-section-two ul {
		list-style-type: none;
		}

.module-section-two li {
		padding: 2px 0px 5px 5px;
		display: block;
		text-transform: lowercase;
		}

.module-section-two h2 {
		font-size: 14px; 
		color: #E07160;	
		text-align: left;
		font-variant: small-caps;
		border-bottom: 1px solid #C2C2C2;
		}

.module-section-two h2 a, .module-section-two .module-header a {	
		color: #E07160;		
		}

.module-section-two h2 a:hover, .module-section-two .module-header a:hover {
		color: #EEAB2D;
		}

.module-userprofile {
		padding: 0px;
		}

.module-userprofile h2, .module-userprofile p {
		display: none;
		}

.module-userprofile .userpic img {
		border: 5px solid #F7C76D;
		}

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

.module-userprofile ul {
		text-align: center; 
		margin-top: 20px;
		}

.module-userprofile li {
		display: inline; 
		padding: 5px; 
		list-style: none;
		}

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

.module-calendar table {
		width: 85%; 
		margin: auto;
		}

.empty-day {
		padding: 5px;
		}

.entry-day {
		background-color: #EEAB2D; 
		padding: 5px;
		}

.entry-day a { 
		color: #FFFFFF;
		text-decoration: none;
		}

.entry-day a:hover {
		text-decoration:underline;
		}

/*--- footer ---*/

.module-section-three {
		background: #EEAB2D;
		clear: both;
		margin: auto;
		padding: 5px;
		color: #ffffff;
		text-align:center;
		}

.module-section-three a {
		color: #ffffff;
		}

/*--- tag page ---*/

.page-tags #content {

}

.page-tags #content h2 {
		margin-bottom: 10px;
		border-bottom: 1px solid #FCED9A; 
		color: #E07160;
		font-variant: small-caps;
		}

.page-tags #content ul li {
		list-style: disc;
		margin-left: 50px;
		padding: 5px;
		}

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

.page-archive .navigation ul li {

}

.month-wrapper, #archive-month dl {		background: #FFFFFF;
		padding: 10px;
		position: relative;
		margin: 20px;
		}

.month-wrapper h3 {
		background: #FFFFFF;
		border-bottom: 1px solid #CACACA; 
		color: #E07160;
		font-variant: small-caps;
		}

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

.month table th {
		padding: 5px;
		color: #2F615E; 
		text-align: center;
		}

.month caption {
		display: none;
		}

.month .day {
		padding: 5px; 
		border: 1px solid #E5E5E5;
		}

.day-has-entries {
		border: 1px solid #E5E5E5;
		padding: 2px;
		}

.month .day-has-entries {

}

.month .day-has-entries a {
		font-size: 14px;
		}

.day-has-entries p {
		margin: 3px !important;
		text-align: right;
		}

.month .footer {
		width: 100%; 
		text-align: center; 
		margin: auto;
		}

#archive-month dt {
		font-weight: bold;
		}

#archive-month .entry-title {
		display: inline-block;
		padding-left: 5px;
		}

/*-- navigation bar --*/

table#lj_controlstrip td {
		background-color: #ffffff;
		border: 0;
		color: #E07160; 
		}

#lj_controlstrip input {
		background-color: #ffffff;
		border: 1px solid;
		}

#lj_controlstrip a  {
		color: #EEAB2D;
		}

#lj_controlstrip_statustext {
		color: #E07160; 
		}

#lj_controlstrip .ljuser a b {
		color: #E07160; 
		}

#lj_controlstrip_userpic {
		display: none;
		}

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

div.ContextualPopup {
		margin: 10px 0 0 10px;
 		text-align: left; 
		}

div.ContextualPopup div.Inner {
		background: transparent !important;		
		color: #E07160 !important;
		border: 0px;
		padding: 10px;
		width: 280px;
		}

div.ContextualPopup .Userpic {
		margin: 5px 55px 0 0px;
		padding: 5px;
		background-color: #FFFFFF;
		border: 5px #F7C76D solid;
		}

div.ContextualPopup .Content {
		padding: 5px;
		border: 1px #E07160 solid;
		background-color: #ffffff;
		}

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

div.ContextualPopup .Relation {
		color: #E07160;
		}

/*-- paste additional codes below this point --*/

NOTES:
★- I'd shorten the entry management links (something like: "tag", "edit", "share", etc). Optional though.
★- Want to tweak the code (color, font, etc)? Go for it =D

DIRECTIONS:
★- Select Journal Style
★- Select any Transmogrified style layout.
★- 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:

ninetydegrees

Wow! Awesome! Would you post this one to Dreamscapes as well?

arobynsung

Thank you! I'm glad you like it =)
I certainly will later!

acari

I really like the warm colours. I'm trying it out with my journal now. Thanks!

Thank you!

elizaria

I just tried this and it looks very nice. Got that summer feeling to it and everything seems to work just great :)

Thanks for sharing.

Glad it worked for you =)

eumelkeks

What a cool summer-y layout! Well done and thanks for sharing!

tar_feathers

Very nice and easy to use!

Glad to hear it =)

crisporres

Nice, using it right now, thanks for sharing. Love the summer-y feel of it.

Glad you like it =D

tea

This is lovely - perfect for the summery weather! Thanks. :)

Thank you =D

epporsimuove

This is great. I played with it a bit and am now using it. Thanks.

Thank you!
Glad you liked it :)

reflectedlights

Thanks, this looks awesome :D

Thank you1

salientdreams

I love this! Am using it right now and it's all kinds of lovely.

liviapenn

Thanks for this! (I may fuss with the colors just because I prefer cooler/blue-green layouts, but it is very pretty the way it is, and I love the general design of it.)

ziriffic

Thank you so much! I'm using it for one of my communities right now, and it is absolutely gorgeous. ♥

grimorie

Nice layout!

surpassingly

Completely forgot to comment, but-- This is one of my favorite DW layouts ever ♥ Using, with credit. Thank you very much for this!

ce_jour_la

This is lovely! Snagging. :)

gratiela

Thank you for this layout!
Taking & using.

rhivolution

Brilliant, thank you!

bee

This is a wonderful theme. Pretty, with depth and readability. I'm going to play with the colours and fonts so I can use it for my personal DW and my writing comms. Thank you so much for sharing and providing such clear instructions!

bendleshnitz1

Great!! Thanks!!

ex_sunshiny116

Took it, credited! Thank you :)

tabibito

Great layout! Using with credit. ^^

yunnmello

Beautiful! Using :B

sibyllevance

Using it right now :)

I have a few questions though: can I delete some elements? I don't need 'summary of the page' for example or even the calendar or 'active entries'.