dreamwidth layout - basic blue

May. 5th, 2009 06:24 pm
unamaga: (Default)


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
  • Current Mood: exhausted
  • Current Music: jimi hendrix - castles made of sand
Tags:

a tool of happiness

Apr. 15th, 2009 02:57 pm
unamaga: (i'll carry you)
I was tagged by [livejournal.com profile] aesc for the Eight Days of Happy meme an age ago. I refuse to fail at it this time! *resolve face*

Day One

I uploaded this for Aitches the other day and realized that everyone who might be having a rough day or a rough week or a rough year should be in possession of this movie. It's the ultimate comfort movie, long and fun and gorgeous and easy to curl up around in the afternoon while you nosh on a cookie. It's not made just for kids, it's made for everyone, and believe me when I say you will finish this movie and feel warm.

Note: The file size might seem a little bit daunting, but that's because you can watch in either Japanese or an English dub. Rejoin with HJ-split and enjoy. :D


My Neighbor Totoro



Part 1Part 2
1 | 2 | 3

1 | 2 | 3


I imagine this meme has already made the rounds, so I'm not tagging anyone, but if you'd like to do this, consider yourself poked. Oh! And another note: I suddenly have a Dreamwidth account, thanks to my lovely [livejournal.com profile] villainny! Unsurprisingly, I'm unamaga over there too - so original! still apparently hard to spell! Come friend me if you'd like; I'm still getting used to all the complications of having a "circle" instead of friends, and only being allowed six userpics after having over a hundred does lead me to make sad duck faces, but it's pretty nice over there.
  • Current Mood: busy
  • Current Music: Monty Python's Life of Brian
Tags:

Profile

unamaga: (Default)

Style Credit

Expand Cut Tags

No cut tags
Top of page