Making A Layout: Footer
Account Status: All
Theme: Flexible Squares
Actions: Creating Your Own Layout: Footer
Links: Code Index
If you've been updating your coding and saving it as we go, your footer may be looking something like this:
This is not what we want to see and as you would notice, there doesn't appear to be a previous link. Not good at all. We want something link one of these:
1.
2.
The coding I would like to work with is from my layout Oxygen.
/*--------------------------------
S2 Flexible Squares - 90. Oxygen
Layout by http://layout-lounge.livejournal.com
PLEASE DO NOT REMOVE THIS SECTION
----------------------------------*/
body{
background-color: #F6F6F6;
background-image: url(http://i77.photobucket.com/albums/j49/SireesAnwar/Backgrounds/2h4l5bq.png);
background-repeat: repeat, repeat;
background-attachment: fixed, fixed;
background-position: left top, 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: #004359; }
a:hover { color: #444444; }
blockquote {
width: 70%;
background: #444444;
margin-left: auto;
margin-right: auto;
padding: 10px;
color: #ffffff;
font-size: 13px;
line-height: 16px;
font-family: "trebuchet ms", arial, sans-serif;
text-align: left;
box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.1);
}
blockquote a { color: #cccccc !important; font-style: italic; }
blockquote a:hover { color: #ffffff !important; }
img.special, i img { border: 10px solid #f5f5f5; }
b, strong { color: #004359; }
i, em { color: #4c228a; }
u { color: #8CB53F; }
s, strike { color: #AD5C00; }
/*--------------General------------*/
#content {
width: 1000px;
background-color: #ffffff !important;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
#maincontent {
font-family: "trebuchet ms", arial, trebuchet ms, sans-serif;
font-size: 12px;
color: #333333;
margin-left: 285px;
text-align: center;
}
.subcontent {
width: 710px;
margin-top: 0px;
}
/*---------------Header--------------*/
#header {
position: inherit;
width: 100%;
height: 30px;
text-align: left;
color: #282828;
padding: 0px;
margin-bottom: 5px;
font-family: "Abel", georgia, arial;
font-size: 16px !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: 5px 5px 5px 5px;
margin: 0px 2px 0px 0px;
letter-spacing: 1px;
color: #0da4d3;
text-align: left;
border:0px solid #E0E0E0;
-webkit-transition: box-shadow 0.3s linear;
-moz-transition: box-shadow 0.3s linear;
-ms-transition: box-shadow 0.3s linear;
-o-transition: box-shadow 0.3s linear;
transition: box-shadow 0.3s linear;
}
div#header li.view {
padding: 5px 10px 5px 15px;
margin: 0px 5px;
color: #cccccc;
-webkit-transition: box-shadow 0.3s linear;
-moz-transition: box-shadow 0.3s linear;
-ms-transition: box-shadow 0.3s linear;
-o-transition: box-shadow 0.3s linear;
transition: box-shadow 0.3s linear;
}
div#header a:hover {
color: #000000;
-webkit-box-shadow: #f6f6f6 0 0 10px inset;
-moz-box-shadow: #f6f6f6 0 0 10px inset;
-ms-box-shadow: #f6f6f6 0 0 10px inset;
-o-box-shadow: #f6f6f6 0 0 10px inset;
box-shadow: #f6f6f6 0 0 10px inset;
}
ul.navheader {
list-style: none;
line-height: 24px;
margin: 0px 0 0 15px;
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;
left: 0;
text-align:left;
text-transform:lowercase;
width: 100%;
z-index:99;
}
ul.navfooter{
margin:0 auto;
padding:0;
}
/*--first link---*/
ul.navfooter a {
}
ul.navfooter li {
list-style:none outside none;
margin:0;
padding:0;
display:inline; }
.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;
}
/*--second link---*/
ul.navfooter li + li a {
float: right;
background-color: rgba(0, 0, 0, 0.3) !important;
padding: 20xp 10px 20px 10px;
}
ul.navfooter li + li a:hover { }
ul.navfooter li + li {
list-style:none outside none;
margin:0;
padding:0;
display:inline; }
#footer .viewing { display:none; }
/*--in entries---*/
/*-------------Sidebar--------------*/
#sidebar {
background-color: #ffffff;
padding: 10px;
font-family: "Abel", arial, georgia;
font-size: 14px;
color: #000000;
width: 260px;
float: left;
text-align: right;
text-transform: normal;
}
.sbarbody2, li.sbaritem2 {
padding: 5px;
margin: 0px 0px 0 10px;
font-family: "Abel", arial, sans-serif;
font-size: 14px !important;
text-transform: lowercase;
text-align: left;
}
.sbarbody {
margin:0;
padding: 5px;
padding-bottom: 5px;
}
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: #8A1751;
display: inline;
font-family: "Abel", arial, sans-serif;
font-size: 14px;
font-weight: lighter;
margin-right: 0px;
padding: 0px;
text-align: left; }
li.sbaritem a:hover {
color:#ffffff; }
li.sbartitle {
background-color: rgba(255, 255, 255, 0.5);
list-style: none;
color: #aaaaaa;
text-align: left;
letter-spacing: 2px;
font-family: "Abel", trebuchet ms, arial, sans-serif;
font-size: 14px;
text-transform: uppercase;
margin: 5px -12px 0px 8px;
}
#sidebar_linklist {
list-style-type:none;
padding: 5px;
text-align: left !important;
text-transform: uppercase; }
#sidebar_linklist li.sbaritem a {
background-color: #111111;
border-bottom: 1px solid #1d1d1d;
color: #eeeeee;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 8px;
margin: 0px 0px -2px 0px;
text-align: left;
}
#sidebar_linklist li.sbaritem a:hover {
color:#FFFFFF;
background-color: #000000;
text-align: left;
}
td.sbarcalendar {background-color: transparent !important;
padding: 5px;}
td.sbarcalendarposts {background-color: #ffffff; 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 .sbarcontent {
background-color: #000000;
color: #ffffff;
padding: 0px;
margin: 0px -5px 0px 5px;
text-align: left;
}
#sidebar_summary li.sbaritem {
padding: 5px;
border-bottom: 1px solid #1d1d1d;
}
#sidebar_summary li.sbaritem a { color: #dddddd; }
#sidebar_summary li.sbaritem a: hover { color: #ffffff!important; }
#sidebar_tags .sbarcontent { height: 325px; overflow-x: hidden; overflow-y: auto; margin-right: -12px; padding: 5px; }
#sidebar_tags .sbarcontent { height: 500px; overflow-x: hidden; overflow-y: auto; margin-right: -12px; padding: 5px; }
li.tagBox a {
background-color: #111111;
background: url("http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/greyarrow.gif") no-repeat scroll left center #111111;
border-bottom: 1px solid #1d1d1d;
color: #eeeeee;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 5px 1px 5px 12px;
margin: 0px 0px -2px 0px;
text-align: left;
}
li.tagBox a:hover {
color:#FFFFFF;
background-color: #000000;
text-align: left;
}
#sidebar_tags li.sbaritem a {
background-color: #111111;
background: url("http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/greyarrow.gif") no-repeat scroll left center #111111;
border-bottom: 1px solid #1d1d1d;
color: #eeeeee;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 5px 1px 5px 9px;
margin: 0px 0px -2px 0px;
text-align: left;
}
#sidebar_tags li.sbaritem a:hover { color:#FFFFFF;
background-color: #000000;
text-align: left;
}
.defaultuserpic {
width: 100px;
height: 100px;
margin: 8px auto 10px auto;
padding: 10px;
background-color: #ffffff !important;
border: 0px solid #cccccc;
-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;
}
.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-----------*/
div.entry_text {
padding: 20px 30px 0px 30px;
margin: 0px;
color: #444444;
font-family: "arial";
font-size: 14px;
line-height: 150%;
text-align: left;
}
div.entry_text li { line-height: 12px !important; }
.userpic, .userpicfriends {
float: right;
margin: 5px -60px 25px 15px;
padding: 10px;
width: 100px;
height: 100px;
text-align: center;
color: #FFF!important;
background: #FFF!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: 'TuffyRegular', sans-serif;
font-size: 11px;
text-align: center;
color: #FF5DDD;
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: #bbbbbb; text-shadow: 2px 2px 6px #bbbbbb; }
.datesubject {
padding: 0px;
text-align: left;
border-bottom: 1px solid #dedede;
}
.date {
margin: 10px 80px -15px 0px;
text-align: right;
padding-right: auto;
padding-left: auto;
color: #ccccca;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
text-transform: none;
}
.subject {
padding: 0px 0px 5px 5px;
margin: 15px 10px 0px 10px;
color: #0da4d3;
font-family: "Abel", open sans condensed, georgia, arial;
font-size: 28px;
font-weight: normal;
text-align: left;
text-transform: uppercase;
}
.subject a, .subject a:link, .subject a:visited {color: #0da4d3;}
.subject a:hover {color: #565656;}
span.ljuser a b {
padding: 2px 0 2px 0;
color: #4c228a;
font-weight: normal;
}
span.ljuser a:hover b {
padding-top: 2px;
padding-bottom: 2px;
color: #8A1751;
font-weight: normal;
}
.skiplinks {
text-align: center;
margin-top: 5px;
margin-bottom: 3px;
font-family: "Abel", arial, sans-serif;
padding: 10px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: #999999;
}
.clear { height: px; font-size: 0.01px; }
.separator { height: 0px; }
/*----------- Currents--------------*/
.currents, .currentlocation, .currentmood, .currentgroup, .currentmusic {
padding: 5px;
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, tags, comment links-----*/
div.ljtags {
margin-top: 20px;
text-align: left;
color: #808080;
font-family: verdana;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}
.comments {
color: #eeeeee;
font-size: 12px; line-height: 130%;
letter-spacing:-0.1em;
padding: 10px;
margin-top: 8px;
position: relative;
text-align: center !important;
width:auto;
}
div.comments a, div.comments a:link, div.comments a:visited {
background-color: #111111;
color:#eeeeee;
font-family: open sans condensed, arial !important;
font-size: 14px !important; line-height: 130%;
line-height:1;
padding: 10px;
margin:0;
text-align: center; }
div.comments a:hover {
background-color: #000000;
color:#ffffff;
}
/*----------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/famfamfam/2wbzrdd-famfamfam.png) no-repeat !important;
}
/* STICKY POST */
.subject img[src*="icon_sticky.png"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: URL(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/pin.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/eye-close.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://s77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/tiny_icon_tree_summer.png) no-repeat 0 0 !important;
padding: 16px 0px 0px 16px !important;
}
/*------------Comments Page--------*/
.box {
padding: 5px 5px 5px 10px;
margin: 0px;
text-align: left;
clear: left;
background-color: #FAFAFA;
border: 1px solid #dedede;
}
form div.box {
text-align: left;
background-color: #FAFAFA;
}
center.comment-links { }
div#footer.box { text-align: center; }
.commentbox {
align: left;
padding: 2px;
margin: 2px;
}
.datesubjectcomment {
margin-top: 10px;
text-align: left;
padding: 5px;
font-size: 12px;
background-color: #f6f6f6;
color: #000000;
}
.userpiccomment {
margin: -2px 0px 5px 5px;
padding: 10px;
width: 100px;
height: 100px;
float: right;
background: #FFF!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;
}
.commentreply {
font-family: "trebuchet ms", arial, sans-serif;
position: relative;
margin: 10px;
font-size: 13px;
color: #000000;
}
.commentinfo {
margin-top: 5px;
width: 100%;
}
div.comment-links { text-align: left !important; margin: 5px; padding: 20px 5px; }
div.comment-links a { color: #A9000F; }
div.comment-links a:hover { color: #888888; }
/*-----------Calendar/Year/Archive Page----------*/
ul.year { text-align: center; padding: 5px; background-color: #ffffff; }
ul.year li {display: inline;}
ul.year a { padding: 0px 3px 0px 3px; }
ul.year a:hover {}
table.yeartable { width: 710px; margin-left: auto; margin-right: auto; padding: 10px 100px 10px 100px; background-color: #ffffff; }
table.yeartable td.yeardate { color: #888888; border: 1px solid #cccccc; }
table.yeartable td.yearday { text-align: center; color: #888888; border: 1px solid #cccccc; }
td.yearmonth { color: #000000; border-style: none; }
/*-----------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: 'IM Fell DW Pica SC';
font-style: normal;
font-weight: 400;
src: local('IM FELL DW Pica SC'), local('IM_FELL_DW_Pica_SC'), url(http://themes.googleusercontent.com/static/fonts/imfelldwpicasc/v4/xBKKJV4z2KsrtQnmjGO17ORrWueMUZPacwWUa4j7Ahg.woff) format('woff');
}
@font-face {
font-family: 'Abel';
font-style: normal;
font-weight: 400;
src: local('Abel'), local('Abel-Regular'), url(http://themes.googleusercontent.com/static/fonts/abel/v4/EAqh528fFdbUek8UOky4sA.woff) format('woff');
}
/*-----------Mics-----------*/
.headerimage {
position: relative;
width: 960px;
height: 300px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: 20px solid #ffffff;
background-color: transparent !important;
background-image: url(http://i77.photobucket.com/albums/j49/SireesAnwar/graffitigraphic-movie0297.png);
background-repeat: no-repeat;
background-position: center top;
}
Typically I place the Footer Section after the Header Section but since it is at the bottom of the layout you can most it down just about entries. Really it is up to you how you structure your coding. Most of the sections don't have to be in the order I've placed them in. The only things I would keep at the top would be the Body and the General Section. Since these things start off the layout. The BODY Section of all coding is at the top so leave that right where it is. But feel free to place others how you like.
This time I want to look at two types of coding. I'm going to pull both the Footer Section from this layout which is the #2 example above and then also coding for the #1 example above.
1.
1./*-----------SECTION: Footer------------*/
.lj-view-recent #footer, .lj-view-friends #footer {
width: 100%;
margin: 0px;
text-align: left;
color: #777777;
z-index: 100;
}
div#footer a {
padding: 5px;
font-weight: normal;
text-transform: normal;
letter-spacing: 1px;
color: #6DA9C1;
text-align: left;
background-color: transparent !important;
}
.lj-view-recent #footer a:hover, .lj-view-friends #footer a:hover {
padding: 5px;
color: #777777;
background-color: transparent !important;
border-bottom: 0px solid;
}
ul.navfooter{ padding: 0px; margin: 0px; }
ul.navfooter li { display: inline; margin: 0 5px 0 5px; }
.clearfoot { clear: both; }
Let's go over option one first.
#footer: Much like #header styles the footer bar at the bottom of your page.
div#footer a:hover: Any A with :hover after it is always for the hover of those links. Typically my hover coding is pretty simple but here I have some coding which was clearly something I'd been using and didn't really remove. Shame on me. First, sometimes when there is padding in a links coding you'll need it in the hover.
ul.navfooter: This is going to work much like the version of it in the header section. The #footer is essentially the footer navbar and the ul.navfooter is the bit the links lie on. In both instances I don't do much with it but you can always mess with it like in the header and see what you can accomplish. Just don't leave it out.
ul.navfooter li: This applies to the links themselves, which is again much like the header. You can manipulate these individually. And in cases where there are more than one link, link the header you'd kee adding +li to code for the next link (ie ul.navfooter li + li:). In this bit we have the display as inline again to specify how we want to see the coding which is inline which each other. I don't think I've ever changed this.
.clearfoot: The idea behind this is that if my footer section say 80% of the width of the journal it would essentially clear both sides of the journal and float in the middle of the footer section. I have not found this to work well so I would remove it and use the margin auto options in the #footer. This is coding from an older layout so it took me a while to discover this bit of coding was worthless. At times, using clear: both; will work in sections of coding but I've never had too much success with it.
2.
2./*--------------- 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;}
/*--first link---*/
ul.navfooter a {
}
ul.navfooter li {
list-style:none outside none;
margin:0;
padding:0;
display:inline; }
.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;
}
/*--second link---*/
ul.navfooter li + li a {
float: right;
background-color: rgba(0, 0, 0, 0.3) !important;
padding: 20xp 10px 20px 10px;
}
ul.navfooter li + li a:hover { }
ul.navfooter li + li {
list-style:none outside none;
margin:0;
padding:0;
display:inline; }
#footer .viewing { display:none; }
Now let's got over the option I figured out not long after that last bit of coding and really never went back! I'll also tell you I restructed this a bit from the coding in the layout at the top because I realized it was a little mixed up. Since, in this coding, we can customize each link, I want to show that.
#footer: This time we have a position set which is fixed. This means it is going to stay where it is no matter how much you scroll. And with a width or 100% it fills the browser putting the links on either side of the journal. Here the z-index is to prevent the links for disappearing behing usericon or other images. The down side to the way this footer is set up is that techically it is transparent but if you were to say color the background red....
Can you see that it appears to be over a "entry". This means if you are scrolling and the link you want to click on falls in this "footer" space it will act like you can't click on it because it is as if you are click on this red bar (which is transparent in the coding). It can be annoying but I just scroll so I can get to the link.
ul.navfooter a: This starts of the first link which is to the left of the journal. I didn't code this section but much like the right side you could.
ul.navfooter li: So this is the part where we tell this link a few things. First, that we want the list-style to be none outside none. What does that mean? Well it is style, position and image. So in this case we want none for style, outside for position (of bullets) but we also want none because we don't want to see the bullets either. Again display is inline though I've noticed these footer links aren't perfectly aligned and I've never gotten them to be. Doesn't matter to be much though.
div#footer a, div#footer a:link: Now we get into making some customizations to this link. I've choose to make it see through or semi-transparent. The padding and margins are really where all the customizing comes in. Since I have these in a "square" for this layout, I need padding to provide this. This is why it is listed as padding: 20px 30px 20px 30px;. Then I recomment taking a look at the link after you save. I added some margins for good measure. Also, the color is going to be what your link color will be.
div#footer a:hover: Here is the first links hover so we can put a color into this. I need to add the padding but I'm not entirely sure it is necessary. That is going to be up to you.
ul.navfooter li + li a: Onto the SECOND link. Notice the li + li a. This is telling our layout that it isn't the first link but the section li which is a bullet point in a list which again all out of menus are. I have a float line here to send it to the right. If it wasn't here it would be over with the link to the left. In this big of coding the background-color needs that !important function otherwise you can't change the coloring though here it is the same.
ul.navfooter li + li a:hover: This is empty which means the hover is going to revert back to the other link and again they will be the same but if you want to have a different color for hover on the second link you can add there here.
ul.navfooter li + li: This is much like the ul.navfooter li but we need to code for the second link. It's list-style and display are the same however.
#footer .viewing: You'll notice the words "viewing most recent entires" is missing. This is what is removing that bit of text with the display: none;. You can add this bit of coding to almost any part of your layout. So say you have customized your journal not to have a sidebar but you don't think you want to remove the coding for the sidebar altogether (what if you want the sidebar back?). Add the display: none; to the #sidebar section and it will disappear.
So now here is what our coding has come to:
/*--------------------------------
S2 Flexible Squares - 90. Oxygen
Layout by http://layout-lounge.livejournal.com
PLEASE DO NOT REMOVE THIS SECTION
----------------------------------*/
body{
background-color: #F6F6F6;
background-image: url(BACKGROUND IMAGE);
background-repeat: repeat;
background-attachment: fixed;
background-position: left top;
background-size: inherit;
color: #888888;
font-family: "lucida grande", trebuchet ms, arial, sans-serif;
font-size: 12px;
margin: 10px 0 20px 0;
}
a, a:link, a:visited { color: #004359; }
a:hover { color: #444444; }
blockquote {
width: 70%;
background: #444444;
margin-left: auto;
margin-right: auto;
padding: 10px;
color: #ffffff;
font-size: 13px;
line-height: 16px;
font-family: "trebuchet ms", arial, sans-serif;
text-align: left;
box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.1);
}
blockquote a { color: #cccccc !important; font-style: italic; }
blockquote a:hover { color: #ffffff !important; }
i img { border: 10px solid #f5f5f5; }
b, strong { color: #004359; }
i, em { color: #4c228a; }
u { color: #8CB53F; }
s, strike { color: #AD5C00; }
/*--------------General------------*/
#content {
width: 1000px;
background-color: #ffffff !important;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 0px;
}
#maincontent {
font-family: "trebuchet ms", arial, trebuchet ms, sans-serif;
font-size: 12px;
color: #333333;
margin-left: 285px;
text-align: center;
}
.subcontent {
background-color: #ffffff;
width: 710px;
margin-top: 0px;
}
/*---------------Header--------------*/
#header {
position: inherit;
width: 1000px;
height: 30px;
text-align: left;
color: #282828;
padding: 0px;
margin-bottom: 5px;
font-family: "Abel", georgia, arial;
font-size: 16px !important; 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: 5px 5px 5px 5px;
margin: 0px 2px 0px 0px;
letter-spacing: 1px;
color: #0da4d3;
text-align: left;
border:0px solid #E0E0E0;
-webkit-transition: box-shadow 0.3s linear;
-moz-transition: box-shadow 0.3s linear;
-ms-transition: box-shadow 0.3s linear;
-o-transition: box-shadow 0.3s linear;
transition: box-shadow 0.3s linear;
}
div#header li.view {
padding: 5px 10px 5px 15px;
margin: 0px 5px;
color: #cccccc;
-webkit-transition: box-shadow 0.3s linear;
-moz-transition: box-shadow 0.3s linear;
-ms-transition: box-shadow 0.3s linear;
-o-transition: box-shadow 0.3s linear;
transition: box-shadow 0.3s linear;
}
div#header a:hover {
color: #000000;
-webkit-box-shadow: #f6f6f6 0 0 10px inset;
-moz-box-shadow: #f6f6f6 0 0 10px inset;
-ms-box-shadow: #f6f6f6 0 0 10px inset;
-o-box-shadow: #f6f6f6 0 0 10px inset;
box-shadow: #f6f6f6 0 0 10px inset;
}
ul.navheader {
list-style: none;
line-height: 24px;
margin-left: 15px;
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;}
/*--first link---*/
ul.navfooter a {
}
ul.navfooter li {
list-style:none outside none;
margin:0;
padding:0;
display:inline; }
.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;
}
/*--second link---*/
ul.navfooter li + li a {
float: right;
background-color: rgba(0, 0, 0, 0.3) !important;
padding: 20xp 10px 20px 10px;
}
ul.navfooter li + li a:hover { }
ul.navfooter li + li {
list-style:none outside none;
margin:0;
padding:0;
display:inline; }
#footer .viewing { display:none; }
/*-------------Sidebar--------------*/
#sidebar {
background-color: #ffffff;
padding: 10px;
font-family: "Abel", arial, georgia;
font-size: 14px;
color: #000000;
width: 260px;
float: left;
text-align: right;
text-transform: none;
}
.sbarbody2, li.sbaritem2 {
padding: 5px;
margin: 0px 0px 0 10px;
font-family: "Abel", arial, sans-serif;
font-size: 14px !important;
text-transform: lowercase;
text-align: left;
}
.sbarbody {
margin:0;
padding: 5px;
padding-bottom: 5px;
}
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: #8A1751;
display: inline;
font-family: "Abel", arial, sans-serif;
font-size: 14px;
font-weight: lighter;
margin-right: 0px;
padding: 0px;
text-align: left; }
li.sbaritem a:hover {
color:#ffffff; }
li.sbartitle {
background-color: rgba(255, 255, 255, 0.5);
list-style: none;
color: #aaaaaa;
text-align: left;
letter-spacing: 2px;
font-family: "Abel", trebuchet ms, arial, sans-serif;
font-size: 14px;
text-transform: uppercase;
margin: 5px -12px 0px 8px;
}
#sidebar_linklist {
list-style-type:none;
padding: 5px;
text-align: left !important;
text-transform: uppercase; }
#sidebar_linklist li.sbaritem a {
background-color: #111111;
border-bottom: 1px solid #1d1d1d;
color: #eeeeee;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 8px;
margin: 0px 0px -2px 0px;
text-align: left;
}
#sidebar_linklist li.sbaritem a:hover {
color:#FFFFFF;
background-color: #000000;
text-align: left;
}
#sidebar_calendar {background-color: rgba(255, 255, 255, 0.5); padding:2px 5px 5px 12px; margin-right: -12px; }
td.sbarcalendar {background-color: transparent !important;
padding: 5px;}
td.sbarcalendarposts {background-color: #ffffff; 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 .sbarcontent {
background-color: #000000;
color: #ffffff;
padding: 0px;
margin: 0px -5px 0px 5px;
text-align: left;
}
#sidebar_summary li.sbaritem {
padding: 5px;
border-bottom: 1px solid #1d1d1d;
}
#sidebar_summary li.sbaritem a { color: #dddddd; }
#sidebar_summary li.sbaritem a: hover { color: #ffffff!important; }
#sidebar_tags .sbarcontent { height: 325px; overflow-x: hidden; overflow-y: auto; margin-right: -12px; padding: 5px; }
#sidebar_tags .sbarcontent { height: 500px; overflow-x: hidden; overflow-y: auto; margin-right: -12px; padding: 5px; }
li.tagBox a {
background-color: #111111;
background: url("http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/greyarrow.gif") no-repeat scroll left center #111111;
border-bottom: 1px solid #1d1d1d;
color: #eeeeee;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 5px 1px 5px 12px;
margin: 0px 0px -2px 0px;
text-align: left;
}
li.tagBox a:hover {
color:#FFFFFF;
background-color: #000000;
text-align: left;
}
#sidebar_tags li.sbaritem a {
background-color: #111111;
background: url("http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/greyarrow.gif") no-repeat scroll left center #111111;
border-bottom: 1px solid #1d1d1d;
color: #eeeeee;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 5px 1px 5px 9px;
margin: 0px 0px -2px 0px;
text-align: left;
}
#sidebar_tags li.sbaritem a:hover { color:#FFFFFF;
background-color: #000000;
text-align: left;
}
.defaultuserpic {
width: 100px;
height: 100px;
margin: 8px auto 10px auto;
padding: 10px;
background-color: #ffffff !important;
border: 0px solid #cccccc;
-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;
}
.defaultuserpic img {
}
/*-----------Fonts-----------*/
@font-face {
font-family: 'Abel';
font-style: normal;
font-weight: 400;
src: local('Abel'), local('Abel-Regular'), url(http://themes.googleusercontent.com/static/fonts/abel/v4/EAqh528fFdbUek8UOky4sA.woff) format('woff');
}
/*---------------MISC--------------*/
.headerimage {
position: relative;
width: 960px;
height: 300px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: 20px solid #ffffff;
background-color: transparent !important;
background-image: url(HEADER IMAGE);
background-repeat: no-repeat;
background-position: center top;
}
Any questions about this tutorial? Please Comment.
Theme: Flexible Squares
Actions: Creating Your Own Layout: Footer
Links: Code Index
If you've been updating your coding and saving it as we go, your footer may be looking something like this:
This is not what we want to see and as you would notice, there doesn't appear to be a previous link. Not good at all. We want something link one of these:
1.
2.
The coding I would like to work with is from my layout Oxygen.
/*--------------------------------
S2 Flexible Squares - 90. Oxygen
Layout by http://layout-lounge.livejournal.com
PLEASE DO NOT REMOVE THIS SECTION
----------------------------------*/
body{
background-color: #F6F6F6;
background-image: url(http://i77.photobucket.com/albums/j49/SireesAnwar/Backgrounds/2h4l5bq.png);
;){kind=link}
background-repeat: repeat, repeat;
background-attachment: fixed, fixed;
background-position: left top, 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: #004359; }
a:hover { color: #444444; }
blockquote {
width: 70%;
background: #444444;
margin-left: auto;
margin-right: auto;
padding: 10px;
color: #ffffff;
font-size: 13px;
line-height: 16px;
font-family: "trebuchet ms", arial, sans-serif;
text-align: left;
box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.1);
}
blockquote a { color: #cccccc !important; font-style: italic; }
blockquote a:hover { color: #ffffff !important; }
img.special, i img { border: 10px solid #f5f5f5; }
b, strong { color: #004359; }
i, em { color: #4c228a; }
u { color: #8CB53F; }
s, strike { color: #AD5C00; }
/*--------------General------------*/
#content {
width: 1000px;
background-color: #ffffff !important;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
#maincontent {
font-family: "trebuchet ms", arial, trebuchet ms, sans-serif;
font-size: 12px;
color: #333333;
margin-left: 285px;
text-align: center;
}
.subcontent {
width: 710px;
margin-top: 0px;
}
/*---------------Header--------------*/
#header {
position: inherit;
width: 100%;
height: 30px;
text-align: left;
color: #282828;
padding: 0px;
margin-bottom: 5px;
font-family: "Abel", georgia, arial;
font-size: 16px !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: 5px 5px 5px 5px;
margin: 0px 2px 0px 0px;
letter-spacing: 1px;
color: #0da4d3;
text-align: left;
border:0px solid #E0E0E0;
-webkit-transition: box-shadow 0.3s linear;
-moz-transition: box-shadow 0.3s linear;
-ms-transition: box-shadow 0.3s linear;
-o-transition: box-shadow 0.3s linear;
transition: box-shadow 0.3s linear;
}
div#header li.view {
padding: 5px 10px 5px 15px;
margin: 0px 5px;
color: #cccccc;
-webkit-transition: box-shadow 0.3s linear;
-moz-transition: box-shadow 0.3s linear;
-ms-transition: box-shadow 0.3s linear;
-o-transition: box-shadow 0.3s linear;
transition: box-shadow 0.3s linear;
}
div#header a:hover {
color: #000000;
-webkit-box-shadow: #f6f6f6 0 0 10px inset;
-moz-box-shadow: #f6f6f6 0 0 10px inset;
-ms-box-shadow: #f6f6f6 0 0 10px inset;
-o-box-shadow: #f6f6f6 0 0 10px inset;
box-shadow: #f6f6f6 0 0 10px inset;
}
ul.navheader {
list-style: none;
line-height: 24px;
margin: 0px 0 0 15px;
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;
left: 0;
text-align:left;
text-transform:lowercase;
width: 100%;
z-index:99;
}
ul.navfooter{
margin:0 auto;
padding:0;
}
/*--first link---*/
ul.navfooter a {
}
ul.navfooter li {
list-style:none outside none;
margin:0;
padding:0;
display:inline; }
.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;
}
/*--second link---*/
ul.navfooter li + li a {
float: right;
background-color: rgba(0, 0, 0, 0.3) !important;
padding: 20xp 10px 20px 10px;
}
ul.navfooter li + li a:hover { }
ul.navfooter li + li {
list-style:none outside none;
margin:0;
padding:0;
display:inline; }
#footer .viewing { display:none; }
/*--in entries---*/
/*-------------Sidebar--------------*/
#sidebar {
background-color: #ffffff;
padding: 10px;
font-family: "Abel", arial, georgia;
font-size: 14px;
color: #000000;
width: 260px;
float: left;
text-align: right;
text-transform: normal;
}
.sbarbody2, li.sbaritem2 {
padding: 5px;
margin: 0px 0px 0 10px;
font-family: "Abel", arial, sans-serif;
font-size: 14px !important;
text-transform: lowercase;
text-align: left;
}
.sbarbody {
margin:0;
padding: 5px;
padding-bottom: 5px;
}
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: #8A1751;
display: inline;
font-family: "Abel", arial, sans-serif;
font-size: 14px;
font-weight: lighter;
margin-right: 0px;
padding: 0px;
text-align: left; }
li.sbaritem a:hover {
color:#ffffff; }
li.sbartitle {
background-color: rgba(255, 255, 255, 0.5);
list-style: none;
color: #aaaaaa;
text-align: left;
letter-spacing: 2px;
font-family: "Abel", trebuchet ms, arial, sans-serif;
font-size: 14px;
text-transform: uppercase;
margin: 5px -12px 0px 8px;
}
#sidebar_linklist {
list-style-type:none;
padding: 5px;
text-align: left !important;
text-transform: uppercase; }
#sidebar_linklist li.sbaritem a {
background-color: #111111;
border-bottom: 1px solid #1d1d1d;
color: #eeeeee;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 8px;
margin: 0px 0px -2px 0px;
text-align: left;
}
#sidebar_linklist li.sbaritem a:hover {
color:#FFFFFF;
background-color: #000000;
text-align: left;
}
td.sbarcalendar {background-color: transparent !important;
padding: 5px;}
td.sbarcalendarposts {background-color: #ffffff; 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 .sbarcontent {
background-color: #000000;
color: #ffffff;
padding: 0px;
margin: 0px -5px 0px 5px;
text-align: left;
}
#sidebar_summary li.sbaritem {
padding: 5px;
border-bottom: 1px solid #1d1d1d;
}
#sidebar_summary li.sbaritem a { color: #dddddd; }
#sidebar_summary li.sbaritem a: hover { color: #ffffff!important; }
#sidebar_tags .sbarcontent { height: 325px; overflow-x: hidden; overflow-y: auto; margin-right: -12px; padding: 5px; }
#sidebar_tags .sbarcontent { height: 500px; overflow-x: hidden; overflow-y: auto; margin-right: -12px; padding: 5px; }
li.tagBox a {
background-color: #111111;
background: url("http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/greyarrow.gif") no-repeat scroll left center #111111;
border-bottom: 1px solid #1d1d1d;
color: #eeeeee;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 5px 1px 5px 12px;
margin: 0px 0px -2px 0px;
text-align: left;
}
li.tagBox a:hover {
color:#FFFFFF;
background-color: #000000;
text-align: left;
}
#sidebar_tags li.sbaritem a {
background-color: #111111;
background: url("http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/greyarrow.gif") no-repeat scroll left center #111111;
border-bottom: 1px solid #1d1d1d;
color: #eeeeee;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 5px 1px 5px 9px;
margin: 0px 0px -2px 0px;
text-align: left;
}
#sidebar_tags li.sbaritem a:hover { color:#FFFFFF;
background-color: #000000;
text-align: left;
}
.defaultuserpic {
width: 100px;
height: 100px;
margin: 8px auto 10px auto;
padding: 10px;
background-color: #ffffff !important;
border: 0px solid #cccccc;
-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;
}
.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-----------*/
div.entry_text {
padding: 20px 30px 0px 30px;
margin: 0px;
color: #444444;
font-family: "arial";
font-size: 14px;
line-height: 150%;
text-align: left;
}
div.entry_text li { line-height: 12px !important; }
.userpic, .userpicfriends {
float: right;
margin: 5px -60px 25px 15px;
padding: 10px;
width: 100px;
height: 100px;
text-align: center;
color: #FFF!important;
background: #FFF!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: 'TuffyRegular', sans-serif;
font-size: 11px;
text-align: center;
color: #FF5DDD;
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: #bbbbbb; text-shadow: 2px 2px 6px #bbbbbb; }
.datesubject {
padding: 0px;
text-align: left;
border-bottom: 1px solid #dedede;
}
.date {
margin: 10px 80px -15px 0px;
text-align: right;
padding-right: auto;
padding-left: auto;
color: #ccccca;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
text-transform: none;
}
.subject {
padding: 0px 0px 5px 5px;
margin: 15px 10px 0px 10px;
color: #0da4d3;
font-family: "Abel", open sans condensed, georgia, arial;
font-size: 28px;
font-weight: normal;
text-align: left;
text-transform: uppercase;
}
.subject a, .subject a:link, .subject a:visited {color: #0da4d3;}
.subject a:hover {color: #565656;}
span.ljuser a b {
padding: 2px 0 2px 0;
color: #4c228a;
font-weight: normal;
}
span.ljuser a:hover b {
padding-top: 2px;
padding-bottom: 2px;
color: #8A1751;
font-weight: normal;
}
.skiplinks {
text-align: center;
margin-top: 5px;
margin-bottom: 3px;
font-family: "Abel", arial, sans-serif;
padding: 10px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: #999999;
}
.clear { height: px; font-size: 0.01px; }
.separator { height: 0px; }
/*----------- Currents--------------*/
.currents, .currentlocation, .currentmood, .currentgroup, .currentmusic {
padding: 5px;
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, tags, comment links-----*/
div.ljtags {
margin-top: 20px;
text-align: left;
color: #808080;
font-family: verdana;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}
.comments {
color: #eeeeee;
font-size: 12px; line-height: 130%;
letter-spacing:-0.1em;
padding: 10px;
margin-top: 8px;
position: relative;
text-align: center !important;
width:auto;
}
div.comments a, div.comments a:link, div.comments a:visited {
background-color: #111111;
color:#eeeeee;
font-family: open sans condensed, arial !important;
font-size: 14px !important; line-height: 130%;
line-height:1;
padding: 10px;
margin:0;
text-align: center; }
div.comments a:hover {
background-color: #000000;
color:#ffffff;
}
/*----------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/famfamfam/2wbzrdd-famfamfam.png) no-repeat !important;
}
/* STICKY POST */
.subject img[src*="icon_sticky.png"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: URL(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/pin.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/eye-close.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://s77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/tiny_icon_tree_summer.png) no-repeat 0 0 !important;
padding: 16px 0px 0px 16px !important;
}
/*------------Comments Page--------*/
.box {
padding: 5px 5px 5px 10px;
margin: 0px;
text-align: left;
clear: left;
background-color: #FAFAFA;
border: 1px solid #dedede;
}
form div.box {
text-align: left;
background-color: #FAFAFA;
}
center.comment-links { }
div#footer.box { text-align: center; }
.commentbox {
align: left;
padding: 2px;
margin: 2px;
}
.datesubjectcomment {
margin-top: 10px;
text-align: left;
padding: 5px;
font-size: 12px;
background-color: #f6f6f6;
color: #000000;
}
.userpiccomment {
margin: -2px 0px 5px 5px;
padding: 10px;
width: 100px;
height: 100px;
float: right;
background: #FFF!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;
}
.commentreply {
font-family: "trebuchet ms", arial, sans-serif;
position: relative;
margin: 10px;
font-size: 13px;
color: #000000;
}
.commentinfo {
margin-top: 5px;
width: 100%;
}
div.comment-links { text-align: left !important; margin: 5px; padding: 20px 5px; }
div.comment-links a { color: #A9000F; }
div.comment-links a:hover { color: #888888; }
/*-----------Calendar/Year/Archive Page----------*/
ul.year { text-align: center; padding: 5px; background-color: #ffffff; }
ul.year li {display: inline;}
ul.year a { padding: 0px 3px 0px 3px; }
ul.year a:hover {}
table.yeartable { width: 710px; margin-left: auto; margin-right: auto; padding: 10px 100px 10px 100px; background-color: #ffffff; }
table.yeartable td.yeardate { color: #888888; border: 1px solid #cccccc; }
table.yeartable td.yearday { text-align: center; color: #888888; border: 1px solid #cccccc; }
td.yearmonth { color: #000000; border-style: none; }
/*-----------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: 'IM Fell DW Pica SC';
font-style: normal;
font-weight: 400;
src: local('IM FELL DW Pica SC'), local('IM_FELL_DW_Pica_SC'), url(http://themes.googleusercontent.com/static/fonts/imfelldwpicasc/v4/xBKKJV4z2KsrtQnmjGO17ORrWueMUZPacwWUa4j7Ahg.woff) format('woff');
}
@font-face {
font-family: 'Abel';
font-style: normal;
font-weight: 400;
src: local('Abel'), local('Abel-Regular'), url(http://themes.googleusercontent.com/static/fonts/abel/v4/EAqh528fFdbUek8UOky4sA.woff) format('woff');
}
/*-----------Mics-----------*/
.headerimage {
position: relative;
width: 960px;
height: 300px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: 20px solid #ffffff;
background-color: transparent !important;
background-image: url(http://i77.photobucket.com/albums/j49/SireesAnwar/graffitigraphic-movie0297.png);
;){kind=link}
background-repeat: no-repeat;
background-position: center top;
}
Typically I place the Footer Section after the Header Section but since it is at the bottom of the layout you can most it down just about entries. Really it is up to you how you structure your coding. Most of the sections don't have to be in the order I've placed them in. The only things I would keep at the top would be the Body and the General Section. Since these things start off the layout. The BODY Section of all coding is at the top so leave that right where it is. But feel free to place others how you like.
This time I want to look at two types of coding. I'm going to pull both the Footer Section from this layout which is the #2 example above and then also coding for the #1 example above.
1.
1./*-----------SECTION: Footer------------*/
.lj-view-recent #footer, .lj-view-friends #footer {
width: 100%;
margin: 0px;
text-align: left;
color: #777777;
z-index: 100;
}
div#footer a {
padding: 5px;
font-weight: normal;
text-transform: normal;
letter-spacing: 1px;
color: #6DA9C1;
text-align: left;
background-color: transparent !important;
}
.lj-view-recent #footer a:hover, .lj-view-friends #footer a:hover {
padding: 5px;
color: #777777;
background-color: transparent !important;
border-bottom: 0px solid;
}
ul.navfooter{ padding: 0px; margin: 0px; }
ul.navfooter li { display: inline; margin: 0 5px 0 5px; }
.clearfoot { clear: both; }
Let's go over option one first.
#footer: Much like #header styles the footer bar at the bottom of your page.
- width: Here we have the width as being 100% which will make it as wide as the layout because the position in this one isn't coded making it default to static. Static means it is just falling into position with the rest of the layout. If I'd made my layout content 100% or even 90% of my browswer window, that would be how big the footer would be.
- text-align: This will align the text on the footer. In the example for #1 you see it is to the left. Generally I prefered it to be centered but that is up to you.
- color: Here the color also applies to the text but as you can see there is text on the footer that tells you what you are viewing besides the back and forward links. If you want that to disappear make this color the same as the background the text would be laying on.
- z-index: I gave this a value of 100 to prevent the footer from disappearing behind images and things that might hinder it. We always want to be able to see our links.
div#footer a:hover: Any A with :hover after it is always for the hover of those links. Typically my hover coding is pretty simple but here I have some coding which was clearly something I'd been using and didn't really remove. Shame on me. First, sometimes when there is padding in a links coding you'll need it in the hover.
ul.navfooter: This is going to work much like the version of it in the header section. The #footer is essentially the footer navbar and the ul.navfooter is the bit the links lie on. In both instances I don't do much with it but you can always mess with it like in the header and see what you can accomplish. Just don't leave it out.
ul.navfooter li: This applies to the links themselves, which is again much like the header. You can manipulate these individually. And in cases where there are more than one link, link the header you'd kee adding +li to code for the next link (ie ul.navfooter li + li:). In this bit we have the display as inline again to specify how we want to see the coding which is inline which each other. I don't think I've ever changed this.
.clearfoot: The idea behind this is that if my footer section say 80% of the width of the journal it would essentially clear both sides of the journal and float in the middle of the footer section. I have not found this to work well so I would remove it and use the margin auto options in the #footer. This is coding from an older layout so it took me a while to discover this bit of coding was worthless. At times, using clear: both; will work in sections of coding but I've never had too much success with it.
2.
2./*--------------- 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;}
/*--first link---*/
ul.navfooter a {
}
ul.navfooter li {
list-style:none outside none;
margin:0;
padding:0;
display:inline; }
.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;
}
/*--second link---*/
ul.navfooter li + li a {
float: right;
background-color: rgba(0, 0, 0, 0.3) !important;
padding: 20xp 10px 20px 10px;
}
ul.navfooter li + li a:hover { }
ul.navfooter li + li {
list-style:none outside none;
margin:0;
padding:0;
display:inline; }
#footer .viewing { display:none; }
Now let's got over the option I figured out not long after that last bit of coding and really never went back! I'll also tell you I restructed this a bit from the coding in the layout at the top because I realized it was a little mixed up. Since, in this coding, we can customize each link, I want to show that.
#footer: This time we have a position set which is fixed. This means it is going to stay where it is no matter how much you scroll. And with a width or 100% it fills the browser putting the links on either side of the journal. Here the z-index is to prevent the links for disappearing behing usericon or other images. The down side to the way this footer is set up is that techically it is transparent but if you were to say color the background red....
Can you see that it appears to be over a "entry". This means if you are scrolling and the link you want to click on falls in this "footer" space it will act like you can't click on it because it is as if you are click on this red bar (which is transparent in the coding). It can be annoying but I just scroll so I can get to the link.
- bottom: This tells our fixed coding to put itself at the bottom of our screen at 10px away. If I'd put a value of 50% our footer links would be centered vertically on the right and left of our journal. If I want this footer to move to the top of the journal I'd change it to top: 100px; because I have an LJ Navstrip and we don't want the footer to hide behind it.
- right: Again it is similar to the bottom but now I want it at a value of 0. You can ajust the value depending on the look of the footer.
ul.navfooter a: This starts of the first link which is to the left of the journal. I didn't code this section but much like the right side you could.
ul.navfooter li: So this is the part where we tell this link a few things. First, that we want the list-style to be none outside none. What does that mean? Well it is style, position and image. So in this case we want none for style, outside for position (of bullets) but we also want none because we don't want to see the bullets either. Again display is inline though I've noticed these footer links aren't perfectly aligned and I've never gotten them to be. Doesn't matter to be much though.
div#footer a, div#footer a:link: Now we get into making some customizations to this link. I've choose to make it see through or semi-transparent. The padding and margins are really where all the customizing comes in. Since I have these in a "square" for this layout, I need padding to provide this. This is why it is listed as padding: 20px 30px 20px 30px;. Then I recomment taking a look at the link after you save. I added some margins for good measure. Also, the color is going to be what your link color will be.
div#footer a:hover: Here is the first links hover so we can put a color into this. I need to add the padding but I'm not entirely sure it is necessary. That is going to be up to you.
ul.navfooter li + li a: Onto the SECOND link. Notice the li + li a. This is telling our layout that it isn't the first link but the section li which is a bullet point in a list which again all out of menus are. I have a float line here to send it to the right. If it wasn't here it would be over with the link to the left. In this big of coding the background-color needs that !important function otherwise you can't change the coloring though here it is the same.
ul.navfooter li + li a:hover: This is empty which means the hover is going to revert back to the other link and again they will be the same but if you want to have a different color for hover on the second link you can add there here.
ul.navfooter li + li: This is much like the ul.navfooter li but we need to code for the second link. It's list-style and display are the same however.
#footer .viewing: You'll notice the words "viewing most recent entires" is missing. This is what is removing that bit of text with the display: none;. You can add this bit of coding to almost any part of your layout. So say you have customized your journal not to have a sidebar but you don't think you want to remove the coding for the sidebar altogether (what if you want the sidebar back?). Add the display: none; to the #sidebar section and it will disappear.
So now here is what our coding has come to:
/*--------------------------------
S2 Flexible Squares - 90. Oxygen
Layout by http://layout-lounge.livejournal.com
PLEASE DO NOT REMOVE THIS SECTION
----------------------------------*/
body{
background-color: #F6F6F6;
background-image: url(BACKGROUND IMAGE);
background-repeat: repeat;
background-attachment: fixed;
background-position: left top;
background-size: inherit;
color: #888888;
font-family: "lucida grande", trebuchet ms, arial, sans-serif;
font-size: 12px;
margin: 10px 0 20px 0;
}
a, a:link, a:visited { color: #004359; }
a:hover { color: #444444; }
blockquote {
width: 70%;
background: #444444;
margin-left: auto;
margin-right: auto;
padding: 10px;
color: #ffffff;
font-size: 13px;
line-height: 16px;
font-family: "trebuchet ms", arial, sans-serif;
text-align: left;
box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.1);
}
blockquote a { color: #cccccc !important; font-style: italic; }
blockquote a:hover { color: #ffffff !important; }
i img { border: 10px solid #f5f5f5; }
b, strong { color: #004359; }
i, em { color: #4c228a; }
u { color: #8CB53F; }
s, strike { color: #AD5C00; }
/*--------------General------------*/
#content {
width: 1000px;
background-color: #ffffff !important;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 0px;
}
#maincontent {
font-family: "trebuchet ms", arial, trebuchet ms, sans-serif;
font-size: 12px;
color: #333333;
margin-left: 285px;
text-align: center;
}
.subcontent {
background-color: #ffffff;
width: 710px;
margin-top: 0px;
}
/*---------------Header--------------*/
#header {
position: inherit;
width: 1000px;
height: 30px;
text-align: left;
color: #282828;
padding: 0px;
margin-bottom: 5px;
font-family: "Abel", georgia, arial;
font-size: 16px !important; 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: 5px 5px 5px 5px;
margin: 0px 2px 0px 0px;
letter-spacing: 1px;
color: #0da4d3;
text-align: left;
border:0px solid #E0E0E0;
-webkit-transition: box-shadow 0.3s linear;
-moz-transition: box-shadow 0.3s linear;
-ms-transition: box-shadow 0.3s linear;
-o-transition: box-shadow 0.3s linear;
transition: box-shadow 0.3s linear;
}
div#header li.view {
padding: 5px 10px 5px 15px;
margin: 0px 5px;
color: #cccccc;
-webkit-transition: box-shadow 0.3s linear;
-moz-transition: box-shadow 0.3s linear;
-ms-transition: box-shadow 0.3s linear;
-o-transition: box-shadow 0.3s linear;
transition: box-shadow 0.3s linear;
}
div#header a:hover {
color: #000000;
-webkit-box-shadow: #f6f6f6 0 0 10px inset;
-moz-box-shadow: #f6f6f6 0 0 10px inset;
-ms-box-shadow: #f6f6f6 0 0 10px inset;
-o-box-shadow: #f6f6f6 0 0 10px inset;
box-shadow: #f6f6f6 0 0 10px inset;
}
ul.navheader {
list-style: none;
line-height: 24px;
margin-left: 15px;
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;}
/*--first link---*/
ul.navfooter a {
}
ul.navfooter li {
list-style:none outside none;
margin:0;
padding:0;
display:inline; }
.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;
}
/*--second link---*/
ul.navfooter li + li a {
float: right;
background-color: rgba(0, 0, 0, 0.3) !important;
padding: 20xp 10px 20px 10px;
}
ul.navfooter li + li a:hover { }
ul.navfooter li + li {
list-style:none outside none;
margin:0;
padding:0;
display:inline; }
#footer .viewing { display:none; }
/*-------------Sidebar--------------*/
#sidebar {
background-color: #ffffff;
padding: 10px;
font-family: "Abel", arial, georgia;
font-size: 14px;
color: #000000;
width: 260px;
float: left;
text-align: right;
text-transform: none;
}
.sbarbody2, li.sbaritem2 {
padding: 5px;
margin: 0px 0px 0 10px;
font-family: "Abel", arial, sans-serif;
font-size: 14px !important;
text-transform: lowercase;
text-align: left;
}
.sbarbody {
margin:0;
padding: 5px;
padding-bottom: 5px;
}
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: #8A1751;
display: inline;
font-family: "Abel", arial, sans-serif;
font-size: 14px;
font-weight: lighter;
margin-right: 0px;
padding: 0px;
text-align: left; }
li.sbaritem a:hover {
color:#ffffff; }
li.sbartitle {
background-color: rgba(255, 255, 255, 0.5);
list-style: none;
color: #aaaaaa;
text-align: left;
letter-spacing: 2px;
font-family: "Abel", trebuchet ms, arial, sans-serif;
font-size: 14px;
text-transform: uppercase;
margin: 5px -12px 0px 8px;
}
#sidebar_linklist {
list-style-type:none;
padding: 5px;
text-align: left !important;
text-transform: uppercase; }
#sidebar_linklist li.sbaritem a {
background-color: #111111;
border-bottom: 1px solid #1d1d1d;
color: #eeeeee;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 8px;
margin: 0px 0px -2px 0px;
text-align: left;
}
#sidebar_linklist li.sbaritem a:hover {
color:#FFFFFF;
background-color: #000000;
text-align: left;
}
#sidebar_calendar {background-color: rgba(255, 255, 255, 0.5); padding:2px 5px 5px 12px; margin-right: -12px; }
td.sbarcalendar {background-color: transparent !important;
padding: 5px;}
td.sbarcalendarposts {background-color: #ffffff; 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 .sbarcontent {
background-color: #000000;
color: #ffffff;
padding: 0px;
margin: 0px -5px 0px 5px;
text-align: left;
}
#sidebar_summary li.sbaritem {
padding: 5px;
border-bottom: 1px solid #1d1d1d;
}
#sidebar_summary li.sbaritem a { color: #dddddd; }
#sidebar_summary li.sbaritem a: hover { color: #ffffff!important; }
#sidebar_tags .sbarcontent { height: 325px; overflow-x: hidden; overflow-y: auto; margin-right: -12px; padding: 5px; }
#sidebar_tags .sbarcontent { height: 500px; overflow-x: hidden; overflow-y: auto; margin-right: -12px; padding: 5px; }
li.tagBox a {
background-color: #111111;
background: url("http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/greyarrow.gif") no-repeat scroll left center #111111;
border-bottom: 1px solid #1d1d1d;
color: #eeeeee;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 5px 1px 5px 12px;
margin: 0px 0px -2px 0px;
text-align: left;
}
li.tagBox a:hover {
color:#FFFFFF;
background-color: #000000;
text-align: left;
}
#sidebar_tags li.sbaritem a {
background-color: #111111;
background: url("http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/greyarrow.gif") no-repeat scroll left center #111111;
border-bottom: 1px solid #1d1d1d;
color: #eeeeee;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 5px 1px 5px 9px;
margin: 0px 0px -2px 0px;
text-align: left;
}
#sidebar_tags li.sbaritem a:hover { color:#FFFFFF;
background-color: #000000;
text-align: left;
}
.defaultuserpic {
width: 100px;
height: 100px;
margin: 8px auto 10px auto;
padding: 10px;
background-color: #ffffff !important;
border: 0px solid #cccccc;
-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;
}
.defaultuserpic img {
}
/*-----------Fonts-----------*/
@font-face {
font-family: 'Abel';
font-style: normal;
font-weight: 400;
src: local('Abel'), local('Abel-Regular'), url(http://themes.googleusercontent.com/static/fonts/abel/v4/EAqh528fFdbUek8UOky4sA.woff) format('woff');
}
/*---------------MISC--------------*/
.headerimage {
position: relative;
width: 960px;
height: 300px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: 20px solid #ffffff;
background-color: transparent !important;
background-image: url(HEADER IMAGE);
background-repeat: no-repeat;
background-position: center top;
}
Any questions about this tutorial? Please Comment.