layoutlounge | 102. Comic Book

Layout Style: S2 Flexible Squares
Features: Header Images, Large Header Image
Layout Width: Flexible Width

credit:

layout_lounge

All special fonts have been embedded from Google Fonts

Coding

/*--------------------------------
S2 Flexible Squares - It's A Comic Book
Layout by sireesanwar of http://layout_lounge.livejournal.com/
PLEASE DO NOT REMOVE THIS SECTION 
----------------------------------*/
body{
 background-color: #ffffff;
 background-image: url();
 background-repeat: repeat;
 background-attachment: fixed;
 background-position: top left;
 color: #000000;
 font-family: "Open Sans", arial, sans-serif;
 font-size: 16px;
 margin: 0px;
 }

a, a:link, a:visited { color: #004359; }
a:hover { color: #444444; }

blockquote {
 width: 80%;
 margin-left: 10px;
 padding-left: 10px;
 margin-left: auto;
 margin-right: auto;
 color: #444444;
 font-size: 14px; 
font-style: italic;
 text-align: left;
 border-left: 10px solid #EEEEEE; 
 }
img.special, i img { border: 1px solid #cccccc; padding: 10px; }

b, strong { color: #253C51; }
i, em { color: #D6002E; }
u { color: #2F6E8A; }
s, strike { color: #F6A000; }
q { font-style: italic; color: #D6002E; }
mark { background-color: #B7EBDE; }

.b-repost-item { display:none }

p, td{  }
 
code, kbd, pre, tt {font-family: "Open Sans"; }

h10 { 
text-align: center;
font-family: "Open Sans";
font-size: 45px;
line-height: 120%;
background: -webkit-linear-gradient(330deg, green, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
 }

/*--------------General------------*/
#content-outer { 
 position: absolute;
 width: 100%;
 height: 500px;
 background-color: transparent !important;
 background-image: url();
 background-repeat: no-repeat;
 background-position: center top;
 background-size: cover;
 z-index: -199;
 }

.headerimage {
 position: absolute;
 width: 100%;
 height: 500px;
 padding: 0px;
 background-color: transparent !important;
 background-image: url();
 background-repeat: no-repeat;
 background-position: center center;
 background-size: cover;
 box-shadow: 0 0 0 6px black inset;
 z-index: -10;
} /*-logo-*/

#content {   
 background-color: #ffffff;
 margin: 540px auto 0px auto;
 font-family: "Open Sans", arial, sans-serif;
 font-size: 14px;
 text-align: left;
 padding: 25px 100px;
 z-index: 50;
 }

#maincontent {
 margin-top: 0px;
 margin-left: 300px;
}

.subcontent {
 background-color: #ffffff;
 padding: 50px 30px 0px 20px;
 font-size: 15px;
 color: #333333;
 border-width: 6px 0px 6px 6px;
 border-color: #000000;
 border-style: solid;
 }

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

/*---------------Header--------------*/
#header {  
 position: absolute;
 margin: 0px auto 0 auto;
 left: 0; right: 0; top: 515px;
 width: 100%;
 height: 35px;
 padding-top: 8px;
 text-align: center;
 font-family: "Bangers";
 letter-spacing: 1px;
 font-size: 20px !important;
}

div#header a, div#header a:link, div#header a:visited, div#header a:active {
 padding: 10px 5px 5px 5px;
 letter-spacing: 1px;
 line-height: 20px;
 color: #000000;
 text-align: left;
}

div#header li.view { 
 background-color: #000000;
 color: #ffffff;
 padding: 10px 5px 5px 5px;
 margin-left: 15px;
 border: 3px solid #000000;
  }

div#header a:hover {
 background-color: #000000;
 color: #ffffff;
 border: 3px solid #000000;
}

ul.navheader {
 list-style: none;
 line-height: 24px;
 margin: 0;
 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: 200px;
z-index:99;
}

.lj-view-recent #footer a, .lj-view-friends #footer a, .lj-view-recent #footer a:link, .lj-view-friends #footer a:link {
background-color: #ffffff);
color: transparent !important;
font-family: "Open Sans", georgia,arial,sans-serif;
font-size: 20px;
margin-right: 20px;
padding: 20px 30px 20px 30px;
 border-width: 3px;
 border-color: #000000;
 border-style: solid;
}

.lj-view-recent #footer a:hover, .lj-view-friends #footer a:hover {
color: transparent !important;
}

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

ul.navfooter li, ul.navfooter li+li {
list-style:none inside none;
padding: 0px;
display: inline-block; }

ul.navfooter li a {
float: right;
margin: 0px 0px 0px 10px; 
padding: 0xp 10px 20px 10px;
background: transparent url(https://layout-lounge.weebly.com/uploads/2/5/9/2/2592379/leftwhite_orig.png) no-repeat 20px 20px !important;
width: 30 !important;
 height: 30 !important;
 }

ul.navfooter li+li a {
float: right;
margin: 0px 0px 0px 10px; 
padding: 0xp 10px 20px 10px;
background: transparent url(https://layout-lounge.weebly.com/uploads/2/5/9/2/2592379/rightwhite_orig.png) no-repeat 20px 20px !important;
width: 30 !important;
 height: 30 !important;
 }

ul.navfooter li a:hover {  }

#footer .viewing { display:none; }

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

#sidebar {
 width: 280px;
 float: left;
 margin-top: -3px;
 font-family: "Open Sans", arial, georgia;
 font-size: 12px;
 color: #888888;
text-align: left !important;
text-transform: uppercase;
 }

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: #000000;
display: inline;
 }

li.sbaritem a:hover {
background-color: #000000;
color:#ffffff;  }

li.sbartitle {
 margin-bottom: 5px;
 font-family: "Bangers";
 font-size: 18px;
 letter-spacing: 1px;
 text-align: center;
 list-style: none;
 color: #000000; 
 border-bottom: 3px solid #000000;
 }

/*-For the Free Text Title-*/
h15 {
 display: block;
 margin-bottom: 5px;
 font-family: "Bangers";
 font-size: 18px;
 letter-spacing: 1px;
 text-align: center;
 list-style: none;
 color: #000000; 
 border-bottom: 3px solid #000000;
 }

.sbarbody {
list-style-type:none;
padding: 5px !important;
margin: 5px 5px 25px 5px;
 border-width: 6px 6px 6px 0px;
 border-color: #000000;
 border-style: solid;
}

li.sbaritem2 {
list-style-type:none;
 background-color: rgba(255,255,255,0.7);
padding: 5px;
margin: 5px 5px 10px 5px;
font-size: 10px;
text-align: justify;
}

li.sbaritem3 {
 background-color: rgba(255,255,255,0.7);
list-style-type:none;
 background-color: transparent;
padding: 5px;
border: 0px solid #cccccc;
margin: 5px 5px 10px 5px;
}

li.sbaritem4 {
 background-color: rgba(255,255,255,0.7);
list-style-type:none;
background-color: transparent;
text-align: center;
padding: 5px;
border: 0px solid #cccccc;
margin: 5px 5px 10px 5px;
}

/*-Sidebar Links-*/
#sidebar_linklist  {
 background-color: rgba(255,255,255,0.7);
list-style-type:none;
padding: 10px; 
margin: 5px 5px 25px 5px;
 }

#sidebar_linklist li.sbaritem a {
 display:block;
 padding: 2px ;
}

#sidebar_linklist li.sbaritem a:hover {
}

/*-Sidebar Tags-*/
#sidebar_tags.sbarbody { 
 background-color: rgba(255,255,255,0.7);
height: 250px;  overflow-x: hidden; overflow-y: auto;
padding: 10px; 
margin: 5px 5px 25px 5px;
 }

#sidebar_tags .sbarcontent {   }

li.tagBox a { display:block; padding: 2px;  }

li.tagBox a:hover {   }

#sidebar_tags li.sbaritem a { display:block;  padding: 2px; }

#sidebar_tags li.sbaritem a:hover {  }

/*-Free Text-Blurb-*/
.sbarbody2 {  
 background-color: rgba(255,255,255,0.7);
padding: 10px; 
margin: 5px 5px 25px 5px;
 border-width: 6px 6px 6px 0px;
 border-color: #000000;
 border-style: solid;
 }

/*-Sidebar Summary-*/
#sidebar_summary.sbarbody { 
 background-color: rgba(255,255,255,0.7);
padding: 10px; margin: 5px 5px 25px 5px;  font-size: 11px; height: 200px;  overflow-x: hidden; overflow-y: auto; 
}

#sidebar_summary li.sbaritem a {  }

#sidebar_summary li.sbaritem a: hover { }

span.count { display: none; }

/*-Sidebar Calendar-*/
#sidebar_calendar.sbarbody {   background-color: rgba(255,255,255,0.7); padding: 10px; margin: 5px 5px 25px 5px; }

table.calendar { width: 100%;  padding: 10px;}

td.sbarcalendar { padding: 3px; text-align: center; }

td.sbarcalendarposts {  text-align: center; vertical-align: middle; border: 1px solid #CCCCCC; }

/*-Sidebar Userpic-*/

.defaultuserpic {
 background-color: rgba(255,255,255,0.7);
width: 100px;
height: 100px;
padding: 10px;
margin: 5px auto 25px auto;
 border: 3px solid #000000;
}

.defaultuserpic img { width: 100px; height: 100px; }

*-----------Entries-----------*/
.entry { }

.entry_text {
 color: #444444;
 font-family: "Open Sans", arial;
 font-size: 16px;
 line-height: 130%;
 text-align: left;
 font-weight: 550;
 margin-bottom: 20px;
 z-index: 50;
 }

p, td{ font-family: "Open Sans"; font-size; 14px; margin:0; padding:0; }

.entry img { max-width: 80%; height: auto; margin: 5px;  }
 
hr { color: transparent; height: 1px; border-bottom: 1px solid #cccccc; }

.entry ul, ol {
 margin-left: 5px;
 line-height: 100%;
 list-style: normal;
 list-style-position: inside;
 }

.entry li {
 padding: 0px;
 line-height: 100%;
 list-style: normal;
 list-style-position: inside;
 }

.userpic, .userpicfriends {
 float: right;
 margin: -50px -20px 20px 10px;
 padding: 15px;
 width: 100px;
 height: 100px;
 color: #FFF!important; 
 background: #FFF!important;
 }

.userpic img, .userpicfriends img {
 width: 100px;
 height: 100px;
 }

.userpic font, .userpicfriends font {
color: #000000 !important;
text-align: center;
background-color: transparent!important;
}

div.userpic a, div.userpic a:link, div.userpic a:visited, div.userpicfriends a, div.userpicfriends a:link, div.userpicfriends a:visited {
 font-family: "Bangers";
 font-size: 16px;
 font-weight: 200;
 letter-spacing: 1px;
text-align: center;
margin: 10px 0px;
text-decoration: none !important;
}

.userpic font:hover, .userpicfriends font:hover {
color: #bbbbbb !important;
background-color: transparent !important;
text-decoration: none !important;
}

div.userpic a:hover, div.userpicfriends a:hover {
color: #bbbbbb !important;
background-color: transparent !important;
text-decoration: none !important;
}

.date  {
 margin: 0px 0px 0px 20px;
 text-align: left; 
 color: #bbbbbb;
 font-family: "Open Sans", arial, sans-serif;
 font-size: 12px;
 text-transform: uppercase;
}

.subject {
 padding: 0px;
 margin: 0px 10px 20px 20px;
 color: #000000;
font-family: "Bangers", open sans condensed, georgia, arial;
 font-size: 28px;
 letter-spacing: 1px;
 text-align: left;
 }
 
.subject a, .subject a:link, .subject a:visited {color: #000000;}

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

.datesubject {
 margin: -25px 0px 0px -20px;
 padding: 0px;
 text-align: left;
 }

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

span.ljuser a:hover b {
 padding-top: 2px;
 padding-bottom: 2px;
 color: #555555;
 font-weight: normal;
 }

.skiplinks {
 text-align: center;
 margin-top: -20px;
 margin-bottom: 10px;
 font-family: "Open Sans", Abel, arial, sans-serif;
 font-size: 10px;
 padding: 10px 10px 5px 10px;
 text-transform: uppercase;
 letter-spacing: 1px;
 color: #999999;
 }

.lj-like {
 width: 100%; 
 float: left; 
 text-align: center; 
   line-height: 1 !important;
 margin-bottom: 15px;
}

.lj-like:after {
    border-collapse: collapse;
    clear: left;
    content: "";
    display: table;
}

.ljcut-link {
    display: inline-block;
    margin: 10px;
}

.ljcut-link a { 
 color: #ffffff;
    padding: 3px 7px 3px 7px;
    background: #253683;
    border: 2px solid #253683;
    border-radius: 3px;
   font-family: 'Open Sans';
 font-size: 12px;
  font-weight: 600;
letter-spacing: 1px;
 text-transform: uppercase;
 }
.ljcut-link a:hover { color: #253683; background-color: transparent;     padding: 3px 7px 3px 7px;
 border-radius: 3px; border: 2px solid #253683;}

.ljcut-brace { display: none; }

.lj-spoiler-head {
    margin: 10px;
    padding: 8px;
    background: transparent!important;
    border-bottom: 1px solid #AF799B;
    border-top: 1px solid #AF799B;
    border-radius: 0px;
   font-family: 'Open Sans';
  font-weight: 400!important;
 color: #AF799B;
 text-transform: uppercase;
}

.lj-spoiler-head a { color: #AF799B; }
.lj-spoiler-head a:hover { color: #192CA2; }

.lj-spoiler-leftbracket, .lj-spoiler-rightbracket { display: none; }

/*-----Recent Posts ---*/
.entry--threeposts {
    margin-left: 0px !important;
 background-color: #ffffff;
 padding: 10px;
}

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

.currentlocation, { display:none; }

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

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

.ljtags, .currenttags {
margin: 20px 5px 20px 5px;
text-align: left;
color: #808080;
font-family: Open Sans; 
font-size: 13px; 
}

.comments {
color: #2E1B00;
 font-size: 12px; line-height: 130%; 
letter-spacing:-0.1em;
padding: 10px 5px 10px 5px;
margin-bottom: 20px;
position: relative;
text-align: center;
width:auto;
}

div.comments a, div.comments a:link, div.comments a:visited {
color:#2E1B00;
font-family: Open Sans, arial !important;
 font-size: 14px !important; line-height: 130%; 
line-height:1;
padding: 8px;
margin:0;
letter-spacing: 1px; 
text-align: center; 
vertical-align: middle; }

div.comments a:hover {
color:#000000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
letter-spacing: 3px;
}

/*------------Comments Page--------*/
.box {
 padding: 5px 5px 5px 10px;
 margin: 0px;
 text-align: left;
 clear: right;
 }

form div.box { text-align: right; }

center.comment-links {  }

div#footer.box { text-align: center; }

.commentbox {
 align: left; 
 padding: 5px; 
 margin: 2px 2px 25px 2px; 
 color: #000000;
padding-bottom: 5px; 
 border-width: 6px 0px 6px 6px;
 border-color: #000000;
 border-style: solid;
 }

.datesubjectcomment {
 margin-top: 10px;
 text-align: left;
 padding: 5px;
 font-size: 12px;
 color: #bbbbbb;
 }

.datesubjectcomment a:link, .datesubjectcomment a:visited {
 color: #004359; cursor: crosshair; text-decoration:none; font-weight:none;}
  
.datesubjectcomment a:hover {
 color: #bbbbbb; cursor: crosshair; text-decoration:none; font-weight:none;}

.userpiccomment {
 margin: -2px 5px 5px 5px;
 padding: 10px;
 width: 100px;
 height: 100px;
 float: left;
 border: 1px solid #EEEEEE;
}

.commentreply {
 font-family: "Open Sans", arial, sans-serif;
 position: relative;
 margin: 10px;
 font-size: 16px;
 color: #555555;
 }

.commentinfo {
 margin-top: 5px; 
 width: 100%;
 }

.replytosubject {
 font-weight: 300;
 color: #000000;
 font-size: 16px;
 }

div#content textarea  { width: 50%; }

/*-----------Calendar/Year/Archive Page----------*/

ul.year {  text-align: center;  padding: 5px; }

ul.year li {display: inline;}

table.yeartable { width: 710px; margin-left: auto; margin-right: auto; padding: 10px 100px 10px 100px; }

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

table.yeartable td.yearday { text-align: center; color: #888888; border: 1px solid #cccccc; }

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

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

ul.ljtaglist {
 color: #888888;
 font-family: "Open Sans", arial, trebuchet ms, sans-serif;
 font-size: 15px !important;
 text-transform: uppercase;
 padding: 8px 8px 8px 75px;
 border: 0px solid #dedede;
 }

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

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

/* 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/OrangeIcecream.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/OrangeIcecream.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/secret-book-icon.png) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/*---------Fonts----------*/

/* vietnamese */
@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  src: local('Bangers Regular'), local('Bangers-Regular'), url(https://fonts.gstatic.com/s/bangers/v10/FeVQS0BTqb0h60ACH5FQ2Ixi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  src: local('Bangers Regular'), local('Bangers-Regular'), url(https://fonts.gstatic.com/s/bangers/v10/FeVQS0BTqb0h60ACH5BQ2Ixi.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  src: local('Bangers Regular'), local('Bangers-Regular'), url(https://fonts.gstatic.com/s/bangers/v10/FeVQS0BTqb0h60ACH55Q2A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('Open Sans-Regular'), url(https://fonts.gstatic.com/s/Open Sans/v8/kmK-Zq45GAvOdnaW6y1C9ys.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*-----------Add-ons-----------*/
.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(540deg);
 -moz-transform:rotate(540deg);
 -o-transform:rotate(540deg);
 -ms-transform:rotate(540deg);
 transform:rotate(540deg);
}

.facebooklink {
 display: inline-block;
 width: 48px;
 height: 48px;
 background: url(https://layout-lounge.weebly.com/uploads/2/5/9/2/2592379/facebookhovercircles_orig.png) top;
 text-indent: -99999px;
 margin: 1px;
 text-align: center;
}
.facebooklink:hover {
 background-position: 48px 48px;
}

.twitterlink{
 display: inline-block;
 width: 48px;
 height: 48px;
 background: url(https://layout-lounge.weebly.com/uploads/2/5/9/2/2592379/twitterhovercircles_orig.png) top;
 text-indent: -99999px;
 margin: 1px;
 text-align: center;
}
.twitterlink:hover {
 background-position: 48px 48px;
}

.youtubelink{
 display: inline-block;
 width: 48px;
 height: 48px;
 background: url(https://layout-lounge.weebly.com/uploads/2/5/9/2/2592379/youtubehovercircles_orig.png) top;
 text-indent: -99999px;
 margin: 1px;
 text-align: center;
}
.youtubelink:hover {
 background-position: 48px 48px;
}

.rsslink{
 display: inline-block;
 width: 48px;
 height: 48px;
 background: url(https://layout-lounge.weebly.com/uploads/2/5/9/2/2592379/rsshovercircles_orig.png) top;
 text-indent: -99999px;
 margin: 1px;
 text-align: center;
}
.rsslink:hover {
 background-position: 48px 48px;
}

.separator { height: 25px; }

Header Images
Width: 1500px

How to change headerimage height:
Since all of the header images created for this layout are 500px in height that is what the default is for this layout. If, however, you have your own image that is 300px in height there are some adjustments you'll want to make (in order of how they appear in coding):

#content-outer: change the height to 300px;

.headerimage: change the height to 300px;

#content: change the height to 340px - there is a 40px cushion to accomodate the navbar. So make sure you add 40px to whatever the height of your headerimage is.

#header: This is the navbar and needs a cushion of 15px so for a 300px image the "top:" would be 315px. You are going to add 15px to the height of whatever image you use.

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 rule 4 under general
Headers can be changed
Background images 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:

roguem.livejournal.com

This one is really cool. Good job.

sireesanwar.livejournal.com

Thanks.

hassliebe.livejournal.com

Hello,

Thank you very much for all your effort, this layout is lovely. You do wonderful things and the fact that you keep this community is simply awesome. Unfortunately I have a little problem, I first checked this layout on a restaurant, but now that I'm at home every image from weebley looks broken.

Oh that is odd. I'm sorry for that. I don't know how to remedy that. Maybe your browser is blocking weebly for some reason. You can see all these images over at weebly....
https://layout-lounge.weebly.com/

My headers here are going to be in fan art. You can save them from weebly once you click on them and they pop up.

Weebly became my go to just because all of the img places cost money or you can only share things one at a time which is true of weebly except I put everything there anyway.

I checked once again, and I believe it's something related to my country. I tried to visit you website using a proxy and it worked perfectly fine.

Thank you either way for your prompt reply and keep on doing such amazing stuff.

Best regards.

dugindeep.livejournal.com

Hi there! I've incorporated this layout to a community I manage

spn_cinema but am having issues with the fonts. I was hoping to have something that can show separate bolded font, so I tweaked the weight of the font then the only thing I can figure out is to change color of bold (which is currently set). Any thoughts?

If you don't want the font when bold to be a different color you can delete that coding:

b, strong { color: #253C51; }

But if you want the font to change for the bold text then you can also change it there but putting in a font-family line etc.

Does that help?

What exactly do you want it to do?

I don't know if you wanted the LJ default layouts showing through this custom one but if not where you put the text for custom layout you are gonna want to change those questions to No.

cd_mods

Hi,

Do you have any plans to create a new holiday layout?

Hope you do. and I hope all is well with you.

Sorry. I just got your message. I thought about it but never did. Maybe in the future.

crystilia_ixora

Hi I have been using this layout and other layout for some time now, but recently I think the pictures or something happened at my mood and my music section. Can you take a look at my journal and my community

crystiliastudio

Thank you!

It is TinyPic. They closed down. I'm going to post about it.

Layout Lounge

Layouts, Tutorials, Help, and more

102. Comic Book

(no subject)

(no subject)

Thank you!

Re: Thank you!

Re: Thank you!

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

About

Links

Tags

Summary

April 2025