style_system | Transmogrified help

The last layout i attempted to make for DW looked alright and worked fine for me... but then a user found some problems that i really couldn't solve. I wanted to ask for help, if you would be able to test the layout for me (on various browsers etc) and maybe even teach me how to solve that fhsdjkgh problem D: I would love to keep making layouts for DW (i'm not as good with DW coding as i am with Lj uhg), and since i couldn't solve this problem, i haven't really wanted to touch DW CSS or anything... so please, help?

Thank you!

/*  Undine 
Transmogrified
By inconformista.dreamwidth.org */

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

body {
        background-color: #FFFFFF;
background-image: url('');
background-repeat: repeat;
background-attachment: scroll;
        font-family: Helvetica;
	text-align: justify;
        font-size: 12px;
        margin-top: 20px;
        padding: 0;
    }

a, a:link, a:visited, a:active {
color: #54717C;
border-bottom: 0px;
text-decoration: none;
}

a:hover{
color: #989898;
border-bottom: 0px;
text-decoration: none;
}

blockquote {
background: #FFFFFF;
color: #868686;
font-style: italic;
font-family: Trebuchet MS, Helvetica, Arial;
padding: 3px;
}

#container {
       background: transparent;
       margin: 0 auto; 
       width: 700px; 
       text-align: justify; 
       padding: 0;
    }

#title {
       background: transparent;
       text-align: center;
        }

#header a {
	color: #97B6C1;
        font-style: italic;
        font-family: Georgia;
        text-transform: lowercase;
        font-weight: normal;
        text-decoration: none;
    }

#header h1 {
        margin: 0px;
	padding: 5px 0 0 0;
	color: #97B6C1;
        font-style: italic;
        font-family: Georgia;
        text-transform: lowercase;
        font-weight: normal;
        text-decoration: none;
	}

#header h2 {
	padding: 0 20px 20px 20px;
	color: #97B6C1;
        font-size: 11px;
        font-family: Georgia;
        text-transform: lowercase;
        font-weight: normal;
        text-decoration: none;
	}

h2#subtitle {
	color: #97B6C1;
        font-size: 11px;
        font-family: Georgia;
        text-transform: lowercase;
        font-weight: normal;
        text-decoration: none;
}

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

#content {
	margin: 0 0 0 200px;
        text-align: justify; 
        padding: 0;
        position: relative;
        float: right;
        background-color: #FFFFFF;
        z-index: 20;
        border: 1px solid #E3E3E3;
     }

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

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

.module-section-two {
position: absolute; 
top: 116px; 
width: 200px; 
float: left;
margin: 0 0 0 0; 
padding: 10px; 
color: #848484;
background: #E1ECEE; 
border-left: 5px solid #CEE1E3;
        /* this must stay at the bottom of this code as in some circumstances
        it closes one declaration and opens another one */
        margin-left: 0px;
    }

.module-section-two .module {
   
    }

.module-credit {
        display: none;
}

.module-syndicate {
        display: none;
}

.module-section-one li {
        display: inline;
        list-style: none;
    }
    .module-section-one ul {
        background-color: transparent;
        color: #FFFFFF;
        margin-top: 5px;
        padding: 15px;
        text-align: center;
    }

.module-section-one li a {
        text-decoration: none;
        padding-top: 0.5em;
        padding-right: 20px;
        padding-left: 20px;
        padding-bottom: 0.5em;
        font-family: Georgia;
        font-size: 11px;
        text-transform: lowercase;
        background-color: #E7EEEF;
        color: #93B0BB;
        border-right: 4px solid #CEE1E3;
    }

.module-section-one ul li a:hover, .module-section-one ul li.active a {
        background-color: #ECF4F5;
        color: #97B6C1;
        border-right: 4px solid #97B6C1;
    }

.module-section-two h2 a {
        color: #848484;
    }

.module-section-two .module-header a {
        text-decoration: none;
    }

.module-section-two h2 {
	margin: 0;
        margin-bottom: 7px;
	font-size: 13px;
        font-family: Trebuchet MS, Helvetica, Arial;
        letter-spacing: 2px;
        font-weight: normal;
	padding: 0.2em;
	background-color: transparent;
	color: #848484;		
	}

.module-typelist li {
        padding-bottom: 2px;
}

.module-typelist li a, .module-typelist li a:link, .module-typelist li a:visited, .module-typelist li a:active {
        display: block;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        text-decoration: none;
        font-family: Trebuchet MS, Helvetica, Arial;
        text-transform: uppercase;
        font-size: 10px;
        background-color: #E7EEEF;
        color: #97B6C1;
        border-right: 4px solid #CEE1E3;
}

.module-typelist li a:hover {
        display: block;
        text-decoration: none;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        font-size: 10px;
        text-transform: uppercase;
        background-color: #ECF4F5;
        color: #97B6C1;
        border-right: 4px solid #97B6C1;
}
    .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 {
    float: right;
    width: 100%;
}

.entry-poster {
}

.entry, .text_noentries_day {
        padding: 10px;
        margin-top: 46px;
        position: relative;
        margin-bottom: 10px;
    }
    .entry .userpic a {
        display: block;
        position: absolute;
        right: -6px;
        top: -43px;
        padding: 5px;
    }

.entry .userpic img, .comment .userpic img {
        border: none;
    }
    .entry-title {
        padding: 0.2em;
        margin-top: -10px;
    }

.comment-title {
        padding: 0.2em;
    }

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

.entry-wrapper, .entry-wrapper-even {
min-height: 120px;
}

.entry-wrapper-odd {
min-height: 120px;
}

.entry-wrapper-odd .entry, .comment-wrapper-odd .comment, .text_noentries_day {
        background-color: transparent;
        color: #989898;
    }
    .entry-wrapper-odd .userpic a {
        background-color: #EBE7CC;
        border-right: solid 6px #97B6C1;
    }
    .entry-wrapper-odd .entry-title {
        border: solid 0px #E2DAB4;
        color: #97B6C1;
        background-color: #FFFFFF;
        font-family: Trebuchet MS, Helvetica, Arial;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: normal;
    }

.entry-wrapper-odd .entry-title a {
        border: solid 0px #E2DAB4;
        color: #97B6C1;
        background-color: #FFFFFF;
        font-family: Trebuchet MS, Helvetica, Arial;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: normal;
    }

.entry-wrapper-even .entry, .comment-wrapper-even .comment {
        background-color: #ffffff;
        color: #989898;
    }

.entry-wrapper-even .userpic a {
        background-color: #EBE7CC;
        border-right: solid 6px #97B6C1;
    }

.entry-wrapper-even .entry-title {
        border: solid 0px #E2DAB4;
        color: #97B6C1;
        background-color: #FFFFFF;
        font-family: Trebuchet MS, Helvetica, Arial;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: normal;
    }
    .entry-wrapper-even .entry-title a {
        border: solid 0px #E2DAB4;
        color: #97B6C1;
        background-color: #FFFFFF;
        font-family: Trebuchet MS, Helvetica, Arial;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: normal;
    }

.entry .time, .entry .date {
        padding: 0.2em;
        display: inline-block;
    }

.datetime {
    }

.entry-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 {
        clear: both;
    }

.entry-management-links, .entry-interaction-links, .comment-management-links, .comment-interaction-links {
        text-align: right;
        margin: 0;
        padding: 0;
        display: inline;
        font-size: 14px;
    }
.entry-interaction-links a, .entry-interaction-links a:link, .entry-interaction-links a:visited {
        color: #97B6C1;
}

.entry-management-links a, .entry-management-links a:link, .entry-management-links a:visited {
        color: #97B6C1;
}

.entry-management-links a:hover, .entry-interaction-links a:hover {
        color: #989898;
}

.entry-management-links li, .entry-interaction-links li, 
    .comment-management-links li, .comment-interaction-links li {
        display: inline;
        list-style: none;
        margin: 0;
        padding: 0px;
    }
    /* 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;
    }

#content > hr { display: none; }

.module-section-three {
        display: none;
    }

.module-section-three .module {
        padding-left: 20px;
    }

.hfeed .navigation {
    }

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

.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 0px #739adf;
        color: #FFFFFF;
        background-color: #CEE1E3;
        font-size: 1.2em;
        margin-bottom: 20px;
        font-size: 16px;
        font-family: Trebuchet MS, Helvetica, Arial;
        font-weight: normal;
    }

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

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

.month-wrapper h3 {
        padding: 0.2em;
        margin: 0;
        border: solid 0px #739adf;
        color: #FFFFFF;
        background-color: #CEE1E3;
        font-size: 16px;
        margin-bottom: 20px;
        font-family: Trebuchet MS, Helvetica, Arial;
        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 {
        background:#fff; 
        border:1px solid #dfdfdf;
        margin:20px 0; 
        padding:20px;}

.text_noentries_day {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    .comment {
	border:1px solid #dfdfdf;
	padding:4px;
	position:relative;
	margin-bottom:20px;
        min-height: 150px;
}

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

#comments {
padding: 8px; 
float: left;
margin: 3px;
min-height: 150px; 
background: #fff; 
width: 500px;
}

.comment-content { 
margin: 0 0 0 120px;
line-height: 120%; 
text-align: left;

}

#qrdiv table, #qrformdiv table, form #qrform{
border: 0px solid #000000!important;
}

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

.comment .footer {
margin: 20px 0 0 0; 
padding: 0; 
text-align: left;
}

.bottomcomment {
float: right;
}

Flat | Top-Level Comments Only

From:

samsharessometimes

It looks very nice on my journal, I don't see a problem with it except that the profile link covers the reading link. You can have a look if you like, I'll leave it up for a while so you can look but it's not my style :) . I'm using firefox and 1440 X 900 resolution and no other css.

ETA: on a closer look, it's not fine. My avatar is covering up part of the posts. I took a screenie:

http://img227.imageshack.us/img227/7504/stylebitmap.png

I'll keep working with it and see if there's anything more. I also posted in inconformista.

Edited Date: 2010-10-01 06:36 pm (UTC)

Dreamwidth style system discussion

Transmogrified help

Transmogrified help

no subject

Profile

October 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags