collision

My first layout that I made on Dreamwidth. This is also my first time sharing CSS codes. This layout is also used on

collision and my personal journal as well. I will soon make a new layout for the community and then share it on here as well.

Live Preview:

hue (temporary)
Best Viewed: Firefox. Tested and compatible with IE7 though.

/* 
Name: By Default
Creator: collide (http://collide.dreamwidth.org)
Layout Number: 001
Description: Uses the Transmogrified theme on DW.
*/

/* believe me, this style is much easier to deal with if you 
    just leave this here.  It says "lets use the IE box model" for
    non IE browsers */
    * { box-sizing:border-box; -moz-box-sizing:border-box }

body {
        background-color: #F4F4F4;
		background-image: url(http://i39.tinypic.com/mj7876.jpg);
        font-family: Georgia, serif;
        font-size: 8pt;
        margin: 0 10%;
        padding: 0;
    }

#container {
        background-color: #ffffff;
		width: 900px;
		margin: 20px auto;
    }

#header {
		background-color: #6CBDB5;
		color: #ffffff;
		margin: 0;
        padding: 0;
	}

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

#header h1 {
        margin: 0px;
		padding: 20px;
		font-size: 35px;
		font-weight: lighter;
		font-family: Georgia;
		font-style: italic;
		letter-spacing: -3px;
	}

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

#wrap {
        color: #1A1F1E;
        padding-right: 200px;
        padding-top: 20px;
        padding-left: 20px;
	}

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

.module-section-two {
        position: relative;
        width: 200px;
		border-left: 1px solid #F4F4F4;
        float: left;
        /* 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 {
        border: 0;
        color: #1A1F1E;
        background-color: #ffffff;
        margin: 10px;
        padding: 10px;
        
    }

.module-section-one li {
        display: inline;
        list-style: none;
    }
    .module-section-one ul {
        background-color: #CCC;
        color: #FFF;
        margin: 0;
        padding: 10px 20px;
    }

.module-section-one li a {
        text-decoration: none;
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 10px;
        padding-left: 20px;
        background-color: #CCC;
        color: #FFF;
    }

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

.module-section-two a {
        color: #AAA;
    }
    .module-section-two .module-header a {
        text-decoration: none;
    }
    .module-section-two h2 {
		margin: 0;
        margin-bottom: 7px;
		font-size: 1.1em;
		padding: 0;
		background-color: transparent;
		color: #777;
		border-bottom: 1px solid #f4f4f4;			
	}

.module-section-two ul {
		list-style-type: none;
		margin-left: 0;
		padding: 0;
	}
	.module-section-two ul ul {
		list-style-type: none;
		margin-left: 0.5em;
		padding: 0.5em;
	}

.module-userprofile .userpic img {
        border: 10px solid #f4f4f4;
        margin: 0px;
    }
    .module-userprofile .userpic {
        text-align: center;
		padding: 25px 0;
    }
    .module-userprofile ul {
        margin: 0px;
        padding: 0px;
        text-align: center;
        margin-top: 5px;
    }
	.module-userprofile li {
		margin: -1px;
		}
	.module-userprofile .journal-name {
		text-align: center;
		}
	.module-userprofile .journal-website-name {
		text-align: center;
		}
	.module-userprofile .userlite-interaction-links {
		margin-top: 20px;
		}
    .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 .module-header {
		text-align: left;
		}
	.module-calendar .module-header a, .module-tags_list .module-header a {
		color: #777;
		}
    .module-calendar table {
        margin-left: auto;
        margin-right: auto;
    }
	.module-pagesummary a, .module-typelist a, .module-tags_list a {
		text-decoration: none;
		color: #aaa;
		}
	.module-pagesummary .module-list-item {
		margin-bottom: 5px;
		}

.entry {
        padding: 5px 0px;
        margin-top: 54px;
        position: relative;
        margin-bottom: 10px;
		margin-right: 10px;
    }
	
	.comment, .text_noentries_day {
        padding: 5px 0px;
        margin-top: 94px;
        position: relative;
        margin-bottom: 10px;
		margin-right: 10px;
    }
	
    .entry .userpic a {
        display: block;
        position: absolute;
        right: 10px;
        top: -44px;
        padding: 20px;
    }
	
	.comment .userpic a {
        display: block;
        position: absolute;
        right: 10px;
        top: -84px;
        padding: 10px;
    }
	
    .entry .userpic img, .comment .userpic img {
        border: none;
    }
    
	.entry-title {
		padding: 0.2em;
        margin: 0;
        margin-right: 130px;
		font-size: 20px;
		font-weight: lighter;
		letter-spacing: -1px;
		font-style: italic;
		}
		
	.datetime {
		padding: 0.2em 0;
		}
	
	.comment-title {
        padding: 0.2em;
        margin: 0;
        margin-right: 120px;
    }
    .entry-title a, .comment-title a {
        text-decoration: none;
    }

.entry-wrapper-odd .entry, .comment-wrapper-odd .comment, .text_noentries_day {
        border-bottom: solid 2px #6CBDB5;
        background-color: #ffffff;
        color: #1A1F1E;
    }
	
	/* userpic */
    .entry-wrapper-odd .userpic a, .comment-wrapper-odd .userpic a, .entry-wrapper-even .userpic a, .comment-wrapper-even .userpic a {
        background-color: #FFFFFF;
        border: solid 1px #F4F4F4;
    }
    .entry-wrapper-odd .entry-title, .comment-wrapper-odd .comment-title, .entry-wrapper-even .entry-title, .comment-wrapper-even .comment-title {
        border-bottom: solid 2px #F4F4F4;
        color: #6CBDB5;
        background-color: transparent;
    }
    .entry-wrapper-odd .entry-title a, .comment-wrapper-odd .comment-title a, .entry-wrapper-odd a, .comment-wrapper-odd a {
        color: #6CBDB5;
    }

.entry-wrapper-even .entry, .comment-wrapper-even .comment {
        border-bottom: solid 2px #EB8157;
        background-color: #ffffff;
        color: #1A1F1E;
    }

.entry-wrapper-even .entry-title a, .comment-wrapper-even .comment-title a, .entry-wrapper-even a, .comment-wrapper-even a {
        color: #EB8157;
    }

.entry .time, .entry .date {
        padding: 0.2em;
        display: inline-block;
    }
    
	.entry-content {
		padding: 50px 0px 20px 0px;
		line-height: 170%;
		}
	
	.comment-content {
        padding: 10px 0px;
    }
    .tag {
        font-weight: bold;
        text-align: left;
		padding: 5px 0;
		border-top: 1px solid #EEE;
		border-bottom: 1px solid #EEE;
		margin-bottom: 5px;
    }
    .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 {
		background-color: #F4F4F4;
		padding: 10px;
		margin: 10px 30px 30px 30px;
	}
	.metadata-label-location {
        background-image: url(http://i44.tinypic.com/23vjj1x.jpg);
        background-repeat: no-repeat;
        background-position: 0% 50%;
        padding-left: 12px;
    }
	.metadata-label-mood {
        background-image: url(http://i39.tinypic.com/23sw3uq.jpg);
        background-repeat: no-repeat;
        background-position: 0% 50%;
        padding-left: 12px;
    }
	.metadata-label-music {
        background-image: url(http://i42.tinypic.com/15p3ac4.jpg);
        background-repeat: no-repeat;
        background-position: 0% 50%;
        padding-left: 12px;
    }
	
    .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;
		text-decoration: none;
    }
    .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;
    }
	
	#comments .bottomcomment {
		margin-top: 30px;
		}
	#comments .bottomcomment a {
		color: #777;
		}
	
    .comment-poster {
        display: inline-block;
        min-width: 40%;
    }

#content > hr { display: none; }

.module-section-three {
        clear: both;
        width: 100%;
        background-color: #1A1F1E;
        color: #FFF;
        margin: 30px 0 0 0;
        padding: 1.5em 0px;
    }
    .module-section-three a {
        color: #ffffff;
    }
    .module-section-three .module {
        width: 900px;
		margin: 0 auto;
    }

.hfeed .navigation {
    }

.navigation {
		margin: 0;
		padding: 5px;
		text-align: center;
		border: 0;
		background-color: #ffffff;	
		color: #777;	
	}
	
	.navigation a {
		color: #777;
		text-decoration: none;
		}

.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-bottom: solid 2px #f4f4f4;
        color: #6CBDB5;
        background-color: transparent;
        font-size: 20px;
		font-weight: lighter;
		letter-spacing: -1px;
		font-style: italic;
        margin-bottom: 20px;
    }
	
    .page-tags #content h2 {
        margin-right: 10px;
    }
	
	.page-tags #content{
	    border: 0;
        padding: 10px;
        margin-top: 10px;
		line-height: 170%;
    }

.page-tags #wrap {
        margin-left: 0;
    }
	
	.page-tags #content a {
		color: #6CBDB5;
		}

.month-wrapper, #archive-month dl {
        padding: 10px;
        position: relative;
        margin: 20px 0px;
        border: 0;
        background-color: #ffffff;
    }

.month-wrapper a {
        color: #6CBDB5;
    }
	
     .month-wrapper h3 {
        padding: 0.2em;
        margin: 0;
        border-bottom: solid 2px #f4f4f4;
        color: #6CBDB5;
        background-color: transparent;
        font-size: 20px;
		font-weight: lighter;
		font-style: italic;
		letter-spacing: -1px;
        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 1px #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;
    }
	
/*------------------------------------
  Look of contextual Popup
------------------------------*/
	/*general positioning*/
	div.ContextualPopup {
		margin: 5px 0 0 20px;
		font: normal 8pt "Georgia", serif !important;
	}
	/* attaches border to user icon*/
	div.ContextualPopup img {
		border: 0;
	}
	/*defines general look, font color/size/background color*/
	div.ContextualPopup div.Inner {
		background-color: #fff !important;
		color: #1A1F1E !important;
		border: 1px solid #F4F4F4;
		padding: 0px;
		width: 25em;
	}
	/*defines left side of popup without the user icon*/
	div.ContextualPopup .Content {
		padding: 2px 4px 6px 4px;
		margin-right: 50px;
		line-height: 1.4;
	}
	/*defines the text that shows the relation to the user (XYZ is your mutual friend) */
	div.ContextualPopup .Relation {
		font-weight: bold !important;
	}
	/* look of words LJ Talk */
	div.ContextualPopup .Content .OnlineStatus {
		font-weight: bold;
	}
	/*element that contains the user icon*/
	div.ContextualPopup .Userpic {
		padding: 10px;
		margin: 4px 4px 0 0;
		background-color: #f4f4f4;
		border: 0;
	}
	/* defines the look of the links*/
	div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
		text-decoration: none !important;
		font-weight: normal;
		color: #AAA !important;
	}

/*---------------------------------------------------------------------------------------
	USERICONS
---------------------------------------------------------------------------------------*/

/* so that IE users will see a new image */
* html span.ljuser{
background-image: url(http://i43.tinypic.com/10ws6mc.jpg) !important;
background-repeat: no-repeat;
background-position: left middle;
padding: 0px 16px 16px 0px !important;
}
* html span.ljuser img{
visibility: hidden;
}

/* icon for users */
.ljuser img[src*="user.png"] {
width: 0;
height: 0;
background-repeat: no-repeat;
margin-bottom: 1px;
margin-right: 1px;
background-image: url(http://i43.tinypic.com/10ws6mc.jpg) !important;
padding: 10px 10px 0 0 !important;
}
/* icon for communities */
.ljuser img[src*="community.png"] {
width:0;
height: 0;
background-repeat: no-repeat;
margin-bottom: 1px;
margin-right: 1px;
background-image: url(http://i41.tinypic.com/16bfx2f.jpg) !important;
padding: 10px 10px 0 0 !important;
}
/* icon for user staff*/
.ljuser img[src*="user_staff.png"] {
width:0;
height: 0;
margin-bottom: 1px;
margin-right: 1px;
background-repeat: no-repeat;
background-image: url(http://i43.tinypic.com/2dvr2mq.jpg) !important;
padding: 10px 10px 0 0 !important;
}
/* icon for open-id */
.ljuser img[src*="openid.png"] {
width:0;
height: 0;
margin-bottom: 1px;
margin-right: 1px;
background-repeat: no-repeat;
background-image: url(http://i40.tinypic.com/18byms.jpg) !important;
padding: 10px 10px 0 0 !important;
}
/* icon for protected entries */
img[src*="locked.png"] {
width:0;
height: 0;
margin-bottom: 0px;
margin-right: 1px;
background-repeat: no-repeat;
background-image: url(http://i43.tinypic.com/167a2e1.jpg) !important;
padding: 10px 10px 0 0 !important;
}
/* icon for Not Safe For Work */
img[src*="icon_nsfw.png"] {
width:0;
height: 0;
margin-bottom: 0px;
margin-right: 1px;
background-repeat: no-repeat;
background-image: url(http://i44.tinypic.com/31523yp.jpg) !important;
padding: 10px 10px 0 0 !important;
}
/* icon for Not Safe For Work */
img[src*="private.png"] {
width:0;
height: 0;
margin-bottom: 0px;
margin-right: 1px;
background-repeat: no-repeat;
background-image: url(http://i43.tinypic.com/35a0nth.jpg) !important;
padding: 10px 10px 0 0 !important;
}

Instructions:
1) Apply the Transmogrified theme.
2) Go to "Custom CSS" and paste the css into the textbox.
3) Uncheck "Use layout's stylesheet(s)."
4) Click Save.

Rules:
- Credit

collide /

collision in your profile.
- Do not redistribute or claim this layout as your own.

May. 19th, 2009

Resource Post

Layout 001: By Default

Profile

May 2009

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags