86. Gradient Hover
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.
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.
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 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.