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

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)

Flat | Top-Level Comments Only

layout: Five AM, “imperium”

Instructions

Modules

no subject

no subject