kill color icons

11 June 2007 @ 04:06 pm

Layout/Overrides - Simple Serif (Flexible Squares)

I haven't made any overrides available for a long time, but here's a layout I originally made for my journal and never used, and I figured it may be useful to someone, so here goes :)

View larger preview (alternate link)

Specs:
Flexible Squares
Firefox (looks okay in IE)
Free & Paid accounts (should work in Plus)
Comment Pages not coded

CSS Codes

/* CSS Stylesheet by Emma-Jane - http://killcolor.livejournal.com
Please credit and do not copy or claim as your own, thank you :) 
Last edited: Jun 10th, 2007 */

body {
	background-color: #FFF;
	text-align: center;
	color: #999;
	font-family: "Georgia", "Times New Roman", "Tahoma", "Verdana";
	font-size: 11px;
	margin: 20px 0 20px 0;
	line-height:140%;
	}

a, a:link, a:visited {
	color: #BBB;
	font-style:italic;
	text-decoration: none;
	}

a:hover {
	color: #AAA;
	text-decoration: underline;
	}

p, td, blockquote {
	font-size: 11px;
	}

code, kbd, pre, tt {
	font-family: monospace;
	}

#content {
	width: 600px;
	margin-left: auto; margin-right: auto;
	}

#maincontent {
	margin-top: 15px;
	margin-right: 160px;
	text-align: left;
	}

#sidebar {
	margin-top: 15px;
	width: 140px;
	float: right;
	text-align: left;
	padding-left:10px;
	border-left: solid 1px #F9F9F9;
	}

#header {
	padding: 0;
	margin: 0;
	text-align: left;
	font-size: 14px;
	letter-spacing: 2px;
	font-style:italic;
	}

#footer {
	z-index: 100;
	clear: both;
	padding: 0;
	margin: 0;
	text-align: left;
	font-size: 14px;
	letter-spacing: 2px;
	font-style:italic;
	}

/* header -- links to views; title of journal; subtitle of journal */

ul.navheader {
	padding: 0px;
	margin: 0px;
	}

ul.navheader li  {
	display: inline;
	padding: 0 5px 0 0;
	}

.title    {
	display:none;
	height:0px;
	}

.subtitle {
	display:none;
	height:0px;
	}

/* sidebar */

.defaultuserpic {
	text-align: center;
	}

.defaultuserpic img {
	background: #F9F9F9;
	border: solid 1px #EEE;
	padding:10px;
	}

.sbarheader {
	display:none;
	}

.sbarbody, .sbarbody2 {
	padding: 0;
	text-align:justify;
	}

#sidebar_summary li.sbaritem {
	margin:0;
	padding: 3px 0;
	border-bottom: 1px #DDD solid;
	background: none;
	}

table.calendar {
	margin-right: auto;
	margin-left: auto;
	}

.sbarcalendar {
	border-color: #F9F9F9;
	border-width: 1px;
	border-style: solid;
	text-align: center;
	font-size: 10px;
	color: #DDD;
	}

.sbarcalendarposts {
	border-color:  #DEDEDE;
	border-width: 1px;
	border-style: solid;
	background-color: #EFEFEF;
	text-align: center;
	font-size: 10px;
	}

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

li.sbaritem, .tagcloud {
	padding-left: 15px;
	background: url('http://img505.imageshack.us/img505/3296/bulletoffnw6.gif') no-repeat center left;
	margin:0;
	list-style: none;
	}

li.sbaritem:hover, .tagcloud:hover {
	padding-left: 15px;
	background: url('http://img505.imageshack.us/img505/3764/bulletonrv0.gif') no-repeat center left;
	margin:0;
	list-style: none;
	}

li.sbartitle {
	list-style: none;
	margin: 15px 0 5px 0;
	text-align: right;
	font-size: 14px;
	letter-spacing: 2px;
	font-style:italic;
	border-bottom: solid 1px #F9F9F9;
	}

/* maincontent */

.subcontent {
	}

.entry {
	margin: 0;
	padding: 0;
	text-align: justify;
	border-bottom: solid 1px #F5F5F5;
	}

.entry_text {
	min-height:120px;
	}

.entry ul li {
	padding-left: 5px;
	margin-left: 15px;
    }

.entry ol li {
	padding-left: 5px;
	margin-left: 15px;
	}

.userpic {
	position: relative;
	float: left;
	background: #F9F9F9 !important;
	border: solid 1px #EEE;
	padding:10px;
	margin: 0 10px 10px 0;
	z-index: 15;
    }

.userpicfriends {
	position: relative;
	float: left;
	background: #F9F9F9 !important;
	border: solid 1px #EEE;
	margin: 0 10px 10px 0;
	padding:10px;
	z-index: 15;
	text-align: center;
	font-size: 10px;
	}

.date {
	font-size: 10px;
	color: #DDD;
    }

.subject {
	font-size: 14px;
	font-style:italic;
	letter-spacing:2px;
	color: #BBB;
	}

.datesubject {
	text-align:right;
	}

.comments {
	text-align: left;
	position: relative;
	color: #FFF;
	padding-left: 15px;
	background: url('http://img169.imageshack.us/img169/4715/penks4.gif') no-repeat center left;
	}

.ljtags {
	text-align: left;
	position: relative;
	padding-left: 15px;
	background: url('http://img338.imageshack.us/img338/9724/taghb2.gif') no-repeat center left;
	}

.currents {
	font-size:10px;
	color: #AAA;
	border-left: solid 1px #EEE;
	padding-left:10px;
	background: #FCFCFC;
	margin:5px 0 5px 0;
	}

/* maincontent --  entry, reply pages */

.datesubjectcomment {
            background-color: #919bad;
            padding: 5px;
            margin-top: 20px;
            }

.userpiccomment {
        position: relative;
        border-width: 5px;
        border-style: solid;
        border-color: #d4dce8;
        background-color: #d4dce8;
        top: -30px;
        left: 0px;
        padding: 5px;
        margin: 10px 10px -20px 10px;
        z-index: 15;
        float: left;
        border-width: 1px;
        border-color: #919bad;
        border-style: solid;
        }

.box {
        border-style: solid;
        border-width: 1px 0px 0px 0px;
        border-color: #999999;
        padding: 10px;
        clear: left;
        }

input, textarea {
        background-color: #d4dce8;
        color: #000000;
        }

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

.reply    {
        position: relative;
        margin: 20px 30px 10px 30px;
        padding: 25px 10px 10px 10px;
        text-align: left;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        line-height: 125%;
        background-color: #d4dce8;
        color: #000000;
        }

.replytosubject {
        font-weight: bold;
        }

.commentreply {
        position: relative;
        margin: 10px;
        font-size: 11px;
        font-family: "Verdana", sans-serif;
        color: #000000;
        }

.commentbox {

border-color: #999999;
        border-width: 1px;
        border-style: solid;
        padding: 10px;
        margin: 10px;
        background-color: #d4dce8;
        }

.datesubjectcomment a:link, .datesubjectcomment a:visited {
        color: #ffffff;
        }

.datesubjectcomment a:hover {
        color: #b0b9c8;
        }

.commentboxpartial {
        border-color: #999999;
        border-width: 1px;
        border-style: solid;
        padding: 10px;
        margin: 10px;
        background-color: #d4dce8;
        }

.commentinfo {
        background-color: #d4dce8;
        margin-top: 10px;
        width: 100%;
        }

/* maincontent -- year/achive pages */

ul.year {
        text-align: center;
        padding-bottom: 40px;
        }

ul.year li {
        display: inline;
        }

table.yeartable {
        margin-left: auto;
        margin-right: auto;
        }

table.yeartable td.yeardate, table.yeartable td.yearday {
        border-width: 1px;
        border-style: solid;
        border-color: #999999;
        }

table.yeartable td.yearday {
        background-color: #EEE;
        text-align: center;
        }

td.yearmonth {
        border-style: none;
        }

/* footer */

ul.navfooter{
        padding: 0px;
        margin: 0px;
        }

ul.navfooter li  {
        display: inline;
        margin: 0 5px 0 5px;
        }

.clearfoot {
        clear: both;
        }

/* misc  */

.clear {
        height: 0px;
        }

.skiplinks {
        text-align: center;
        }

.headerimage {
        /* for formatting header image */
        }

.separator{
        /* for formatting separators between entries */
        height: 25px;
    }

* html div.subcontent {
        /* fixes an IE reply page bug */
        height: 1%;
        clear: none;
    }

* html div.box#commentform {
        /* fixes an IE reply page bug */
        position: absolute;
        border-width: 1px;
        border-style: solid;
        border-color: #999999;
        background-color: #c2cde0;
    }
    
	.subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
		width: 0;
		height: 0;
		padding: 13px 9px 0px 0px;
		background: url(http://img169.imageshack.us/img169/939/lockoh4.gif);}

.subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{
		width: 0;
		height: 0;
		padding: 13px 9px 0px 0px;
		background: url(http://img169.imageshack.us/img169/939/lockoh4.gif);
		}

.ljuser img { 
  		width: 0;
  		height: 0;
  		background-repeat: no-repeat;
  		background-color:transparent;
  		/* so that IE users will still see an image */
  		background-image: url('http://img169.imageshack.us/img169/6599/userax2.gif'); 
  		padding: 12px 12px 0 2px;
		}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
		background-color:transparent;
  		background-image: url('http://img169.imageshack.us/img169/6599/userax2.gif');
  		padding: 12px 12px 0 2px;
		}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
		background-color:transparent;
 		background-image: url(http://img169.imageshack.us/img169/9517/communityhf8.gif);
 		padding: 12px 12px 0 2px;
		}

h2 {
	font-size: 14px;
	font-style:italic;
	letter-spacing:2px;
	color: #BBB;
	padding:0;
	margin:0;
	}

ul li {
	padding-left: 5px;
	margin-left: 15px;
	list-style-type:square;
    }

ol li {
	padding-left: 5px;
	margin-left: 15px;
	}

Installation

Go to the Customisation Area
Under Look and Feel, select Flexible Squares in the Layout and Language drop-down menu. Hit Save Changes
Now under Custom Options, go into Custom CSS
Set all the drop-down menus to NO and then copy the above codes in the Custom stylesheet text area. Hit Save Changes and you are done :)

Rules & whatnot

Please remember to credit emmahyphenjane or killcolor if you use this stylesheet (even if you edit it!)
Do not claim as your own!

Notes: All the little images are hosted on imageshack, so you can leave them there if you wish - but if they no longer work, I will not re-upload them! (so I would advise you to re-upload them to your owner server ;)) - mini icon credits:

lovelamp &

damnicons

Tags: overrides

27 | +

Advertisement

Advertisement