unamaga: (Default)
unamaga ([personal profile] unamaga) wrote2009-05-05 06:24 pm
Entry tags:

dreamwidth layout - basic blue



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
aurora: (SGA JohnRodney Candy Hearts)

[personal profile] aurora 2009-05-05 10:30 pm (UTC)(link)
Ooooh, I love your layout!! <3
monanotlisa: Diana as Diana Prince in glasses and a hat, lifting the rim of the latter rakishly. HOT! (Default)

[personal profile] monanotlisa 2009-05-05 10:37 pm (UTC)(link)
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*
monanotlisa: Diana as Diana Prince in glasses and a hat, lifting the rim of the latter rakishly. HOT! (Default)

[personal profile] monanotlisa 2009-05-05 11:06 pm (UTC)(link)
Ah, cheers!
lamardeuse: (Penelope)

[personal profile] lamardeuse 2009-05-05 10:42 pm (UTC)(link)
Oh, very cool! Thank you, I have stolen. :)
charlieblue: (Default)

[personal profile] charlieblue 2009-05-05 10:42 pm (UTC)(link)
Very pretty, have taken and credited. :)
tex: (McKay Sheppard - puddle)

[personal profile] tex 2009-05-05 10:53 pm (UTC)(link)
Nrrrgh. That icon. Nrrrgh. (And thanks for the layout. Love it!)
runpunkrun: combat boot, pizza, camo pants = punk  (Default)

[personal profile] runpunkrun 2009-05-06 02:07 am (UTC)(link)
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: (Default)

[personal profile] aphelant 2009-05-06 02:27 am (UTC)(link)
I haven't tried this yet myself, but I believe this is the fix for that?
runpunkrun: combat boot, pizza, camo pants = punk  (Default)

[personal profile] runpunkrun 2009-05-06 02:41 am (UTC)(link)
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: (st:tos - vulcan facepalm)

[personal profile] aphelant 2009-05-06 02:41 am (UTC)(link)
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: combat boot, pizza, camo pants = punk  (Default)

[personal profile] runpunkrun 2009-05-06 02:36 am (UTC)(link)
That's for when the username has disappeared entirely, I believe.
aphelant: (sga - frazzled)

[personal profile] aphelant 2009-05-06 02:43 am (UTC)(link)
Sorry! Please see above.

NVM, we commented simultaneously!
Edited 2009-05-06 02:44 (UTC)
aphelant: (dw - cool shades)

[personal profile] aphelant 2009-05-06 02:24 am (UTC)(link)
Ooooh, this is very nice! (have you considered posting it to [community profile] dreamwidthlayouts?)
aphelant: (Default)

[personal profile] aphelant 2009-05-06 10:06 pm (UTC)(link)
D: That's very strange! Oh, technology. :(
anatsuno: Viggo Mortensen's handwriting on snow: one moonless night with a friend... (delicate and friendly)

[personal profile] anatsuno 2009-05-06 11:09 am (UTC)(link)
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?
anatsuno: (sg:ngh)

[personal profile] anatsuno 2009-05-06 03:45 pm (UTC)(link)
Ima try that right away! You are SUCH a star. <3<3<3!
anatsuno: a women reads, skeptically (drawing by Kate Beaton) (Default)

[personal profile] anatsuno 2009-05-06 03:50 pm (UTC)(link)
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. :)
anatsuno: a women reads, skeptically (drawing by Kate Beaton) (Default)

[personal profile] anatsuno 2009-05-06 03:57 pm (UTC)(link)
nono, I only picked what you put in the comment to me - I hadn't applied the css from you before at all. :)
anatsuno: a women reads, skeptically (drawing by Kate Beaton) (Default)

[personal profile] anatsuno 2009-05-06 04:10 pm (UTC)(link)
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...
anatsuno: a women reads, skeptically (drawing by Kate Beaton) (Default)

[personal profile] anatsuno 2009-05-06 04:36 pm (UTC)(link)
(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. :)
anatsuno: a women reads, skeptically (drawing by Kate Beaton) (Default)

[personal profile] anatsuno 2009-05-06 05:36 pm (UTC)(link)
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. :)
anatsuno: a women reads, skeptically (drawing by Kate Beaton) (Default)

[personal profile] anatsuno 2009-05-06 06:09 pm (UTC)(link)
yaye! :D
teii: 東方神起 (Worse things have happened)

[personal profile] teii 2009-05-06 04:30 pm (UTC)(link)
This looks gorgeous, I'll be using this, thank you! ♥
lovejoy: (Default)

[personal profile] lovejoy 2009-05-06 05:01 pm (UTC)(link)
oh gosh, how lovely! bookmarking for later ♥ thanks!
tonya: (Default)

[personal profile] tonya 2009-05-18 02:48 pm (UTC)(link)
Beautiful layout! Going to use it now. Thank you. :)
hilarytamar: a spray of cherry blossoms (Default)

[personal profile] hilarytamar 2009-06-02 01:39 am (UTC)(link)
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: Princess Leia (Default)

[personal profile] baggyeyes 2009-08-11 01:41 am (UTC)(link)
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: Princess Leia (Default)

[personal profile] baggyeyes 2009-08-11 01:43 am (UTC)(link)
Let me try that again - I'd really like you to submit this to [site community profile] dreamscapes