layoutlounge | 86. Gradient Hover

sireesanwar.livejournal.com posting in

layoutlounge

Layout Style: S2 Flexible Squares
Features: Gradient chages and hover effects
Layout Width: 1000px

{ Preview } { Live }
Credit:

layout_lounge

Theme and Layout Change Tutorial

All embedded in coding from Google Fonts

/*--------------------------------
S2 Flexible Squares
Layout by http://community.livejournal.com/layout_lounge/
PLEASE DO NOT REMOVE THIS SECTION 
----------------------------------*/
body{
background: #0d2431; /* Old browsers */
background: -moz-linear-gradient(top, #0d2431 0%, #7fb5c5 96%, #7fb5c5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0d2431), color-stop(96%,#7fb5c5), color-stop(100%,#7fb5c5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0d2431 0%,#7fb5c5 96%,#7fb5c5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0d2431 0%,#7fb5c5 96%,#7fb5c5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0d2431 0%,#7fb5c5 96%,#7fb5c5 100%); /* IE10+ */
background: linear-gradient(to bottom, #0d2431 0%,#7fb5c5 96%,#7fb5c5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d2431', endColorstr='#7fb5c5',GradientType=0 ); /* IE6-9 */

color: #594F4F;
 font-family: "verdana", arial, sans-serif;
 font-size: 12px;
 margin: 0px 0 20px 0;
 }

a, a:link, a:visited { color: #1986A5; }
a:hover { color: #ee1c24; }

blockquote {
 width: 75%;
 margin-left: auto;
 margin-right: 100px;
 padding: 5px; 
 color: #594F4F;
 font-size: 13px;
 line-height: 16px;
 font-family: "trebuchet ms", arial, sans-serif;
 text-align: left;
border: 10px solid #ededed;
 }

i img { border: 10px solid #dddddd; align: center; margin-left: 100px; }
u img { border: 10px solid #dddddd; }

b, strong { color: #E71A21; }
i, em { color: #0D2431; }
u { color: #222222; }
s, strike { color: #444444; }

.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: #ffffff;
 width: 1000px; 
 margin-left: auto; 
 margin-right: auto;
 margin-top: 100px;
 text-align: left;
box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.4);
 }

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

.subcontent {
 margin: auto;
 padding-top: 10px;
 }

/*---------------Header--------------*/
#header {  
 position: absolute;
 center: 0;
 width: 980px;
 height: 25px;
 text-align: center;
 color: #ffffff;
 padding: 6px 0px 10px 0;
 margin: -25px auto 0 35px;
 font-family: verdana, arial !important;
 font-size: 11px !important;
 letter-spacing: 1px;
 text-transform: lowercase;
 font-weight: none;
 background: #86AFB9;
 background: -moz-linear-gradient(top, #58BED8, #86AFB9);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#58BED8), to(#86AFB9));
box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.3);
z-index: 100;
}

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 {
 background-color: transparent !important;
padding: 12px 10px 16px 10px;
margin: 0px -8px 0 -7px;
 font-family: verdana !important;
 letter-spacing: 1px;
 color: #ffffff;
 text-align: center;
}

div#header li.view { 
 background: #4BB0C9;
 background: -moz-linear-gradient(top, #4BB0C9, #749CA6);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4BB0C9), to(#749CA6));
 color: #ffffff;
padding: 12px 10px 16px 10px;
margin: 0px -8px 0 3px;
 }

div#header a:hover {
 background: #4BB0C9;
 background: -moz-linear-gradient(top, #4BB0C9, #749CA6);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4BB0C9), to(#749CA6));
 color: #ffffff;
 }

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

ul.navheader li  {
 display: inline;
 list-style: none;
 border-left: lpx solid #ffffff;
 }
 
.title { position: absolute;
display: none;
 width: 100%;
 height: 100px;
 margin-top: -120px;
 padding: 0px;
 font-size: 72px;
 font-family: "Great Vibes", Brush Script MT, arial, verdana;
 text-align: center;
 color: #ffffff;
 text-shadow: 1px 1px 7px #222222;
}

.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 {

}

ul.navfooter li + li a {
float:right;
background-color: #272727; }

ul.navfooter li + li a:hover { background-color:#70736C !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: #999999;
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: #70736C;
-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;
background-color: #4C677A;
margin-right: -50px; 
margin-top: 0px;
margin-left: 0px;
padding-top: 30px;
color: #ffffff;
font-family: open sans condensed, arial, georgia;
font-size: 12px;
font-weight: normal;
text-transform: normal;
float: right;
box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.6);
}

.sbarbody2 { 
padding: 5px; 
background-color: transparent !important; 
margin-top: 0px; 
margin: 0 5px 5px 5px; 
line-height: 12px; 
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px !important; 
text-transform: lowercase; 
text-align: center;
}

.sbarbody {
margin:0;
padding: 0px 2px 7px 0px;
}

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: #91C3D0;
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:#ffffff;  }

li.sbartitle {
 list-style: none;
 color: #60CFEB; 
text-align: center;
letter-spacing: 0px;
 font-family: "Grand Hotel", trebuchet ms, arial, sans-serif;
 font-size: 30px;
 text-transform: normal !important;
 margin: 1px 5px 0px 5px;
  }

#sidebar_linklist  {
list-style-type:none;
padding-top:2px;
text-align: left !important;
text-transform: lowercase;
height: 150px;         overflow-x: hidden; overflow-y: auto;}

#sidebar_linklist li.sbaritem a {
color: #91C3D0;
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 #594F4F;
}

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

table.calendar { margin-right: auto; margin-left: auto; }
 
.sbarcalendar {
 padding: 1px;
 border: 1px solid #91C3D0;
 text-align: center;
 font-family: Verdana, sans-serif;
 font-size: 9px;
 }

.sbarcalendarposts {
 padding: 1px;
 border: 1px solid #594F4F;
 background-color: #91C3D0;
 text-align: center;
 font-family: Verdana, sans-serif;
 font-size: 9px;
 }

#sidebar_summary, #sidebar_calendar, h2 {  }

#sidebar_summary li.sbaritem {
 color: #ffffff;
 padding: 3px;
 text-transform: normal;
 margin: 3px;
 text-align: left;
 border-bottom: 2px solid #594F4F;
 }

#sidebar_summary li.sbaritem a {
 text-decoration: none;
 display: inline !important;
 color: #91C3D0;
 border: 0px solid #333333 !important;
 background-color: transparent !important;
 }

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

#sidebar_tags .sbarcontent { height: 100%;         overflow-x: hidden; overflow-y: auto;}

li.tagBox a { color: #91C3D0;
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 #594F4F; 
}

li.tagBox a:hover { color:#FFFFFF; 
background-color: #D82E46;
-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: #91C3D0;
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 #594F4F; 
}

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

.defaultuserpic {
width: 100px;
height: 100px;
margin: 8px auto 10px auto;
padding: 7px;
background-color: #ffffff !important;
border: 1px solid #cccccc;
}

.defaultuserpic img {
}

/*-----------Entries-----------*/
.entry {
 padding: 10px 20px 10px 20px;
 margin-bottom: 10px;
 color: #594F4F;
 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: #ffffff !important;
 border: 0px solid #eeeeee;
 float: right;
padding: 10px 10px 15px 10px; 
margin: 0px -5px 20px 5px;
 width: 100px;
 height: 100px;
 text-align: center;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 11px;
 z-index: 15;
 -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: #FF0004 !important; }
.userpic a:hover { color: #bbbbbb !important; }

.userpic img, .userpicfriends img {
 width: 100px;
 height: 100px;
}

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

.date  {
 margin: -10px 10px -15px 20px;
 text-align: left; 
 padding-right: auto;
 padding-left: auto;
 color: #435255;
 font-family: "Verdana", arial, sans-serif;
 font-size: 11px;
 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: 10px 10px 0px 10px;
 color: #E71A21;
font-family: "Duru Sans", open sans condensed, georgia, arial;
 font-size: 25px;
 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: #E71A21;}

.subject a:hover {color: #423F5E;}

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

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

span.ljuser a:hover b {
 padding-top: 2px;
 padding-bottom: 2px;
 color: #48B5AB;
 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: #3A4B54;
 }

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

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

.currentlocation, .currentmusic {

}

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

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

.ljtags {
width: 98%; 
text-align: left;
color: #cccccc;
 font-family:verdana; 
font-weight:bold; 
font-size: 8px; 
text-transform:uppercase;
margin: 20px 0px 0px 0px;
}

.ljtags a { padding-right: 5px; border-right: 1px solid #808080; }

.comments {
background-color: #f7f7f7;
color: #444444;
font-size: 12px;
line-height: 130%; 
letter-spacing:-0.1em;
padding:5px 10px;
margin-top: 8px; 
margin-left: -20px;
position: relative;
text-align: right;
width: auto;
}

div.comments a, div.comments a:link, div.comments a:visited {
color:#999999;
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:#ffffff;
background-color: #959595;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
border-left: 4px solid #AAC6BA;
letter-spacing: 3px;
}

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

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

.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: 12px;
 font-family: "arial;
 color: #594F4F;
 }
  
.commentbox {
 padding: 5px;
 margin: 10px 10px 10px 0px;
 text-align: left;
 background-color: #ffffff;
 border: 2px dashed #CDE2E7; 
 }

.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: #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: #3A4B54; }

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 #594F4F; color: #594F4F; }

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

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

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

ul.ljtaglist {
 color: #888888;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 13px;
 padding: 8px 8px 8px 40px;
 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 20px 5px 18px;
 }

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

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

.currentgroups {
 background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/foaf.png) no-repeat left center;
 padding: 2px 20px 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/owl.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/owl.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/tiny_icon_tree_apples.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: 'Arizonia';
  font-style: normal;
  font-weight: 400;
  src: local('Arizonia'), local('Arizonia-Regular'), url(http://themes.googleusercontent.com/static/fonts/arizonia/v3/8Usm7f8XTsZinW2e-ZMd5fesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}

@font-face {
  font-family: 'Montez';
  font-style: normal;
  font-weight: 400;
  src: local('Montez'), local('Montez-Regular'), url(http://themes.googleusercontent.com/static/fonts/montez/v3/Zfcl-OLECD6-4EcdWMp-Tw.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: 'Griffy';
  font-style: normal;
  font-weight: 400;
  src: local('Griffy'), local('Griffy-Regular'), url(http://themes.googleusercontent.com/static/fonts/griffy/v1/f4FUXlL5FPqftKJ2T0mqXg.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://themes.googleusercontent.com/static/fonts/loveyalikeasister/v4/LzkxWS-af0Br2Sk_YgSJY5HSI-O7NEBdNbD5SV3GSEY.woff) format('woff');
}

@font-face {
  font-family: 'Duru Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Duru Sans'), local('DuruSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/durusans/v4/0rnIdjSQWlqFS5KpKzVfzj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

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

#lj_controlstrip {
 margin-top: -50px;
 position: relative;
 width: 100%;
 background-position: center center;
 }

#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: absolute;
 width: 100%;
 height: 250px; 
 margin-top: -250px;
 padding-left: 50px;
 background-image: url(HEADER IMAGE URL HERE);
 background-repeat: no-repeat;
 background-position: center bottom;
z-index: 50;
 }

.lj-view-friends { margin-top: -24px; }

.separator { height: 10px; }

Theme and Layout Change Tutorial

Additional Layout Directions:
Header Images: This section is currently set up for an image that is 1000px by 250px. If you wanted to use and image that is 300px in height there are a few changes to the coding you'll have to make.

Because 300px is 50px more than 250px we will be adding 50pixels in certain areas.

In the General Section under content you will want to add 50px to margin-top. It is currently 100px and will become 150px.

Also in the General Section under maincontent you will want to add that 50px to margin-top bringing it from 260px to 310px.

Then in the Misc Section all the way at the bottom of the coding you will find headerimage. Here you will want to change the height to 300px and the margin-top to -300px. This is again adding 50px to each. Don't worry about the negative in front but don't remove it either. This is keeping the header image above the layout.

More Headers:

graffitigraphic
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:

sexycazzy.livejournal.com

Very nice! I am thinking that I might use this layout for a banner that I have been wanting to use but didn't match the current layout.

Two questions: Would it be possible for me to change the background and the colour of the navigation links header?

Thanks! :D

From:

sireesanwar.livejournal.com

Yes on all accounts. If you send me the banner link I might be able to fix something up for you.

From:

sexycazzy.livejournal.com

Wow - that's kind of you to offer! thanks!

Here's a link to the banner: http://i.imgur.com/c076uGQ.png

From:

sireesanwar.livejournal.com

I made a few changes which you can see over at

workshop_rees. I post the coding over there. You can, of course, make more changes if you like but I got the ball rolling for you.

From:

sexycazzy.livejournal.com

just saw your comment here - and I LOVE IT!! Thank you very much! :) I really appreciate it!

p.s. I have a couple of questions to ask - I love where the userpics positioned but would like to change them to a leaf one but not sure what code to use and where can I change the colour of the entry headings? I don't really like the red writing much - but the rest of it - gorgeous! :-D

With thanks in advance

Edited Date: 2014-03-30 10:11 pm (UTC)

From:

sireesanwar.livejournal.com

You are very welcome.

The entries subject is going to be in the coding for entries and it will be the ".subject" coding.

.userpic, .userpicfriends {
You are going to want to add the coding from this post to the above coding section rather than the section mentioned in the post...
http://layout-lounge.livejournal.com/42870.html

If that makes sense???

From:

sexycazzy.livejournal.com

Hi

I am sorry to hassle you again with this but it seems to be not working in the CSS code html for some reason.

I did what you said and changed the colour and the userpics but seems to be not working. :(

Here's a screenshot of what the userpic icons look like after I put in the code for the leaf userpic:

And this is what I put in:

Hope you can help with both the leaf userpics & the colour change.

From:

sireesanwar.livejournal.com

Go back to

workshop_rees. I made the changes there and I updated the coding I left for you.

From:

sexycazzy.livejournal.com

You have been a great help! Thank you for being patient with me! :) I am now a happy gal! :-D

From:

sireesanwar.livejournal.com

No problem.

From:

dikana.livejournal.com

I want to congratulate you for your work, your layouts are beautiful!! &heart;

I borrowed this one some days ago to revamp my journal and I'm very happy with it; it's pretty yet simple, clean and easy, just what I search in a layout design. I've made some changes in the code (fonts, colors, effects... hope you don't mind) and I'm working on my own header (right now, I have a provisional one) where I'll give you a proper credit. Meanwhile, let me thank you again for your wonderful designs and encourage you to keep up the great work.

Just one question. Well, my previous layout had an effect I liked alot: any link, instead of an underline/no-underline look, had a "button" effect. I don't know how to explain it (sorry, English isn't my mother tongue). Do you know what I mean? The text moved like if you were pressing a button. I've been trying to change it by myself, but I'm awful at coding and have no clue of how could I do it. Is that effect able on this layout? If not, don't worry, I really love your design. But, if you can help me, I'll appreciate it so much :D

Thank you again!

From:

sireesanwar.livejournal.com

Thank you so much. Your comment is wonderful and encouraging. I seriously doubt I'll stop any time soon if at all. I'm currently working the bugs out of a new layout so...

Where did you get this other layout. It is possible I can recreate the "button" look for you but I'd have to see it.

From:

dikana.livejournal.com

You're very welcome! XD Please, don't stop; you really make awesome designs! :D

Thanks! It would be great. The only problem is I took that code from Snubbly, a long, long time ago (... in a galaxy far, far away XD), and she's already closed her LJ, so I can't bring you the link. I still keep the code, of course. If you want, I could send it to you by PM, or something like that (if the lay code doesn't mess up with the PM code itself...). I like the effects you've put in the sidebar and comments links, for example, so I'd only like to change the "common links" effects (including pics and userpics). Just tell me and I'll send it to you.

By the way, I forgot to tell you about a header issue I had when I set up your layout. It isn't actually important, but here it goes anyway. I changed properly the header proportions in the code, but it still seems a bit cut on the top. Later, I thought it should be because of the elements' overlap, shouldn't it? I mean, LJ navbar on the top of the page should "eat" a 50px (or so) height portion of the image top. Is there any way to correct that to see the pic full height?

Again, thank you so much for your help, you're so kind! :)

From:

sireesanwar.livejournal.com

Sure go ahead and send me the coding via PM.

What do you mean by "common links"? Just links in a post?

The header image problem is actually explained above in Additional Layout Directions.

Your image has a height of 400 show a few numbers need to be changed.

In the coding find .content and change the margin-top: 150px; to margin-top: 250px;

Then go to .maincontent and change the margin-top: 310px; to 410.

You did follow the directions above but you weren't adding only 50px like the example above; you were adding 150px. So that needs to be reflected. You got it right in the .headerimage section.

From:

dikana.livejournal.com

Ok! :D

Yes, I mean every link BUT sidebar/comments ones (the ones that have special effects in your layout, actually). I said that because the other layout had the same button effect in every link, with no exceptions. All of them looked the same. You'll see it on the code. But, seriously, I don't want to bother you with this, so don't worry too much about it if it turns too annoying :)

Ahhh, ok! LOL, what a fail! X'D Sorry, you're right. I made all the changes you pointed in Additional Layout Directions, but my header is 400px in height, yes. I even tried a 500px one. I've put the correct proportions in "headerimage" section, but didn't fix up the other ones. Ok, I'm gonna check it right now. Thank you so much! ♥

Best wishes!

From:

sireesanwar.livejournal.com

Okay. Took a look at the coding you sent me and the solution is very simple.

Towards the very beginning of the coding you'll see....
a:hover { color: #ee1c24; }

Replace that with...
a:hover { color: #ee1c24; position: relative; top: 1px; left: 1px; text-decoration: none;}

This will make the links move like they are buttons. I actually added that extra coding here at the Lounge and you can see all the links moving when you hover.

Edited Date: 2014-05-23 11:09 pm (UTC)

From:

dikana.livejournal.com

Yeah, fixed!!! \o/ ♥ ♥ ♥

Thank you so much, it looks great now!! Thanks also because I've learnt alot with your advices and I feel a little more confident with html. You've been wonderful, seriously, thanks!!

I'm looking forward to see your new works. Courage! XD

Have a nice day! :D

From:

sireesanwar.livejournal.com

You are so welcome. I'm so glad you got it all working. I'm glad I've been able to teach you something.

You know that was my goal. The CSS coding for the layouts isn't too hard to learn and it was my hope to make it easier on other users. I'm glad I was able to make it easier for you.

Thanks! Coming soon!

:D

From:

reza-danish.livejournal.com

Hello :)
I like this layout and already change the header too.
Thank you so much ^^

Is it okay if I'm using your layout although i'm not a member?

From:

sireesanwar.livejournal.com

Not a problem at all.

Enjoy!

From:

hughville.livejournal.com

Your layouts are simply the best I've seen.

Can this one be sized down to 800px from 1000px or will that mess with the way it looks?

From:

sireesanwar.livejournal.com

Sure....
http://workshop-rees.livejournal.com/19895.html

I took the liberty of doing it.

Just remember to come back here for header tips.

Flat | Top-Level Comments Only

Layout Lounge

Layouts, Tutorials, Help, and more

86. Gradient Hover

(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)

(no subject)

(no subject)

(no subject)

(no subject)

About

Links

Tags

Summary

April 2025