vigils

Instructions

Go to this page in the "Customize" menu.
Find "Rust" (by sforzinda) and click Apply Theme
Click the button that says Customize Your Theme.
Click Custom CSS on the left. Uncheck use layout's stylesheets! It should look like this!
Copy and paste the following into the custom stylesheet box and click "Save Changes":

/* background images */

#secondary /*sidebar image */ {
background-image:url(http://spoony.valiantknife.org/dwidth/tumblresque/diag.gif); 
}

body /* background image */ {
background-image: url(http://spoony.valiantknife.org/dwidth/tumblresque/grunge.gif);
}

/* remote fonts */

@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v5/nj47mAZe0mYUIySgfn0wpQ.ttf) format('truetype');
}

@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 300;
src: local('Lato Light Italic'), local('Lato-LightItalic'), url(http://themes.googleusercontent.com/static/fonts/lato/v5/2HG_tEPiQ4Z6795cGfdivKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}

@font-face {
font-family: 'Old Standard TT';
font-style: italic;
font-weight: normal;
src: local('Old Standard TT Italic'), local('OldStandardTT-Italic'), url('http://themes.googleusercontent.com/static/fonts/oldstandardtt/v4/QQT_AUSp4AV4dpJfIN7U5NqjIJxvUPK7zqL_omZtgx8.woff') format('woff');
}

@font-face {
font-family: 'Old Standard TT';
font-style: normal;
font-weight: normal;
src: local('Old Standard TT Regular'), local('OldStandardTT-Regular'), url('http://themes.googleusercontent.com/static/fonts/oldstandardtt/v4/n6RTCDcIPWSE8UNBa4k-DOeKpinAksS0bOq9o5QARNc.woff') format('woff');
}

body {
padding: 0;
background-color: #f5f5f5;
font-family: Arial, sans-serif;
font-size: 12px;
color: #58594f;
line-height: 2em;
}

html body {
margin-left: 0em;
margin-right: 0em;
}

img { border: none; }

strong, b {
font-family: "Lato", Calibri, Tahoma, Geneva, sans-serif;
font-weight: 300;
letter-spacing: 1px;
color: #7a7c6e;
}

em, i {
font-family: "Old Standard TT", Georgia, serif;
font-style: italic;
color: #919383;
}

a { text-decoration: none; }
a, a:link, a:visited { color: #df1b1c;   }
a:hover { color: #ba1415; }

q { font-style: italic; }

#canvas {
margin: 0;
margin-left: 160px;
padding: 15px 0;
padding-left:0;
text-align: justify;
width: 960px;
}

#primary {
width: 550px;
text-align: justify;
margin: 0;
float: left;
   }

#secondary {
width: 250px;
background-repeat: no-repeat;
padding: 160px 0 0 0;
margin: 1px 0 0 10px;
position: fixed;
left: 710px;
float: left;
}

#tertiary {
clear: both;
background: #fff;
color: #3f4036;
margin: 0 0 10px 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
margin: 0;
width: 550px;
    }

#tertiary > .inner:first-child { }

#tertiary .separator-after { clear: both; }

/*--- header + footer ---*/

#header { display: none; }
#footer {
background: #ffffff;
text-transform: lowercase;
clear: both;
margin-top: 10px;
width: 550px;
font-family: "Old Standard TT", Gerogia, serif;
}

#footer a, #footer a:link, #footer a:active, #footer a:visited { color: #7a7c6e; }
#footer a:hover { color: #54554d; }

#footer .inner { padding: 10px; }

/*--- prev/next navigation ---*/

li.page-back, li.page-forward {
    display: inline;
    list-style: none;
    padding: 0;
    margin: 0;
    }

li.page-separator { display: none; }

.navigation ul {
    display: inline;
    padding: 0;
    margin: 0;
    }

/*--- entry ---*/

.entry {
background: #fff;
color: #3f4036;
position: relative;
padding: 15px;
margin: 0 0 10px 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

.entry a, #tertiary a {
 color: #df1b1c;
 }

.entry a:visited, #tertiary a:visited {
 color: #df1b1c;
 }

.entry a:hover, #tertiary a:hover {
 color: #ba1415;
    }

.entry-content { margin: 10px 0 0 0; }

.entry .header {
padding: 0;
margin: 0 0 10px 0;
border-bottom: 1px solid #eef3e4;
}

h3.entry-title {
margin: 0;
font-family: "Old Standard TT", Georgia, sans-serif;
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
color: #fff;
text-align: left;
display: inline-block;
background: #000;
padding: 7px 5px;
}

h3.entry-title a{
color: #fff;
}

h3.entry-title a:hover {
color: #df1b1c;
}

.datetime, .comment .poster {
font-family: Lato, Helvetica, sans-serif;
font-size: 10px;
display: block;
text-transform: uppercase;
color: #ccc;
}

.datetime a {
color: #ccc;
}

.entry-poster {
display: none;
}

.entry .userpic {
display: block;
margin: 0;
position: absolute;
top: 0;
left: -110px;
width: 100px;
text-align: right;
padding-bottom: 1px;
}

.entry .userpic img {
border: 0px;
border-bottom: 10px solid #fff;
padding-bottom: 2px;
}

.poster {
font-family: Helvetica, Georgia, sans-serif;
text-transform: uppercase;
}

.metadata {
margin: 15px 0 15px 0; 
}

.metadata ul {
padding: 0;
margin: 0;
}

.metadata ul li {
list-style: none;
font-weight: normal;
text-transform: lowercase;
color: #54554d;
padding: 2px 0;
font-family: Arial, Helvetica, sans-serif;
}
	
.metadata-label {
color: #000;
text-transform: uppercase;
font-family: Lato, Verdana, sans-serif;
font-weight: 300;
letter-spacing: 1px;
}

.tag-text {
text-transform: uppercase;
font-family: "Old Standard TT", serif;
font-size: 12px;
background-image:url(http://spoony.valiantknife.org/dwidth/tumblresque/tag_fill_8x8.png);
background-position: center left;
background-repeat:no-repeat;
padding-left: 12px;
}
	
.tag-text b {
letter-spacing: 0;
}

.tag ul {
padding: 0 0 0 2px;
margin: 0;
display: inline;
}

.tag ul li {
display: inline;
list-style: none;
font-weight: normal;
text-transform: lowercase;
color: #939393;
font-family: "Old Standard TT", serif;
font-style: italic;
letter-spacing: 0;
padding: 0;
}

ul.entry-management-links {
padding: 0;
margin: 10px 0 0 0;
}

ul.entry-management-links li {
display: inline;
list-style: none;
font-weight: normal;
text-transform: lowercase;
color: #939393;
letter-spacing: 0;
padding: 0 5px 0 0;
}

ul.entry-interaction-links {
padding: 0 0 5px 0;
margin: 10px 0 0 0;
text-align: center;
}

ul.entry-interaction-links li {
display: inline;
list-style: none;
text-transform: uppercase;
padding: 0 5px 0 0;
font-weight: normal;
font-family: "Lato", Calibri, Tahoma, Geneva, sans-serif;
font-weight: 300;
font-size: 12px;
letter-spacing: 1px;
}

.entry ul {
list-style-type: circle;
line-height: 200%;
font: 12px "Old Standard TT", serif;
}

.entry ol {
list-style-type: lower-roman;
line-height: 200%;
font: 12px "Old Standard TT", serif;
}

/*-- archive --*/

li.active {
list-style: none;
display: inline;
padding: 0;
margin: 10px;
}

.month {
background-color: #ffffff;
color: #7a7a7a;
padding: 20px;
margin: 0;
}

.month h3 {
font-family: "Old Standard TT", Georgia, sans-serif; 
font-size: 14px;
font-weight: normal;
text-transform: lowercase;
letter-spacing: 1px;
padding: 0;
margin: 0;
text-align: right;
}

.month a {
color: #df1b1c;
}

.month a:visited {
color: #8da8ad;
}

.month a:hover {
color: #ba1415;
}

.navigation ul { display: inline; }
.navigation li { display: inline; list-style: none; }

table.month { border: 0; }
.month caption { display: none; }
.month th {
text-align: center;
margin: 0 2px;
text-transform: lowercase;
font-weight: normal;
}

.month td.day {
font-weight: normal;
color: #939393;
}

.month td.day-has-entries {
font-weight: normal;
color: #939393;
}

.month td.day-has-entries p {
padding: 0 0 0 5px;
margin: 0;
display: inline;
}

.month table {
width: 100%;
border: 0;
margin: auto;
}

td.day {
padding: 10px;
border: 0;
text-align: center;
}

/*-- tags --*/

.page-tags .tags-container {
background-color: #ffffff;
color: #7a7a7a;
padding: 10px;
margin: 0 0 10px 0;
}

.page-tags .tags-container h2 {
margin: 0 0 10px 0;
padding: 0;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #d4d4d4;
font-weight: normal;
text-transform: lowercase;
letter-spacing: 1px;
color: #939393;
}

.page-tags .ljtaglist { margin: 0; padding: 0; }
.page-tags .ljtaglist li {
padding: 0 0 0 10px;
margin: 0;
text-transform: lowercase;
letter-spacing: 0;
list-style: none;
}

.page-tags .tags-container a {
color: #df1b1c;
}

.page-tags .tags-container a:visited {
color: #8da8ad;
}

.page-tags .tags-container a:hover {
color: #ba1415;
}

.page-tags .tags_cloud { text-align: center; }

/*-- icons page --*/

.icons-container {
background-color: #ffffff;
color: #7a7a7a;
padding: 10px;
margin: 0 0 10px;
}

.icons-container h2 {
border-color: #d4d4d4;
border-style: solid;
border-width: 0 0 1px 0;
color: #939393;
font-weight: normal;
letter-spacing: 1px;
margin: 0 0 10px 0;
padding: 0;
text-transform: lowercase;
}

.icons-container a {
color: #df1b1c;
}

.icons-container a:visited {
color: #8da8ad;
}

.icons-container a:hover {
color: #ba1415;
}

.sorting-options ul {
padding-left: 0;
}

.sorting-options ul li {
display: inline;
list-style: none;
margin: 0;
}

.page-icons .comment {
margin: 0;
padding: 0;
}

.page-icons .icon {
margin: 1em 0;
}

.icon-image {
float: left;
clear: left;
margin-bottom: .25em;
min-width: 100px;
padding-right: 1em;
}

.icon-info {
min-height: 100px;
}

.icon-info span {
font-weight: bold;
}

.icon-info .default {
text-decoration: underline;
}

.icon-info .keywords ul {
display: inline;
padding: 0 0 0 13px;
}

.icon-info .keywords ul li {
display: inline;
list-style: none;
padding: 0 .25em 0 0;
}

/*--- comments ---*/

#comments {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

.comment-title {
text-align: left;
}

.comment-title h4 {
font-size: 14px;
font-weight: normal;
display: inline-block;
color: #fff;
margin: 0;
font-family: "Old Standard TT", Georgia, serif;
}

.comment-title h4 a {
color: #fff;
padding: 1px 4px;
background: #000 !important;
}

.comment-pages {
font-family: "Old Standard TT", Georgia, serif;
margin: 15px 0;
}

.comment-pages a {
color: #7a7c6e;
}

.comment-pages a:hover {
color: #54554d;
}

hr.above-entry-interaction-links, hr.below-reply-container { display: none; }

input, textarea {
background-color: white;
padding: 3px;
border: 1px solid #eef3e4;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

textarea.textbox  { width: 90%!important; }

.poster-ip {
font-family: Helvetica, Georgia, sans-serif;
text-transform: uppercase;
color: #939393;
display: block;
text-align: left;
}

.comment .userpic {
width: 100px;
position: absolute;
top: 0;
left: -110px;
text-align: right;
}

.comment .userpic img {
padding-bottom: 2px;
border-bottom: 10px solid #fff;
}

.comment {
background: #fff;
position: relative;
color: #3f4036;
padding: 15px;
margin: 0 0 10px 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
    }

.comment-wrapper { margin: 20px 0; padding: 0; }
.comment-content { margin: 10px 0; }

.bottomcomment, .comments-message {
background: #ffffff;
color: #7a7a7a;
padding: 20px;
margin: 0;
}

.comment a,
.bottomcomment a {
color: #df1b1c;
}

.comment a:visited,
.bottomcomment a:visited {
color: #df1b1c;
}

.comment a:hover,
.bottomcomment a:hover {
color: #ba1415;
}

.comment-management-links ul, .comment-interaction-links ul { margin: 0; padding: 0; list-style: none; }
.comment-management-links li, .comment-interaction-links li { display: inline; }

#qrform table { border: 0!important; }

.comment-poster {
font-family: Helvetica, Georgia, sans-serif; font-size: 0.6em;
text-transform: uppercase;
color: #939393;
}

.comment-management-links ul, .comment-interaction-links ul { margin: 0; padding: 0; list-style: none; }
.comment-management-links li, .comment-interaction-links li { display: inline; }

table.talkform {
background: #ffffff;
font-size: 12px;
padding: 10px;
margin: 0 0 10px 0;
}

table.talkform b {
color: #7a7a7a;
}

table.talkform a {
color: #df1b1c;
}

table.talkform a:visited {
color: #8da8ad;
}

table.talkform a:hover {
color: #ba1415;
}

/*-- modules --*/

#secondary .module {
font-family: "Old Standard TT", Georgia, sans-serif;
font-size: 12px;
}

#tertiary .module {
float: left;
width: 255px;
padding: 10px;
}

#tertiary .module-navlinks {
margin: 0;
padding: 1em 5%;
width: 90%;
}

.module-navlinks {
padding: 10px;
margin: 0;
}

#secondary .module-typelist, #secondary .module-navlinks {
margin: 0;
background-color: #fff;
text-transform: uppercase;
}

#secondary .module-typelist, #secondary .module-navlinks {
font-family: Lato, sans-serif;
font-weight: 300;
}

#secondary .module-typelist a, #secondary .module-navlinks a{
color: #000;
}

#secondary .module-typelist a:hover, #secondary .module-navlinks a:hover{
color: #df1b1c;
}

#secondary .module-typelist .module-header {
display: none;
}

.module-navlinks ul.module-list {
padding: 0;
margin: 0;
list-style: none;
}

.module-navlinks ul.module-list li {
padding: 0;
margin: 0;
list-style: none;
}

.module-navlinks ul.module-list li a, .module-navlinks ul.module-list li a:link { color: #ba1415; }
.module-navlinks ul.module-list li a:visited { color: #dbe6e7; }
.module-navlinks ul.module-list li a:hover { color: #cbdadc; }

.module-calendar { text-align: center; }
.module-customtext {
padding: 0;
margin: 20px 0 0 0;
}

.module-list-item {
border-bottom: 1px solid #eef3e4;
}

.module-header {
font-family: "Old Standard TT", sans-serif; 
font-size: 14px;
color: #fff;
background: #000;
display: inline-block;
font-weight: 300;
text-align: left;
padding: 1px 3px;
margin: 5px 0;
}

#tertiary .module-header a,
#tertiary .module-header a:link,
#tertiary .module-header a:visited,
#tertiary .module-header a:hover
    { color: #fff;  }

.module-userprofile .journal-name,
.module-userprofile .userpic
    { text-align: center; }

.module-userprofile .userpic img { border:7px solid #000; padding: 1px; }

.module-credit {display: none;}

ul.userlite-interaction-links.icon-links {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-left: 0;
padding-left: 0;
text-align: center;
}

ul.userlite-interaction-links.icon-links li {
display: inline;
padding: 0 0.2em;
}

.module-tags_cloud, .module-time, .module-powered { width: 90%; }

.tags_cloud li, .module-tags_cloud li { display: inline;
list-style-type: none; }

.manage-link {
font-size: smaller;
text-align: right;
text-transform: uppercase;
}

.module-time, .module-powered {
border-style:solid;
border-width: 0 0 1px 0;
border-color: #d4d4d4;
letter-spacing: 1px;
text-align: center;
padding-top: 1em;
}

.module-search .search-form { margin: .2em auto; }
.module-search .search-box { margin: .2em; }

#tertiary .module-content ul {
list-style-type: none;
font-weight: 300;
margin: 0;
padding: 0;
}

#tertiary .module-content li {
margin: 0.5em 0;
text-align: center;
}
	
#tertiary .module-content li a {
font-family: Lato, Verdana, Geneva, sans-serif;
text-transform: uppercase;
color: #000;
}
	
#tertiary .module-content li a:hover {
color: #df1b1c;
}
	
#tertiary  .module-customtext {
padding: 5px 10px;
font-family: "Old Standard TT", Georgia, serif;
font-size: 12px;
line-height: 200%;
width: 530px;
text-align: left;
}

/*-- extras --*/

div.ContextualPopup {
position: relative;
margin: 0;
text-align: justify;
font-weight: normal;
font-family: Helvetica, Georgia, sans-serif; 
font-size: 50%;
color: #939393;
line-height: 1.8em;
}

div.ContextualPopup div.Inner {
color: #939393 !important;
border: 1px solid #d4d4d4;
background: #ffffff !important;
padding: 10px;
}

div.ContextualPopup div.Inner a {
color: #df1b1c;
}

div.ContextualPopup div.Inner a:visited {
color: #8da8ad;
}

div.ContextualPopup div.Inner a:hover {
color: #ba1415;
}

div.ContextualPopup div.Inner a:active {
color: ;
}

div.ContextualPopup .Userpic {
margin: 5px;
border: 1px solid #d4d4d4;
background: #ffffff !important;
padding: 5px;
}

blockquote {
background: whiteSmoke;
border: 0;
font-size: 14px;
font-style: italic;
padding: 20px;
margin: 20px;
color:#666;
font-family: "Old Standard TT", Georgia, serif;
}

hr {
color: transparent;
height: 1px;
border-style: none;
border-bottom: 3px double #e6e6e6;
    }

#lj_controlstrip {
background-color: #fff;
background-image: none;
height: 53px;
}

#lj_controlstrip_userpic {
padding-top: 5px;
padding-left: 5px;
width: 43px;
}

#lj_controlstrip td {
font-family: Arial, sans-serif;
font-size: 11px;
line-height: 17.5px;
letter-spacing: normal;
font-family: "Lato", Calibri, Tahoma, Geneva, sans-serif;
color: #3a3b35;
}

#lj_controlstrip_statustext {
color: #7a7c6e;
font-weight: normal;
font-family: "Old Standard TT", Georgia, serif;
font-size: 14px;
margin-bottom: 5px;
}

#lj_controlstrip input {
font-family: Arial, sans-serif;
font-size: 11px;
line-height: 16.5px;
background-color: #fff;
color: #999;
padding: 1px 3px;
margin: 0;
width: auto;
text-transform: none;
}

#lj_controlstrip a {
font-family: "Lato", Calibri, Tahoma, Geneva, sans-serif;
color: #3a3b35;
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks {
border-right: 1px solid #eef3e4;
}

.ljuser b { font-family: Arial, Helvetica, sans-serif; font-weight: bold; letter-spacing: 0px; color: #000; }
.ljuser a {color: #000 !important;}
	
#canvas img[src*="user.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://spoony.valiantknife.org/dwidth/tumblresque/user_6x8.png) no-repeat; padding: 10px 2px 0 6px !important; }
#canvas img[src*="community.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://spoony.valiantknife.org/dwidth/tumblresque/home_8x8.png) no-repeat; padding: 10px 2px 0 8px !important; }
#canvas img[src*="feed.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://spoony.valiantknife.org/dwidth/tumblresque/rss_alt_12x12.png) no-repeat; padding: 12px 0 0 15px !important; }
#canvas img[src*="locked.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://spoony.valiantknife.org/dwidth/tumblresque/key_stroke_16x16.png) no-repeat; padding: 16px 0 0 18px !important; }
#canvas img[src*="private.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://spoony.valiantknife.org/dwidth/tumblresque/key_stroke_16x16.png) no-repeat; padding: 16px 0 0 18px !important; }
#canvas img[src*="user_staff.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://spoony.valiantknife.org/dwidth/tumblresque/user_9x12.png) no-repeat; padding: 12px 0 0 12px !important; }
#canvas img[src*="comm_staff.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://spoony.valiantknife.org/dwidth/tumblresque/home_12x12.png) no-repeat; padding: 12px 0 0 15px !important; }

Customizing the sidebar image

It is easy to do! It's designed for a 250px x 150px image, so it probably won't look quite right with any other sizes.

To add the header, find these lines of code (hint: they're at the very top for easy editing) and replace YOUR URL HERE with the url of the image you want to use!

#secondary /*sidebar image */ {
background-image:url(YOUR URL HERE); 
}

To change the main background image, it's a similar principle. Find these lines of code, and replace with the URL of your image file. (The background can be any size!)

body /* background image */ {
background-image: url(YOUR URL HERE);
}

Colors used (for easy replacing)

#df1b1c · links

#ba1415 · link hover

You can credit to terra or vigils. Feel free to modify/redistribute however you like! This layout uses icons by P.J. Onori, licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.

Page 3 of 3 << [1] [2] [3] >>

Threaded | Top-Level Comments Only

From:

halfthetrouble

Thanks for sharing! Definitely using it for this account. :)

gifted_idiot

Hey, I'm sorry, I'm totally new to this stuff. I have a few questions--

Is it possible to remove the footer entirely? I don't really think I'll need it and I love the otherwise clean look of the page.

Could you possibly show me where to change the color of the entries (currently white), the blocked out journal titles (currently black), and the menu on the side (currently white)? I know how to replace, I'm just not sure which sections are for which thing. :)

Is there a way to get rid of the search/expand cut tags buttons on the right?

...and I think that's it! Thanks so much for this beautiful layout, it's my favorite that I've seen on DW!

Edited Date: September 3rd, 2015 02:24 pm (UTC)

terra

Hi, thanks for the nice comment :) Just as an FYI, this is sort of info I don't always have the time to give out.

You can make the footer disappear with #footer { display: none; }

But I'm not sure if that's the footer you meant. The footer module area is removable by default, you just have to set your modules in the customize page.

The color of the entries is controlled by .entry, the entry titles by .entry-title, and the side menu by .navlinks.
The search/expand cut tags are again, controlled in the module section in your customize options. It's called "cut tag controls" and you can uncheck it.

If you want to find out what part of the code is controlling which textual element, the "Inspect Element" on your browser is usually a quick way to check.