vigils | layout: Five AM, “imperium”

Live Preview | Image Preview

Instructions

Go to your Customize page.
Under "Select a New Theme", type "Five AM" in the Search box.
Find "Early Edition" (by winterfish) and click Apply Theme
Scroll down to "Choose a Page Setup", find "2 Columns (sidebar on the right)" and click Apply Page Set Up
Click the button that says Customize Your Theme.
Click Custom CSS on the left. Keep use layout's stylesheets checked! It should look like this!
Copy and paste the following into the custom stylesheet box and click "Save Changes":

/* as edited by vigils.dreamwidth.org */

a { color: #666;
 }

a:visited {  }

a:hover { color: #999;
 }

a:active {  }

q { font-style: italic; }

ul {
	list-style-type:circle;
	margin: 0 40px;
	padding: 0;
}

li { padding-bottom: 5px;}

body {
    font-family: Arial, Verdana, Helvetica, sans-serif; 
	font-size: 12px;
    padding: 0;
    background: #ffffff;
    color: #000;
	background-color: #ffffff;

}

#canvas strong, #canvas b {
	font-family: "Ms Mincho", Courier, "Courier New", display;
	font-weight: normal;
	color: #666;
}

.cuttag_container b {
	text-transform: uppercase;
	font-weight: normal;
}

.cuttag_container a {
	font-weight: normal !important;
}

blockquote {
    background: #f4f4f4;
	background-image:url(http://img27.imageshack.us/img27/3848/blockquotebg.gif);
    border: none;
    line-height: 1.6em;
    margin: 1em 0;
    padding: 2em 1em;
	font-family: ms mincho, courier !important;
    }

/* STRUCTURAL STUFF */

#canvas {
	width: 960px;
	margin: auto;
		}
		
#primary {
	width: 720px !important;
	margin-top: 2em !important;
	padding: 0 !important;
}

#entries {
	padding: 0 !important;
		}
		
#entries div.inner {
			margin: 0;		}

#primary > .inner:first-child {
			padding-right: 2em !important;
			margin: 0;
			padding-top: 0 !important;
		}
		
#secondary { 
	width: 240px !important;
	margin-top: 2em;
		}
		
#pagetitle {
	display: none;
	}
	
/* HEADER */
		
h1#title {
	background: #000;
	font-family: "Arial Black", Gadget, sans-serif;
	color: #fff !important;
	text-align: right;
	font-size: 32px !important;
	padding: 5px 10px !important;
	letter-spacing: -2px;
	border: none;
	background-image:url("http://img683.imageshack.us/img683/8074/imperiumheader.gif");
		}
		
h2#subtitle {
	display: none;
		}
		
#header .module-navlinks li {
	font-family: ms mincho, courier, display !important;
	text-transform: uppercase;
	padding: 0;
	margin: 0 !important;
	font-size: 12px !important;
	color: #fff;
	padding-right: 5px !important;
	background: #000;
		}
		
		
#header .module-navlinks li a {
	color: #fff;
	}
	
		
#header .module-navlinks li a:hover {
	color: #ccc;
	}
		
.module-navlinks ul {
	margin: 0 !important;
	background: #000;
	display: inline-block;
	padding: 3px 3px 3px 8px;
	}
		
#header div {
	padding: 0 !important;
	margin: 0 !important;
	}
		
.topnav {
    margin-top: 0;
    min-height: 0;
	display: none !important;
    }
	
.bottomnav {
    margin-top: 0.5em !important;
	padding: 0 !important;
	font-family: "Ms Mincho", Courier, "Courier New", display;
    }

#header {
	margin: 30px 0 0 0 !important;
	padding: 0;
	border: none;
	background-image: none;
		}
		
#header .module {
	background-image: none;
}
		
h1#title:first-letter, h2#pagetitle:first-letter {
    color: #fff;
    }
	
	
/* ENTRIES */

.entry a { color: #666;
 }
.entry a:visited { color: #333;
 }
.entry a:hover { color: #333;
 }
.entry a:active {  }

.entry {
    border: none;
	background:url(http://img97.imageshack.us/img97/7492/borderu.gif);
	background-repeat: repeat-x;
	line-height: 1.6em;
    }

.entry .header {
	padding-bottom: 10px;
}

.entry-interaction-links {
	background-color: #f4f4f4;
	background-image:url(http://img27.imageshack.us/img27/3848/blockquotebg.gif);
}
	
.entry-wrapper {
    margin: 0em 0 2em;
    }

.entry h3.entry-title {
	text-transform: lowercase;
	font-size: 18px;
	font-family: "Ms Mincho", Courier, "Courier New", display;
	letter-spacing: normal !important;
}

.entry .poster {
    display: none !important;
    }
	
.entry-content {
	margin-top: 1em;
	margin-right: 0 !important;
	padding: 0 0 2em 0;
	width: 100%;
	line-height: 1.6em;
    }
	
.entry-content a { color: #000; font-weight: bold;
 }
 
.entry-content a:hover { color: #666; font-weight: bold;
 }
.entry  {
    color: #333;
}

.entry-title, .entry .entry-title a {
	color: #000;
}

.has-userpic .entry .userpic {
    margin-top: 0px;
    text-align: center;
	
    }
	
.has-userpic .entry .contents {
    margin-right: 142px !important;
	padding: 0px;
    }

.contents .userpic img {
    background: #fff;
    border: 7px solid #000;
    padding: 1px;
    }
	
.entry span.datetime {
	font-family: ms mincho, courier !important;
	font-size: 10px;
	text-transform: uppercase;
}

.entry-interaction-links li,
.entry-management-links li {
    font-family: calibri;
    text-transform: lowercase;
    padding: .5em !important;
    }

.entry-management-links li a {
    color: #404040;
    }

.entry-interaction-links li a:visited,
.entry-management-links li a:visited {
    color: #999;
    }

/* TAG AND METADATA */

.tag {
	font-family: "Ms Mincho", Courier, "Courier New", display;
	letter-spacing: -1px;
	font-size: 12px;
	padding: 10px 0;
}

.tag a {
	color: #a6a6a6;
}

div.metadata {
	border-top: 5px solid #ececec;
	padding-top: 0.5em;
}

.metadata-label {
	font-family: "Ms Mincho", Courier, "Courier New", display;
	color: #000;
}

/* SIDEBAR STUFF */

.module {
    border: none !important;
    margin-bottom: 2.5em;
	background-image: url(http://img97.imageshack.us/img97/7492/borderu.gif);
	background-repeat: repeat-x;
	color: #333;
	line-height: 1.6em;
    }
	
h2.module-header {
	text-align: left;
	font-family: "Ms Mincho", Courier, "Courier New", display;
	text-transform: lowercase;
	font-size: 18px;
	padding: 1em 0 0 0;
	color: #000;
}

h2.module-header a {
	color: #000;
}

.module-typelist ul li {
	
	font-family: "Ms Mincho", Courier, "Courier New", display;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: -1px;
}

.module-typelist ul li a, .module-typelist ul li a:visited {
	color: #fff;
	background: #000;
	padding: 3px 5px;
}

.module-typelist ul li a:hover {
	color: #ccc;
}

.module-typelist ul {
	margin-left: 0 !important;
	list-style-type: none !important;
}

.module ul {
	margin-left: 15px;
	list-style-type: circle;
}

.module ul li {
	padding-left: 0;
	margin-left: 0;
}

.module ul li a {
	font-family: "Ms Mincho", Courier, "Courier New", display;
}

.module a { color: #666; }
.module a:visited, module a:hover {
	color: #333;
}

.module-calendar td a {
    color: #666;
}
.module a { color: #666;
 }
.module a:visited {  }
.module a:hover { color: #333;
 }
.module a:active {  }

/* COMMENTS */

div.comment-title {
	margin-bottom: .6em;
}

div.comment-title h4 {
	background: #000;
	color: #fff;
	padding: 3px 5px;
}

div.comment-title h4 a {
	color: #fff !important;
}

div.comment-title h4 a:hover {
	color: #fff !important;
}

.comment a { color: #666; }
.comment a:visited { color: #333 ; }
.comment a:hover { color:#ccc; }
.comment a:active { color:333; }

.comment .comment-title, .comment .comment-title a {
    color: #666;

}

.comment .comment-title {
    font-family: "MS Mincho", Arial, Verdana, Helvetica, sans-serif; font-size: 1.2em;
}

.comment-wrapper {
    border: none;
	background-image: url(http://img97.imageshack.us/img97/7492/borderu.gif);
    margin: .5em 0 0;
	background-repeat: repeat-x;
	padding-top: 1em;
    }

#footer {
    border: none;
    margin-top: 1em !important;
    padding: 0;
    text-transform: lowercase;
	background-image: url(http://img97.imageshack.us/img97/7492/borderu.gif);
	background-repeat: repeat-x;
    }

/* DW USERLINKS */

#canvas .ljuser a, #canvas .ljuser b {
    color: #000;
	font-family:Arial, Helvetica, sans-serif !important;
	text-transform: lowercase;
	font-weight: bold;
    }

#canvas img[src*="sticky_entry.png"]  { width: 0 !important; height: 0 !important; background: none !important; background-repeat: no-repeat !important; background-position: 0; !important; background-image:url("http://img854.imageshack.us/img854/9246/stickyentry.png") !important;
height:0;
padding:16px 16px 0 0 !important; }

#canvas img[src*="userinfo.gif"], #canvas img[src*="user.png"]  { width: 0 !important; height: 0 !important; background: none !important; background-repeat: no-repeat !important; background-position: 0 2px !important; vertical-align: text-bottom !important; background-image:url(http://img839.imageshack.us/img839/9730/useryw.png) !important;
height:0;
padding:18px 14px 0 0 !important; }

#canvas img[src*="community.gif"], #canvas img[src*="community.png"], #canvas img[src*="comm_other.png"] {
background-image:url("http://img846.imageshack.us/img846/6180/homeolh.png");
background-repeat:no-repeat !important;
height:0;
padding:18px 14px 0 0 !important;
width:0;
}

#canvas img[src*="locked.png"] {
background-image:url("http://img803.imageshack.us/img803/7850/lockgo.png");
background-repeat:no-repeat !important;
height:0;
padding:20px 20px 0 0 !important;
width:0;
}

.comment .header .datetime {
    padding: 0 0 .7em;
    text-transform: uppercase;
	font-family: "MS Mincho", Courier, "Courier New", display;
	font-size: 10px;
    }

.poster-ip {
	color: #666;
	font-size: 9px;
}

div.manage-link a {
	color: #999;
}

/* TOOLTIPS */

div.ContextualPopup {
position: relative;
margin: 5px 0 0 20px;
font: normal 11px "Arial", "Verdana", sans-serif !important;
}

* html div.ContextualPopup {
background: none !important;
}

div.ContextualPopup img {
border: 0;
}

div.ContextualPopup div.Inner {
position: relative;
top: -2px;
left: -2px;
color: #000 !important;
background: #f4f4f4 !important;
background-image:url(http://img27.imageshack.us/img27/3848/blockquotebg.gif) !important;
border: 0 !important;
padding: 7px;
width: 20em;
}

* html div.ContextualPopup div.Inner {
top: 0px;
left: 0px;
}

div.ContextualPopup .Content {
padding: 2px 4px 6px 4px;
margin-right: 50px;
line-height: 1.4;
color: #666;
}

div.ContextualPopup .Relation {
	font-family: "Ms Mincho", Courier, "Courier New", display;
	font-weight: normal !important;
text-transform: uppercase;
	color: #666;
}

div.ContextualPopup .Content .OnlineStatus {
font-style: italic;
}

div.ContextualPopup .Content .GizmoBlurb {
font-size: smaller;
}

div.ContextualPopup .Userpic {
float: right;
top: 0;
right: 0px;
padding: 4px 4px 0 0;
}

* html div.ContextualPopup .Userpic {
top: 2px;
}

div.ContextualPopup .Userpic img {
margin: 0 auto;
max-width: 50px;
height: auto;
vertical-align: middle;
background: #fff;
padding: 1px;
border: 7px solid #000;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal;
color: #333 !important;
}

Modules

The navigation module is meant to go in the header, all others are meant to go in the main module area.

You can credit to terra or vigils. Feel free to modify/redistribute however you like.

Threaded | Flat

Exceptional. This is my kind of layout.
Thank you for coding.

(deleted comment) (Show 1 comment)

Oh, I really like this. Thank you!

This is excellent! Thank you for sharing.

Very nice!

Awesome, I'll be using this. :)

Thank you so much!

Using!

using this, thanks!

Using this for my community! Thank you! ♥

lovely! using this right now, thanks so much! ♥

Is it possible to use a header image with this layout?

great layout. using, thanks :)

Using, thank you!

Using this for my fic comm. Great layout, super simple and clean!

Using at

nexticon. Thanks!

I really like this layout because the icons are out of the way of the entry text (it's an aesthetic thing that irritates me) and I'm SO HAPPY to finally find a layout that does that!

I do have a question though. The breakless white on the page is kind of hard on my eyes. Is there a way to put in a background image that isn't going to affect the entries?

I'm using this!! Thank you!

Fantastic!, and thank you so much for replacing the ~~ugly~~ tiny icons.

it looks amazing! taking and will credit

Using this for my fic comm. Thank you!

using and crediting, thank you! :3

This is great, thanks. I'm trying to use and modify it for a community however the strangest thing is happening with it. The title is cutting off the last letter in my header. It's a 13 letter header title without spaces and it's showing only the first 12 letters. Very odd.

Absolutely using this!! It's just what I was looking for, actually :D Thank you!

I love it!

This is lovely. One thing though: how do you get the title text ("imperium", in the example) to be uppercase? I dislike lowercase letters for titles. I have been tinkering with the code all night and not sorted it out.

Thanks!

Loving this. Using with credit!

Very cool!

Using this layout! Thank you ♥

Using this layout! Thanks so much, will credit :)

using, with credit.
thanks!

Instructions

Modules

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject