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.

Threaded | Top-Level Comments Only

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

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

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

Thank you!

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 =)

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

Very nice and easy to use!

Glad to hear it =)

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

Glad you like it =D

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

Thank you =D

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

Thank you!
Glad you liked it :)

Thanks, this looks awesome :D

Thank you1

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

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.)

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

Nice layout!

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

This is lovely! Snagging. :)

Thank you for this layout!
Taking & using.

Brilliant, thank you!

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!

Great!! Thanks!!

Took it, credited! Thank you :)

Great layout! Using with credit. ^^

Beautiful! Using :B

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'.

Oh yeah! You can remove those in the modules section of your customization page =)
Just uncheck whatever you don't want.

Stunning layout, I'm using it, thank you :)
I shall be crediting you of course!

Thank you so much!

Lovely! Will credit! :)

Is there any way to add a header to this layout? I would really love to use one.

layout 003: Warm Practicality (Transmogrified)

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

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

no subject

no subject

no subject

no subject

no subject