style_system | Transmogrified layout customization

Hello, I was hoping you'd be able to help me customize this layout further since the layout maker wasn't able to help. Once it's done, the layout will be changed significantly. I'm having trouble figuring some things out.

- There's a blank space to the right of the entries and I can't find out what's causing it. I changed the body background color so that it can be seen better.

- I originally thought I would need to change the width of the entries, and the maker suggested changing the following piece of code:

#content {
margin: 0 0;
position: relative;
width: 80%;
float: right;
padding-bottom: 20px;
}

from 80% to 100%, but that pushes the entries to the right and sidebar down. Entries are also narrower on the comment pages and I would like to at least reduce the size of the comments. I'm viewing this on my laptop and 1280x768 resolution, but would like the layout to work on a 1024x768 and 1289x1024 resolutions as well.

- The original css has even and odd entry and comment wrapper etc; are these necessary or redundant??

- I'd like to be able to style the multilevel tags which are not styled in the css, but was unable to find the proper ids/classes; it might be I just don't know where to search.

- Userpics don't look quite as intended in the original, which doesn't have Previous/Next links; since I do, they overlap and I had to lower them down. They really bother me, especially in the comments! I'd much rather have them inside the upper right corner.

- And I'd like to remove the underline for entry management links, as well as tags (both in entries and sidebar, but have a dotted underline for links in actual entries.

Original CSS:

* { box-sizing:border-box; -moz-box-sizing:border-box }

body {
        background-color: #FFFFFF;
        background-image: url('http://img24.imageshack.us/img24/7325/36642049.png');
background-repeat: repeat-x;
background-position: top-left;
background-attachment: scroll;
        font-family: Verdana;
        font-size: 10pt;
        margin: 0;
        padding: 0;
    }

h2 {
font-size: 14px;
color: #50717D;
}

blockquote {
background: #D9EAED;
color: #666666;
border: 4px solid #CFE0E6;
padding: 3px;
}

#container {
        width: 100%
        background-color: transparent;
    }

/* ---------------------------------
HEADER IMAGE: TO CHANGE THE HEADER, REPLACE THE IMAGE URL WITH YOUR OWN.
---REMEMBER TO ALSO CHANGE THE HEIGHT NUMBER IN PIXELS TO THE HEIGHT OF YOUR HEADER!!---
------------------------------------ */

#header {
        width: 100%
	background-color: transparent;
        background-image: url('http://img12.imageshack.us/img12/18/headerztm.png');
background-repeat: no-repeat;
background-position: top-left;
background-attachment: scroll;
        height: 296px;
	color: #333333;
	margin: 0;
        padding: 0;
	}

#header a {
	color: #90AEB9;
        font-style: italic;
        font-family: Georgia;
        font-weight: normal;
        text-decoration: none;
    }

#header h1 {
        margin: 0px;
	padding: 242px 0 0 290px;
	color: #90AEB9;
        font-style: italic;
        font-family: Georgia;
        font-weight: normal;
        text-decoration: none;
	}

#header h2 {
		padding: 0 20px 20px 20px;
	}

#wrap {
        margin: 0 auto;
        background: transparent;
        width: 80%;
	}

#content {
	margin: 0 0;
        position: relative;
        width: 80%;
        float: right;
        padding-bottom: 20px;
     }

.page-tags #content{
	    border: 0px solid #739adf;
        padding: 10px;
        margin-top: 10px;
    }

.page-tags #wrap {
        margin: 0 auto;
        background: transparent;
        width: 80%;
	}
    
/* SIDEBAR */

.module-section-two {
        position: relative;
        width: 200px;
        float: left;
        /* this must stay at the bottom of this code as in some circumstances
        it closes one declaration and opens another one */
        margin-left: -50px;
    }

.module-section-two .module {
        border: solid 0px #CFE0E6;
        color: #666666;
        background-color: #ffffff;
        margin: 20px;
        margin-left: 2px;
        padding: 10px;
        
    }

.module-section-one li {
        display: inline;
        list-style: none;
    }
    .module-section-one ul {
        background-color: #CFE0E6;
        color: #90AEB9;
        margin: 0;
        padding: 0.5em 20px;
    }

.module-section-one li a {
        text-decoration: none;
        padding-top: 0.5em;
        padding-right: 20px;
        padding-bottom: 0.5em;
        padding-left: 20px;
        background-color: #CFE0E6;
        color: #90AEB9;
    }

.module-section-one ul li a:hover, .module-section-one ul li.active a {
        background-color: #FFFFFF;
        color: #90AEB9;
    }

.module-section-two a {
        color: #90AEB9;
    }
    .module-section-two .module-header a {
        text-decoration: none;
    }
    .module-section-two h2 {
	margin: 0;
        margin-bottom: 7px;
	font-size: 13px;
        font-family: Georgia;
        font-weight: normal;
	padding: 0.2em;
	background-color: #FFFFFF;
	color: #90AEB9;
	border: 1px solid #CFE0E6;		
	}

.module-section-two ul {
		list-style-type: none;
		margin-left: 0.5em;
		padding: 0;
	}
	.module-section-two ul ul {
		list-style-type: none;
		margin-left: 0.5em;
		padding: 0.5em;
	}

.module-userprofile .userpic img {
        border: none;
        margin: 2px;
    }
    .module-userprofile .userpic {
        text-align: center;
    }
    .module-userprofile ul {
        margin: 0px;
        padding: 0px;
        text-align: center;
        margin-top: 5px;
    }
    .module-userprofile p {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .module-userprofile li {
        display: inline;
        padding: 5px;
        list-style: none;
    }
    .module-calendar {
        text-align: center;
    }
    .module-calendar table {
        margin-left: auto;
        margin-right: auto;
    }
    .entry {
    width: 500px;
}

.entry, .comment, .text_noentries_day {
        padding: 10px;
        margin-top: 46px;
        position: relative;
        margin-bottom: 10px;
    }
    .entry .userpic a, .comment .userpic a {
        display: block;
        position: absolute;
        right: -100px;
        top: -46px;
        padding: 5px;
    }
    .entry .userpic img, .comment .userpic img {
        border: none;
    }
    .entry-title {
        padding: 0.2em;
        margin-top: -10px;
        margin-right: 0px;
    }

.comment-title {
        padding: 0.2em;
        margin-right: 120px;
    }

.entry-title a, .comment-title a {
        text-decoration: none;
    }

.entry-wrapper-odd .entry, .comment-wrapper-odd .comment, .text_noentries_day {
        border: solid 0px #739adf;
        background-color: transparent;
        color: #666666;
    }
    .entry-wrapper-odd .userpic a, .comment-wrapper-odd .userpic a {
        background-color: #cfe0e6;
        border: solid 0px #739adf;
    }
    .entry-wrapper-odd .entry-title, .comment-wrapper-odd .comment-title {
        border: solid 0px #739adf;
        color: #1f558b;
        background-color: #cfe0e6;
        font-family: Georgia;
        font-size: 16px;
        font-weight: normal;
    }
    .entry-wrapper-odd .entry-title a, .comment-wrapper-odd .comment-title a {
        color: #1f558b;
        font-family: Georgia;
        font-size: 16px;
        font-weight: normal;
    }
    a, .entry-wrapper-odd a, .comment-wrapper-odd a {
        color: #1f558b;
    }

.entry-wrapper-even .entry, .comment-wrapper-even .comment {
        border: solid 0px #739adf;
        background-color: #ffffff;
        color: #666666;
    }

.entry-wrapper-even .userpic a, .comment-wrapper-even .userpic a {
        background-color: #cfe0e6;
        border: solid 0px #739adf;
    }

.entry-wrapper-even .entry-title, .comment-wrapper-even .comment-title {
        border: solid 0px #739adf;
        color: #1f558b;
        background-color: #cfe0e6;
        font-family: Georgia;
        font-size: 16px;
        font-weight: normal;
    }
    .entry-wrapper-even .entry-title a, .comment-wrapper-even .comment-title a {
        color: #1f558b;
        font-family: Georgia;
        font-size: 16px;
        font-weight: normal;
    }

.entry-wrapper-even a, .comment-wrapper-even a {
        color: #1f558b;
    }

.entry .time, .entry .date {
        padding: 0.2em;
        display: inline-block;
    }
    .entry-content, .comment-content {
        padding: 10px 0px;
    }
    .tag {
        font-weight: bold;
        text-align: left;
    }
    .tag a {
        font-weight: normal;
    }
    .tag ul { display: inline; margin: 0; padding: 0; }

.tag li {
        display: inline;
        list-style: none;
        padding: 0px;
    }
    .tag li:before {
        content: ", ";
    }
    .tag li:first-child:before {
        content: " ";
    }
    *+html .tag li {
        padding: 0 5px;
    }

.entry .metadata ul {
        margin: 0px;
        padding: 0px;
    }
    .entry .metadata li {
        list-style: none;
    }
    .entry .footer .inner, .comment .footer .inner {
        text-align: right;
    }
    .entry .footer a {
        white-space: nowrap;
    }
    .entry-management-links, .entry-interaction-links, .comment-management-links, .comment-interaction-links {
        text-align: right;
        margin: 0;
        padding: 0;
        display: inline;
    }
    .entry-management-links li, .entry-interaction-links li, 
    .comment-management-links li, .comment-interaction-links li {
        display: inline;
        list-style: none;
        margin: 0;
        padding: 5px;
    }
    /* lets have a default */
    .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;
    }

.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 {
        background-image: url(http://s.dreamwidth.org/stc/transmogrified/memories.gif);
display: none;
    }

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

.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,
    .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;
    }

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

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

.entry .footer hr {
        display: none;
    }

.entry .metadata-label {
        font-weight: bold;
    }
    .comment-poster {
        display: inline-block;
        min-width: 40%;
    }

#content > hr { display: none; }

.module-section-three {
        clear: both;
        width: 100%;
        background-color: #CFE0E6;
        color: #FFEBA6;
        margin: 0;
        padding: 0.5em 0px;
    }
    .module-section-three a {
        color: #ffffff;
    }
    .module-section-three .module {
        padding-left: 20px;
    }

.hfeed .navigation {
    }

.navigation {
		margin: 0;
		padding: 10px;
		text-align: center;
		border: 0px solid #739adf;
		background-color: #ffffff;	
		color: #000000;	
	}

.navigation ul {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .navigation li {
        display: inline;
        padding: 0 5px;
    }
    .navigation .page-back a:before {
        content: "<<  ";
        font-size: 0.5em;
        letter-spacing: 0px;
        vertical-align: 40%;
        padding-right: 1px;
    }
    .navigation .page-forward a:after {
        content: " >>";
        font-size: 0.5em;
        letter-spacing: 0px;
        vertical-align: 40%;
        padding-left: 1px;
    }

.page-tags #content h2 {
        padding: 0.2em;
        margin: 0;
        border: solid 1px #739adf;
        color: #1f558b;
        background-color: #9FBAC4;
        font-size: 1.2em;
        margin-bottom: 20px;
        font-size: 16px;
        font-family: Georgia;
        font-weight: normal;
    }

.page-tags #content h2 {
        margin-right: 10px;
    }

.month-wrapper, #archive-month dl {
        padding: 10px;
        position: relative;
        margin: 20px 0px;
        border: solid 0px #739adf;
        background-color: #ffffff;
    }

.month-wrapper h3 {
        padding: 0.2em;
        margin: 0;
        border: solid 1px #739adf;
        color: #1f558b;
        background-color: #9FBAC4;
        font-size: 16px;
        margin-bottom: 20px;
        font-family: Georgia;
        font-weight: normal;
    }

.month caption {
        display: none;
    }
    .month .day span, .month .day p {
        padding: 0;
        margin: 0;
    }
    .month .day p {
        margin-top: 4px;
        margin-bottom: -4px;
    }
    .month .day, .month th {
        line-height: 2em;
        vertical-align: text-top;
        padding: 5px;
        text-align: center;
    }
    /* IE only to line up the empty days neatly */
    *+html .month .day span, *+html .month th span{
        vertical-align: 100%;
    }
    .month .day-has-entries {
        line-height: 1em;
    }
    .month .footer {
        width: 250px;
        text-align: center;
        margin: 10px 0px;
    }

#postform {
        margin-top: 20px;
        border: solid 1px #CFE0E6;
    }

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

#archive-month dt {
        font-weight: bold;
    }
    #archive-month .entry-title {
        font-size: 10pt;
        display: inline-block;
        padding-left: 5px;
    }

Customized:

/* Cleaned CSS: */

/* Made by http://inconformista.dreamwidth.org/1389.html */

* { box-sizing:border-box; -moz-box-sizing:border-box }

body {
        background: #EFEFEF url(http://img24.imageshack.us/img24/7325/36642049.png) repeat-x scroll 0 0;
        font-family: Verdana;
        font-size: 10pt;
        margin: 0;
        padding: 0;
    }

h2 {
font-size: 14px;
color: #50717D;
}

blockquote {
background: #D9EAED;
color: #666666;
border: 4px solid #CFE0E6;
padding: 3px;
}

#container {
        width: 100%
        background-color: #EFEFE0;
    }

.module-customtext {
	position: absolute;
	width: 550px;
        text-align: justify;
        background-color:#ffffff;
        border:1px solid black;
        /* for IE */
        filter:alpha(opacity=60);
        /* CSS3 standard */
        opacity:0.6;
	margin: -270px 25px 0 425px;
	padding: 5px;
}

#header a {
	color: #90AEB9;
        font-style: italic;
        font-family: Georgia;
        font-weight: normal;
        text-decoration: none;
    }

#header h1 {
        margin: 0px;
	padding: 250px 0 0 290px;
	color: #90AEB9;
        font-style: italic;
        font-family: Georgia;
        font-weight: normal;
        text-decoration: none;
	}

#header h2 {
		padding: 0 20px 20px 20px;
	}

#wrap {
        margin: 0 auto;
        background: #EFEFE0;
        width: 80%;
	}

#content {
	margin: 0 0;
        position: relative;
        width: 80%;
        float: right;
        padding-bottom: 20px;
     }

.page-tags #content{
	    border: 0px solid #739adf;
        padding: 10px;
        margin-top: 10px;
    }

.page-tags #wrap {
        margin: 0 auto;
        background: transparent;
        width: 80%;
	}

/* SIDEBAR */

.module-section-one li {
        display: inline;
        list-style: none;
    }
    .module-section-one ul {
        background-color: #CFE0E6;
        color: #90AEB9;
        font-family: Georgia;
        font-size: 18px;
        font-style: italic;
        margin: 0;
        padding: 0.5em 20px;
    }

.module-section-one ul li a:hover, .module-section-one ul li.active a {
        background-color: #FFFFFF;
        color: #90AEB9;
    }

.module-section-two ul {
		list-style-type: none;
		margin-left: 0.5em;
		padding: 0;
	}
	.module-section-two ul ul {
		list-style-type: none;
		margin-left: 0.5em;
		padding: 0.5em;
	}

.entry, .comment, .text_noentries_day {
        padding: 10px;
        margin-top: 40px;
        position: relative;
        margin-bottom: 10px;
    }
    .entry .userpic a, .comment .userpic a {
        display: block;
        position: absolute;
        right: -100px;
        top: -35px;
        padding: 5px;
    }
    }
    .entry .userpic img, .comment .userpic img {
        border: none;
    }
    .entry-title {
        padding: 0.2em;
        margin-top: -10px;
        margin-right: 0px;
    }

.comment-title {
        padding: 0.2em;
        margin-right: 120px;
    }

.entry-title a, .comment-title a {
        text-decoration: none;
    }

.entry-wrapper-odd .entry, .comment-wrapper-odd .comment, .text_noentries_day {
        border: solid 0px #739adf;
        background-color: #FFFFFF;
        color: #666666;
    }
    .entry-wrapper-odd .userpic a, .comment-wrapper-odd .userpic a {
        background-color: #cfe0e6;
        border: solid 0px #739adf;
    }
    .entry-wrapper-odd .entry-title, .comment-wrapper-odd .comment-title {
        border: solid 0px #739adf;
        color: #1f558b;
        background-color: #cfe0e6;
        font-family: Georgia;
        font-size: 20px;
        font-weight: normal;
        font-style: italic;
    }
    .entry-wrapper-odd .entry-title a, .comment-wrapper-odd .comment-title a {
        color: #1f558b;
        font-family: Georgia;
        font-size: 20px;
        font-weight: normal;
        font-style: italic;
    }
    a, .entry-wrapper-odd a, .comment-wrapper-odd a {
        color: #1f558b;
    }

.entry-wrapper-even .entry, .comment-wrapper-even .comment {
        border: solid 0px #739adf;
        background-color: #ffffff;
        color: #666666;
    }

.entry-wrapper-even .userpic a, .comment-wrapper-even .userpic a {
        background-color: #cfe0e6;
        border: solid 0px #739adf;
    }

.entry-wrapper-even .entry-title, .comment-wrapper-even .comment-title {
        border: solid 0px #739adf;
        color: #1f558b;
        background-color: #cfe0e6;
        font-family: Georgia;
        font-size: 20px;
        font-weight: normal;
        font-style: italic;
    }
    .entry-wrapper-even .entry-title a, .comment-wrapper-even .comment-title a {
        color: #1f558b;
        font-family: Georgia;
        font-size: 20px;
        font-weight: normal;
        font-style: italic;
    }

.entry-wrapper-even a, .comment-wrapper-even a {
        color: #1f558b;
    }

.entry .time, .entry .date {
        padding: 0.2em;
        display: inline-block;
    }
    .entry-content, .comment-content {
        padding: 10px 0px;
    }
    .tag {
        font-weight: bold;
        text-align: left;
        background: #CFE0E6;
        padding-bottom: 5px;
        padding-left: 5px;
        margin-bottom: 15px;
    }
    .tag a {
        font-weight: normal;
    }
    .tag ul { display: inline; margin: 0; padding: 0; }

.tag li {
        display: inline;
        list-style: none;
        padding: 0px;
    }

.entry .metadata {
        padding-top: 5px;
        padding-left: 5px;
        border: 1 px solid #CFE0E6;
        background: #CFE0E6;
    }

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

.entry .metadata li {
        list-style: none;
    }
    .entry .metadata img {
	display: block;
	padding-right: 5px;
    }

.entry .footer .inner, .comment .footer .inner {
        text-align: right;
        background-color: #CFE0E6;
        padding: 10px 0;
    }
    .entry .footer a {
        white-space: nowrap;
    }
    .entry-management-links, .entry-interaction-links, .comment-management-links, .comment-interaction-links {
        text-align: right;
        margin: 20px 0;
        padding: 0;
        display: inline;
    }
    .entry-management-links li, .entry-interaction-links li, 
    .comment-management-links li, .comment-interaction-links li {
        display: inline;
        list-style: none;
        margin: 20px 0;
        padding: 5px;
    }

.entry .footer hr {
        display: none;
    }

.entry .metadata-label {
        font-weight: bold;
    }
    .comment-poster {
        display: inline-block;
    }

#content > hr { display: none; }

.module-section-three {
        clear: both;
        width: 100%;
        background-color: #CFE0E6;
        color: #50717D;
        margin: 0;
        padding: 0.5em;
        text-align: right;
    }
    .module-section-three a {
        color: #ffffff;
    }
    .module-section-three .module {
        padding-left: 20px;
    }

.hfeed .navigation {
    }

.navigation {
		margin: 0;
		padding: 10px;
		text-align: center;
		border: 0px solid #739adf;
		background-color: #ffffff;	
		color: #000000;	
	}

.page-tags #content h2 {
        margin-right: 10px;
    }

.month-wrapper, #archive-month dl {
        padding: 10px;
        position: relative;
        margin: 20px 0px;
        border: solid 0px #739adf;
        background-color: #ffffff;
    }

#postform {
        margin-top: 20px;
        border: solid 1px #CFE0E6;
    }

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

#archive-month dt {
        font-weight: bold;
    }
    #archive-month .entry-title {
        font-size: 10pt;
        display: inline-block;
        padding-left: 5px;
    }

And you're probably thinking, Demanding, isn't she?

Threaded | Flat

From:

tyger

I'm little more than a newbie myself, but here's what I know:

• the odd/even CSS is for if you want to have entries/comments in alternating colours. It's not necessary at all, but I think it's pretty awesome.

• You'll want a {text-decoration:none} to remove the underline, but I can't find dotted underlines on the W3, though I have seen them around. ^^;; Sorry.

afuna

entry width:

There's a width set on the .entry, if you just remove


    .entry {
    width: 690px;
}

then that should make it take up the full space.

multilevel tags:

You'll probably need to target something like:

.module-tags_multilevel > ul.module_list > li (top-level)
.module-tags_multilevel > ul.module_list > li > ul.module_list > li (second-level),
etc

Hmm, I'm not sure where the userpics are supposed to be, or have you fixed them already?

Dreamwidth style system discussion

Transmogrified layout customization

Transmogrified layout customization

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)

Profile

April 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags