dreamwidth layout - basic blue

[unamaga]

I can't stand the Transmogrified borders; I don't know why, some rage just comes upon me when I see them. So here's my borderless contribution to the cause - pretty simple, clean, easily customizable, and (mostly) fluid.

Instructions:
1) Go to Customize and choose Transmogrified
2) Copy the code from the box below and paste it into the Custom CSS box
3) Make sure "Use Layout's Stylesheet" is checked
4) Save, and you're done!

/* basic blue by unamaga*/

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

    body {
        background-color: #ffffff;
        font-family: Verdana;
        font-size: 10pt;
        margin: 0;
        padding: 0;
    }

    #container {
        background-color: #ffffff;
    }

    #header {
	background-color: #AAD0F1;
        background-image: url('');
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: top center;
	color: #ffffff;
	margin: 0;
        padding: 40px;
	}

    #header a {
	color: #ffffff;
        text-decoration: none;
    }

    #header h1 {
        display: none;
        margin: 0px;
	padding: 20px;
	}

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

    #wrap {
        color: #666666;
        padding-right: 230px;
        padding-top: 20px;
        padding-left: 20px;
	}

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

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

    .page-tags #wrap {
        margin-left: 20px;
    }
    
    .module-section-two {
        position: absolute;
        top: 260px;
        width: 80%;
        float: center;
        /* this must stay at the bottom of this code as in some circumstances
        it closes one declaration and opens another one */
        margin-right: -230px;;
    }

    .module-section-two .module {
        display: none;
        border: solid 0px #fc7f3f;
        color: #666666;
        background-color: #FAFAFA;
        margin-right: 0;
        margin-left: 20%;
        padding: 10px;
        
    }

    .module-section-one li {
        display: inline;
        list-style: none;
    }
    .module-section-one ul {
        background-color: #AAD0F1;
        background-image: url('http://pics.livejournal.com/unamaga/pic/0040dt7s');
        background-repeat: no-repeat;
        background-position: top center;
        color: #ffffff;
        margin: 0;
        padding-top: 1%;
        text-align: center;
    }

    .module-section-one li a {
        text-decoration: none;
        padding-top: 2px;
        padding-right: 25px;
        padding-bottom: 0.5em;
        padding-left: 14px;
        background-color: transparent;
        color: #666666;
    }

    .module-section-one ul li a:hover, .module-section-one ul li.active a {
        background-color: transparent;
        color: #000000;
    }

    .module-section-two a {
        color: #73A3CC;
    }
    .module-section-two .module-header a {
        text-decoration: none;
    }
    .module-section-two h2 {
        display: none;
	margin: 0;
        text-align: center;
        margin-bottom: 7px;
	font-size: 1.1em;
	padding: 0.2em;
	background-color: #FAFAFA;
	color: #f3f3f3;
	border: 0px solid #73A3CC;			
	}

    .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: 20px;
    }
    .module-userprofile .userpic {
        text-align: center;
    }
    .module-userprofile ul {
        margin: 0px;
        padding: 10px;
        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, .comment, .text_noentries_day {
        padding: 10px;
        margin-top: 0px;
        position: relative;
        margin-bottom: 10px;
    }
    .entry .userpic a, .comment .userpic a {
        display: block;
        position: absolute;
        right: 10px;
        top: 10px;
        padding: 5px;
    }
    .entry .userpic img, .comment .userpic img {
        border: none;
    }
    .entry-title, .comment-title {
        padding: 15px;
        margin: 0;
        margin-right: 110px;
    }
    .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: #73A3CC;
        border: solid 0px #739adf;
    }
    .entry-wrapper-odd .entry-title, .comment-wrapper-odd .comment-title {
        border: solid 0px #739adf;
        color: #ffffff;
        background-color: #AAD0F1;
    }
    .entry-wrapper-odd .entry-title a, .comment-wrapper-odd .comment-title a {
        color: #ffffff;
    }
    a, .entry-wrapper-odd a, .comment-wrapper-odd a {
        color: #73A3CC;
    }

    .entry-wrapper-even .entry, .comment-wrapper-even .comment {
        border: solid 0px #fc7f3f;
        background-color: #ffffff;
        color: #666666;
    }
    .entry-wrapper-even .userpic a, .comment-wrapper-even .userpic a {
        background-color: #73A3CC;
        border: solid 0px #fc7f3f;
    }
    .entry-wrapper-even .entry-title, .comment-wrapper-even .comment-title {
        border: solid 0px #fc7f3f;
        color: #ffffff;
        background-color: #AAD0F1;
    }
    .entry-wrapper-even .entry-title a, .comment-wrapper-even .comment-title a {
        color: #ffffff;
    }
    .entry-wrapper-even a, .comment-wrapper-even a {
        color: #73A3CC;
    }

    .entry .time, .entry .date {
        padding: 0.2em;
        display: inline-block;
    }
    .entry-content, .comment-content {
        padding: 10px 115px 20px 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, .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;
    }
    .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: #AAD0F1;
        color: #73A3CC;
        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 0px #739adf;
        color: #666666;
        background-color: #AAD0F1;
        font-size: 1.2em;
        margin-bottom: 20px;
    }

    .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 0px #739adf;
        color: #666666;
        background-color: #AAD0F1;
        font-size: 1.2em;
        margin-bottom: 20px;
    }

    .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 0px #fc7f3f;
    }

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

Notes:
- Right now, I'm hosting the round navigation image on my livejournal scrapbook, but I can't guarantee I'll have a paid account forever, so if you'd like to host it yourself, here it is (I promise it's actually there, it's just white! Highlight the space if you need to and you'll see it). Replace the old URL under .module-section-one ul with yours.
- The two main colors in this layout are #73A3CC (the darker blue of the links and around the userpics) and #AAD0F1 (the main light blue). Your best bet for changing colors is to put the code into Notepad and do a sweeping find & replace with your hex numbers of choice.
- If you add a header image (for example, see my dw journal), you'll probably have to play with the padding under #header to make it fit.
ETA: In order for the navigation links to fit, you'll have to shorten "Recent Entries" by going to your customization page and finding it under the Text tab.
ETA2: If anyone wants the userinfo under the userpic on their reading page, add this code to your Custom CSS. It's not perfect, but it can pass:

span.poster {width: 120px; margin-top: 50px; padding: 0; float: right; text-align: center;}

Otherwise, there shouldn't be any problems. If you come across a snag, please comment and I'll try to help. :D

Comments

[aurora]

Ooooh, I love your layout!! <3

[unamaga]

Thank you! :">

[monanotlisa]

Hey there, pretty!

Think I'm settled in with my Liz custom layout, but for future reference, does this one have black-on-white font? If so, I love you. Even more. *g*

[unamaga]

It has this color, #666666 on white, but that's easily changeable if you ever wanted. :D

[monanotlisa]

Ah, cheers!

[lamardeuse]

Oh, very cool! Thank you, I have stolen. :)

[unamaga]

Enjoy! :D

[charlieblue]

Very pretty, have taken and credited. :)

[unamaga]

Yay, thank you!

[tex]

Nrrrgh. That icon. Nrrrgh. (And thanks for the layout. Love it!)

[unamaga]

Fajoigkamw HIS HIPS. *fans*

(Thank you! Glad you like it! :D)

[runpunkrun]

This is pretty and easy on the eyes. I stuck it in my memories for later. One thing, I like having usernames directly under the icon. Is there a way to slip it over there?

[aphelant]

I haven't tried this yet myself, but I believe this is the fix for that?

[unamaga]

I think she might be referring to the way that on the reading page, the name of the friend is over under the date instead of under the userpic, how it is on LJ. I haven't been able to find a code for that yet. :\

[runpunkrun]

There's this.

But it's not ideal. I fussed around with the padding a bit, and got the username to stick out more, but it's still hit or miss, depending on what the person has actually got in their entry. It might work well on your layout, though, since the icon is far away from the entry text.

[aphelant]

Whoops, wrong bookmark! I think this thread has the code. Uh, let me know if that's still not it so I can adjust my bookmarks accordingly.

[runpunkrun]

That's for when the username has disappeared entirely, I believe.

[aphelant]

Sorry! Please see above.

NVM, we commented simultaneously!

[unamaga]

I modified that a bit, and what should work with this particular layout (I don't know about any others) is:

span.poster {width: 120px; margin-top: 50px; padding: 0; float: right; text-align: center;}

It's not perfectly centered under the userpic, but it's good enough to pass.

[aphelant]

Ooooh, this is very nice! (have you considered posting it to dreamwidthlayouts?)

[unamaga]

I wanted to! But there's some weird bug happening with the comm where I try to join and it gives me an error. I sent aesc over to make sure it wasn't just me, and it is only that comm! Weirrrd.

[aphelant]

D: That's very strange! Oh, technology. :(

[anatsuno]

Whoa. It is VERRRRY PRETTY and I love it! but.... there is a but. So I'm gonna ask you, making it clear that I am not DEMANDING you do anything for me: is it possible/easy to have the icon that accompanies the post be displayed on the side over or under the poster's username?

[unamaga]

/* basic blue by unamaga*/

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

    body {
        background-color: #ffffff;
        font-family: Verdana , ;
        font-size: 10pt;
        margin: 0;
        padding: 0;
    }

    #container {
        background-color: #ffffff;
    }

    #header {
	background-color: #AAD0F1;
        background-image: url('');
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: top center;
	color: #ffffff;
	margin: 0;
        padding: 40px;
	}

    #header a {
	color: #ffffff;
        text-decoration: none;
    }

    #header h1 {
        display: none;
        margin: 0px;
	padding: 20px;
	}

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

    #wrap {
        color: #666666;
        padding-right: 230px;
        padding-top: 20px;
        padding-left: 20px;
	}

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

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

    .page-tags #wrap {
        margin-left: 20px;
    }
    
    .module-section-two {
        position: absolute;
        top: 260px;
        width: 80%;
        float: center;
        /* this must stay at the bottom of this code as in some circumstances
        it closes one declaration and opens another one */
        margin-right: -230px;;
    }

    .module-section-two .module {
        display: none;
        border: solid 0px #fc7f3f;
        color: #666666;
        background-color: #FAFAFA;
        margin-right: 0;
        margin-left: 20%;
        padding: 10px;
        
    }

    .module-section-one li {
        display: inline;
        list-style: none;
    }
    .module-section-one ul {
        background-color: #AAD0F1;
        background-image: url('http://pics.livejournal.com/unamaga/pic/0040dt7s');
        background-repeat: no-repeat;
        background-position: top center;
        color: #ffffff;
        margin: 0;
        padding-top: 1%;
        text-align: center;
    }

    .module-section-one li a {
        text-decoration: none;
        padding-top: 2px;
        padding-right: 25px;
        padding-bottom: 0.5em;
        padding-left: 14px;
        background-color: transparent;
        color: #666666;
    }

    .module-section-one ul li a:hover, .module-section-one ul li.active a {
        background-color: transparent;
        color: #000000;
    }

    .module-section-two a {
        color: #73A3CC;
    }
    .module-section-two .module-header a {
        text-decoration: none;
    }
    .module-section-two h2 {
        display: none;
	margin: 0;
        text-align: center;
        margin-bottom: 7px;
	font-size: 1.1em;
	padding: 0.2em;
	background-color: #FAFAFA;
	color: #f3f3f3;
	border: 0px solid #73A3CC;			
	}

    .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: 20px;
    }
    .module-userprofile .userpic {
        text-align: center;
    }
    .module-userprofile ul {
        margin: 0px;
        padding: 10px;
        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, .comment, .text_noentries_day {
        padding: 10px;
        margin-top: 0px;
        position: relative;
        margin-bottom: 10px;
    }
    .entry .userpic a, .comment .userpic a {
        display: block;
        position: absolute;
        left: 0;
        top: 10px;
        padding: 5px;
    }
    .entry .userpic img, .comment .userpic img {
        border: none;
    }
    .entry-title, .comment-title {
        padding: 15px;
        margin: 0;
        margin-left: 100px;
    }
    .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: #73A3CC;
        border: solid 0px #739adf;
    }
    .entry-wrapper-odd .entry-title, .comment-wrapper-odd .comment-title {
        border: solid 0px #739adf;
        color: #ffffff;
        background-color: #AAD0F1;
    }
    .entry-wrapper-odd .entry-title a, .comment-wrapper-odd .comment-title a {
        color: #ffffff;
    }
    a, .entry-wrapper-odd a, .comment-wrapper-odd a {
        color: #73A3CC;
    }

    .entry-wrapper-even .entry, .comment-wrapper-even .comment {
        border: solid 0px #fc7f3f;
        background-color: #ffffff;
        color: #666666;
    }
    .entry-wrapper-even .userpic a, .comment-wrapper-even .userpic a {
        background-color: #73A3CC;
        border: solid 0px #fc7f3f;
    }
    .entry-wrapper-even .entry-title, .comment-wrapper-even .comment-title {
        border: solid 0px #fc7f3f;
        color: #ffffff;
        background-color: #AAD0F1;
    }
    .entry-wrapper-even .entry-title a, .comment-wrapper-even .comment-title a {
        color: #ffffff;
    }
    .entry-wrapper-even a, .comment-wrapper-even a {
        color: #73A3CC;
    }

    .entry .time, .entry .date {
        padding: 0.2em;
        display: inline-block;
    }
    .entry-content, .comment-content {
        padding: 10px 10px 20px 130px;
    }
    .tag {
        font-weight: bold;
text-align: left;
        margin-left: 130px;
padding-bottom: 10px;
    }
    .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;
margin-left: 130px;
    }
    .entry .metadata li {
        list-style: none;
    }
    .entry .footer .inner, .comment .footer .inner {
        text-align: right;
padding-top: 10px;
    }
    .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, .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;
    }
    .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: #AAD0F1;
        color: #73A3CC;
        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 0px #739adf;
        color: #666666;
        background-color: #AAD0F1;
        font-size: 1.2em;
        margin-bottom: 20px;
    }

    .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 0px #739adf;
        color: #666666;
        background-color: #AAD0F1;
        font-size: 1.2em;
        margin-bottom: 20px;
    }

    .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 0px #fc7f3f;
    }

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

span.datetime {
margin-left: 130px;
}

span.poster {width: 120px; margin-top: 50px; padding: 0; float: left; text-align: center; margin-left: -15px;}

This ought to do it. :D

[anatsuno]

Ima try that right away! You are SUCH a star. <3<3<3!

[anatsuno]

Um, actually, it didn't seem to work... But I noticed it looks like ti's working on your own layout! so I am confused. Will try again. :)

[unamaga]

Are you completely deleting the other code? What I commented with is the layout in its entirety, so if you're jut adding it to the end, it won't do anything. :\

[anatsuno]

nono, I only picked what you put in the comment to me - I hadn't applied the css from you before at all. :)

[unamaga]

Hmmm. Try this?

/* basic blue by unamaga*/

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

body {
background-color: #ffffff;
font-family: Verdana , ;
font-size: 10pt;
margin: 0;
padding: 0;
}

#container {
background-color: #ffffff;
}

#header {
background-color: #AAD0F1;
background-image: url('');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
color: #ffffff;
margin: 0;
padding: 40px;
}

#header a {
color: #ffffff;
text-decoration: none;
}

#header h1 {
display: none;
margin: 0px;
padding: 20px;
}

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

#wrap {
color: #666666;
padding-right: 230px;
padding-top: 20px;
padding-left: 20px;
}

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

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

.page-tags #wrap {
margin-left: 20px;
}

.module-section-two {
position: absolute;
top: 260px;
width: 80%;
float: center;
/* this must stay at the bottom of this code as in some circumstances
it closes one declaration and opens another one */
margin-right: -230px;;
}

.module-section-two .module {
display: none;
border: solid 0px #fc7f3f;
color: #666666;
background-color: #FAFAFA;
margin-right: 0;
margin-left: 20%;
padding: 10px;

}

.module-section-one li {
display: inline;
list-style: none;
}
.module-section-one ul {
background-color: #AAD0F1;
background-image: url('http://pics.livejournal.com/unamaga/pic/0040dt7s');
background-repeat: no-repeat;
background-position: top center;
color: #ffffff;
margin: 0;
padding-top: 1%;
text-align: center;
}

.module-section-one li a {
text-decoration: none;
padding-top: 2px;
padding-right: 25px;
padding-bottom: 0.5em;
padding-left: 14px;
background-color: transparent;
color: #666666;
}

.module-section-one ul li a:hover, .module-section-one ul li.active a {
background-color: transparent;
color: #000000;
}

.module-section-two a {
color: #73A3CC;
}
.module-section-two .module-header a {
text-decoration: none;
}
.module-section-two h2 {
display: none;
margin: 0;
text-align: center;
margin-bottom: 7px;
font-size: 1.1em;
padding: 0.2em;
background-color: #FAFAFA;
color: #f3f3f3;
border: 0px solid #73A3CC;
}

.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: 20px;
}
.module-userprofile .userpic {
text-align: center;
}
.module-userprofile ul {
margin: 0px;
padding: 10px;
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, .comment, .text_noentries_day {
padding: 10px;
margin-top: 0px;
position: relative;
margin-bottom: 10px;
}
.entry .userpic a, .comment .userpic a {
position: absolute;
right: 86%;
top: 10px;
padding: 5px;
}
.entry .userpic img, .comment .userpic img {
border: none;
}
.entry-title, .comment-title {
padding: 15px;
margin: 0;
margin-left: 100px;
}
.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: #73A3CC;
border: solid 0px #739adf;
}
.entry-wrapper-odd .entry-title, .comment-wrapper-odd .comment-title {
border: solid 0px #739adf;
color: #ffffff;
background-color: #AAD0F1;
}
.entry-wrapper-odd .entry-title a, .comment-wrapper-odd .comment-title a {
color: #ffffff;
}
a, .entry-wrapper-odd a, .comment-wrapper-odd a {
color: #73A3CC;
}

.entry-wrapper-even .entry, .comment-wrapper-even .comment {
border: solid 0px #fc7f3f;
background-color: #ffffff;
color: #666666;
}
.entry-wrapper-even .userpic a, .comment-wrapper-even .userpic a {
background-color: #73A3CC;
border: solid 0px #fc7f3f;
}
.entry-wrapper-even .entry-title, .comment-wrapper-even .comment-title {
border: solid 0px #fc7f3f;
color: #ffffff;
background-color: #AAD0F1;
}
.entry-wrapper-even .entry-title a, .comment-wrapper-even .comment-title a {
color: #ffffff;
}
.entry-wrapper-even a, .comment-wrapper-even a {
color: #73A3CC;
}

.entry .time, .entry .date {
padding: 0.2em;
display: inline-block;
}
.entry-content, .comment-content {
padding: 10px 10px 20px 130px;
}
.tag {
font-weight: bold;
text-align: left;
margin-left: 130px;
padding-bottom: 10px;
}
.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;
margin-left: 130px;
}
.entry .metadata li {
list-style: none;
}
.entry .footer .inner, .comment .footer .inner {
text-align: right;
padding-top: 10px;
}
.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, .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;
}
.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: #AAD0F1;
color: #73A3CC;
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 0px #739adf;
color: #666666;
background-color: #AAD0F1;
font-size: 1.2em;
margin-bottom: 20px;
}

.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 0px #739adf;
color: #666666;
background-color: #AAD0F1;
font-size: 1.2em;
margin-bottom: 20px;
}

.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 0px #fc7f3f;
}

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

span.datetime {
margin-left: 130px;
}

span.poster {width: 120px; margin-top: 50px; padding: 0; float: left; text-align: center; margin-left: -15px;}

[anatsuno]

whoo, awesome! seems to have done the trick. Though I notice that the little icons for locked post and +18/nsfw content don't seem to appear. I wonder if there is conflict between your awesome stylesheet and my user layer customisations? though they were only about color, and are gone now, superceded by the custom css...

[unamaga]

Aha! No, that was my bad. I forgot to move them out from under the userpic. At the bottom of that code, where it starts span.datetime, replace with


span.datetime {
margin-left: 20px;
}

span.poster {width: 120px; margin-top: 50px; padding: 0; float: left; text-align: center; margin-left: -15px;}

span.access-filter { postion: absolute;
margin-left: 130px;
display: inline;
}
span.restrictions {
position: absolute;
display: inline;
margin: 0;
padding-top: 3px;
}

[anatsuno]

(except now when there is NO little icon for lock or adult-level stuff, the datestamp is shifted to the left under the icon...)

Feel free to stop working on it - I bet it's annoying you, and I'd rather not make you hate me! I can live with it (or change back to something else) and be perfectly okay. :)

[unamaga]

No, no, I like to know if I'm doing something wrong! I'm sorry that it's taking me so long to figure this out, though, and if you'd rather I just stop go right ahead and tell me! Hopefully this'll be the last code:


span.datetime {
float: right;
postion: absolute;
display: inline;
}

span.poster {width: 120px; margin-top: 50px; padding: 0; float: left; text-align: center; margin-left: -15px;}

span.access-filter {
float: right;
postion: absolute;
padding-right: 0px;
}
span.restrictions {
float: right;
position: relative;
padding-right: 5px;
padding-left: 5px;
}

[anatsuno]

naww. Sorry, I was taking a break from the comp.

It worked in that the date is aligned right now, and visible - but as a consequence perhaps? now the username has crawled back up, on the left side, and is half slid under the icon... You can see what things are like on my reading page. :)

[unamaga]

Ah! Well that's easy enough to fix, thank god! Under span.poster, change the margin-top to 65px.

[anatsuno]

yaye! :D

[teii]

This looks gorgeous, I'll be using this, thank you! ♥

[unamaga]

Thank you! :D

[lovejoy]

oh gosh, how lovely! bookmarking for later ♥ thanks!

[unamaga]

Glad you like it! :D

[tonya]

Beautiful layout! Going to use it now. Thank you. :)

[hilarytamar]

This has been a godsend. Thank you so much for posting it. I've started making some changes to it for my own journal – I'm not done yet, and while I've credited you for the code, I've also put in it that it's all been kludged by me and you're not to blame in any way for the result – and it's going to make my life so. much. better. Thank you, thank you, thank you!

[baggyeyes]

Very nice....have you thought of submitting this to

[Error: Irreparable invalid markup ('<user="dreamscapes">') in entry. Owner must fix manually. Raw contents below.]

Very nice....have you thought of submitting this to <user="dreamscapes">?

[baggyeyes]

Let me try that again - I'd really like you to submit this to dreamscapes