layoutlounge | 79. Transparenting

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

{ Preview } { Live }
Credit:
For help with layout please consult the How To Guides, otherwise please comment.

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

Light Layout

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

a, a:link, a:visited { color: #3E0F00; }
a:hover { color: #444444; }

blockquote {
 position: inherit;
 width: 60%;
 background-color: rgba(255, 255, 255, 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: #444444;
 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: #CCC 0 0 5px;
    -moz-box-shadow: #CCC 0 0 5px;
     -ms-box-shadow: #CCC 0 0 5px;
      -o-box-shadow: #CCC 0 0 5px;
         box-shadow: #CCC 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: #CCC 0 0 5px;
    -moz-box-shadow: #CCC 0 0 5px;
     -ms-box-shadow: #CCC 0 0 5px;
      -o-box-shadow: #CCC 0 0 5px;
         box-shadow: #CCC 0 0 5px;
}

b, strong { color: #335D07; }
i, em { color: #603C1C; }
u { color: #093C7E; }
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: #333333;
 text-align: center;
 }

.subcontent {
background-color: rgba(255, 255, 255, 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: #ddd 0 0 5px;
    -moz-box-shadow: #ddd 0 0 5px;
     -ms-box-shadow: #ddd 0 0 5px;
      -o-box-shadow: #ddd 0 0 5px;
         box-shadow: #ddd 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(255, 255, 255, 0.8) ;
color: #999999;
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: #F3F3F3; 
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 #E0E0E0; }

.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: #1A5D7A; 
-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: #2F565E;
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: #2F565E;
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 #EDEDED; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px;}

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: #2F565E;
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 #EDEDED; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px;}

#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: #000000;
 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(255, 255, 255, 0.8) !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: #000000;
 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: #ccc 0 0 5px;
 -moz-box-shadow: #ccc 0 0 5px;
 -ms-box-shadow: #ccc 0 0 5px;
 -o-box-shadow: #ccc 0 0 5px;
 box-shadow: #ccc 0 0 5px;
 }

.userpic a { color: #000000 !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: #000000 !important; background-color: rgba(255, 255, 255, 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: #555555;
 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: #1A5D7A;
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;
text-shadow: 2px 2px 6px #bbbbbb;
 }
 
.subject a, .subject a:link, .subject a:visited {color: #1A5D7A;}

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

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

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

span.ljuser a:hover b {
 padding-top: 2px;
 padding-bottom: 2px;
 color: #2F565E;
 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: #999999;
background-color: rgba(255, 255, 255, 0.8) ;
 -moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-box-shadow: #ddd 0 0 5px;
    -moz-box-shadow: #ddd 0 0 5px;
     -ms-box-shadow: #ddd 0 0 5px;
      -o-box-shadow: #ddd 0 0 5px;
         box-shadow: #ddd 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: #808080;
 font-family:verdana; 
font-weight:bold; 
font-size: 8px; 
text-transform:uppercase;
}

.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(255, 255, 255, 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:#000000;
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(255, 255, 255, 0.8) ;
 -moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-box-shadow: #ddd 0 0 5px;
    -moz-box-shadow: #ddd 0 0 5px;
     -ms-box-shadow: #ddd 0 0 5px;
      -o-box-shadow: #ddd 0 0 5px;
         box-shadow: #ddd 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: #f1f1f1;
 color: #000000;
 }
  
.replytosubject {
 font-weight: none;
 }
  
.commentreply {
 font-family: "trebuchet ms", arial, sans-serif;
 position: relative;
 margin: 10px;
 font-size: 14px;
 color: #000000;
 }
  
.commentbox {
 align: left; 
 padding: 2px; 
 margin: 2px; 
 }

.userpiccomment {
 margin: -2px 5px 5px 0px;
 padding: 10px;
 width: 100px;
 height: 100px;
 float: left;
 background: #FFF!important;
 -webkit-border-radius: 60px;
 -moz-border-radius: 60px;
 -ms-border-radius: 60px;
 -o-border-radius: 60px;
 border-radius: 60px;
 -webkit-box-shadow: #CCC 0 0 5px;
 -moz-box-shadow: #CCC 0 0 5px;
 -ms-box-shadow: #CCC 0 0 5px;
 -o-box-shadow: #CCC 0 0 5px;
 box-shadow: #CCC 0 0 5px;
}
  
.datesubjectcomment a:link, .datesubjectcomment a:visited {
 color: #000000; cursor: crosshair; text-decoration:none; font-weight:none;}
  
.datesubjectcomment a:hover {
 color: #000000; 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(255, 255, 255, 0.8) ;
 -moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-box-shadow: #ddd 0 0 5px;
    -moz-box-shadow: #ddd 0 0 5px;
     -ms-box-shadow: #ddd 0 0 5px;
      -o-box-shadow: #ddd 0 0 5px;
         box-shadow: #ddd 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(255, 255, 255, 0.8) ;
 -moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-box-shadow: #ddd 0 0 5px;
    -moz-box-shadow: #ddd 0 0 5px;
     -ms-box-shadow: #ddd 0 0 5px;
      -o-box-shadow: #ddd 0 0 5px;
         box-shadow: #ddd 0 0 5px;
 }

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

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

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

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

ul.ljtaglist {
 color: #888888;
 margin-top: 0px;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 13px;
 padding: 20px 20px 20px 50px;
background-color: rgba(255, 255, 255, 0.8) ;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-box-shadow: #ddd 0 0 5px;
    -moz-box-shadow: #ddd 0 0 5px;
     -ms-box-shadow: #ddd 0 0 5px;
      -o-box-shadow: #ddd 0 0 5px;
         box-shadow: #ddd 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: -10px;
background-color: transparent !important;
 background-image: url(HEADER IMAGE LINK);
 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.

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.

Went Through the Tutorials and Still Having Trouble? Comment.

Flat | Top-Level Comments Only

Oh! ♥
Why this is really pretty one!
Well done! ^^

Thanks. I'm glad you like it.

Thank you so much :)
I love it!

Thanks!

Beautiful especially for those addicted to graphics (*_*) lol

Me me... I'm addicted to graphics. LOL

Thanks

hi, do you have a black version of this?

No but I could probably create one.

Check out

workshop_rees.

really beautiful! it's gonna be my first layout :)

Edited 2013-08-26 17:38 (UTC)

Wow, that is an honor. Thank you for telling me that. I hope you enjoy LiveJournal and making your layout as beautiful as you want.

I love this layout, just switched to it. I do have one problem. I have a large image that i would like to use as the background, but what's the best website to use to upload it an link it? I have photobucket, but they don't allow over 1600 something px. I set up a flickr account but can't figure out how to link the original size photo. It gives a direct link, but it doesn't work. There is also an html link, but i couldn;t get that to work either. I know i'm putting the link address in the right place because i have a lot of experience using your layouts, they're the only ones i ever use. So i have no idea what to do to get the pic i want as the background. i'd appreciate any help!

I got it! All i had to do was look at your background tutorial to figure it out. I didn't think to scroll up before asking for help. Thanks for all the great info!

I'm glad you figured it out. So frustrating you can't have large images at Photobucket anymore. Thank goodness for Scrapbook.

♥ I think this just might be my favourite layout you've posted here!

Edited 2013-11-05 00:13 (UTC)

I'm so glad you like it.

I really like this layout but could you please change it so when I put it into the CSS box and click "use" it will look exactly the same as you have it above? I would only change the pictures. When I put the code now it doesn´t look like the example T_T

For me it works perfectly.

Did you use the Changing Layout Tutorial
http://layout-lounge.livejournal.com/8638.html

79. Transparenting

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