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

[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