layoutlounge | 97. Holly Jolly Christmas

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

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.

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

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

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

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.

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

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.

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.

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.

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:

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.

A couple other changes... the background-repeat is a little different here. Typically you won't want your actual header image to repeat.

There is no background-attachment because it is a rare instance when we don't want the headerimage to scroll.

The background-position only has the one command because it can work for both a large image and a repeating image.

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.
photo 0_a6a02_91ddd97f_orig.gif

Common Issues With Layouts:

Common Issues

Theme and Layout Change Tutorial

Image Tutorial: Adding Background & Header Images in Coding

Sidebar: What I Do and Do NOT Want On It

LJ Advertisements: What is that weird box on my LJ?

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.

Flat | Top-Level Comments Only

From:

brightstarmara.livejournal.com

NICE! I love all the different options you added!

sireesanwar.livejournal.com

Well, I got a little carried away when I was looking for a header myself and that was just the result. I'm glad you like them!

kamesoul.livejournal.com

This is truly beautiful! I really love it!

Thanks!

evilcoc0nut.livejournal.com

It will be here. I hope you enjoy it over Christmas!

yvonnereid.livejournal.com

Using, thank you so much!!!

Cool! Enjoy.

tilmon.livejournal.com

Thank you! Though I've followed this journal for some time, this is the first time I've actually used one of the themes and layouts. Previously, I was confused about what to do, even following the tutorial, but this time, everything made perfect sense to me. I look forward to learning more.

Well, I'm glad this one made sense, but just so you know.... I'm always happy to help. So should you be totally confused in the future but still want to use a layout; just let me know. I do this because our journals should be how we want them and I'm more than willing to help you achieve that goal.

Thank you for the lovely comment. And enjoy!

I'll be sure to ask for further help in the future. I was very excited especially since I could understand how to choose the different elements and customize it for my needs. So, I limited the snow falling to the header, so the page won't be too visually noisy in case I make gif heavy posts. I feel like I could even try my hand to create my own background or header, following your dimensions. By making small variations, I'll be able to really learn. Anyway, thanks again for such clear instructions.

Sounds good. It is all about what you want on your journal. And I'm glad you found it manageable.

That is great. I hope you really get into making images. I used to and got away from it.

lovekame02.livejournal.com

Thank you so much for this theme!! It's so pretty!!
*using it now*

I'm so glad you like it so much. Enjoy!

tsukisagi.livejournal.com

I love LOOOVE this new layout! Thanks a lot for all the work you put into these layouts and for sharing them with us, I really love them all! I can't wait to use it :)

Thank you for the comment. And, of course, you are welcome. I can't help myself. I love making layouts so more to come. LOL

fly-meaway.livejournal.com

Oh wow. As always you make such beautiful layouts. I'm thinking of using this one in the near future and if I am, I will so credit you of course. This is so beautiful.

Of course. Not quite Christmas time yet. Enjoy when you use it. Thank you for the comment.

tempura.livejournal.com

Absolutely lovely! Just the kind of Christmas layout I was looking for. Thank you. :)

Thanks. I'm glad you like it.

1lastdanceluv.livejournal.com

This is gorgeous, I love it! :)

Thanks. I'm glad.

antonarmsberg.livejournal.com

It looks great this theme, but I can't add background images. After I've put in the URL to the pictures, my page doesn't show them. Is it possibly because I have a free basic account? Please let me know, and I wish you all the best for Christmas/New Year!

Okay so something I noticed about your coding is this:

background-image: url(FALLING SNOW IMAGE), url(SNOW BOTTOM OF SCREEN), url(http://antonarmsberg.16mb.com/Livejournal/graffitigraphic-stock978.png);

The words in the () are for direction. Try deleting FALLING SNOW IMAGE and SNOW BOTTOM OF SCREEN and leave the () empty. The code is probably trying to find the images and can't... maybe.

Thanks! Hope your Christmas was great and Happy New Year!

It works, thank you very much and I wish you and your family a happy New Year!!

Happy New Year!

Thank you very much!!

eurasianlaura.livejournal.com

sub-sub layouts for custom css field, anyone?

huh?

oneill.livejournal.com

Can't seem to get the falling snow to work on my layout. :(

Oh boo and I haven't been around. Sorry about that.

Layout Lounge

Layouts, Tutorials, Help, and more

97. Holly Jolly Christmas

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

It looks great, but it doesn't work :(

Re: It looks great, but it doesn't work :(

Thank you very much!

Re: Thank you very much!

Thank you!

expressive winter hanukkah layouts?

Re: expressive winter hanukkah layouts?

(no subject)

(no subject)

About

Links

Tags

Summary

April 2025