Post Friends My journal
sireesanwar in layout_lounge

97. Holly Jolly Christmas

Nov 06, 2015 16:12

Layout Style: S2 Flexible Squares
Features: Embedded Fonts, Colorful, Custom Userpic, Header Images, Christmas Themed Tiny Icons
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 - 97. Holly Jolly Christmas
Layout by http://layout_lounge.livejournal.com/
PLEASE DO NOT REMOVE THIS SECTION
----------------------------------*/
body{
background-color: #cccccc;
background-image: url(FALLING SNOW IMAGE), url(SNOW BOTTOM OF SCREEN), url(BACKGROUND IMAGE);
background-repeat: repeat, repeat-x, repeat;
background-attachment: fixed;
background-position: left top, left bottom, left top;
background-size: auto, 500px 82px, auto;
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: #237043; }
i, em { color: #C13B30; }
u { color: #C13B30; }
s, strike { color: #AD5C00; }
mark { background-color: #9BB44E; }

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

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

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

#maincontent {
width: 100%;
padding-top: 336px;
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: #C40808;
background: -moz-linear-gradient(top, #F23D3D, #C40808);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F23D3D), to(#C40808));
position: absolute;
left: 0;
width: 100%;
height: 20px;
text-align: center;
color: #ffffff;
padding: 6px 0px 10px 0px;
margin-top: 300px;
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: -200px 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(200, 13, 13, 0.9);
padding: 20px 25px 20px 25px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;
border-radius: 40px;
}

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(200, 13, 13, 0.9);
color: #ffffff;
font-family: open sans condensed, georgia,arial,sans-serif;
font-size: 13px;
bottom: 10px;
padding: 20px 25px 20px 25px;
margin: 0px 10px 0px 10px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;
border-radius: 40px;
}

.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: #F23D3D;
background: -moz-linear-gradient(top, #C40808, #F23D3D);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C40808), to(#F23D3D));
width: 270px;
margin: 336px 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: #56A97A;
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: #56A97A; 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: #237043 !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;
color: #CD1313 !important;
z-index: 15;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
-webkit-box-shadow: #ccc 0 0 5px;
-moz-box-shadow: #ccc 0 0 5px;
-ms-box-shadow: #ccc 0 0 5px;
-o-box-shadow: #ccc 0 0 5px;
box-shadow: #ccc 0 0 5px;
}

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

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

.userpicfriends a font {color: #CD1313 !important; }

.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: #56A97A;
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: #C40808;
font-family: "Great Vibes", open sans condensed, georgia, arial;
font-size: 30px;
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: #C40808;}

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

.ljcut-link {
display: inline-block;
margin: 3px 0px;
padding: 3px 5px;
background: #EEE none repeat scroll 0% 0%;
border: 1px solid #DDD;
border-radius: 5px;
box-shadow: 2px 2px 6px #FFF inset;
text-shadow: 0px 1px 1px #FFF;
color: #eeeeee;
}

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

.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: #56A97A; 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: #237043 !important;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
-webkit-box-shadow: #CCC 0 0 5px;
-moz-box-shadow: #CCC 0 0 5px;
-ms-box-shadow: #CCC 0 0 5px;
-o-box-shadow: #CCC 0 0 5px;
box-shadow: #CCC 0 0 5px;
}

.datesubjectcomment {
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://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/snowman.png) no-repeat left center;
padding: 2px 0px 5px 18px;
}

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

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

.currentgroups {
background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/gingerbread-house.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/star.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/holly.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/gingerbread-house.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/holly_garland.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/light-oval-purple.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/light-oval-purple.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/christmas-tree.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: 300px;
margin-top: 0px;
padding: 0px;
background-color: #transparent !important;
background-image: url(FALLING SNOW IMAGE), url(HEADER IMAGE);
background-repeat: repeat, no-repeat;
background-position: center bottom;
background-size: auto, 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 300px. You can change this but there are few other parts you must change.
  1. .maincontent you'll notice there is a padding-top of 336px. Our image is 300px but that extra 36px is because of the header/navbar in this layout. So if you want a 200px image you'll have to add 36px to 200px (236px). This will be your new padding. 150px image would then be 186px in padding.
  2. .header you'll notice the marin-top is set to 300px which is currently the same as our header. So if you new header is 300px then this margin-top must be 300px.
  3. .sidebar you'll notice there is a margin-top (or margin: 336px 0px 0px -1px;) of 336px. Our image here is 300px and again that header/navbar so we end up with 336px. So if you want a 200px header image you'll be again adding 36px to the margin (236px).
This will apply no matter what height your image is. 300px=336px, 205=341px, etc

Background Image Directions:
  1. In the body section (at the very top of the coding) you will see three locations for an image. They have and explaination for each of them but the idea is you lay them on top of each other. So the one on the bottom is the design image. Say the square with the reindeers. Then the middle one is going on top of this because it is partially transparent and we want to see the snow on the bottom (like it is building up). And then the first image (one on top of the stack) is the fully transparent snow falling.
  2. This means background-repeat, background-attachment, background-position, and background-size will also need three "commands" unless the command is the same for all images (ie background-attachment: fixed;)
  3. So here is the example to explain. If you look at background-repeat you will see the commands repeat, repeat-x, repeat. What does this mean? It means that I want the falling snow (top image) to repeat all over the background, the snow at the bottom to only repeat on the x axis (remember Algebra and graphs x=horizontal y=vertical) and I want the background image of the reindeers to repeat all over the background as well.
  4. But if you look at background-attachment you will see it only has one command which is fixed. I don't want any of these images to scroll with the journal. If I did want to reindeer image to scroll I would change fixed to fixed, fixed, scroll.
  5. The line background-position the commands are a little different. This line wants you to tell it where to put the picture. Generally when I am using a repeating image I don't use this line at all or it says left top. Because of the snow at the bottom of the screen this time we have left top, left bottom, left top. However, because the falling snow and the reindeer image are repeating you can just have left bottom and it would work. It is with no-repeat images or large and single images that this line becomes more important.
  6. Now background-size. You can fully control the size of each image. As you can see I have it at  auto, 500px 82px, auto. Repeating images should be set to auto unless the image looks too large. So say the reindeer image is 400 x 400 pixels. But those little reindeers look HUGE! You can put in the third command here 200px 200px which resized the image to make it look smaller. Essentially that is what I did with the snow at the bottom. When you have large images there are other options for the size which you can find in my Image Tutorial.
Header Image Directions:
  1. This coding for the headerimage is typically at the very bottom of my coding. You'll notice I have a spot of the falling snow again. This is just to make it look like it is snowing more on your layout but not over your entries.
  2. A couple other changes... the background-repeat is a little different here. Typically you won't want your actual header image to repeat.
  3. There is no background-attachment because it is a rare instance when we don't want the headerimage to scroll.
  4. The background-position only has the one command because it can work for both a large image and a repeating image.
  5. The background-size is very different. First we have auto for the falling snow. This is because it is a repeating. But the large headerimage is set to cover. Cover means that the image will fill the space for it completely all the time and works for most large images. If that causes a problem for you, change cover to 100% 100% (meaning 100% width and height).
Images
Header Images are all 1600x300 and will save in those dimensions. I have put background patterns next to them which I think work but feel free to mix and match or use your own images for the layout.























Snow is for the bottom of the layout and is actually transparent rather than black. I added a background color so you can see what the snow looks like. Will save transparent.


Pick your snow! All of these are transparent and I've added a back background here so you can see how the snow looks. All will save as transparent.






Common Issues With Layouts:
  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.

layout-color: red, image: background, image: header, feature: userpic, layout-color: aqua, account: paid-permanent, topic: holidays, layout-color: blue, .flexible-squares, image, feature: background, !all-layouts, layout-color: green

Leave a comment

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