D_Villains Layout
Instructions
1. In the Journal Style area, switch to S2 if you haven't already (I think it's a link somewhere on the left?).
2. Do a search for "flexible squares" and pick any Flexible Squares layout (I'm using Blue Gray).
3. At the bottom, choose 2 Column (sidebar on left).
4. Then Customize the Theme.
5. In the Sidebar section, set "Show tags in the sidebar?" to Yes.
6. In the Custom CSS section, set all the options to No. Then copy+paste this code into the Custom CSS section:
/*********************
* HEADER
*********************/
.headerimage {
height: 300px;
width: 800px;
margin-right: 0px;
margin-left: auto;
background-image: url('http://sig.grumpybumpers.com/host/d_villains.gif');
}
/*********************
* TEXT & COLORS
*********************/
body {
background-color: #000000;
}
body, p, td, tr, ul, ol, li {
color: #bbbbbb;
font-family: arial, sans-serif;
font-size: 9pt;
}
b {
font-family: verdana;
}
a, a:link, a:active, a:visited {
color: #aa66dd;
text-decoration: none;
}
a:hover {
color: #cc88ff;
}
textarea {
background-image: url('http://i56.tinypic.com/2s85hmp.gif');
background-color: #333333;
color: #bbbbbb;
font-family: "courier new";
font-size: 8pt;
border: 1px solid #cccccc;
}
blockquote {
border-left: 3px solid #333333;
padding: 0px 0px 0px 15px;
}
/*********************
* MAIN NAV/LINK BAR
* FORMATTING
*********************/
#header .title {
display: none;
}
#header {
text-align: center;
margin: 0px;
}
.navheader {
list-style-type: none;
padding: 10px;
background-image: url('http://i56.tinypic.com/2s85hmp.gif');
}
.navheader li {
display: inline;
font-style: italic;
font-size: 11pt;
margin: 3px;
}
.navheader li a, .navheader li a:visited {
text-transform: uppercase;
font-size: 10pt;
letter-spacing: 2px;
border: 1px solid #999999;
background-color: transparent;
background-repeat: no-repeat;
background-position: 8px 50%;
border-radius: 2px;
padding: 5px 8px 5px 30px;
}
.navheader li:first-child a, .navheader li:first-child a:visited {
color: #77ddaa;
background-image: url('http://i43.tinypic.com/10gjv3k.gif'); /* apple */
}
.navheader li:first-child a:hover {
color: #cccccc;
background-image: url('http://i39.tinypic.com/fjgcuv.gif'); /* apple hover */
}
.navheader li:nth-child(2) a, .navheader li:nth-child(2) a:visited {
color: #ffbb33;
background-image: url('http://i42.tinypic.com/o0b31s.gif'); /* shell */
}
.navheader li:nth-child(2) a:hover {
color: #cccccc;
background-image: url('http://i39.tinypic.com/14v2r05.gif'); /* shell hover */
}
.navheader li:nth-child(3) a, .navheader li:nth-child(3) a:visited {
color: #ff2255;
background-image: url('http://i41.tinypic.com/naq0k.gif'); /* hat */
}
.navheader li:nth-child(3) a:hover {
color: #cccccc;
background-image: url('http://i44.tinypic.com/30ndyra.gif'); /* hat hover */
}
.navheader li:nth-child(4) a, .navheader li:nth-child(4) a:visited {
color: #9999aa;
background-image: url('http://i42.tinypic.com/30wqwoy.gif'); /* hook */
}
.navheader li:nth-child(4) a:hover {
color: #cccccc;
background-image: url('http://i42.tinypic.com/2qvtglx.gif'); /* hook hover */
}
.navheader li a:hover {
border: 1px solid #cccccc;
}
.view {
text-transform: uppercase;
margin: 0px 10px !important;
}
/*********************
* ENTRY FORMATTING
*********************/
/* styling the line for entry title */
.subject {
font-size: 16pt;
font-family: "arial narrow", "tw cen mt condensed";
}
.subject a, .subject a:link, .subject a:visited {
font-size: 16pt;
font-family: "arial narrow", "tw cen mt condensed";
color: #dd2244;
}
.subject a:hover {
font-size: 16pt;
font-family: "arial narrow", "tw cen mt condensed";
color: #ee3399;
}
/*********************
* ENTRY FORMATTING
* styling the date line near subject
*********************/
.date {
font-size: 12pt;
display: inline;
float: right;
padding: 2px 0px;
}
/*********************
* ENTRY FORMATTING
* styling the metadata such as tags
*********************/
.ljtags {
color: #000000;
background-image: url('http://i51.tinypic.com/2ql5wtg.png');
background-repeat: no-repeat;
background-position: left center;
margin-top: 40px;
font-size: 0px;
padding: 0px 16px;
}
.ljtags a, .ljtags a:visited {
font-size: 9pt;
color: #cccccc;
padding: 2px 6px;
background-color: #dd2244;
border-radius: 1px;
margin-right: 6px;
}
.ljtags a:hover {
color: #666666;
background-color: #ffffff;
}
.clear {
display: none;
}
.currents {
margin: 20px 0px 10px 0px;
text-align: right;
text-transform: lowercase;
font-style: italic;
}
/*********************
* ENTRY FORMATTING
* styling links at the foot of each entry
* (comment links)
*********************/
.comments {
font-size: 11pt;
color: #000000;
text-transform: lowercase;
letter-spacing: -2px;
line-height: .1;
margin: 40px 0px;
}
.comments {
text-align: right;
}
.comments a, .comments a:visited, .comments a:active {
letter-spacing: 0px;
line-height: 1;
color: #999999;
width: 120px;
background-color: #333333;
background-image: url('http://i56.tinypic.com/2s85hmp.gif');
background-repeat: repeat;
padding: 5px 12px;
border-radius: 2px;
}
.comments a:hover {
color: #666666;
background-color: #ffffff;
background-image: none;
}
/*********************
* POSITIONING
*********************/
#content {
width: 100%;
margin-left: auto;
margin-right: 0px;
}
#maincontent {
margin-right: 20px;
float: right;
width: 65%;
}
/* move userpic to the left of content and
* change the colors */
.userpicfriends {
position: relative;
top: 5px;
width: 110px;
background-color: #333333 !important;
background-image: url('http://i56.tinypic.com/2s85hmp.gif');
background-repeat: repeat;
padding: 5px;
float: left;
text-align: center;
border-radius: 3px;
}
.userpic img, .userpicfriends img {
background-color: transparent;
padding: 5px 5px 1px 5px;
}
/* shove rest of entry to the right */
.datesubject {
margin: 0px 0px 15px 140px;
}
.entry {
margin-left: 140px;
}
.subcontent {
margin-top: 15px;
}
/*********************
* SIDEBAR
*********************/
#sidebar {
float: left;
width: 25%;
margin-left: 15px;
}
.sbarbody {
background-image: url('http://i56.tinypic.com/2s85hmp.gif');
background-repeat: repeat;
background-color: #333333;
width: 100%;
margin: 20px 5px;
border-radius: 6px;
}
.sbarlist {
list-style-type: none;
padding: 0px;
margin: 0px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.sbarcontent {
width: 100%;
height: 145px;
overflow: auto;
}
.sbartitle {
text-align: center;
text-transform: uppercase;
font-size: 9pt;
letter-spacing: 3px;
background-color: #222222;
padding: 4px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
/*********************
* FORMAT CALENDAR
* (SIDE/TOP BAR)
*********************/
.calendar {
text-align: center;
margin-top: 2px;
}
.sbarcalendar, .sbarcalendarposts {
font-family: "courier new";
font-size: 7pt;
padding: 4px 6px;
margin: 2px;
border-radius: 6px;
background-color: #222222;
}
.sbarcalendarposts {
background-color: #191919;
}
/*********************
* FORMAT TAG BOX
* (SIDE/TOP BAR)
*********************/
#sidebar_tags li a {
display:block;
padding: 5px;
border-bottom: 1px solid #222222;
font-family: "courier new";
text-align: center;
}
#sidebar_tags li a:hover {
background-color: #2a2a2a;
}
/*********************
* FOOTER WORK
*********************/
.clearfoot {
clear: both;
}
.navfooter {
list-style-type: none;
padding: 0px;
margin: 0px;
text-align: center;
}
.navfooter li {
display: inline;
}
.navfooter li a {
font-size: 12pt;
background-color: #333333;
background-image: url('http://i56.tinypic.com/2s85hmp.gif');
padding: 5px 12px;
border-radius: 2px;
}
.navfooter li a:hover {
background-color: #ffffff;
background-image: none;
}
.viewing {
font-size: 12pt;
padding: 5px 12px;
}
/*********************
* TAGS PAGE
*********************/
#maincontent h2 {
font-size: 16pt;
font-family: "arial narrow", "tw cen mt condensed";
font-weight: normal;
}
.ljtaglist {
list-style-type: square;
list-style-position: inside;
padding: 0px;
margin: 0px;
}
.ljtaglist li {
padding: 4px;
border-bottom: 1px dotted #333333;
margin: 2px 0px;
}
/*********************
* CALENDAR PAGE
*********************/
.year {
list-style-type: none;
padding: 0px;
margin: 15px 0px;
text-align: center;
}
.year li {
display: inline;
font-size: 12pt;
margin: 3px;
}
li.active {
font-size: 14pt;
}
.yearmonth {
font-size: 16pt;
font-family: "arial narrow", "tw cen mt condensed";
}
.yearmonth a, .yearmonth a:visited {
color: #dd2244;
}
.yearmonth a:hover {
color: #ee3399;
}
.yearday {
text-align: center;
text-transform: uppercase;
margin: 5px 0px;
}
.yeardate {
font-family: "courier new";
padding: 4px 6px;
background-image: url('http://i56.tinypic.com/2s85hmp.gif');
background-color: #333333;
}
.yeardate a, .yeardate a:visited {
font-size: 12pt;
font-family: arial, sans-serif;
}
And that's it!
Miscellaneous things...
Images used:
The banner is here: http://sig.grumpybumpers.com/host/d_villains.gif
It uses grumpybumpers to pick a banner at random.
Grain texture: http://i56.tinypic.com/2s85hmp.gif
Icons:
Hover:
If you add stuff (like extra sidebars or a website link or whatnot) they might not be styled properly. In that case, let me know and I'll add whatever code is needed to get them to look right. :)
1. In the Journal Style area, switch to S2 if you haven't already (I think it's a link somewhere on the left?).
2. Do a search for "flexible squares" and pick any Flexible Squares layout (I'm using Blue Gray).
3. At the bottom, choose 2 Column (sidebar on left).
4. Then Customize the Theme.
5. In the Sidebar section, set "Show tags in the sidebar?" to Yes.
6. In the Custom CSS section, set all the options to No. Then copy+paste this code into the Custom CSS section:
/*********************
* HEADER
*********************/
.headerimage {
height: 300px;
width: 800px;
margin-right: 0px;
margin-left: auto;
background-image: url('http://sig.grumpybumpers.com/host/d_villains.gif');
}
/*********************
* TEXT & COLORS
*********************/
body {
background-color: #000000;
}
body, p, td, tr, ul, ol, li {
color: #bbbbbb;
font-family: arial, sans-serif;
font-size: 9pt;
}
b {
font-family: verdana;
}
a, a:link, a:active, a:visited {
color: #aa66dd;
text-decoration: none;
}
a:hover {
color: #cc88ff;
}
textarea {
background-image: url('http://i56.tinypic.com/2s85hmp.gif');
background-color: #333333;
color: #bbbbbb;
font-family: "courier new";
font-size: 8pt;
border: 1px solid #cccccc;
}
blockquote {
border-left: 3px solid #333333;
padding: 0px 0px 0px 15px;
}
/*********************
* MAIN NAV/LINK BAR
* FORMATTING
*********************/
#header .title {
display: none;
}
#header {
text-align: center;
margin: 0px;
}
.navheader {
list-style-type: none;
padding: 10px;
background-image: url('http://i56.tinypic.com/2s85hmp.gif');
}
.navheader li {
display: inline;
font-style: italic;
font-size: 11pt;
margin: 3px;
}
.navheader li a, .navheader li a:visited {
text-transform: uppercase;
font-size: 10pt;
letter-spacing: 2px;
border: 1px solid #999999;
background-color: transparent;
background-repeat: no-repeat;
background-position: 8px 50%;
border-radius: 2px;
padding: 5px 8px 5px 30px;
}
.navheader li:first-child a, .navheader li:first-child a:visited {
color: #77ddaa;
background-image: url('http://i43.tinypic.com/10gjv3k.gif'); /* apple */
}
.navheader li:first-child a:hover {
color: #cccccc;
background-image: url('http://i39.tinypic.com/fjgcuv.gif'); /* apple hover */
}
.navheader li:nth-child(2) a, .navheader li:nth-child(2) a:visited {
color: #ffbb33;
background-image: url('http://i42.tinypic.com/o0b31s.gif'); /* shell */
}
.navheader li:nth-child(2) a:hover {
color: #cccccc;
background-image: url('http://i39.tinypic.com/14v2r05.gif'); /* shell hover */
}
.navheader li:nth-child(3) a, .navheader li:nth-child(3) a:visited {
color: #ff2255;
background-image: url('http://i41.tinypic.com/naq0k.gif'); /* hat */
}
.navheader li:nth-child(3) a:hover {
color: #cccccc;
background-image: url('http://i44.tinypic.com/30ndyra.gif'); /* hat hover */
}
.navheader li:nth-child(4) a, .navheader li:nth-child(4) a:visited {
color: #9999aa;
background-image: url('http://i42.tinypic.com/30wqwoy.gif'); /* hook */
}
.navheader li:nth-child(4) a:hover {
color: #cccccc;
background-image: url('http://i42.tinypic.com/2qvtglx.gif'); /* hook hover */
}
.navheader li a:hover {
border: 1px solid #cccccc;
}
.view {
text-transform: uppercase;
margin: 0px 10px !important;
}
/*********************
* ENTRY FORMATTING
*********************/
/* styling the line for entry title */
.subject {
font-size: 16pt;
font-family: "arial narrow", "tw cen mt condensed";
}
.subject a, .subject a:link, .subject a:visited {
font-size: 16pt;
font-family: "arial narrow", "tw cen mt condensed";
color: #dd2244;
}
.subject a:hover {
font-size: 16pt;
font-family: "arial narrow", "tw cen mt condensed";
color: #ee3399;
}
/*********************
* ENTRY FORMATTING
* styling the date line near subject
*********************/
.date {
font-size: 12pt;
display: inline;
float: right;
padding: 2px 0px;
}
/*********************
* ENTRY FORMATTING
* styling the metadata such as tags
*********************/
.ljtags {
color: #000000;
background-image: url('http://i51.tinypic.com/2ql5wtg.png');
background-repeat: no-repeat;
background-position: left center;
margin-top: 40px;
font-size: 0px;
padding: 0px 16px;
}
.ljtags a, .ljtags a:visited {
font-size: 9pt;
color: #cccccc;
padding: 2px 6px;
background-color: #dd2244;
border-radius: 1px;
margin-right: 6px;
}
.ljtags a:hover {
color: #666666;
background-color: #ffffff;
}
.clear {
display: none;
}
.currents {
margin: 20px 0px 10px 0px;
text-align: right;
text-transform: lowercase;
font-style: italic;
}
/*********************
* ENTRY FORMATTING
* styling links at the foot of each entry
* (comment links)
*********************/
.comments {
font-size: 11pt;
color: #000000;
text-transform: lowercase;
letter-spacing: -2px;
line-height: .1;
margin: 40px 0px;
}
.comments {
text-align: right;
}
.comments a, .comments a:visited, .comments a:active {
letter-spacing: 0px;
line-height: 1;
color: #999999;
width: 120px;
background-color: #333333;
background-image: url('http://i56.tinypic.com/2s85hmp.gif');
background-repeat: repeat;
padding: 5px 12px;
border-radius: 2px;
}
.comments a:hover {
color: #666666;
background-color: #ffffff;
background-image: none;
}
/*********************
* POSITIONING
*********************/
#content {
width: 100%;
margin-left: auto;
margin-right: 0px;
}
#maincontent {
margin-right: 20px;
float: right;
width: 65%;
}
/* move userpic to the left of content and
* change the colors */
.userpicfriends {
position: relative;
top: 5px;
width: 110px;
background-color: #333333 !important;
background-image: url('http://i56.tinypic.com/2s85hmp.gif');
background-repeat: repeat;
padding: 5px;
float: left;
text-align: center;
border-radius: 3px;
}
.userpic img, .userpicfriends img {
background-color: transparent;
padding: 5px 5px 1px 5px;
}
/* shove rest of entry to the right */
.datesubject {
margin: 0px 0px 15px 140px;
}
.entry {
margin-left: 140px;
}
.subcontent {
margin-top: 15px;
}
/*********************
* SIDEBAR
*********************/
#sidebar {
float: left;
width: 25%;
margin-left: 15px;
}
.sbarbody {
background-image: url('http://i56.tinypic.com/2s85hmp.gif');
background-repeat: repeat;
background-color: #333333;
width: 100%;
margin: 20px 5px;
border-radius: 6px;
}
.sbarlist {
list-style-type: none;
padding: 0px;
margin: 0px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.sbarcontent {
width: 100%;
height: 145px;
overflow: auto;
}
.sbartitle {
text-align: center;
text-transform: uppercase;
font-size: 9pt;
letter-spacing: 3px;
background-color: #222222;
padding: 4px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
/*********************
* FORMAT CALENDAR
* (SIDE/TOP BAR)
*********************/
.calendar {
text-align: center;
margin-top: 2px;
}
.sbarcalendar, .sbarcalendarposts {
font-family: "courier new";
font-size: 7pt;
padding: 4px 6px;
margin: 2px;
border-radius: 6px;
background-color: #222222;
}
.sbarcalendarposts {
background-color: #191919;
}
/*********************
* FORMAT TAG BOX
* (SIDE/TOP BAR)
*********************/
#sidebar_tags li a {
display:block;
padding: 5px;
border-bottom: 1px solid #222222;
font-family: "courier new";
text-align: center;
}
#sidebar_tags li a:hover {
background-color: #2a2a2a;
}
/*********************
* FOOTER WORK
*********************/
.clearfoot {
clear: both;
}
.navfooter {
list-style-type: none;
padding: 0px;
margin: 0px;
text-align: center;
}
.navfooter li {
display: inline;
}
.navfooter li a {
font-size: 12pt;
background-color: #333333;
background-image: url('http://i56.tinypic.com/2s85hmp.gif');
padding: 5px 12px;
border-radius: 2px;
}
.navfooter li a:hover {
background-color: #ffffff;
background-image: none;
}
.viewing {
font-size: 12pt;
padding: 5px 12px;
}
/*********************
* TAGS PAGE
*********************/
#maincontent h2 {
font-size: 16pt;
font-family: "arial narrow", "tw cen mt condensed";
font-weight: normal;
}
.ljtaglist {
list-style-type: square;
list-style-position: inside;
padding: 0px;
margin: 0px;
}
.ljtaglist li {
padding: 4px;
border-bottom: 1px dotted #333333;
margin: 2px 0px;
}
/*********************
* CALENDAR PAGE
*********************/
.year {
list-style-type: none;
padding: 0px;
margin: 15px 0px;
text-align: center;
}
.year li {
display: inline;
font-size: 12pt;
margin: 3px;
}
li.active {
font-size: 14pt;
}
.yearmonth {
font-size: 16pt;
font-family: "arial narrow", "tw cen mt condensed";
}
.yearmonth a, .yearmonth a:visited {
color: #dd2244;
}
.yearmonth a:hover {
color: #ee3399;
}
.yearday {
text-align: center;
text-transform: uppercase;
margin: 5px 0px;
}
.yeardate {
font-family: "courier new";
padding: 4px 6px;
background-image: url('http://i56.tinypic.com/2s85hmp.gif');
background-color: #333333;
}
.yeardate a, .yeardate a:visited {
font-size: 12pt;
font-family: arial, sans-serif;
}
And that's it!
Miscellaneous things...
Images used:
The banner is here: http://sig.grumpybumpers.com/host/d_villains.gif
It uses grumpybumpers to pick a banner at random.
Grain texture: http://i56.tinypic.com/2s85hmp.gif
Icons:
Hover:
If you add stuff (like extra sidebars or a website link or whatnot) they might not be styled properly. In that case, let me know and I'll add whatever code is needed to get them to look right. :)