layoutlounge | 61. Full Screen Yarn

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

girl_76

[ Preview ] [ Live ]

Font(s) Used: no special fonts used

Layout:

layout_lounge
Header:

graffitigraphic

Sidebar: Using Layouts, Layout Changes for Beginners, Font Tutorial, or Tiny Icon Help see How To Guides.

/*--------------------------------
S2 Flexible Squares
Layout by http://community.livejournal.com/layout_lounge/
PLEASE DO NOT REMOVE THIS SECTION 
----------------------------------*/
body{
 background-color: #ffffff;
 background-image: url(BACKGROUND IMAGE URL);
 background-repeat: repeat;
 background-attachment: fixed;
 color: #888888;
 font-family: "verdana", arial, sans-serif;
 font-size: 12px;
 margin: 0px 0 20px 0;
 }

a, a:link, a:visited { color: #4BA2B8; }
a:hover { color: #444444; }

blockquote {
 width: 70%;
 background-color: #FFFFFF;
 margin-left: 75px;
 padding: 0px 10px 10px 10px; 
 border: 3px dashed #cccccc; 
 color: #333333;
 font-size: 15px;
 line-height: 16px;
 font-family: "verdana", arial, sans-serif;
 text-align: left;
 }

img.special { border: 10px solid #eeeeee;   -moz-border-radius: 2%; }

b, strong { color: #d37172; }
i, em { color: #b099cc; }
u { color: #6a9066; }
s, strike { color: #AD5C00; }

.b-repost-item { display:none }

img.special { border: 10px solid #eeeeee;   -moz-border-radius: 2%; }

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

/*--------------General------------*/
#content {  	
 background-color: #ffffff;
 width: 100%;	
 margin-left: auto; 
 margin-right: auto;  
 text-align: left;
 padding: 0px;
 background-color: transparent !important;
 }

#maincontent {
 background-color: #ffffff;
 min-width: 400px;
 margin-left: 205px;
 margin-top: -10px;
 font-family: "verdana", arial, sans-serif;
 font-size: 12px;
 color: #333333;
 text-align: center;
 }

.subcontent {
 background-color: #ffffff;
 min-height: 200px;
 margin: auto;
 padding-top: 10px;
 }

/*---------------Header--------------*/
#header {		
 position: relative;
 width: 100%;
 height: 24px;
 text-align: center;
 color: #ffffff;
 padding: 12px 0px 12px 0;
 font-family: verdana, arial !important;
 font-size: 11px !important;
 letter-spacing: 1px;
 text-transform: lowercase;
 font-weight: none;
 background-color: #000000 ;
}

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

div#header a, div#header a:link, div#header a:visited, div#header a:active {
 padding: 15px 10px 15px 10px;
 font-family: verdana !important;
 letter-spacing: 1px;
 color: #ffffff;
 text-align: center;
-moz-border-radius: 10px;
}

div#header a:hover, div#header li.view { 
 padding: 15px 9px 15px 9px;
 color: #ffffff;
 text-shadow: 2px 2px 6px #888888;
 background-color: #84A0A4 !important;
 border: 1px solid #84A0A4;
-moz-border-radius: 10px;
 }

ul.navheader {
 list-style: none;
 line-height: 24px;
 margin: 0;
 padding: 0;
 }

ul.navheader li  {
 display: inline;
 list-style: none;
 }
	
.title, .subtitle { display: none; }

/*-----------Footer------------*/

#footer {			
 width: 100%;
 position: fixed;
 bottom: 0;
 height: 20px;
 margin: 0px 0px 0px 0px;
 padding: 12px 0px 12px 0;
 text-align: center;
 font-family: verdana, arial !important;
 font-size: 11px;
 font-weight: none;
 color: #ffffff;
 background-color: #000000;
 z-index: 200;
 }

div#footer a {
 padding: 15px 10px 15px 10px;
 font-family: verdana !important;
 letter-spacing: 1px;
 color: #ffffff;
 background-color: #84A0A4;
 text-align: center;
-moz-border-radius: 10px;
 }

div#footer a:hover, div#footer li.view {
 padding: 15px 9px 15px 9px;
 color: #ffffff;
 text-shadow: 2px 2px 6px #888888;
 background-color: #44712e !important;
 border: 1px solid #688f92;
-moz-border-radius: 10px;
 }

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

ul.navfooter li  { display: inline;  list-style: none; }
	
.clearfoot {	clear: both;}

/*-------------Sidebar--------------*/

#sidebar {
 width: 200px;
 padding: 0px 0 10px 0; 
 background-color: #FFFFFF;
 border: 1px solid #dddddd;
 font-family: "verdana", arial, sans-serif;
 font-size: 11px;
 color: #777777;
 float: left;
 text-align: left;
 text-transform: normal;
 border: 1px solid #e2e2e2;
-moz-border-radius: 5px;
 }

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

.sbarcalendarposts

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

#sidebar .sbarcalendarposts a:hover { padding: 0px; text-align: center; }

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
 color: #84A0A4;
 display: block;
 text-decoration: none;
 padding: 2px 10px 3px 5px;
 }

div#sidebar a:hover {
 padding: 2px 10px 3px 5px;
 color: #84A0A4;
 }

.defaultuserpic {
 background-color: #eeeeee !important;
 position: relative;
 text-align: center;
 margin: 23px 15px 10px 10px;
 z-index: 15;
 font-family: verdana, arial !important;
 font-size: 13px;
 color: #777777 !important;
 border: 5px solid #eeeeee;
-moz-border-radius: 5px;
}

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

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

.sbarbody2 { padding: 0 5px 0 5px; height: 100%; overflow-x: hidden; overflow-y: auto; -moz-border-radius: 5px; }
		
table.calendar { margin-right: auto; 	margin-left: auto; }
	
.sbarcalendar {
 padding: 1px;
 border: 1px solid #cccccc;
 text-align: center;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 9px;
 }

.sbarcalendarposts {
 padding: 1px;
 border: 1px solid #cccccc;
 background-color: #ffffff;
 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; list-style: block; }

li.sbartitle	{
 list-style: none;
 color: #999999;
 font-size: 15px;
 text-transform: lowercase;
 padding: 10px 0px 5px 0px;
 margin: -11px -5px 5px -5px;
 text-align: center;
 text-shadow: 2px 2px 6px #999999;
 }

#sidebar_linklist .sbarcontent { height: 100%; overflow-x: hidden; overflow-y:auto;  border-width: 0px 4px 0px 4px; border-style: solid; border-color: #ededed; }

#sidebar_linklist li.sbaritem a { color: #B29E7B; }
#sidebar_linklist li.sbaritem a:hover { color: #84A0A4; }

#sidebar_tags .sbarcontent { height: 250px; overflow-x: hidden; overflow-y: auto; }

ul.tagList {width: 100%;}  .tagBox {
 height: 150px;
 overflow-x: hidden;
 overflow-y: scroll; 
 scrollbar-arrow-color: #84A0A4;
 scrollbar-base-color: #ffffff;
 scrollbar-face-color: #ffffff;
 scrollbar-highlight-color: #84A0A4;
 scrollbar-darkshadow-color: #cccccc;
 scrollbar-shadow-color: #cccccc;
 }

#sidebar_summary .sbarcontent { height: 250px; overflow-x: hidden; overflow-y: auto; }

#sidebar_summary li.sbaritem {
 color: #999999;
 font-size: 9px;
 border: 2px dashed #ededed;
 padding: 3px;
 text-transform: normal;
 margin: 3px 0px;
 }

#sidebar_summary li.sbaritem a {
 text-decoration: none;
 display: inline !important;
 color: #999999;
 border: 0px solid #6DA9C1 !important;
 }

#sidebar_summary li.sbaritem a:hover{
 text-decoration: none;
 color: #dddddd;
 border: 0px solid #999999;
 }

/*-----------Entries-----------*/
.entry	{
 padding: 10px 20px 10px 20px;
 margin: 0px;
 color: #000000;
 font-family: "verdana", arial, sans-serif;
 font-size: 13px;
 text-align: left;
 }
	
hr { color: transparent; height: 1px; border-bottom: 1px solid #cccccc; }

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

.userpic {
 background-color: #ffffff !important;
 position: relative;
 float: right;
 margin: 23px 15px 10px 10px;
 z-index: 15;
 font-family: verdana, arial !important;
 font-size: 13px;
 color: #777777 !important;
 border: 5px solid #eeeeee;
-moz-border-radius: 5px;
 }

.userpicfriends {
 background-color: #FFFFFF !important;
 position: relative;
 float: right;
 margin: 23px 15px 10px 10px;
 text-align: center;
 font-family: verdana, arial !important;
 font-size: 13px;
 z-index: 15;
 border: 5px solid #ededed;
-moz-border-radius: 5px;
 }

.userpicfriends a font {color: #84A0A4;}
.userpicfriends a font:hover {color: #ED577C;  text-shadow: 2px 2px 6px #bbbbbb; }

.date  {
 background-color: #eeeeee;
 margin: 10px 10px -15px 10px;
 text-align: center; 
 padding-right: auto;
 padding-left: auto;
 color: #fafafa;
 font-family: arial, verdana, sans-serif;
 font-size: 20px;
 text-transform: uppercase;
 border-width: 1px 1px 0px 1px; 
 border-style: solid;
 border-color: #dddddd;
-moz-border-radius: 6px 6x 0 0;
 }

.subject {
 background-color: #eeeeee;
 padding: 0px 0px 5px 5px;
 margin: -15px 10px 0px 10px;
 color: #333333;
 font-family: Georgia, Verdana, Arial !important;
 font-size: 14px;
 font-weight: bold; 
 text-align: left;
 text-transform: normal;
 text-decoration: underline;
 border-width: 0px 1px 1px 1px; 
 border-style: solid;
 border-color: #dddddd;
-moz-border-radius: 4px;
 }
	
.subject a, .subject a:link, .subject a:visited {color: #333333;}

.subject a:hover {color: #84A0A4;}

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

span.ljuser a b {
 padding: 2px 0 2px 0;
 color: #84A0A4;
 font-weight: normal;
 }

span.ljuser a:hover b {
 padding-top: 2px;
 padding-bottom: 2px;
 color: #84A0A4;
 font-weight: normal;
 }

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

.ljtags {
 margin-top: 5px;
 color: #bbbbbb;
 font-weight: lighter;
 font-size: 12px;
 font-family: "verdana", arial, sans-serif;
 text-transform: lowercase;
 margin: 15px 0px 0px 0px;
 padding: 5px 0px 5px 17px;
 background: URL(http://i31.tinypic.com/15p046e.jpg) no-repeat center left;
 }
	
.currents strong, .currentmood strong, .currentmusic .currentlocation,

.ljtags strong {
 font-family: "verdana", arial, sans-serif;
 font-size: 12px;
 color: #bbbbbb;
 font-weight: lighter;
 text-transform: lowercase;
 }

.currents, .currentmood, .currentmusic, .currentlocation {
 font-family: "verdana", arial, sans-serif;
 font-size: 12px;
 color: #888888;
 font-weight: lighter;
 text-transform: lowercase
 }

.ljtags a, .ljtags a:link, .ljtags a:visited {
 font-family: "verdana", arial, sans-serif;
 font-size: 12px;
 color: #84A0A4;
 text-transform: lowercase;
 font-weight: lighter;
 }

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
 font-family: "verdana", arial, sans-serif;
 font-size: 12px;
 color: #84A0A4;
 text-transform: lowercase;
 font-weight: lighter;
 }
	
.currentlocation a:hover, .ljtags a:hover {
 font-family: "verdana", arial, sans-serif;
 font-size: 12px;
 color: #688f92;
 font-weight: lighter;
 text-transform: lowercase;
 }

.comments { color: #ffffff; margin: 10px; font-family: "century gothic"; font-size: 13px; text-align: center; }
.comments a { border-radius: 7px; padding: 0 10px 0 10px; background: #84a0a4; color: #ffffff; font-weight: bold; border: 1px solid transparent; }
.comments a[href*="mode=reply"] {background: #ededed; color: #aaaaaa;}

.comments a:hover {color: #606060; background: #84a0a4; border: 1px solid #dddddd; }

/*------------Comments Page--------*/
.box {
 padding: 5px 5px 5px 10px;
 margin: 0px;
 text-align: left;
 clear: right;
 background-color: #ffffff;
 }

form div.box {
 text-align:center;
 background-color: #ffffff;
 border: 1px solid #dddddd;
-moz-border-radius: 6px;
  }

.skiplinks {
 text-align: center;
 margin-top: 5px;
 margin-bottom: 3px;
 font-family: "verdana", arial, sans-serif;
 padding: 10px;
 font-size: 8px;
 letter-spacing: 1px;
 color: #999999;
 background-color: #ffffff;
 border: 1px solid #dddddd;
-moz-border-radius: 2px;
 }

.datesubjectcomment {
 margin-top: 10px;
 text-align: left;
 padding: 5px;
 font-size: 10px;
 background: url(http://i53.tinypic.com/2jii5h.jpg) repeat;
 color: #eeeeee;
 }

.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #84A0A4; font-family: verdana, arial !important; font-size: 11px;  text-shadow: 2px 2px 6px #bbbbbb; }
	
.datesubjectcomment a:hover {color: #84A0A4;  font-family: verdana, arial !important; font-size: 11px;  text-shadow: 2px 2px 6px #ffffff; }

.userpiccomment {
 background-color: #eeeeee !important;
 position: relative;
 top: -15px;
 left: 0px;
 margin: 15px 0px 0px 10px;
 z-index: 15;
 float: right;
 border: 5px solid #eeeeee;
 color: #777777;
-moz-border-radius: 5px;
 }

div#content input,
div#content textarea,
div#content select {
 color: #888888;
 border: 1px solid #cccccc;
 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, sans-serif;
 font-size: 10px;
 line-height: 125%;
 color: #888888;
 }
	
.replytosubject {
 text-transform: normal;
 padding: 5px;
 }

.replytoposter {
 background-color: #ffffff;
 color: #84A0A4;
 text-transform: normal;
 padding: 5px;
 }

.commentreply {
 text-align: left;
 position: relative;
 margin: 11px;
 font-family: "verdana", arial, sans-serif;
 font-size: 10px;
 color: #000000;
 }
	
.commentbox {
 padding: 5px;
 margin: 10px 10px 10px 20px;
 text-align: left;
 background-color: #ffffff;
 -moz-border-radius: 2px;
 }

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

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

/*-----------Year/Archive Page----------*/

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

ul.year li {display: inline;}

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

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

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

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

/*-----------Tags Page---------*/

ul.ljtaglist {
 color: #888888;
 font-family: "verdana", arial, sans-serif;
 font-size: 13px;
 padding: 8px 8px 8px 20px;
 background-color: #ffffff;
 }

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

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

.currentlocation {
 background: url(http://i54.tinypic.com/msm1c0.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentmood  {
 background: url(http://i32.tinypic.com/2vhsnxy.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentmusic {
 background: url(http://i26.tinypic.com/2nv6qtf.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentgroups {
 background: url(http://i52.tinypic.com/25p3j2t.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

/* PROTECTED ENTRY */
.subject img[src*="icon_protected.gif"]{
 width: 0;
 height: 0;
 padding: 16px 0px 0 16px;
 background: URL(http://i53.tinypic.com/24ne4i9.jpg) no-repeat !important; 
 }

/* FRIENDS GROUP */
.subject img[src*="icon_groups.gif"]{
width: 0; height: 0; padding: 0 16px 16px 0; background: url(http://i56.tinypic.com/11h8kqw.jpg) no-repeat !important; }

/* PRIVATE ENTRY */
.subject img[src*="icon_private.gif"]{
 width: 0;
 height: 0;
 padding: 16px 0px 0 16px;
 background: URL(http://i52.tinypic.com/2hh3fnn.jpg) no-repeat !important; 
 }

/* USER */
.ljuser img {
 width: 0;
 height: 0;
 background-repeat: no-repeat;
 background: transparent url(http://i55.tinypic.com/em5it.jpg) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

.ljuser img[src*="userinfo.gif"] {
 background: transparent url(http://i55.tinypic.com/em5it.jpg) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/* COMMUNITY */
.ljuser img[src*="community.gif"] {
 background: transparent url(http://i29.tinypic.com/k1ut8m.jpg) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/*-----------Mics-----------*/
.clear { height: 0px; font-size: 0.01px; }
	
#lj_controlstrip_statustext {
 color: #eeeeee;
 font-size: 12px;
 font-weight: bold;
 }

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

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

#lj_controlstrip a:hover { color: #6DA9C1 !important; }
	
.headerimage {
 position: relative;
 width: 100%;
 height: 204px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 0px;
 padding: 0px;
 background-color: transparent !important;
 background-image: url(HEADER IMAGE URL);
 background-position: center;         
 background-repeat: repeat-x;
 }

.separator { height: 10px; }

Header

please credit

girl_76

Background Image:

PLEASE NO HOTLINKING IMAGES

Headers:

graffitigraphic
Background Images: Layout Lounge Site

RULES:
No Hotlinking Images
Header can be changed
Background image can be changed or removed.

Threaded | Flat

From:

angi-is-altered.livejournal.com

It did turn out so great!

got_swagger

I really like this! I'm in love with the fact that it will fit any screen size and that the icons are nicely out of the way of the entry. I also like that you can customize the header as well as the fact that the sidebar is available.

My only problem would be the light on light text, but that's an easy enough fix. :D

empirefruits.livejournal.com

I just added this layout to my journal. I am in love with it. Thank you so much for your hard work that made it possible. Changed the header/banner image to red camellia flowers. :D

Layout Lounge

Layouts, Tutorials, Help, and more

61. Full Screen Yarn

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

About

Links

Tags

Summary

April 2025