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.

Flat | Top-Level Comments Only

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!

layout: Five AM, “imperium”

Instructions

Modules

no subject

no subject

no subject

no subject