vigils | layout: Five AM, “imperium”

Entry tags:

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.

Flat | Top-Level Comments Only

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

Thank you! I'm glad you like it.

(deleted comment)

Thanks :) And eee, FFIX!

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?

It depends how you want the header image to look! You can see on the layout for

vigils that I put a different background on the titlebar, something like that is pretty easy. Getting an image above or below the title bar is harder, but probably doable with a bit of trickery. I didn't specifically code for header images, though.

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?

You can try this:

body {
    font-family: Arial, Verdana, Helvetica, sans-serif; 
    font-size: 12px;
    padding: 0;
    background-image:url(YOUR URL HERE);
    color: #000;

}

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;}

#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;
}

/* STRUCTURAL STUFF */

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

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

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

.entry-content a { color: #000; font-weight: bold;
 }
 
.entry-content a:hover { color: #666; font-weight: bold;
 }

.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 {
}
	
.entry-content {
	margin-top: 1em;
	margin-right: 0 !important;
	padding: 0 0 2em 0;
	width: 100%;
	line-height: 1.6em;
    }
	
.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;
    }

.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 */

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;
    }

/* DW USERLINKS */

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

.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;
}

* 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;
}

I'm not sure that's a look you want, but it's probably the easiest way to incorporate a background image.

Edited 2012-01-15 22:51 (UTC)

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.

ETA: It had something to do with the first-letter attributes on the h1 title element. Removing the entire line fixed it!

Yeah, I've seen that problem around, too, and I'm honestly a bit baffled by it. It goes away on refresh, though, so I'm doubtful that the CSS is the problem, it might be a browser bug. I'm sorry this answer isn't more helpful.

Ah! I'd refresh a number of times but I hadn't looked at it in any other browser but chrome, so it could be an issue with that. In any case it's working out now! Thanks!

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!

Find this bit:

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");
		}

Replace it with:

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");
	text-transform: none !important;
		}

Hope that helps!

Oh, that was scarily fast of you! Thank you very much. :) Worked perfectly.

This is the time of night when I code, heh. And you are welcome, I'm glad it worked!

Loving this. Using with credit!

Very cool!

I'm using this now. Link back to this page in the link list.

Using this layout! Thank you ♥

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

using, with credit.
thanks!

Flat | Top-Level Comments Only

layout: Five AM, “imperium”

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

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject