layoutlounge | 80. Transparenting the Dark Side

Entry tags:

80. Transparenting the Dark Side

Layout Style: S2 Flexible Squares
Features: Transparent Entries and Sidebar, large background image, rounded userpics
Layout Width: 1000px

{ Preview } { Live }
Credit:

layout_lounge

Theme and Layout Change Tutorial

Click here for fonts and font tutorial (Members Only)
Capture it, Dancing Script OT, Lilly, Celtic

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

a, a:link, a:visited { color: #77C9B8; }
a:hover { color: #444444; }

blockquote {
 position: inherit;
 width: 60%;
 background-color: rgba(0, 0, 0, 0.2);
 background-image: url(http://i77.photobucket.com/albums/j49/SireesAnwar/Layouts/open_quotes_small.png~original), url(http://i77.photobucket.com/albums/j49/SireesAnwar/Layouts/close_quotes_small.png~original);
 background-repeat: no-repeat, no-repeat;
 background-attachment: scroll, scroll;
 background-position: left top, right top;
 margin-right: auto;
 margin-left: auto;
 padding: 5px 50px 5px 50px; 
 color: #ffffff;
 font-size: 13px;
 line-height: 16px;
 font-family: "trebuchet ms", arial, sans-serif;
 text-align: left;
 -moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-box-shadow: #232323 0 0 5px;
    -moz-box-shadow: #232323 0 0 5px;
     -ms-box-shadow: #232323 0 0 5px;
      -o-box-shadow: #232323 0 0 5px;
         box-shadow: #232323 0 0 5px;
 }

img.special, i img { background-color: #ffffff !important; border-size: 1px solid #cccccc; margin: 5px; padding: 12px 12px 25px 12px;
-webkit-box-shadow: #232323 0 0 5px;
    -moz-box-shadow: #232323 0 0 5px;
     -ms-box-shadow: #232323 0 0 5px;
      -o-box-shadow: #232323 0 0 5px;
         box-shadow: #232323 0 0 5px;
}

b, strong { color: #8DB861; }
i, em { color: #603C1C; }
u { color: #5782BA; }
s, strike { color: #AD5C00; }

.b-repost-item { display:none; }

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

/*--------------General------------*/

#content {   
 background-color: transparent;
 width: 1000px; 
 margin-left: auto; 
 margin-right: auto;  
 text-align: left;
 padding: 0px;

}

#maincontent {
 width: 765px;
 padding-top: 150px;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 12px;
 color: #eeeeee;
 text-align: center;
 }

.subcontent {
background-color: rgba(0, 0, 0, 0.8) ;
 min-height: 200px;
 margin: auto;
 padding-top: 10px;
 -moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-box-shadow: #232323 0 0 5px;
    -moz-box-shadow: #232323 0 0 5px;
     -ms-box-shadow: #232323 0 0 5px;
      -o-box-shadow: #232323 0 0 5px;
         box-shadow: #232323 0 0 5px;
 }

/*---------------Header--------------*/
#header {  
 position: absolute;
 left: 0;
 width: 100%;
 height: 20px;
 text-align: center;
 color: #ffffff;
 padding: 6px 10px 10px 0;
 margin-top: 100px;
 font-family: verdana, arial !important;
 font-size: 11px !important;
 letter-spacing: 1px;
 text-transform: lowercase;
 font-weight: none;
 background-color: rgba(0, 0, 0, 0.8);
}

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: 12px 10px 11px 10px;
margin: 0px -8px 0 -7px;
 font-family: verdana !important;
 letter-spacing: 1px;
 color: #ffffff;
 text-align: center;
 border-right: 1px solid #666666;
 border-left: 1px solid #666666;
}

div#header li.view { 
 color: #64A0BC;
padding: 12px 10px 11px 10px;
margin: 0px -8px 0 3px;
 border-right: 1px solid #666666;
 border-left: lpx solid #666666;
 }

div#header a:hover {
 color: #64A0BC;
 border-right: 1px solid #666666;
 border-left: lpx solid #666666;
 }

ul.navheader {
 list-style: none;
 line-height: 24px;
 margin: 0;
 padding: 0;
 border-left: lpx solid #666666;
 }

ul.navheader li  {
 display: inline;
 list-style: none;
 border-left: lpx solid #666666;
 }
 
.title, .subtitle { display: none; }

/*--------------- footer ---------------*/

.lj-view-recent #footer, .lj-view-friends #footer {
bottom: 10px;
padding:5px 0;
position:fixed;
right:0;
text-align:left;
text-transform:lowercase;
width: 100%;
z-index:0;
}

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

ul.navfooter a {
-moz-border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
-khtml-border-radius: 0 10px 10px 0;
}

ul.navfooter li + li a {
float:right;
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
border-radius: 10px 0 0 10px;
-khtml-border-radius: 10px 0 0 10px;
 background-color: rgba(0, 0, 0, 0.6);}

ul.navfooter li + li a:hover {  background-color: rgba(0, 0, 0, 0.6) !important; }

.lj-view-recent #footer a, .lj-view-friends #footer a, .lj-view-recent #footer a:link, .lj-view-friends #footer a:link {
 background-color: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-family: open sans condensed, georgia,arial,sans-serif;
font-size: 13px;
padding: 10px;
}

.lj-view-recent #footer a:hover, .lj-view-friends #footer a:hover {
color:#FFFFFF;
 background-color: rgba(0, 0, 0, 0.6);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
padding-right: 5px;
border-left: 6px solid #AAC6BA;
letter-spacing: 3px;
}

ul.navfooter li {
list-style:none outside none;
margin:0;
padding:0;
display:inline; }

ul.navfooter li + li {
list-style:none outside none;
margin:0;
padding:0;
display:inline;  }

#footer .viewing { display:none; }

/*--------------- sidebar ---------------*/

#sidebar {
width: 260px;
margin-right: -50px; 
margin-top: 150px;
background-color: rgba(0, 0, 0, 0.8) ;
color: #ffffff;
font-family: open sans condensed, arial, georgia;
font-size: 12px;
font-weight: normal;
float: right;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-box-shadow: #b8b8b8 0 0 5px;
    -moz-box-shadow: #b8b8b8 0 0 5px;
     -ms-box-shadow: #b8b8b8 0 0 5px;
      -o-box-shadow: #b8b8b8 0 0 5px;
         box-shadow: #b8b8b8 0 0 5px;
}

.sbarbody2 { 
padding: 5px; 
background-color: #292929; 
margin-top: 0px; 
margin: 0 5px 0 5px; 
line-height: auto; 
 font-family: "Capture It", arial, sans-serif;
font-size: 13px !important; 
font-weight: normal;
text-align: right;
 border: 5px solid #333333; }

.sbarbody {
margin:0;
padding: 2px;
padding-bottom: 5px; 
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
-khtml-border-radius: 0 0 10px 10px;
}

ul.sbarlist{
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: left;
}

li.sbaritem {
position: inline;
list-style-type: none;
margin-top: 2px;
text-align: left;
}

li.sbaritem a {
color: #33512B;
display: inline;
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px;
font-style: none;
font-weight: lighter;
margin-right: 0px;
padding: 2px;
text-align: left; }

li.sbaritem a:hover {
color:#444444;  }

li.sbartitle {
 list-style: none;
 color: #cccccc; 
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; -khtml-border-radius: 10px;
text-align: center;
letter-spacing: 0px;
 font-family: "Dancing Script OT", trebuchet ms, arial, sans-serif;
 font-size: 28px;
 text-transform: normal !important;
 margin: 1px 5px 1px 5px;
text-shadow: 2px 2px 6px #bbbbbb;
 }

#sidebar_linklist  {
list-style-type:none;
padding-top:2px;
text-align: left !important;
text-transform: lowercase;}

#sidebar_linklist li.sbaritem a {
color: #77C9B8;
display:block;
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px;
font-weight:lighter;
margin-right:2px;
padding:2px 5px;
text-align: left;
border-left: 3px solid #AAC6BA;}

#sidebar_linklist li.sbaritem a:hover {
color:#FFFFFF; 
background-color:#444444;
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px;
text-align: right;
letter-spacing: 2px; }

td.sbarcalendar {background-color:#F3F2EE;
padding: 3px;}

td.sbarcalendarposts {background-color:transparent;
padding: 3px;}

table.calendar {padding-top: 5px;}

#sidebar_summary, #sidebar_calendar, h2 { display:none!important; }

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

li.tagBox a { color: #77C9B8;
display:block;
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px;
font-weight:lighter;
margin-right:2px;
padding:2px 5px;
text-align: left;
border-left: 3px solid #888888;}

li.tagBox a:hover { color:#FFFFFF; 
background-color:#444444;
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px;
text-align: right;
letter-spacing: 2px; }

#sidebar_tags li.sbaritem a { color: #77C9B8;
display:block;
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px;
font-weight:lighter;
margin-right:2px;
padding:2px 5px;
text-align: left;
border-left: 3px solid #888888; }

#sidebar_tags li.sbaritem a:hover { color:#FFFFFF; 
background-color:#444444;
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px;
text-align: right;
letter-spacing: 2px; }

/*-----------Entries-----------*/
.entry {
 padding: 10px 20px 10px 20px;
 margin-bottom: 10px;
 color: #ffffff;
 font-family: "trebuchet ms", 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, .userpicfriends {
 position: relative;
background-color: rgba(0, 0, 0, 0.7) !important;
 border: 0px solid #eeeeee;
 float: left;
padding: 10px; 
margin: 5px 5px 5px -130px;
 width: 100px;
 height: 100px;
 text-align: center;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 11px;
 color: #ffffff;
 z-index: 15;
 -webkit-border-radius: 60px;
 -moz-border-radius: 60px;
 -ms-border-radius: 60px;
 -o-border-radius: 60px;
 border-radius: 60px;
 -webkit-box-shadow: #232323 0 0 5px;
 -moz-box-shadow: #232323 0 0 5px;
 -ms-box-shadow: #232323 0 0 5px;
 -o-box-shadow: #232323 0 0 5px;
 box-shadow: #232323 0 0 5px;
 }

.userpic a { color: #ffffff !important; }
.userpic a:hover { color: #bbbbbb !important; }

.userpic img, .userpicfriends img {
 width: 100px;
 height: 100px;
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 -ms-border-radius: 50px;
 -o-border-radius: 50px !important;
 border-radius: 50px;
}

.userpicfriends a font {color: #ffffff !important; background-color: rgba(0, 0, 0, 0.8);  padding: 1px 2px 1px 2px; -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 -o-border-radius: 10px;
 border-radius: 10px; }

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

.date  {
 margin: 0px 10px -15px 10px;
 text-align: right; 
 color: #777777;
 font-family: "Lilly", arial, sans-serif;
 font-size: 12px;
 text-transform: normal;
-moz-border-radius: 6px 6x 0 0;
 -webkit-border-radius: 6px 6x 0 0;
 border-radius: 6px 6x 0 0;
 -khtml-border-radius: 6px 6x 0 0; }

.subject {
 padding: 0px 0px 5px 5px;
 margin: 20px 10px 0px 10px;
 color: #77C9B8;
font-family: "Celtic", open sans condensed, georgia, arial;
 font-size: 35px;
 font-weight: normal; 
 text-align: left;
 text-transform: normal;
-moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 -khtml-border-radius: 4px;
 }
 
.subject a, .subject a:link, .subject a:visited {color: #77C9B8;}

.subject a:hover {color: #565656;}

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

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

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

.skiplinks {
 text-align: center;
 margin-top: 5px;
 margin-bottom: 3px;
 font-family: "trebuchet ms", arial, sans-serif;
 padding: 10px;
 font-size: 10px;
 letter-spacing: 1px;
 color: #ffffff;
background-color: rgba(0, 0, 0, 0.8) ;
 -moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-box-shadow: #232323 0 0 5px;
    -moz-box-shadow: #232323 0 0 5px;
     -ms-box-shadow: #232323 0 0 5px;
      -o-box-shadow: #232323 0 0 5px;
         box-shadow: #232323 0 0 5px;
 }

/*-----------  Currents--------------*/

.currents, .currentlocation, .currentmood, .currentgroup, .currentmusic {
padding: 5px;
border: 0px solid #e5e5e5;
background-color: transparent !important;
margin: 5px 0 0 0;
font-size: 7pt !important;
font-family: tahoma !important;
color: #7F7F7F;
text-align: left; 
}

.currentlocation, .currentmusic {
display:none;
}

.currents strong, .currentmood strong, .currentmusic .currentlocation {
font-weight: normal;
}

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

.ljtags {
margin-top: 20px;
text-align: left;
color: #555555;
 font-family:verdana; 
font-weight:bold; 
font-size: 8px; 
text-transform:uppercase;
}

.ljtags a { color: #9CC79C; }
.ljtags a:hover { color: #cccccc; }

.comments {
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
border-radius: 0 0 10px 10px;
-khtml-border-radius: 0 0 10px 10px;
background-color: rgba(0, 0, 0, 0.8) ;
color: #ffffff;
font-size:12px;
letter-spacing:-0.1em;
padding:5px 10px;
margin-top: 10px; 
position:absolute;
text-align:center;
width:auto;}

div.comments a, div.comments a:link, div.comments a:visited {
color:#ffffff;
font-family: open sans condensed, arial !important;
 font-size: 14px !important; line-height: 130%; 
line-height:1;
margin:0;
padding:5px 10px;
letter-spacing: 1px; 
text-align: center; }

div.comments a:hover {
color:#2F565E;
background-color: transparent !important;
}

/*------------Comments Page--------*/
.box {
 padding: 5px 5px 5px 10px;
 margin: 0px;
 text-align: left;
 clear: left;
background-color: rgba(0, 0, 0, 0.8) ;
 -moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-box-shadow: #232323 0 0 5px;
    -moz-box-shadow: #232323 0 0 5px;
     -ms-box-shadow: #232323 0 0 5px;
      -o-box-shadow: #232323 0 0 5px;
         box-shadow: #232323 0 0 5px;
 }

form div.box {
 text-align: left;
  }

.reply {
 position: relative;
 font-family: "trebuchet ms", arial, sans-serif;
 margin: 20px 30px 10px 30px;
 padding: 25px 10px 10px 10px;
 text-align: left;
 font-size: 10px;
 line-height: 125%;
 background-color: #000000;
 color: #ffffff;
 }
  
.replytosubject {
 font-weight: none;
 }
  
.commentreply {
 font-family: "trebuchet ms", arial, sans-serif;
 position: relative;
 margin: 10px;
 font-size: 14px;
 color: #ffffff;
 }
  
.commentbox {
 align: left; 
 padding: 2px; 
 margin: 2px; 
 }

.userpiccomment {
 margin: -2px 5px 5px 0px;
 padding: 10px;
 width: 100px;
 height: 100px;
 float: left;
background-color: rgba(0, 0, 0, 0.5) !important;
 -webkit-border-radius: 60px;
 -moz-border-radius: 60px;
 -ms-border-radius: 60px;
 -o-border-radius: 60px;
 border-radius: 60px;
 -webkit-box-shadow: #888888 0 0 5px;
 -moz-box-shadow: #888888 0 0 5px;
 -ms-box-shadow: #888888 0 0 5px;
 -o-box-shadow: #888888 0 0 5px;
 box-shadow: #888888 0 0 5px;
}
  
.datesubjectcomment a:link, .datesubjectcomment a:visited {
 color: #ffffff; cursor: crosshair; text-decoration:none; font-weight:none;}
  
.datesubjectcomment a:hover {
 color: #ffffff; cursor: crosshair; text-decoration:none; font-weight:none;}
 
.commentboxpartial {
 border-color: #000000; 
 border-width: 0px; 
 border-style: solid; 
 padding: 10px; 
 margin: 10px; 
 background-color: transparent !important;
 }

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

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

ul.year { text-align: center;  padding: 5px;
background-color: rgba(0, 0, 0, 0.8) ;
 -moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-box-shadow: #232323 0 0 5px;
    -moz-box-shadow: #232323 0 0 5px;
     -ms-box-shadow: #232323 0 0 5px;
      -o-box-shadow: #232323 0 0 5px;
         box-shadow: #232323 0 0 5px;
}

ul.year li {display: inline;}

table.yeartable { width: 765px; margin-left: auto; margin-right: auto; margin-bottom: -25px; padding: 10px 100px 10px 100px; background-color: rgba(0, 0, 0, 0.8) ;
 -moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-box-shadow: #232323 0 0 5px;
    -moz-box-shadow: #232323 0 0 5px;
     -ms-box-shadow: #232323 0 0 5px;
      -o-box-shadow: #232323 0 0 5px;
         box-shadow: #232323 0 0 5px;
 }

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

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

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

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

ul.ljtaglist {
 color: #ffffff;
 margin-top: 0px;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 13px;
 padding: 20px 20px 20px 50px;
background-color: rgba(0, 0, 0, 0.8) ;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-box-shadow: #232323 0 0 5px;
    -moz-box-shadow: #232323 0 0 5px;
     -ms-box-shadow: #232323 0 0 5px;
      -o-box-shadow: #232323 0 0 5px;
         box-shadow: #232323 0 0 5px;
 }

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://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/foaf.png) 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://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/lock-unlock.png) no-repeat !important; 
 }

/* FRIENDS GROUP */
.subject img[src*="icon_groups.gif"]{
width: 0; height: 0; padding: 0 16px 16px 0; background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/foaf.png) no-repeat !important; }

/* PRIVATE ENTRY */
.subject img[src*="icon_private.gif"]{
 width: 0;
 height: 0;
 padding: 16px 0px 0 16px;
 background: URL(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/lock.png) no-repeat !important; 
 }

/* USER */
html body .ljuser img {
 width: 0 !important;
 height: 0 !important;
 background-repeat: no-repeat;
 background: transparent url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/1373793749_ballooning.png~original) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

html body .ljuser img[src*="userinfo.gif"] {
 width: 0 !important;
 height: 0 !important;
 background: transparent url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/1373793749_ballooning.png~original) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/* COMMUNITY */
html body .ljuser img[src*="community.gif"] {
 width: 0 !important;
 height: 0 !important;
 background: transparent url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/weather_sun.png~original) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/*-----------Navstip-----------*/

.w-cs DIV {
background: none repeat scroll 0 0 transparent;
float: none;
}

.w-cs .w-cs-userinfo {
background: none repeat scroll 0 0 #322F2A;
border-right: 1px solid #3A4449;
float: left;
height: 50px;
min-width: 405px;
width: 40%;
 }

.w-cs {
color: #ffffff;
font: 10px/10px 'Arial','Helvetica',sans-serif;
}

.w-cs A:link, .w-cs A:visited, .w-cs A:active, .w-cs A:link B, .w-cs A:visited B, .w-cs A:active B {
background: none repeat scroll 0 0 transparent !important;
border: medium none !important;
color: #ffffff !important;
font: 10px 'Arial','Helvetica',sans-serif !important;
text-decoration: none;
 }

.w-cs A:hover, .w-cs A:hover B  { color: #ffffff !important; }

.w-cs .w-cs-user-controls .w-cs-group-first, .w-cs .w-cs-group-second {
background: none repeat scroll 0 0 #322F2A;
}

.w-cs .w-cs-status P {
background: none repeat scroll 0 0 transparent !important;
border: 0 none;
color: #ffffff;
float: none;
font: 12px/17px 'Arial','Helvetica',sans-serif;
margin: 0;
padding: 0;
}

.w-cs .w-cs-summary {
background: none repeat scroll 0 0 #666666;
border-radius: 2px 2px 2px 2px;
float: right;
margin: -1px 0 0;
padding: 1px 7px;
}

.w-cs .w-cs-summary LI.w-cs-i-tokens {
background-position: 0 -788px;
border-right: 1px solid #666666;
margin-right: 6px;
padding: 3px 6px 3px 0;
}

.w-cs .w-cs-text {
background: none repeat scroll 0 0 #666666;
border: medium none;
border-radius: 2px 2px 2px 2px;
color: #ffffff !important;
font-size: 11px;
line-height: 14px;
margin: 0;
padding: 2px 0 3px 5px;
vertical-align: top;
}

.w-cs .w-cs-search .w-cs-text {
border-right: 25px solid #666666;
width: 150px;
}

/*-----------Mics-----------*/
.clear { height: 0px; font-size: 0.01px; }
 
.headerimage {
 position: absolute;
 width: 100%;
 height: 100px;
 margin-top: 0px;
 margin-left: 0px;
background-color: transparent !important;
 background-image: url(Header Image - Mine is just a image of my blog name);
 background-repeat: no-repeat;
background-position: center center;
 }

.separator { height: 30px; }

Images As They Appear In Coding:

Body Background: I just used a large image around 1800-2000 width.

Header Image Background: The header image is just a transparent image with a title for my journal.

Notes:
.headerimage coding at the bottom and follow instructions on the Multiple Backgrounds Tutorial.

Should you use this layout for your own personal journal and find a gap at the top of your friends page please add .lj-view-friends { margin-top: -25px; } to the bottom of the coding. You may have to adjust the pixels. This doesn't appear to be an issue with communities.

More Headers:
More Background Images: Layout Lounge Site
More Tiny Icons: Layout Lounge Site

RULES:
No Hotlinking Images #4 under general
Header can be changed
Background image can be changed or removed.
Credit Necessary.

Having Trouble? Check out the Theme and Layout Change Tutorial.
If that didn't work. Comment.

Flat | Top-Level Comments Only

Beautiful layout! I've bookmarked for future use. :)

(Your link for 'more background images: layout lounge site' leads to a 404, btw.)

That is a bummer on the link. It is supposed to go here...
http://layout-lounge.weebly.com/backgrounds-vintage-art-deco.html

Those aren't full page ones though.

Glad you like the layout.

The one thing with the layout that list tags is if you have plenty tags you have to scroll down forever to get to the next page navigation buttons. I know there's a way to put them inside a scrolling list a tutorial on that would be nice. hope it's something simple that can be done with just a couple lines of code!?

I can't help it ;)

One the sidebar?

(no subject)

joyfulljunebugg.livejournal.com - 2013-08-26 23:52 (UTC) - Expand

(no subject)

sireesanwar.livejournal.com - 2013-08-27 00:13 (UTC) - Expand

(no subject)

joyfulljunebugg.livejournal.com - 2013-08-27 00:52 (UTC) - Expand

(no subject)

sireesanwar.livejournal.com - 2013-08-27 01:18 (UTC) - Expand

like it! i'm using it right now.. thank you :)

Looks awesome! Glad you like it so much!

I am really liking this but I am worried about the background. I want to use a Hawaii Five-0 cast poster/wallpaper but don't know how to integrate this in with the layout?

Hope you can help? :-)

If the image is a wallpaper you can add it to the body section at the very beginning of the code between the ( ).
background-image: url(Journal Background Image);

If you want the wallpaper to fit the screen I would add
background-size: cover;

Under this:

body{
background-color: #999999;
background-image: url(Journal Background Image);
background-repeat: repeat;
background-attachment: fixed;
background-position: center bottom;

I would also change the repeat to no-repeat. You can see a tutorial of this at http://layout-lounge.livejournal.com/33399.html

If you are completely confused I can help you but you'll have to send me to what you need.

Let me know either way.

Edited 2013-08-27 20:44 (UTC)

(no subject)

sexycazzy.livejournal.com - 2013-11-15 16:10 (UTC) - Expand

(no subject)

sireesanwar.livejournal.com - 2013-11-15 23:15 (UTC) - Expand

Lovely layout !
Will be using it, and do some editing, hehe ^^ Thanks !

Hi , I have a problem/question.
I've edited this layout, mostly just the colors ^^
And add some header image and background image, but when I'd change the size, it looks like this.

http://i1123.photobucket.com/albums/l558/musicklover26/omggg_zpsbf6a58e7.png

I've zoom out it, a bit, so that you may see the entire layout.
Thank you !! =)))

(no subject)

sireesanwar.livejournal.com - 2013-08-28 18:43 (UTC) - Expand

(no subject)

iamusicklover.livejournal.com - 2013-08-29 15:13 (UTC) - Expand

(no subject)

sireesanwar.livejournal.com - 2013-08-28 18:46 (UTC) - Expand

(no subject)

iamusicklover.livejournal.com - 2013-08-29 15:13 (UTC) - Expand

(no subject)

sireesanwar.livejournal.com - 2013-08-29 18:19 (UTC) - Expand

(no subject)

iamusicklover.livejournal.com - 2013-08-30 13:35 (UTC) - Expand

(no subject)

sireesanwar.livejournal.com - 2013-08-30 19:24 (UTC) - Expand

I fell in love with this layout and customized it a bit, but I can't remove my Icon from the Sidebar or center it. It looks kind of weird at the moment.

Can you help me please?

First to add and remove stuff from your sidebar you can go to this tutorial (http://layout-lounge.livejournal.com/15965.html) and simply remove the option from your sidebar.

Also in coding for the "default userpic" you can add ".defaultuserpic { display: none; }" which will remove it.

To customize it you would work along the same coding which sometimes is left out of mine because I never think about the default userpic since I never have it on my sidebar.

This coding will center the userpic on your sidebar and give a little extra room around it.
.defaultuserpic { text-align: center; padding: 10px; margin: 0 0 8px 0; }

(no subject)

caremikaelson.livejournal.com - 2013-10-10 06:32 (UTC) - Expand

(no subject)

sireesanwar.livejournal.com - 2013-10-11 21:54 (UTC) - Expand

Hi! I chose to use this beautiful layout, but for some reasons I have problems changing the background...I just remove the words between parenthesis and put the url instead, but I still see that light grey bg and no images. Could you please help me?

Try removing the ' before and after the url. I don't think the coding for Flexible Squares needs those to work.

Let me know if this helps.

hi! So I put the code onto the CCS thing, and when I looked at my profile, without putting pictures in yet, there are 2 long rectangular boxes on the top and the bottom of the page. How do I remove that?

it is the darker blue/grey color strip

thank you for your time

I think that is the advertisements on the plus accounts... see the below tutorial.
http://layout-lounge.livejournal.com/24601.html

thank you so much for the wonderful layout. using it now though changed few this and that. but it's lovely. thank a lot... ;)

You are more than welcome. Enjoy!

The sidebar wont appear and I cant change the color of the links (leave a comment, previous, tags etc) Is it okay if i just give you my password? I really have no experience in this.

Your works are amazing btw! Keep it coming :)

Thanks.

I would try this tutorial.
http://layout-lounge.livejournal.com/38562.html

It may help you to get the sidebar back.

Nice layout!
if you dont mind ~ I'm taking it!

Go for it.

Hello layout lounge!
I'm current using this layout Transparenting the Dark Side
And I notice, there's no calendar that appears in its sidebar..
I just want to customize the sidebar and make the calendar visible also I want to have my user pic to be in center..
Can you help me what codes should I change or put?

EDIT: I already figure it out! Thank you for your some tutorials

Edited 2014-02-24 12:24 (UTC)

You're welcome.

Hello! I got another question here
I hope you don't mind it >.<
Actually, I'm doing some trial and error on the sidebar and I can't get the right way on how to do it..
I want the Page summary to have the same hover style like the one's in Links and Tags.. Can you teach me how?

I can do that or show you but it won't look the same which is why I don't have it coded that way...

Let me show you...
check it out over at

workshop_rees

(no subject)

sireesanwar.livejournal.com - 2014-02-26 00:12 (UTC) - Expand

okay ~ thank you for showing me that :)
Maybe I will just stick to the normal page summary

Sorry to disappoint. I wish LJ worked that way.

(no subject)

iamdebs95.livejournal.com - 2014-02-26 08:32 (UTC) - Expand

How do I stop the background from repeating?

EDIT:
Found it I was adding no repeat I needed to type it as (no-repeat) LOL!!! My image even at 2000 x 1125 is still to small =(

EDIT#2:
Happy I read the comments here I knew that image should have been big enough for the background so I moved it from photobucket to LJs scrapbook and now it's way too big!!! (T-T)

Edited 2014-03-13 22:08 (UTC)

http://layout-lounge.livejournal.com/33399.html

The above tutorial has a section towards the bottom for all the lines of coding for the background image. I would suggest looking at the part that says "background-size" (right above #6). This will solve your problem.

This is really one gorgeous theme~ ^o^

But one problem though :(
I've downloaded the said four fonts (Capture It, Dancing Script OT, Lilly, Celtic) and they're already in the Fonts folder. Why is it that it still doesn't work on my journal?

EDIT: Well, now it worked! I don't know how but it just suddenly worked! Maybe it was just a delay or something but still thank you for the gorgeous(ly awesome) theme <3 Sorry for the inconvenience.

Edited 2014-04-16 07:38 (UTC)

This is the coolest. Using it for my personal journal and my community now.

I'm so glad you like it. Enjoy!

Hello! I absolutely LOVE this theme, but I'm not too keen on the circular userpics. Is there a code I can use to make them square?

BEAUTIFUL work. Thank you SO much.

No problem... go to
http://workshop-rees.livejournal.com/18597.html

I fixed the userpics and added the new coding to my test journal.

Thanks! Enjoy!

I am using this code, full credit given on site. Thank you!

Thanks for letting me know. Enjoy!

Flat | Top-Level Comments Only

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Help?

Re: Help?

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Square Userpics?

Re: Square Userpics?

Using this!

Re: Using this!