layoutlounge | 92. Spring Wide

Layout Style: S2 Flexible Squares
Features: Embedded Fonts, Colorful Sidebar, Header Image
Layout Width: 1100px

{ Preview } { Live }
Credit:

layout_lounge

Theme and Layout Change Tutorial

All embedded in coding from Google Fonts

/*--------------------------------
S2 Flexible Squares - 92. Spring Wide
Layout by http://layout-lounge.livejournal.com
PLEASE DO NOT REMOVE THIS SECTION 
----------------------------------*/
body{
 background-color: #F0DECB;
 background-image: url();
 background-repeat: repeat;
 background-attachment: fixed;
background-position: left top;
 color: #888888;
 font-family: "lucida grande", "lucida sans", trebuchet ms, arial, sans-serif;
 font-size: 12px;
 margin: 10px 0 20px 0;
 }

a, a:link, a:visited { color: #4F7A26; }
a:hover { color: #5B4035; }

blockquote {
 width: 70%;
 margin-left: auto;
 margin-right: auto;
    background-color: #fff;
    border-left: 6px solid #d5c39f;
    font-family: "Droid Sans",sans-serif;
    padding: 10px;
 }

blockquote a { color: #cccccc !important;  font-style: italic; }
blockquote a:hover { color: #5B4035 !important; }

img.special, i img { border: 10px solid #e3d8c6; }

b, strong { color: #519AA6; text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.0); }
i, em { color: #8458C7; text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.0); }
u { color: #8CB53F; text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.0); }
s, strike { color: #AD5C00; text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.0); }

.b-repost-item { display:none }

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

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

#maincontent {
 width: 820px;
 float: left;
 margin: 0px 0px 0px 0px;
 font-family: "trebuchet ms", arial, trebuchet ms, sans-serif;
 font-size: 12px;
 color: #333333;
 text-align: center;
 }

.subcontent {
 background-color: #FFF1E3;
 margin-top: 0px;
 border: 1px solid #e3d8c6;
 }

/*---------------Header--------------*/
#header {  
 position: inherit;
 width: 1100px;
 height: 30px;
 background: #899434;
 background: -moz-linear-gradient(top, #9CA93F, #899434);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9CA93F), to(#899434));
 text-align: center;
 color: #282828;
 padding: 10px 0px 0 0px;
 margin: 0px 0px 0px 0px;
font-family: Fredericka the Great, georgia, arial;
  font-size: 14px !important; line-height: 130%;  line-height: 130%; 
 letter-spacing: 1px;
 text-transform: lowercase;
 font-weight: none;
z-index: 199;
}

div#header a, div#header a:link, div#header a:visited, div#header a:active {
 padding: 0px 8px 0px 0px;
 margin: 0px 2px 0px 0px;
 letter-spacing: 1px; color: rgba(255, 255, 255, 0.8);
text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.8);
 text-align: left;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
}

div#header li.view { 
 padding: 0px 8px 0px 0px;
 margin: 0px 5px;
 color: #cccccc;
 }

div#header a:hover {  color: rgba(255, 255, 255, 0.8);
text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.3);
 }

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 ---------------*/

.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:99;
}

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

ul.navfooter a {
}

ul.navfooter li + li a {
float: right;
background-color: rgba(0, 0, 0, 0.3);
padding: 20xp 10px 20px 10px;
 }

ul.navfooter li + li a:hover {  }

.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.3);
color: #ffffff;
font-family: open sans condensed, georgia,arial,sans-serif;
font-size: 13px;
padding: 20px 30px 20px 30px;
margin: 0px 10px -10px 10px;
}

.lj-view-recent #footer a:hover, .lj-view-friends #footer a:hover {
color:#dddddd;
padding: 20xp 10px 20px 10px;
}

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 {
 background: #9CA93F;
 background: -moz-linear-gradient(top, #899434, #9CA93F);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#899434), to(#9CA93F));
width: 270px;
margin: 0px 0px 0px -1px;
padding: 0px 5px 100px 5px;
 font-family: "Fredericka the Great", arial, georgia;
 font-size: 14px;
 color: rgba(255, 255, 255, 0.7);
text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.7);
 float: right;
 text-align: left;
 text-transform: normal;
 right: 0px;
 }

.sbarbody2, li.sbaritem2 { 
padding: 5px 10px 5px 4px; 
line-height: auto; 
text-transform: lowercase; 
text-align: center;
list-style-type: none;
 }

.sbarbody2 a { color: #B4BA7A; }
.sbarbody2 a:hover { color: #5B4035; }

.sbarbody {
margin:0;
padding: 2px 2px 2px 0px;
padding-bottom: 5px; 
list-style-type: none;
}

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

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

li.sbaritem a {
display: inline;
font-weight: lighter;
margin-right: 0px;
padding: 2px;
text-align: left; }

li.sbaritem a:hover {
color:#5B4035;  }

li.sbartitle {
 list-style: none;
 color: rgba(255, 255, 255, 0.7); 
text-align: center;
letter-spacing: 2px;
 font-family: "Homemade Apple", trebuchet ms, arial, sans-serif;
 font-size: 22px;
 text-transform: normal;
 margin: 1px 0px 0px 8px;
text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.7);
 }

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

#sidebar_linklist li.sbaritem a {
color: #ffffff;
display:block;
font-weight:lighter;
padding:2px 5px 5px 8px;
text-align: center;}

#sidebar_linklist li.sbaritem a:hover {
color:#5B4035; 
letter-spacing: 2px; 
-webkit-box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.5);
box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.5); }

td.sbarcalendar {background-color: transparent !important;
padding: 3px;}

td.sbarcalendarposts a { color: #ffffff;}
td.sbarcalendarposts a:hover { color: #5B4035;}

td.sbarcalendarposts {background-color: #666666; border-bottom: 0px solid #dedede; padding: 3px; box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); }

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

#sidebar_summary li.sbaritem {
 padding: 3px;
 text-transform: normal;
 margin: 3px 0px 3px 0px;
 text-align: left;
 }

#sidebar_summary li.sbaritem a {
color: #ffffff;
 text-decoration: none;
 display: inline !important;
 }

#sidebar_summary li.sbaritem a: hover{
 color: #5B4035 !important;
 border: 0px solid #777777;
 background-color: transparent !important;
 }

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

#sidebar_tags a, li.tagBox a { color: #ffffff; display:block; font-weight:lighter; padding:2px 5px 5px 8px; text-align: center; }

#sidebar_tags a:hover, li.tagBox a:hover { color: #5B4035; text-align: center; letter-spacing: 2px; padding: 2px 5px; 
-webkit-box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.5);
box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.5); }

.defaultuserpic {
width: 100px;
height: 100px;
margin: 8px auto 10px auto;
padding: 10px;
border: 0px solid #cccccc;
 -webkit-box-shadow: #555555 0 0 5px;
 -moz-box-shadow: #555555 0 0 5px;
 -ms-box-shadow: #555555 0 0 5px;
 -o-box-shadow: #555555 0 0 5px;
 box-shadow: #555555 0 0 5px;
}

.defaultuserpic img { }

.social-roll {
 border-radius: 50%;
 -webkit-transition: all ease 0.3s;
 -moz-transition: all ease 0.3s;
 -o-transition: all ease 0.3s;
 -ms-transition: all ease 0.3s;
 transition: all ease 0.3s;
}
.social-roll:hover {
 box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -o-transform:rotate(360deg);
 -ms-transform:rotate(360deg);
 transform:rotate(360deg);
}

/*-----------Entries-----------*/
.entry {
 padding: 5px 30px 50px 30px;
 margin: 0px;
 color: #444444;
 font-family: "arial";
 font-size: 14px;
 line-height: 150%;
 text-align: left;
 }
 
hr { color: transparent; height: 1px; border-bottom: 1px solid #cccccc; }

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

li.list { line-height: 14px;  }

.userpic, .userpicfriends {
 float: left;
margin: -1px 15px 25px -110px;
 padding: 15px;
 width: 100px;
 height: 100px;
 text-align: center;
 color: #FFFFFF !important; 
background-color: #8B9635 !important;
 -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 img, .userpicfriends img {
 width: 100px;
 height: 100px;
}
 
.userpicfriends a, .userpicfriends font {
 margin: 0px 0px 0px 0px;
 position: relative;
 background-color: transparent!important;
 float: center;
 font-family: 'Fredericka the Great', sans-serif;
 font-size: 12px;
 text-align: center;
 color: #FFFFFF !important; 
text-shadow: 2px 2px 4px #777777;
 -webkit-transition: background-color 0.3s ease;
 -moz-transition: background-color 0.3s ease;
 -ms-transition: background-color 0.3s ease;
 -o-transition: background-color 0.3s ease;
 transition: background-color 0.3s ease;
 }
 
.userpicfriends a:hover, .userpicfriends a font:hover {color: #5B4035;  text-shadow: 2px 2px 6px #bbbbbb; }

.date  {
 margin: 10px 20px -15px 0px;
 text-align: right; 
 padding-right: auto;
 padding-left: auto;
 color: #5B4035;
 font-family: "Fredericka the Great", arial, sans-serif;
 font-size: 14px;
 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: 15px 10px 0px 10px;
 color: #8B9635;
font-family: "Homemade Apple", open sans condensed, georgia, arial;
 font-size: 22px;
 text-align: left;
 border-bottom: 1px solid #e3d8c6;
 }
 
.subject a, .subject a:link, .subject a:visited {color: #8B9635;}

.subject a:hover {color: #5B4035;}

.datesubject {
 background-color: transparent;
 padding: 0px;
 text-align: left;
font-family: "Fredericka the Great", arial !important;
 font-size: 14px !important;
 }

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

span.ljuser a:hover b {
 padding-top: 2px;
 padding-bottom: 2px;
 color: #cccccc;
 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: #FFF1E3;
 border: 1px solid #e3d8c6;
 }

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

.currentlocation, .currentmusic { display:none; }

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

.lj-like {
    clear: both !important;
 text-align: center;
    line-height: 1 !important;
    margin: 0 !important;
}

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

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

.comments {
background-color: #8B9635;
color: #ffffff;
 font-size: 12px; line-height: 130%; 
letter-spacing:-0.1em;
padding:5px 10px;
margin-top: 8px; 
margin-left: -31px; 
position:absolute;
text-align:center;
width:auto;
-moz-border-radius: 0 10px 10px 0px;
-webkit-border-radius: 0 10px 10px 0px; 
border-radius: 0 10px 10px 0px; 
-khtml-border-radius: 0 10px 10px 0px; 
}

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

div.comments a:hover {
color:#5B4035;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
border-left: 0px solid #374C60;
letter-spacing: 3px;
}

/*------------Comments Page--------*/
.box {
 padding: 5px 5px 5px 10px;
 margin: 0px;
 text-align: left;
 clear: left;
 background-color: #FFF1E3;
 border: 1px solid #e3d8c6;
 }

form div.box {
 text-align: left;
 background-color: #FFF1E3;
  }

.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;
font-family: Homemade Apple, georgia, arial;
  font-size: 14px !important;
 }
  
.commentreply {
 font-family: "trebuchet ms", arial, sans-serif;
 position: relative;
 margin: 10px;
 font-size: 13px;
 font-family: "arial;
 color: #000000;
 }
  
.commentbox {
 align: left; 
 padding: 2px; 
 margin: 2px; 
 }

.userpiccomment {
 margin: -2px 5px 5px 0px;
 padding: 15px;
 width: 100px;
 height: 100px;
 float: right;
background-color: #8B9635 !important;
 -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 {
 margin-top: 10px;
 text-align: left;
 padding: 5px;
 font-size: 12px;
 font-family: "Fredericka the Great", arial, georgia;
 background: #9CA93F;
 background: -moz-linear-gradient(top, #899434, #9CA93F);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#899434), to(#9CA93F));
 color: #ffffff;
 }

.datesubjectcomment a:link, .datesubjectcomment a:visited {
 color: #666666; cursor: crosshair; text-decoration:none; font-weight:none;}
  
.datesubjectcomment a:hover {
 color: #666666; 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: #FFF1E3;  border: 1px solid #e3d8c6; }

ul.year li {display: inline;}

table.yeartable { width: 820px; margin-left: auto; margin-right: auto; padding: 10px 100px 10px 100px;  background-color: #FFF1E3;  border: 1px solid #e3d8c6; }

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

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

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

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

ul.ljtaglist {
 color: #A25A4B;
 font-family: "trebuchet ms", arial, trebuchet ms, sans-serif;
 font-size: 12px;
 padding: 8px 8px 8px 50px;
 background-color: #FFF1E3;
 border: 1px solid #e3d8c6;
 }

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/1197.png) 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/1197.png) 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/MadHatter-icon.png) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/*-----------Fonts-----------*/
@font-face {
  font-family: 'Grand Hotel';
  font-style: normal;
  font-weight: 400;
  src: local('Grand Hotel'), local('GrandHotel-Regular'), url(http://themes.googleusercontent.com/static/fonts/grandhotel/v1/NrGQkrs9rbHm5EYx0Eil0obN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  src: local('Great Vibes'), local('GreatVibes-Regular'), url(http://themes.googleusercontent.com/static/fonts/greatvibes/v1/6q1c0ofG6NKsEhAc2eh-3YbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

@font-face {
  font-family: 'Delius Swash Caps';
  font-style: normal;
  font-weight: 400;
  src: local('Delius Swash Caps'), local('DeliusSwashCaps-Regular'), url(http://themes.googleusercontent.com/static/fonts/deliusswashcaps/v6/uXyrEUnoWApxIOICunRq7-HbywbERJ_YcOpO6Co4fHY.woff) format('woff');
}

@font-face {
  font-family: 'Love Ya Like A Sister';
  font-style: normal;
  font-weight: 400;
  src: local('Love Ya Like A Sister Regular'), local('LoveYaLikeASister-Regular'), url(http://fonts.gstatic.com/s/loveyalikeasister/v7/LzkxWS-af0Br2Sk_YgSJY5HSI-O7NEBdNbD5SV3GSEY.woff) format('woff');
}

@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  src: local('Special Elite'), local('SpecialElite-Regular'), url(http://fonts.gstatic.com/s/specialelite/v6/9-wW4zu3WNoD5Fjka35Jm_n8qdNnd5eCmWXua5W-n7c.woff) format('woff');
}

@font-face {
  font-family: 'Homemade Apple';
  font-style: normal;
  font-weight: 400;
  src: local('Homemade Apple'), local('HomemadeApple'), url(http://fonts.gstatic.com/s/homemadeapple/v6/yg3UMEsefgZ8IHz_ryz86Kmk7U3V72hKgu0Yds_deA8.woff) format('woff');
}

@font-face {
  font-family: 'Indie Flower';
  font-style: normal;
  font-weight: 400;
  src: local('Indie Flower'), local('IndieFlower'), url(http://fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

@font-face {
  font-family: 'Neucha';
  font-style: normal;
  font-weight: 400;
  src: local('Neucha'), url(http://fonts.gstatic.com/s/neucha/v7/Z14xx5NkAnXABtaPytVZVA.woff) format('woff');
}

@font-face {
  font-family: 'Just Me Again Down Here';
  font-style: normal;
  font-weight: 400;
  src: local('Just Me Again Down Here'), local('JustMeAgainDownHere'), url(http://fonts.gstatic.com/s/justmeagaindownhere/v8/sN06iTc9ITubLTgXoG-kc4M0m1RcppnZ3Z3GZDDNlQw.woff) format('woff');
}

@font-face {
  font-family: 'Short Stack';
  font-style: normal;
  font-weight: 400;
  src: local('Short Stack'), local('ShortStack'), url(http://fonts.gstatic.com/s/shortstack/v6/6Lbgh4PDdLpSiP41rQoGa4bN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

@font-face {
  font-family: 'Fredericka the Great';
  font-style: normal;
  font-weight: 400;
  src: local('Fredericka the Great'), local('FrederickatheGreat'), url(http://fonts.gstatic.com/s/frederickathegreat/v5/7Es8Lxoku-e5eOZWpxw18vc3vBAn7YvtW9hNjxWZBR0.woff) format('woff');
}

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

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

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

#lj_controlstrip a:hover { color: #6DA9C1 !important; }

.headerimage {
 position: relative;
 width: 1100px;
 height: 250px;
 margin-left: auto;
 margin-right: auto;
 padding: 0px;
 background-color: transparent !important;
 background-image: url(HEADER IMAGE URL);
 background-repeat: no-repeat;
 background-position: center top;
z-index: -10;
}

.separator { height: 20px; }

Additional Layout Directions:

The header image doesn't have to be used. The layout is using a header image of 1100x250. If your header image is a different height you can change the height in the .headerimage coding.

For additional help see the Helpful Tutorials list below the images.

Images

credit

graffitigraphic

Helpful Tutorials:

Theme and Layout Change Tutorial

Image Tutorial: Adding Background & Header Images in Coding

Sidebar: What I Do and Do NOT Want On It

LJ Advertisements: What is that weird box on my LJ?

More Images:
More Headers: Layout Lounge: 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? Try:
Theme and Layout Change Tutorial or Helpful Hints
If that didn't work. Comment Below with example if possible.

Flat | Top-Level Comments Only

From:

fly-meaway.livejournal.com

This layout looks really nice, love the use of the sidebar. I'm not going to use it anytime soon probably, but I'm definitely saving this in my favourites. Thank you for sharing :D

sireesanwar.livejournal.com

Glad you like it.

rakshi.livejournal.com

I love this layout and am trying to get it set up on my LJ. I've downloaded all the font woff files to a folder on my server and tried changing the urls in the custom css but can't seem to get them to work. I have most of them changed. Can you see or tell anything I'm doing wrong?

Thanks in advance.

First there is no need to download any fonts as they are embedded Google fonts so they will show up either way.

Second, I would just copy the code again and repaste it. It should work without you doing much of anything except adding and header image if you want to.

I see!! Thank you so much. I hope you took a look at my layout and approve of the way it looks. I very much appreciate your artistry and hard work.

No problem. Sometimes my layouts are a lot of work for the user. This one just happens to be easy. You never know. *wink*

Thank you so much!

menschohneplan.livejournal.com

Awesome layout!
I'll definitely steal it for my LJ ... and credit, of course. :o)
Thanks a lot for sharing.

So welcome! I'm glad you like it.

arabian.livejournal.com

This is really gorgeous. I had a few questions though?

1. Would you mind if I used a different header/color? (It's for a private LJ that I only use at this point, but still, I wanted to ask.)

2. Is there any way to use this layout but have the icons instead the comments as opposed to hanging out?

Thank you so much.

Okay so definitely adjust things how you want. I'm fine with that.

Sure if you aren't sure how to do it you can go to the below coding in your custom css section and just change that margin line. The last number is for the left margin and you just need to make it 0 or 5px or something. You can also move the float to right if you wish and mess with the margins to see where you want it. Go for it.

.userpic, .userpicfriends {
float: left;
margin: -1px 15px 25px -110px;
padding: 15px;
width: 100px;
height: 100px;
text-align: center;
color: #FFFFFF !important;
background-color: #8B9635 !important;
-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;
}

Layout Lounge

Layouts, Tutorials, Help, and more

92. Spring Wide

(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