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:

cesy

Have you managed to reproduce the user's problem, or did it only happen on their journal?

If you haven't managed to get the same problem, it might be worth asking them to try it on a spare journal (I have invite codes if needed), where they can leave it up in broken form for us to look at and investigate.

zvi

You need to ask what the screen resolution is and how wide this user keeps her browser window. Also, what size font is the browser set to use?

Because some of this stuff is done with CSS positioning, it can sometimes get a funky alignment in a too small window. Or with a very large font.

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)

mmmag

Here's a visual of the Transmogrified layout structure that I just made:

In order to make room for the sidebar, you need to give a padding to #wrap that equals the width of the sidebar and the spacing you want between the sidebar and the content. Also, have #content & .module-section-two float to the same side you want the sidebar to be. Finally, give the sidebar a negative margin in the direction you want it, equal to the padding you gave #wrap.

You also need to give #content a width of 100% so that the other pages don't look odd.

For example, for your sidebar:
#wrap {padding-left: 200px}
#content {float: left; width: 100%;}
.module-section-two {float: left; width: 200px; margin-left: -200px;}

If you prefer to use absolute positioning, like I do:
#wrap {padding-left: 200px; position: relative;}
#content {width: 100%}
.module-section-two {position: absolute; top: 0; left: 0; width: 200px;}

When styling .module-section-two use .module-section-two .inner for padding and borders, since that affects if the sidebar displays properly. For #content (for padding and borders) use #entries instead, .tags-container in the tags page, #archive-year for year-at-a-glance archives and #archive-month for month-at-a-glance archives. [This only applies if you are using the first example. Different browsers interpret padding, margin and borders differently. On Firefox it might look fine, but be broken in Opera/etc. If you are using absolute positioning, you needn't worry much. I think...]

With all this said, I couldn't quickly make the first example work for you, but the second one does. The site uses the first example in the default Transmogrified layout, so it does work.

Sorry for writing too much. Hopefully this helps.

Edited (Adding more info.) Date: 2010-10-02 06:57 am (UTC)

carisma_sensei

Oh wow, thank you so much! I'll try this when i have some time to spare on DW coding! Thanks for the help!

This is what i've got so far. Everything seems ok, except that i can't get to separate the entries a bit from one another. Would you be able to shed some light on this for me?
I think i did everything else as you explained to me though, thanks for the help!

It looks good!

To separate the entries you can give a margin-bottom to .entry-wrapper or give a height to #content .separator-after. .separator-after is used in other places other than between entries, so it's best to specify.

If you need further help, let me know.

Also, if you are using Firefox I recommend the Web Developer add-on. It's the coolest thing ever, when it comes to CSS. I've been using it to help people out with css problems and to help myself as well.

Dreamwidth style system discussion

Transmogrified help

Transmogrified help

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Profile

October 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags