layoutlounge | 45. Colorful Chuck Layout

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

[ Preview ] [ Live ]

Font(s) Used: Automobile
Layout:

layout_lounge
Header:

graffitigraphic

Sidebar:
.Using Layouts or Layout Changes for Beginners on the sidebar for any extra assistance.
.Font Tutorial if you need help adding these fonts to your computer system.
.Tiny Icons for some suggested images.

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

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

a, a:link, a:visited { color: #25909b; text-decoration: none; }

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

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

b, strong {color: #b62657;}
i, em {color: #596E1C;}
s, u {color: #553a90;}

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: #f7f6f0;
        width: 563px;
	border: 1px solid #cccccc;
	min-height: 200px;
	margin-right: 0px;
            -moz-border-radius: 1%;
}

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

#header {		
	position: relative;
        line-height: 125%;
        color: #f7f6f0;
	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-top: 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;
 letter-spacing: 1px;
 color: #a95344;
 background-color: #000000;
}

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

div#header li.view {
 background-color: #F7F6F0;
 color: #000000; 
 padding: 3px;
 -moz-border-radius: 2%;
}

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

ul.navheader li  { display: inline; 10px 0px 0px 0px; 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: #a95344;
	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 {
	width: 215px;
	float: right;
        text-transform: normal;
	margin: 0px;
	padding: 0px; 
	font-family: "verdana", arial;
	font-size: 11px;
	color: #444444;
	}

#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: #25909b;
	display: block;
	padding: 1px 1px 1px 0px;
	text-decoration: none;
		}

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

.defaultuserpic {
 text-align: center;
 background-color: #f7f6f0; 
 border: 1px solid #cccccc;
 -moz-border-radius-topleft: 4%; 
 -moz-border-radius-topright: 4%;
 -moz-border-radius-bottomleft: 4%; 
 -moz-border-radius-bottomright: 4%; 
 padding: 10px; 
 margin: 0 0 15px 0; 
 list-style: none; 
 }

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

.sbarbody {
 background-color: #f7f6f0; 
 border: 1px solid #cccccc;
 -moz-border-radius-topleft: 4%; 
 -moz-border-radius-topright: 4%;
 -moz-border-radius-bottomleft: 4%; 
 -moz-border-radius-bottomright: 4%; 
 padding: 10px; 
 margin: 0 0 15px 0; 
 list-style: none; 
}

.sbarbody2 { 
 text-align: justify; 
 background-color: #F7f6f0; 
 -moz-border-radius-topleft: 4%;
 -moz-border-radius-topright: 4%; 
 -moz-border-radius-bottomleft: 4%; 
 -moz-border-radius-bottomright: 4%; 
 padding: 20px; 
 margin: 0 0 15px 0; 
 list-style: none; 
}

.sbarcontent { margin: 0px; padding: 0px; list-style: none; }

table.calendar { margin-right: auto; margin-left: auto;	}
	
.sbarcalendar, .sbarcalendarposts { color: #606060; border-right: 2px solid #CCCCCC; border-bottom: 2px solid #CCCCCC; -moz-border-radius-bottomleft: .5%; -moz-border-radius-bottomright: .5%; padding: 2px; margin: 10px; }

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

li.sbaritem { margin: 0px; padding: 0px 10px; list-style: none; }

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

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

#sidebar_summary li.sbaritem {
	color: #cccccc;
 border-right: 2px solid #CCCCCC;
 border-bottom: 2px solid #CCCCCC; 
 -moz-border-radius-bottomleft: .5%; 
 -moz-border-radius-bottomright: .5%;
	background-color: #f7f6f0;
	padding: 3px;
	text-transform: normal;
	margin: 3px 0px;
	}

#sidebar_summary li.sbaritem a {
	text-decoration: none;
	display: inline !important;
	color: #898f5b;
	border: 0px solid #25909b !important;
	background-color: transparent !important;
	}

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

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

.entry	{
        padding: 10px;
	margin: 0px;
	color: #444444;
	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: #f7f6f0 !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: #f7f6f0 !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: #25909b;
}

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

.subject {
        background-color: #f7f6f0;
	font-weight: none;
	padding-bottom: 5px;
	padding-top: 5px;
        padding-left: 10px;
	color: #b62657;
	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: #b62657;
	}

.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: #9f3e31;
	font-weight: normal;
	}

span.ljuser a:hover b {
	padding-top: 2px;
	padding-bottom: 2px;
	color: #9f3e31;
	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: #444444;
	font-weight: lighter;
	text-transform: lowercase;
	}

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

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
	font-family: "verdana", arial;
	font-size: 10px;
	color: #25909b;
	text-transform: lowercase;
	font-weight: lighter;
	}
	
.currentlocation a:hover, .ljtags a:hover {
	font-family: "verdana", arial;
	font-size: 10px;
	color: #b62657;
	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: #b62657;
}

div.comments a:hover {
	color: #25909b;
	text-decoration: none;
}

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

.box {
	padding: 5px;
	margin-top: 0px;
	text-align: left;
        clear:right;
	background-color: #f7f6f0;
	width: 557px;
            -moz-border-radius: 2%;
	}

form div.box {
	text-align:center;
	background-color: #f7f6f0;
	width: 557px;
            -moz-border-radius: 2%;
}

.skiplinks {
	text-align: right;
	margin-bottom: 3px;
	font-family: "Verdana", arial;
	padding: 10px;
	font-size: 9px;
	letter-spacing: 1px;
	color: #dddddd;
	background-color: #f7f6f0;
	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: #f7f6f0;
        color: #444444;
	}	
	
.userpiccomment {
	background-color: #988258 !important;
	position: relative;
	top: -30px;
	left: 0px;
	padding: 5px;
	margin: 20px 10px -20px 10px;
	z-index: 15;
	float: right;
	border: 2px #988258 solid;
	color: #444444;
            -moz-border-radius: 4%;
	}

div#content input,
div#content textarea,
div#content select {
	color: #25909b;
	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: #444444;
	}
	
.replytosubject {
	color: #444444;
	font-weight: bold;
	text-transform: normal;
        padding: 5px;
        background-color: #f7f6f0;
	}

.replytoposter {
        background-color: #f7f6f0;
	color: #25909b;
	text-transform: normal;
        padding: 5px;
}

.commentreply {
        text-align: left;
	position: relative;
	margin: 10px;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 10px;
	color: #444444;
	}
	
.commentbox {
	padding: 5px;
	margin: 10px;
	text-align: left;
        background-color: #f7f6f0;
	border: 1px solid #b4c08e;
            -moz-border-radius: 2%;
	}
	
.datesubjectcomment a:link, .datesubjectcomment a:visited {
	color: #25909b;
	}
	
.datesubjectcomment a:hover {
	color: #b62657;
	}

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

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

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

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

ul.year li {
	display: inline;		
	}

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

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

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

td.yearmonth {
	color: #444444;
	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;
 background-color: #f7f6f0; 
 -moz-border-radius: 4%;
	}

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

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

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

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

.currentmusic 
       {
       background: url(MUSIC TINY ICON) no-repeat left center;
        padding: 2px 0px 5px 18px;
       }
.currentgroups
       {
       background: url(CUSTOM GROUP CURRENT 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 ONLY 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(CUSTOM FRIENDS GROUP 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: #f7f6f0;
        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: #f7f6f0 !important;
	text-transform: lowercase;
	}
	
.headerimage {
          position: relative;
	 width: 800px;
	 height: 300px;
         padding: 0px;
         margin-left: auto;
         margin-right: auto;
         margin-top: 0px;
         background-color: transparent !important;
	 background-image: url(HEADER IMAGE);
	 background-position: center;         
         background-repeat: no-repeat;
            }

.separator { height: 20px; }

Header can be found
5 Headers & Chuck Mania Post

Background Image:

PLEASE NO HOTLINKING IMAGES

Flat | Top-Level Comments Only

From:

x1ofakindx.livejournal.com

Hey! I would love to use the layout but I'm apparently too dumb!
Where do I insert the header and background image url?

I'm sorry, never mind. I found it in the Help/Request Desk :)

Edited Date: 2010-02-05 01:08 pm (UTC)

sireesanwar.livejournal.com

Tis okay. I'm glad you managed.

little-secret.livejournal.com

this is great, snagging and will credit of course!

Thanks for commenting... both times. *lol*

unightfog.livejournal.com

I didn't know that you are making layouts too! this one is awesome! I have been looking for a new layout for ages, but none really looked as if it was made for me...but this so does! love it and snagged it!
thank you!!!

You didn't know I made layouts? Wow. I had no idea you didn't know. I've been doing it for a while. I do make layouts upon request. This one was requested by me. *lol*

So I checked out your journal and wow! So Jamie and Claire? You should definitely make tons of graphics for us. I would love to see some.

byrons-brain.livejournal.com

Wow this layout is fantastic! I've been reading through your tutorials, they've been so helpful... I'm loving all of your designs I just now have to pick one....

colls

I stumbled across your comm b/c someone had credited you on their journal. I like the simple look to this layout and am using it sans the background image on my graphics comm (with credit).

Thank you!

Finally got here to reply!

That is perfectly fine with me. My designs are more suggestion. You can always change header and background image. The point is that you like it.

Enjoy!

przewrazliwiona.livejournal.com

Hi :) This layout's awesome!

I want to own this layout but I've got a problem. I have already used this on my webpage but unfortunately the header isn't visible... I think I followed instructions properly so everything should be ok and I can't figure out what's going on... Maybe you could hepl me?

(sorry for my English.)

Please send me a link so I can determine what the problem is.

Thanks.

Layout Lounge

Layouts, Tutorials, Help, and more

45. Colorful Chuck Layout

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

About

Links

Tags

Summary

April 2025