layoutlounge | 42a. Variations for Thanksgiving & Halloween Colors

Layout Style: S2 Flexible Squares
Features: Sidebar, Scrolling Tags, Custom Page Summary
Layout Width: 800px
Requested By:

[ Preview ] [ Live ]

Font(s) Used: Automobile

Layout:

layout_lounge
Header:

graffitigraphic

Check out Using Layouts or Layout Changes for Beginners on the sidebar for any extra assistance.

See the Font Tutorial if you need help adding these fonts to your computer system.

/*------------------------------------------------------------------
S2 Flexible Squares
Layout by http://community.livejournal.com/layout_lounge/
PLEASE DO NOT REMOVE THIS SECTION 
--------------------------------------------------------------------*/

body{
	background-color: #615638;
        background-image: url(BACKGROUND IMAGE);
        background-repeat: repeat;
        background-attachment: fixed;
	color: #513a3a;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 12px;
        margin: 10px 0 20px 0;
	}

a, a:link, a:visited {
	color: #943d22;
	text-decoration: none;
	}

a:hover {
	color: #4a275f;
	text-decoration: none;
	}

blockquote {
		padding: 18px; 
		border: 1px solid #e6d6b7; 
		color: #513a3a;
		font-size: 12px;
		line-height: 14px;
		font-family: "verdana", arial, verdana, sans-serif;
		background: #fcf8ec;
		text-align: left;
                     -moz-border-radius: 2%;
		}

b, strong {color: #57257d;}
i, em {color: #d66b25;}
s, u {color: #14524d;}

p, td{	}
	
code, kbd, pre, tt {font-family: "monospace";	}
	
ul.ljtaglist {
	text-align: left;
	padding-left: 5px;
}

/*--------------SECTION: In General------------*/
	
#content {  	
	width: 800px;	
	margin-left: auto; 
        margin-right: auto;  
	text-align: left;
        padding: 0px;
        background-color: transparent !important;
	border-color: #888888;
	border-style: solid;
	border-width: 0px;
}

#maincontent {
	width: 565px;
	float: left;
	margin: 0px 0px 0px 0px;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 12px;
	color: #888888;
	text-align: center;
	}

.subcontent {
        background-color: #fcf8ec;
        width: 563px;
	border: 1px solid #cccccc;
	min-height: 200px;
	margin-right: 0px;
            -moz-border-radius: 1%;
}

/*---------------SECTION: Header--------------*/

#header {		
	position: relative;
	line-height: 125%;
	text-align: center;
        color: #fcf8ec;
	font-family: "verdana";
	font-size: 10px !important;
	width: 100%;
	padding: 0px 0px 10px 0px;
	margin-bottom: 0px;
	text-align: center;
	letter-spacing: 1px;
        text-transform: normal;
	border-bottom: 0px solid #b4c08e;
	background-color: #000000;
}

div#header a, div#header a:link, div#header a:visited, div#footer a,

div#footer

div#header a, div#header a:link, div#header a:visited, div#header a:active {
	padding: 5px;
	font-family: "verdana";
	font-weight: normal;
	text-transform: normal;
	letter-spacing: -1px;
	color: #c54715;
	text-align: center;
	background-color: #000000;
}

div#header a:hover {
	padding: 5px;
	color: #b19f73;
	background-color: #000000;
	border-bottom: 0px solid;
            -moz-border-radius: 2%;
}

ul.navheader 
	{	
	padding: 10px 0px 0px 0px;
        background-color: transparent !important;	
	margin: 0px;
	}

ul.navheader li  {
	display: inline;
	padding: 10px 0px 0px 0px;
        background-color: transparent !important;
	margin: 0 2px;
	}
	
.title, .subtitle {
		display: none;
		}

/*-----------SECTION: Footer------------*/

#footer {			
	width: 100%;
	margin: 0px;
	text-align: left;
	font-family: "georgia";
	font-size: 12px;
	color: #ffffff;
	z-index: 100;
	}

div#footer a {
	padding: 5px;
	font-family: "trebuchet ms";
	font-size: 15px;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: -1px;
	color: #e0a036;
	text-align: left;
	background-color: transparent !important;
}

div#footer a:hover {
	padding: 5px;
	color: #D7D3CD;
	background-color: transparent !important;
	border-bottom: 0px solid;
}

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

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

.clearfoot {		
	clear: both;
	}

/*-------------SECTION: Sidebar--------------*/

#sidebar {
	padding: 0px 0 10px 0; 
        background-color: #fcf8ec;
	margin-left: 0px;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 11px;
	color: #513a3a;
	width: 215px;
	float: right;
	text-align: left;
        text-transform: normal;
	border: 1px solid #cccccc;
            -moz-border-radius-bottomleft: 2%;
            -moz-border-radius-bottomright: 2%;

}

#sidebar .sbarcalendarposts a, #sidebar .sbarcalendarposts a:link,

.sbarcalendarposts

a:visited{
	padding: 0px;
	text-align: center;
	}

#sidebar .sbarcalendarposts a:hover {
	padding: 0px;
	text-align: center;
	}
		
#sidebar_tags .sbarcontent {
         height: 250px;
         overflow:auto;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
	color: #943d22;
	display: block;
	padding: 1px 1px 1px 0px;
	text-decoration: none;
		}

div#sidebar a:hover {
	padding: 1px 1px 1px 0px;
	color: #4a275f;
}

.defaultuserpic {
	text-align: center;
	}

.sbarheader {
	padding: 0px 5px 0px 5px;
	}

.sbarbody {
	padding: 0px 5px 0px 5px;
	}

.sbarbody2 {
	padding: 0 5px 0 5px;
	}
		
table.calendar {
	margin-right: auto;
	margin-left: auto;
	}
	
.sbarcalendar {
	padding: 1px;
	border: 1px solid #513a3a;
	text-align: center;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 9px;
	}

.sbarcalendarposts {
	padding: 1px;
        border: 1px solid #513a3a;
	background-color: #fcf8ec;
	text-align: center;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 9px;
	}
	
ul.sbarlist {
	padding-left: 0px;
	margin-left: 0px;		
        list-style: none;
	}

li.sbaritem {
	padding-left: 0px;
        border-bottom: 0px solid #cccccc;
	list-style: none;
        }

li.sbartitle {
	padding: 3px 5px 3px 5px;
	margin: 10px 0 10px 0;
	list-style: none;
	text-align: center;
	color: #596E1C;
        border-bottom: 1px solid #b4c08e;
        text-transform: normal;
	font-weight: none;
	font-family: "Automobile", Arial;
	font-size: 18px;
		}

ul.tagList {width: 100%;}
    .tagBox {
      height: 250px;
      overflow-x: hidden;
      overflow-y: scroll; 
      scrollbar-arrow-color: #943d22;
      scrollbar-base-color: #ffffff;
      scrollbar-face-color: #ffffff;
      scrollbar-highlight-color: #943d22;
      scrollbar-darkshadow-color: #b4c08e;
      scrollbar-shadow-color: #b4c08e;
}

#sidebar_summary li.sbaritem {
	color: #cccccc;
	border: 1px solid #b4c08e;
	background-color: #fcf8ec;
	padding: 3px;
	text-transform: normal;
	margin: 3px 0px;
	}

#sidebar_summary li.sbaritem a {
	text-decoration: none;
	display: inline !important;
	color: #55396a;
	border: 0px solid #943d22 !important;
	background-color: transparent !important;
	}

#sidebar_summary li.sbaritem a: hover{
	text-decoration: none;
	color: #943d22;
	border: 0px solid #cccccc;
	background-color: transparent !important;
	}

/*-----------ECTION: Entries-----------*/

.entry	{
        padding: 10px;
	margin: 0px;
	color: #513a3a;
	font-family: "arial";
	font-size: 12px;
	text-align: left;
	}
	
hr {
	color: transparent;
	height: 1px;
	border-style : none; 
	border-bottom: 1px solid #b4c08e;
	}

.entry ul li, ol li, li {
	padding-left: 5px;
	margin-left: 5px;
	list-style: normal;
	list-style-position: outside;
	}

.userpic {
	background-color: #fcf8ec !important;
	position: relative;
	float: right;
	padding: 5px;
	margin: 10px;
	z-index: 15;
        color: #b4c08e !important;
	border: 1px #e6d6b7 solid;
            -moz-border-radius: 2%;
	}

.userpicfriends {
	background-color: #fcf8ec !important;
	position: relative;
	float: right;
	padding: 5px;
	margin: 10px;
	text-align: right;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 11px;
	z-index: 15;
	border: 1px #b4c08e solid;
            -moz-border-radius: 2%;
	}

.userpicfriends a font {
	color: #dc9d30;
}

.date {
	margin: 5px 0 0 5px;
	text-align: left;
        color: #513a3a;
	top: 5px;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	}

.subject {
        background-color: #fcf8ec;
	font-weight: none;
	padding-bottom: 5px;
	padding-top: 5px;
        padding-left: 10px;
	color: #4a275f;
	font-family: "Automobile", Verdana;
	font-size: 18px;
	text-transform: normal;
        text-decoration: underline;
	border-bottom: 1px solid #b4c08e;
	}
	
.subject a, .subject a:link, .subject a:visited {
	color: #4a275f;
	}

.subject a:hover {
	color: #596E1C;
	}

.datesubject {
	background-color: transparent;
	padding: 0px;
	text-align: left;
	border: 0px solid #cccccc;
        }

span.ljuser a b {
	padding: 2px 0 2px 0;
	color: #d66b25;
	font-weight: bold;
	}

span.ljuser a:hover b {
	padding-top: 2px;
	padding-bottom: 2px;
	color: #755ea6;
	font-weight: lighter;
	}

/*-----SECTION: Currents, tags, comment links-----*/

.ljtags {
	margin-top: 5px;
	color: #b7a68b;
	font-weight: lighter;
	font-size: 10px;
	font-family: "Verdana", arial;
	text-transform: lowercase;
        margin: 15px 0px 0px 0px;
        padding: 5px 0px 5px 17px;
        background: url(TAGS TINY ICON) no-repeat center left;
	}
	
.currents strong, .currentmood strong, .currentmusic .currentlocation,

.ljtags strong

{
	font-family: "Verdana", arial;
	font-size: 10px;
	color: #b7a68b;
	font-weight: lighter;
	text-transform: lowercase;
	}

.currents, .currentmood, .currentmusic, .currentlocation {
	font-family: "verdana", arial;
	font-size: 10px;
	color: #513a3a;
	font-weight: lighter;
	text-transform: lowercase;
	}

.ljtags a, .ljtags a:link, .ljtags a:visited {
	font-family: "verdana", arial;
	font-size: 10px;
	color: #943d22;
	text-transform: lowercase;
	font-weight: lighter;
	}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
	font-family: "verdana", arial;
	font-size: 10px;
	color: #943d22;
	text-transform: lowercase;
	font-weight: lighter;
	}
	
.currentlocation a:hover, .ljtags a:hover {
	font-family: "verdana", arial;
	font-size: 10px;
	color: #4a275f;
	font-weight: lighter;
	text-transform: lowercase;
	}

.comments {
	font-family: "Verdana", arial;
	font-size: 10px;
	font-weight: normal;
	text-align: right;
	padding: 5px 5px 5px 5px;
	position: relative;
	clear: center;
	margin-top: 5px;
	text-transform: lowercase;
	border-bottom: 1px #b4c08e solid;
	}
	
div.comments a, div.comments a:link, div.comments a:visited{
	color: #4a275f;
}

div.comments a:hover {
	color: #943d22;
	text-decoration: none;
}

/*------------SECTION: Comments Page--------*/

.box {
	padding: 5px;
	margin-top: 0px;
	text-align: left;
        clear:right;
	background-color: #fcf8ec;
	width: 557px;
	}

form div.box {
	text-align:center;
	background-color: #fcf8ec;
	width: 557px;
}

.skiplinks {
	text-align: right;
	margin-bottom: 3px;
	font-family: "Verdana", arial;
	padding: 10px;
	font-size: 9px;
	letter-spacing: 1px;
	color: #dddddd;
	background-color: #fcf8ec;
	border: 1px solid #b4c08e;
          -moz-border-radius-bottomleft:2%;
          -moz-border-radius-bottomright:2%;
	}

.datesubjectcomment {
	margin-top: 20px;
	text-align: right;
	padding: 5px;
        background-color: #fcf8ec;
        color: #513a3a;
	}	
	
.userpiccomment {
	background-color: #615638 !important;
	position: relative;
	top: -30px;
	left: 0px;
	padding: 5px;
	margin: 20px 10px -20px 10px;
	z-index: 15;
	float: right;
	border: 2px #615638 solid;
	color: #513a3a;
            -moz-border-radius: 2%;
	}

div#content input,
div#content textarea,
div#content select {
	color: #943d22;
	border: 1px solid #b4c08e;
	background-color:#ffffff;
	}
	
textarea.textbox  {
	width: 100% !important;
	}

.reply	{
	position: relative;
	margin: 20px 30px 10px 30px;
	padding: 25px 10px 10px 10px;
	text-align: left;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 10px;
	line-height: 125%;
	color: #513a3a;
	}
	
.replytosubject {
	color: #513a3a;
	font-weight: bold;
	text-transform: normal;
        padding: 5px;
        background-color: #fcf8ec;
	}

.replytoposter {
        background-color: #fcf8ec;
	color: #943d22;
	text-transform: normal;
        padding: 5px;
}

.commentreply {
        text-align: left;
	position: relative;
	margin: 10px;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 10px;
	color: #513a3a;
	}
	
.commentbox {
	padding: 5px;
	margin: 10px;
	text-align: left;
        background-color: #fcf8ec;
	border: 1px solid #b4c08e;
            -moz-border-radius: 2%;
	}
	
.datesubjectcomment a:link, .datesubjectcomment a:visited {
	color: #943d22;
	}
	
.datesubjectcomment a:hover {
	color: #4a275f;
	}

.commentboxpartial {
	padding: 10px; 
	margin: 10px; 
        background-color: #fcf8ec;
	}

.commentinfo {
	margin-top: 10px; 
	width: 100%;
	}

/*-----------SECTION: Year/Archive Page----------*/

ul.year {
	text-align: center;
	padding: 5px;
        background-color: #fcf8ec;
	}

ul.year li {
	display: inline;		
	}

table.yeartable {
	margin-left: auto;
	margin-right: auto;
        padding: 10px 100px 10px 100px;
        background-color: #fcf8ec;
	}

table.yeartable td.yeardate, table.yeartable td.yearday {
	border: 1px solid #513a3a;
	color: #513a3a;
	}

table.yeartable td.yearday {
	text-align: center;
	color: #513a3a;
	}

td.yearmonth {
	color: #513a3a;
	border-style: none;
	}

/*-----------SECTION: Tags Page---------*/

ul.ljtaglist {
	color: #cccccc;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 12px;
	padding-left: 12px;
	padding: 8px;
	}

ul.ljtaglist li  {
	list-style: none;
	}

/*----------SECTION: Tiny Icons----------*/

.currentlocation
       {
       background: url(CURRENT LOCATION TINY ICON) no-repeat left center;
        padding: 2px 0px 5px 18px;
       }

.currentmood 
       {
       background: url(CURRENT MOOD TINY ICON) no-repeat left center;
        padding: 2px 0px 5px 18px;
       }

.currentmusic 
       {
       background: url(CURRECT MUSIC TINY ICON) no-repeat left center;
        padding: 2px 0px 5px 18px;
       }
.currentgroups
       {
       background: url(CUSTOM GROUP TINY ICON) no-repeat left center;
        padding: 2px 0px 5px 18px;
       }

/* PROTECTED ENTRY */
	.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
		width: 0;
		height: 0;
		padding: 16px 0px 0 16px;
		background: URL(FRIENDS LOCKED ENTRY TINY ICON); 
		}

/* PRIVATE ENTRY */
	.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
		width: 0;
		height: 0;
		padding: 16px 0px 0 16px;
		background: URL(PRIVATE ENTRY TINY ICON); 
		}

.subject img {
     		width: 0;
     		height: 0;
     		background-repeat: no-repeat;
		background: URL(PRIVATE ENTRY TINY ICON); 
     		padding: 16px 0px 0 16px;
  		}

/* USER */
	.ljuser img { 
  		width: 0;
  		height: 0;
  		background-repeat: no-repeat;
  		background-color:transparent;
		background: URL(USER TINY ICON); 
  		padding: 16px 0px 0 16px;
		}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
		background-color:transparent;
		background: URL(USER TINY ICON); 
  		padding: 16px 0px 0 16px;
		}

/* COMMUNITY */

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
		background-color:transparent;
		background: URL(COMMUNITY TINY ICON);  
 		padding: 16px 0px 0 16px;
		}

/*-----------SECTION: Mics-----------*/

.clear {
	height: 0px;
	font-size: 0.01px;
	}
	
#lj_controlstrip_statustext {
        color: #fcf8ec;
        font-size: 12px;
        font-weight: bold;
}

#lj_controlstrip td {
	font-family: "georgia" !important;
	font-size: 11px;
	background-color: #2a2a2a !important;
	border: 0px solid #eeeeee;
	}

#lj_controlstrip a, .lj_controlstrip a:link, .lj_controlstrip a:visited, {
	font-family: "georgia" !important;
	font-size: 11px;
	color: #fcf8ec !important;
	text-transform: lowercase;
	}

.headerimage {
          position: relative;
	 width: 800px;
	 height: 300px;
         padding-left: 0px;
         padding-right: 0x;
         padding-bottom: 0px;
         padding-top: 0px;
         margin-left: auto;
         margin-right: auto;
         margin-top: 1px;
         background-color: transparent !important;
	 background-image: url(HEADER IMAGE);
	 background-position: center;         
         background-repeat: no-repeat;
            }

.separator {
          height: 20px;
         }

Header 800 x 300

Background Image:

PLEASE NO HOTLINKING IMAGES

Flat | Top-Level Comments Only

Hi, this community is awesome. Especially the guides. This was my first time changing a layout, and your guide for beginners is the only one that i understood after half a day of messing around and getting things wrong. One thing i need help with is the tiny icon. On my journal there is a lock icon next to all of the subject lines. i want to change it to a leaf. i don't know how exactly, or where to even find tiny icons. can you help?

Yay! I've accomplished my goal. I understand these things but am not always us on the lingo so I'm very glad my tutorials are helping people who have trouble messing around with their journal.

Also very flattered that you like this layout enough to use it. I do ask that you upload the header to your PhotoBucket and change the link in your coding (hotlinking).

I am going to post about Tiny Icons just because you asked. It has been something I've been working on because I've had major issues figuring out on my own (so come back and look for the post). But I've recently discovered some codes so I'm going to make a new post. As for finding tiny icons try...

street_of_mercy,

famfamfam,

julzroguenine
http://icondock.com/icons

Do you have the leaf icon because that would help you out a lot. Otherwise I would do a search online for Tiny Icons + Leaf and see what you come up with. I've never been good about finding them. Also the mercy comm will take requests. Merc is awesome.

I have changed the above code to accommodate the Tiny Icon additions I posted about here (http://community.livejournal.com/layout_lounge/17108.html). So now it includes the tiny icon coding from that tutorial post.

You will just have to change the Capitalized portions that say something about TINY ICON and of course the header and background image again. I hope this helps you.

Edited 2009-11-07 01:42 (UTC)

street_of_mercy just posted some leaf tiny icons. I have them posted over at
http://community.livejournal.com/layout_lounge/17382.html.

I love them and I'm using them now!

I really like your layout!
I'll use it and of course I'll credit you thanks!

Thanks. I'm really glad you like it. Enjoy.

how can i change the size if the post headliner to a little small and make it red. Thanks!

You are going to want to change information in the "subject" coding of the Entries Section. There are three parts: subject, subject a, and subject hover.

Thanks!

wow... I really like the layout...I think I'm going to use it...will credit you of course <3

Thanks. I'm glad you like it. Enjoy it.

Taking it. Thanks so much!

You are very welcome.

42a. Variations for Thanksgiving & Halloween Colors

Tiny Icons

Re: Tiny Icons

Re: Tiny Icons

Re: Tiny Icons

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject