layoutlounge | 99. Impact (Layout Lounge 2.0)

Layout Style: S2 Flexible Squares
Features: Embedded Fonts, No Title, No Subtitle, No Background image, Header Image is logo only (see instructions)
Layout Width: Flexible Width

[ Preview ] [ Live ]
Credit:

layout_lounge

Theme and Layout Change Tutorial

All embedded in coding from Google Fonts

/*--------------------------------
S2 Flexible Squares - 99. Impact
Layout by http://layout_lounge.livejournal.com/
PLEASE DO NOT REMOVE THIS SECTION 
----------------------------------*/
body{
 background-color: #ffffff;
 background-image: url();
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: top left;
 background-size: cover;
 color: #888888;
 font-family: "Montserrat", arial, sans-serif;
 font-size: 14px;
 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 #E5E5E5; 
 }
img.special, i img { border: 10px solid #e5e5e5; }

b, strong { color: #298779; }
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: "Montserrat"; }

/*--------------General------------*/
#content-outer { 
 position: absolute;
 width: 100%;
 height: 250px;
 background-color: transparent;
 background-image: url(FLOWER HEADER IMAGE);
 background-repeat: no-repeat;
 background-position: center 65%;
 background-size: cover;
 z-index: -199;
 }

.headerimage {
 position: absolute;
 width: 100%;
 height: 250px;
 padding: 0px;
 background-color: rgba(0,0,0,0.25);
 background-image: url(LOGO HEADER IMAGE);
 background-repeat: no-repeat;
 background-position: center center;
 background-size: auto;
 z-index: -10;
}

#content {   
 width: 70%;
 background-color: #ffffff;
 margin: 320px auto 0px auto;
 font-family: "Montserrat", arial, sans-serif;
 font-size: 14px;
 text-align: left;
 padding: 25px 50px 25px 50px;
 z-index: 50;
 }

#maincontent {
 margin-top: 20px;
 margin-right: 290px;
 padding: 0px;
 }

.subcontent {
 padding: 0px 10px;
 font-size: 15px;
 color: #333333;
 }

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

/*---------------Header--------------*/
#header {  
 position: absolute;
 left: 0; top: 250px;
 background-color: #eeeeee;
 width: 100%;
 height: 50px;
 padding-top: 25px;
 text-align: center;
 font-family: Montserrat, arial !important;
 font-size: 14px !important;
 text-transform: uppercase;
}

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

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

div#header a:hover {
 border-bottom: 3px solid #888888;
}

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: #dddddd);
color: #ffffff;
font-family: "Montserrat", georgia,arial,sans-serif;
font-size: 20px;
margin-right: 20px;
padding: 20px 30px 20px 30px;
}

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

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

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

ul.navfooter li a {
float: right;
background-color: #dddddd !important;
margin-left: 10px; 
padding: 20xp 10px 20px 10px;
 }

ul.navfooter li a:hover {  }

#footer .viewing { display:none; }

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

#sidebar {
 width: 280px;
 float: right;
 font-family: "Montserrat", 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: #888888;
display: inline;
 }

li.sbaritem a:hover {
color:#555555;  }

li.sbartitle {
 margin-bottom: 5px;
 font-size: 18px;
 text-align: center;
 list-style: none;
 color: #cccccc; 
 border-bottom: 3px solid #cccccc;
 }

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

.sbarbody {
list-style-type:none;
 background-color: transparent;
 border: 3px solid #cccccc;
padding: 5px !important;
margin: 5px 5px 10px 5px;
}

li.sbaritem2 {
list-style-type:none;
 background-color: transparent;
padding: 5px;
margin: 5px 5px 10px 5px;
}

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

li.sbaritem4 {
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  {
list-style-type:none;
padding: 10px; 
margin: 5px 5px 10px 5px;
 }

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

#sidebar_linklist li.sbaritem a:hover {
}

/*-Sidebar Tags-*/
#sidebar_tags.sbarbody { 
height: 250px;  overflow-x: hidden; overflow-y: auto;
padding: 10px; 
margin: 5px 5px 10px 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 {  
padding: 10px; 
margin: 5px 5px 10px 5px;
 border: 3px solid #cccccc;
 }

/*-Sidebar Summary-*/
#sidebar_summary.sbarbody { 
padding: 10px; margin: 5px 5px 10px 5px;  font-size: 11px; height: 200px;  overflow-x: hidden; overflow-y: auto; 
}

#sidebar_summary li.sbaritem a {  }

#sidebar_summary li.sbaritem a: hover { }

/*-Sidebar Calendar-*/
#sidebar_calendar.sbarbody {  padding: 10px; margin: 5px 5px 10px 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 #eeeeee; }

/*-Sidebar Userpic-*/
.defaultuserpic {
width: 100px;
height: 100px;
padding: 10px;
margin: 5px auto 10px auto;
 border: 1px solid #eeeeee;
}

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

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

.entry_text {
 color: #444444;
 font-family: "Playfair Display", arial;
 font-size: 16px;
 line-height: 150%;
 text-align: left;
 font-weight: 550;
 margin-bottom: 40px;
 z-index: 50;
 }

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

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

.entry ul li, ol li, li {
 margin-left: 5px;
 padding: 1px 0px 0px 5px;
 line-height: 120%;
 list-style: normal;
 list-style-position: inside;
 }

.userpic, .userpicfriends {
 float: right;
 margin: 0px 0px 5px 5px;
 padding: 10px;
 width: 90px;
 height: 90px;
 text-align: center;
 color: #FFF!important; 
 background: #FFF!important;
 border: 1px solid #eeeeee;
 }

.userpic img, .userpicfriends img {
 width: 90px;
 height: 90px;
 }
 
.userpicfriends a, .userpicfriends font {
 margin: 0px 0px 0px 0px;
 position: relative;
 background-color: transparent!important;
 float: center;
 font-family: 'Montserrat', sans-serif;
 font-size: 11px;
 text-align: center;
 color: #000000;
 -webkit-transition: background-color 0.3s ease;
 -moz-transition: background-color 0.3s ease;
 -ms-transition: background-color 0.3s ease;
 -o-transition: background-color 0.3s ease;
 transition: background-color 0.3s ease;
 }
 
.userpicfriends a:hover, .userpicfriends a font:hover {color: #bbbbbb;  text-shadow: 2px 2px 6px #bbbbbb; }

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

.subject {
 padding: 0px;
 margin: 0px 10px 20px 20px;
 color: #333333;
font-family: "Playfair Display", open sans condensed, georgia, arial;
 font-size: 25px;
 text-align: left;
 text-transform: uppercase;
 }
 
.subject a, .subject a:link, .subject a:visited {color: #333333;}

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

.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: 20px;
 font-family: "Montserrat", Abel, arial, sans-serif;
 font-size: 10px;
 padding: 10px 10px 5px 10px;
 text-transform: uppercase;
 letter-spacing: 1px;
 color: #999999;
 }

.lj-like {
 width: 100%; 
 clear: left; 
 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;
    padding: 10px;
    background: #eeeeee;
    background: -moz-linear-gradient(top, #eeeeee, #dddddd);
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eeeeee), to(#dddddd));
    border: 1px solid #dddddd;
    border-radius: 2px;
    box-shadow: 2px 2px 6px #eeeeee inset;
    text-shadow: 0px 1px 1px #eeeeee ;
   color: #dddddd;
}

/*-----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: 9px;
font-family: Verdana;
color: #7F7F7F;
text-align: left; 
}

.currentlocation, .currentmusic { 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: verdana; 
font-weight: bold; 
font-size: 10px; 
text-transform: uppercase;
}

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

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

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

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

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

center.comment-links {  }

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

.commentbox {
 align: left; 
 padding: 5px; 
 margin: 2px 2px 10px 2px; 
 color: #000000;
padding-bottom: 5px; 
 }

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

.commentreply {
 font-family: "Montserrat", arial, sans-serif;
 position: relative;
 margin: 10px;
 font-size: 13px;
 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: "Montserrat", 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/muffin.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/muffin.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/coca_cola.png) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

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

/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: local('Playfair Display'), local('PlayfairDisplay-Regular'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/2NBgzUtEeyB-Xtpr9bm1CUR-13DsDU150T1bKbJZejI.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: local('Playfair Display'), local('PlayfairDisplay-Regular'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/2NBgzUtEeyB-Xtpr9bm1CfoVn-aGdXvQRwgLLg-TkDk.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: local('Playfair Display'), local('PlayfairDisplay-Regular'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/2NBgzUtEeyB-Xtpr9bm1Cdhy5e3cTyNKTHXrP9DO-Rc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

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

.separator { height: 0px; }

Additional Layout Directions:
There are a few things you should know about this layout:

I have removed the Title and Subtitle to prevent the title of posts from interfering with the look of the layout.

The header image is more of just a title. This can be made in Photoshop or other image software. If you need a title I'm willing but I'd be pretty much mimicking this title image. I recommend having a background color in your image that has a low transparency. This means with a lighter image it will still be well visible.

This has a full sidebar.

The flower "header image" is, in fact, a #content-outer image. What this means is when you choose the image you want you will go to the General section towards the top of the coding. Here you will find the #content-outer which has image coding. This image is set to cover the 250px high area. You may have noticed the below images are larger than 250px and have much more to the picture. In the background-position line of the #outer-content I've centered the image horizontally while placing it at 65% of the image vertically. This means I've chosen which area of the image to display to you all. You can change this up but changing the percentage which comes after center (background-position: center 50%;).

For this #outer-content image I would recommend an image that is 1600 pixels wide at the very least. The below images are 2280 x 1667.

As for the logo image this is in the traditional .headerimage coding which is located in the General section under the #outer-content coding. I've moved this (it is normally at the end of all my layouts) for the convenience because of the unusual nature of these "header images".

Images

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.

Layout Lounge

Layouts, Tutorials, Help, and more

99. Impact (Layout Lounge 2.0)

(no subject)

(no subject)

About

Links

Tags

Summary

April 2025