Post Friends My journal
sireesanwar in layout_lounge

96. Autumn

Sep 28, 2015 15:20

Layout Style: S2 Flexible Squares
Features: Embedded Fonts, Colorful, Custom Userpic, Header Images
Layout Width: Flexible Width



{ Preview } { Live }
Credit: layout_lounge
Layout by:

Theme and Layout Change Tutorial


All embedded in coding from Google Fonts

/*--------------------------------
S2 Flexible Squares - 96. Autumn
Layout by http://layout_lounge.livejournal.com/
PLEASE DO NOT REMOVE THIS SECTION
----------------------------------*/
body{
background-color: #cccccc;
background-image: url(BACKGROUND IMAGE);
background-repeat: repeat;
background-attachment: fixed;
color: #888888;
font-family: "verdana", arial, sans-serif;
font-size: 12px;
margin: 0px 0 50px 0;
}

a, a:link, a:visited { color: #00885F; }
a:hover { color: #444444; position: relative; top: 1px; left: 1px; text-decoration: none; }

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

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

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

b, strong { color: #004359; }
i, em { color: #1F784D; }
u { color: #553B64; }
s, strike { color: #AD5C00; }
mark { background-color: #B7EBDE; }

ul.ljtaglist { text-align: left; padding-left: 5px; }

/*--------------General------------*/

#content {
width: 75%;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 0px;
}

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

.subcontent {
background-color: #FAFAF1;
margin: 0px 290px 0px 0px;
padding-top: 10px;
border: 1px solid #E4E5D3;
}

/*---------------Header--------------*/
#header {
background: #CC4908;
background: -moz-linear-gradient(top, #DB661D, #CC4908);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DB661D), to(#CC4908));
position: absolute;
left: 0;
width: 100%;
height: 20px;
text-align: center;
color: #ffffff;
padding: 6px 0px 10px 0px;
margin-top: 200px;
font-family: verdana, arial !important;
font-size: 11px !important;
letter-spacing: 1px;
text-transform: lowercase;
font-weight: none;
}

div#header a, div#header a:link, div#header a:visited, div#header a:active {
padding: 12px 10px 11px 10px;
margin: -3px;
font-family: verdana !important;
letter-spacing: 1px;
color: #ffffff;
text-align: center;
}

div#header li.view {
background-color: rgba(255,255,255,0.2);
color: #ffffff;
padding: 12px 10px 11px 10px;
margin: -2px;
}

div#header a:hover {
background-color: rgba(255,255,255,0.2);
color: #ffffff;
top: 0px;
left: 0px;
}

ul.navheader {
list-style: none;
line-height: 24px;
margin: 0;
padding: 0;
}

ul.navheader li {
display: inline;
list-style: none;
}

.title {
display: none;
position: relative;
width: 100%;
margin: -160px auto 0px auto;
padding: 0px;
font-size: 72px;
font-family: "Great Vibes", Brush Script MT, arial, verdana;
text-align: center;
color: #FFFFFF;
-webkit-text-stroke: 1px black;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
z-index: 199;
}

.subtitle {
display: none;
position: relative;
width: 100%;
margin: -25px auto 0px auto;
padding: 0px;
font-size: 20px;
font-family: "abel", arial, verdana;
text-align: center;
color: #6FDDA8;
-webkit-text-stroke: 2px black;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
z-index: 199;
}

/*--------------- footer ---------------*/

.lj-view-recent #footer, .lj-view-friends #footer {
bottom: 5%;
padding: 5px 0;
position: fixed;
right:0;
text-align:left;
text-transform:lowercase;
width:100%;
z-index:99;
}

div#footer.box { }

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

ul.navfooter a { }

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

ul.navfooter li + li a:hover { }

.lj-view-recent #footer a, .lj-view-friends #footer a, .lj-view-recent #footer a:link, .lj-view-friends #footer a:link {
background-color: rgba(196, 91, 26, 0.4);
color: #ffffff;
font-family: open sans condensed, georgia,arial,sans-serif;
font-size: 13px;
bottom: 10px;
padding: 20px 30px 20px 30px;
margin: 0px 10px 0px 10px;
}

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

ul.navfooter li {
list-style:none outside none;
margin:0;
padding:0;
display:inline; }

ul.navfooter li + li {
list-style:none outside none;
margin:0;
padding:0;
display:inline; }

#footer .viewing { display:none; }

/*-------------Sidebar--------------*/

#sidebar {
background: #DB661D;
background: -moz-linear-gradient(top, #CC4908, #DB661D);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CC4908), to(#DB661D));
width: 270px;
margin: 236px 0px 0px -1px;
padding: 10px;
font-family: "Fredericka the Great", arial, georgia;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
float: right;
text-align: left;
text-transform: normal;
right: 0px;
}

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

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

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

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

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

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

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

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

#sidebar_linklist {
list-style-type: none;
padding: 5px 8px 5px 3px;
text-align: left !important;
text-transform: lowercase; }

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

#sidebar_linklist li.sbaritem a:hover {
color: #ffffff;
background-color: #5B4035;
text-align: center;
letter-spacing: 2px;
}

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

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

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

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

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

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

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

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

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

#sidebar_tags a:hover, li.tagBox a:hover { color: #ffffff;
background-color: #5B4035; text-align: center; letter-spacing: 2px; padding: 2px 5px;
}

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

.defaultuserpic img { }

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

.facebooklink {
display: inline-block;
width: 48px;
height: 48px;
background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/Layouts/facebookhovercircles.png) top;
text-indent: -99999px;
margin: 1px;
}
.facebooklink:hover {
background-position: 48px 48px;
}

.twitterlink{
display: inline-block;
width: 48px;
height: 48px;
background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/Layouts/twitterhovercircles.png) top;
text-indent: -99999px;
margin: 1px;
}
.twitterlink:hover {
background-position: 48px 48px;
}

.youtubelink{
display: inline-block;
width: 48px;
height: 48px;
background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/Layouts/youtubehovercircles.png) top;
text-indent: -99999px;
margin: 1px;
}
.youtubelink:hover {
background-position: 48px 48px;
}

.rsslink{
display: inline-block;
width: 48px;
height: 48px;
background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/Layouts/rsshovercircles.png) top;
text-indent: -99999px;
margin: 1px;
}
.rsslink:hover {
background-position: 48px 48px;
}

/*-----------Entries-----------*/
.entry {
padding: 20px 30px 20px 30px;
margin: 0px;
color: #444444;
font-family: "arial";
font-size: 14px;
line-height: 150%;
text-align: left;
}

div.entry_text ul, div.entry_text ol { margin: 0px 2px; line-height: 100%; }

div.entry_text li { line-height: 130% !important; list-style: normal; list-style-position: outside; margin-bottom: -2px; }

.userpic, .userpicfriends {
position: relative;
background-color: #CC4908 !important;
border: 0px solid #eeeeee;
float: left;
padding: 10px;
margin: 5px 15px 25px -80px;
width: 100px;
height: 100px;
text-align: center;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px;
z-index: 15;
-webkit-border-radius: 5px 60px 5px 60px;
-moz-border-radius: 5px 60px 5px 60px;
-ms-border-radius: 5px 60px 5px 60px;
-o-border-radius: 5px 60px 5px 60px;
border-radius: 5px 60px 5px 60px;
-webkit-box-shadow: #ccc 0 0 5px;
-moz-box-shadow: #ccc 0 0 5px;
-ms-box-shadow: #ccc 0 0 5px;
-o-box-shadow: #ccc 0 0 5px;
box-shadow: #ccc 0 0 5px;
}

.userpic a { color: #DC1A4E !important; }
.userpic a:hover { color: #bbbbbb !important; }

.userpic img, .userpicfriends img {
width: 100px;
height: 100px;
-webkit-border-radius: 5px 50px 5px 50px;
-moz-border-radius: 5px 50px 5px 50px;
-ms-border-radius: 5px 50px 5px 50px;
-o-border-radius: 5px 50px 5px 50px !important;
border-radius: 5px 50px 5px 50px;
}

.userpicfriends a font {color: #DC1A4E; }

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

.date {
margin: 0px 10px -15px 5px;
text-align: center;
padding-right: auto;
padding-left: auto;
color: #E1E0CE;
font-family: "Paprika", arial, sans-serif;
font-size: 12px;
text-transform: normal;
-moz-border-radius: 6px 6x 0 0;
-webkit-border-radius: 6px 6x 0 0;
border-radius: 6px 6x 0 0;
-khtml-border-radius: 6px 6x 0 0; }

.subject {
padding: 0px 0px 5px 5px;
margin: 20px 10px 0px 5px;
color: #CC4908;
font-family: "Neucha", open sans condensed, georgia, arial;
font-size: 28px;
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: #CC4908;}

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

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

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

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

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

/*-----Recent Posts ---*/

.entry--threeposts {
position: inherit;
margin-right: 290px;
background-color: #FAFAF1;
margin-top: -10px;
margin-bottom: -10px;
margin-left: 0px !important;
padding-bottom: 20px;
border: 1px solid #E4E5D3;
}

.threeposts__inner {
margin: 0px auto;
}

.threeposts__header {
margin: 15px 0px 15px 0px;
font-family: ProximaNovaSemibold, Tahoma, Arial, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
letter-spacing: normal;
text-transform: uppercase;
}

.threeposts--item-size-xxs .threeposts__item { height: 160px; }

.threeposts__item {
display: inline-block;
position: relative;
width: 30.66%;
margin: 0px 4% 1.5em 0px;
box-sizing: border-box;
vertical-align: top;
}

.threeposts__title {
font-size: 14px !important;
}

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

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

.currentlocation, .currentmusic { display:none; }

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

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

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

.comments { color: #ffffff; margin: 10px 0px 0px 0px; text-align:center; }

div.comments a, div.comments a:link, div.comments a:visited { padding: 5px 10px 5px 10px; background: #FFFFFF; color: #475559; font: bold 12pt century gothic; border: 1px solid #C0C0C0;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-khtml-border-radius: 2px;
}

div.comments a:hover {
color: #ffffff; background: #DB5A29; border: 1px solid #dddddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-khtml-border-radius: 3px;
}

/*------------Comments Page--------*/
.box {
position: inherit;
padding: 5px 5px 5px 10px;
margin-right: 290px;
text-align: left;
clear: left;
background-color: #FAFAF1;
border: 1px solid #E4E5D3;
}

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

center.comment-links { }

div#footer.box { text-align: center; background-color: #FAFAF1 !important; display: none; }

.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: #FAFAF1;
color: #000000;
}

.replytosubject {
font-weight: none;
}

.commentreply {
font-family: "trebuchet ms", arial, sans-serif;
position: relative;
margin: 10px;
font-size: 14px;
font-family: "arial;
color: #000000;
}

.commentbox {
align: left;
padding: 2px;
margin: 2px;
}

.userpiccomment {
margin: -2px 0px 5px 0px;
padding: 10px;
width: 100px;
height: 100px;
float: right;
background: #CC4908 !important;
-webkit-border-radius: 60px 5px 60px 5px;
-moz-border-radius: 60px 5px 60px 5px;
-ms-border-radius: 60px 5px 60px 5px;
-o-border-radius: 60px 5px 60px 5px;
border-radius: 60px 5px 60px 5px;
-webkit-box-shadow: #CCC 0 0 5px;
-moz-box-shadow: #CCC 0 0 5px;
-ms-box-shadow: #CCC 0 0 5px;
-o-box-shadow: #CCC 0 0 5px;
box-shadow: #CCC 0 0 5px;
}

.datesubjectcomment {
margin-top: 10px;
text-align: left;
padding: 5px;
font-size: 13px;
background-color: #E3D8C6;
color: #000000;
}

.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 { width: 100%; text-align: center; padding: 5px; background-color: #FAFAF1; border: 1px solid #EBEAD8; margin-right: 280px; }

ul.year li {display: inline;}

table.yeartable { position: inherit !important; margin-right: 290px; width: 60%; padding: 10px 100px 10px 100px; background-color: #FAFAF1; border: 1px solid #EBEAD8; }

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

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

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

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

ul.ljtaglist {
color: #888888;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 13px;
padding: 20px 8px 20px 100px;
background-color: #FAFAF1;
border: 1px solid #EBEAD8;
}

ul.ljtaglist li {list-style: normal;}

/*----------SECTION: Tiny Icons----------*/
.currentlocation {
background: url(http://i54.tinypic.com/msm1c0.jpg) no-repeat left center;
padding: 2px 0px 5px 18px;
}

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

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

.currentgroups {
background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/foaf.png) no-repeat left center;
padding: 2px 0px 5px 18px;
}

/* PROTECTED ENTRY */
.subject img[src*="icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: URL(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/lock-unlock.png) no-repeat !important;
}

/* STICKY POST */
.subject img[src*="icon_sticky.png"] {
width: 0;
height: 0;
padding: 16px 5px 0 16px;
background: URL(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/purple_pin_sh.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/squirrel-icon.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/squirrel-icon.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/acorn-icon.png) no-repeat 0 0 !important;
padding: 16px 0px 0px 16px !important;
}

/*---------Fonts----------*/
@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/v5/uXyrEUnoWApxIOICunRq7-HbywbERJ_YcOpO6Co4fHY.woff) format('woff');
}

@font-face {
font-family: 'Paprika';
font-style: normal;
font-weight: 400;
src: local('Paprika'), local('Paprika-Regular'), url(http://themes.googleusercontent.com/static/fonts/paprika/v1/5wID_eLdfLKUwzhIdMBadA.woff) format('woff');
}

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

@font-face {
font-family: 'Fjord One';
font-style: normal;
font-weight: 400;
src: local('Fjord One'), local('Fjord-One'), url(https://fonts.gstatic.com/s/fjordone/v5/k1xuy2AQ8wbv_amiU4s581tXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
}

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

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

@font-face {
font-family: 'Abel';
font-style: normal;
font-weight: 400;
src: local('Abel-Regular'), url(http://themes.googleusercontent.com/static/fonts/Abel/v4/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

/*-----------Mics-----------*/
.clear { height: 0px; font-size: 0.01px; }

.headerimage {
position: absolute;
width: 100%;
height: 200px;
margin-top: 0px;
padding: 0px;
background-color: #transparent !important;
background-image: url(HEADER IMAGE);
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
}

.separator { height: 20px; }

Additional Layout Directions:
The title and subtitle are available for use in this layout. If you would prefer to use it go to the .title & .subtitlte coding sections and remove the line display: none; from the coding. This will show the title and subtitle on your layout.
The height of this header image is set to 200px. You can change this but there are few other parts you must change.
  1. .maincontent you'll notice there is a padding-top of 236px. Out image is 200px but that extra 36px is because of the header/navbar in this layout. So if you want a 420px image you'll have to add 36px to 420px (456px). This will be your new padding.
  2. .header you'll notice the marin-top is set to 200px which is currently the same as our header. So if you new header is 420px then this margin-top must be 420px.
  3. .sidebar you'll notice there is a margin-top (or margin: 236px 0px 0px -1px;) of 236px. Our image here is 200px and again that header/navbar so we end up with 236px. So if you want a 420px header image you'll be again adding 36px to the margin (456px).
This will apply no matter what height your image is. 300px=336px, 205=341px.

Images


1600x300

Helpful Tutorials:
  1. Common Issues
  2. Theme and Layout Change Tutorial
  3. Image Tutorial: Adding Background & Header Images in Coding
  4. Sidebar: What I Do and Do NOT Want On It
  5. LJ Advertisements: What is that weird box on my LJ?
  6. Tutorial Index
More Images:
More Headers: Layout Lounge: Headers
More Background Images: Layout Lounge Site
More Tiny Icons: Layout Lounge Site

RULES:
No Hotlinking Images #4 under general
Header can be changed
Background image can be changed or removed.
Credit Necessary.

Having Trouble? Try:
Theme and Layout Change Tutorial or Helpful Hints
If that didn't work. Comment Below with example if possible.

image: background, feature: header-navbar, image: header, account: paid-permanent, topic: season, layout-color: orange, .flexible-squares, topic: color, image, feature: background, !all-layouts, feature: sidebar

Leave a comment

Read comments 18
Previous post Next post
Up
Homepage Read journal... Full version Help Русская версия
© 1999-2024 LiveJournal, Inc.