vigils

terra posting in

vigils

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

From:

aurrai

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

From:

terra

Thank you! I'm glad you like it.

Comment Depth: 1(deleted comment)

From:

terra

Thanks :) And eee, FFIX!

From:

ivoryandhorn

Oh, I really like this. Thank you!

From:

ghosthack

This is excellent! Thank you for sharing.

From:

sarken

Very nice!

From:

mooki

Awesome, I'll be using this. :)

From:

charmings

Thank you so much!

From:

cloyingly

Using!

From:

piratebar

using this, thanks!

From:

gacha

Using this for my community! Thank you! ♥

From:

hyperion

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

From:

allchildren

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

From:

terra

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.

From:

emster

great layout. using, thanks :)

From:

ainokallas

Using, thank you!

From:

gimmick_game

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

From:

neke

Using at

nexticon. Thanks!

From:

got_swagger

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?

From:

terra

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 Date: January 15th, 2012 10:51 pm (UTC)

From:

genieforyourworld

I'm using this!! Thank you!

From:

canarycream

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

From:

furrywalls

it looks amazing! taking and will credit

From:

natsudive

Using this for my fic comm. Thank you!

From:

rosees

using and crediting, thank you! :3

From:

multimod

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.

From:

multimod

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

From:

terra

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.

From:

multimod

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!

From:

malfatto

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

From:

flowerish

I love it!

From:

mresundance

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!

From:

terra

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!