layoutlounge | 98. Oasis

Layout Style: S2 Flexible Squares
Features: Embedded Fonts, No Title, No Subtitle, Made for almost not sidebar, no standard headerimage
Layout Width: Flexible Width

[ Preview ] [ Live ]
Credit:

layout_lounge

Theme and Layout Change Tutorial

All embedded in coding from Google Fonts

/*--------------------------------
S2 Flexible Squares - 98. Oasis
Layout by http://layout_lounge.livejournal.com
PLEASE DO NOT REMOVE THIS SECTION 
----------------------------------*/
body{
 background-color: #f0f0f0;
 background-image: url(BACKGROUND IMAGE IS MAIN IMAGE);
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: top left;
 background-size: 50% auto;
 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 { width: 100%; }

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

#maincontent {
 margin-top: 30px;
 padding: 0px;
 }

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

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

/*---------------Header--------------*/
#header {  
 background-color: transparent);
 width: 175px !important;
 position: fixed;
 left: 20px; top: 120px;
 clear: both;
 margin: 0px 10px 10px 0px;
 padding: 10px;
 font-family: Montserrat, arial !important;
 font-size: 14px !important;
 text-transform: uppercase;
 border: 3px solid #ffffff;
 z-index: 199;
}

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

div#header li.view { 
 color: #ffffff;
 padding-left: 15px;
  }

div#header a:hover {
 color: #888888;
}

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

ul.navheader li  {
 display: block;
 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: rgba(255, 255, 255, 0.4);
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: rgba(255, 255, 255, 0.4) !important;
margin-left: 10px; 
padding: 20xp 10px 20px 10px;
 }

ul.navfooter li a:hover {  }

#footer .viewing { display:none; }

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

#sidebar {
 position: fixed;
 left: 0; 
 width: 260px;
 float: left;
 font-family: "Montserrat", arial, georgia;
 font-size: 14px;
 color: #ffffff;
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: #ffffff;
display: inline;
 }

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

li.sbartitle {
 display: none;
 list-style: none;
 color: #777777; 
 }

.sbarbody {
 background-color: transparent;
 border: 3px solid #ffffff;
padding: 5px;
}

/*-Sidebar Links-*/
#sidebar_linklist  {
 position: absolute;
 top: -8px; left: 230px;
 width: 175px;
 height: 100px;
 overflow-x: hidden; overflow-y: auto;
 margin: 0px 10px 10px 0px;
list-style-type:none;
padding: 10px; 
 }

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

#sidebar_linklist li.sbaritem a:hover {
color:#888888; 
}

/*-Sidebar Tags-*/
#sidebar_tags.sbarbody { 
position: absolute;
top: 120px; left: 20px;
width: 175px;
padding: 10px; 
margin: 10px 10px 10px 0px; }

#sidebar_tags .sbarcontent { width: 175px; height: 150px;  overflow-x: hidden; overflow-y: auto;  }

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

li.tagBox a:hover { color:#888888;  }

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

#sidebar_tags li.sbaritem a:hover { color:#888888;  }

/*-Free Text-Blurb-*/
.sbarbody2, li.sbaritem2 {  
 display: none;
position: absolute;
top: 470px; left: 210px;
 width: 175px; 
 height: 200px;
 overflow-x: hidden; overflow-y: auto;
 background-color: rgba(225, 225, 225, 0.3);
padding: 10px; 
 margin: -230px 10px 10px 0px;
 }

/*-Sidebar Summary-*/
#sidebar_summary.sbarbody { 
 display: none;
position: absolute;
top: 230px; left: 420px;
width: 175px; margin: 10px 10px 10px 0px; padding: 10px; color: #ffffff;  font-size: 11px; height: 200px;  overflow-x: hidden; overflow-y: auto; }

#sidebar_summary li.sbaritem a { color: #ffffff; }

#sidebar_summary li.sbaritem a: hover { color: #888888!important; }

/*-Sidebar Calendar-*/
#sidebar_calendar.sbarbody { display: none; position: absolute; left: 420px; top: 222px; width: 175px; margin: -130px 10px 10px 0px; padding: 10px; }

table.calendar { width:175px; }

td.sbarcalendar { }

td.sbarcalendarposts { padding: 3px; box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); }

/*-Sidebar Userpic-*/
.defaultuserpic {
display: none;
position: absolute;
top: 250px; left: 0;
width: 70px;
height: 70px;
margin: -25px 10px 10px 0px;
padding: 5px;
 background-color: rgba(225, 225, 225, 0.3);
}

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

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

.entry_text {
 color: #000000;
 font-family: "Montserrat", arial;
 font-size: 14px;
 line-height: 110%;
 text-align: left;
 z-index: 50;
 }

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

.entry img { max-width: 80%;  }
 
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: 100%;
 list-style: normal;
 list-style-position: inside;
 }

.userpic, .userpicfriends {
 float: right;
margin: 0px -30px 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: "Montserrat", open sans condensed, georgia, arial;
 font-size: 25px;
 font-weight: 900; 
 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: 0 !important;
}

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

/*-----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;
margin: 0px 0 0px -30px;
padding: 0px 0px 20px 0px;;
font-size: 9px;
font-family: Montserrat;
color: #7F7F7F;
text-align: left; 
}

.currentlocation, .currentmood, .currentgroup, .currentmusic { margin-left: 30px; }

.currentlocation, .currentmusic {  }

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

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

.ljtags {
margin-top: 20px;
margin-bottom: 10px;
text-align: left;
color: #808080;
font-family: Montserrat; 
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/1_031.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/1_031.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/Easter-Island-Head-icon.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');
}

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

/*-----------Header Image-----------*/

.headerimage {
 position: fixed;
 top: 450px;
 left: 150px;
 width: 400px;
 height: 100px;
 padding: 0px;
 background-color: transparent !important;
 background-image: url(HEADER IMAGE OF TITLE);
 background-repeat: no-repeat;
}

.separator { height: 0px; }

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

I have removed the Title and Subtitle from the coding because this layout doesn't work well with them.

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.

I have nothing on the sidebar currently and some of the components are turned off with display: none coding which you can remove. These would be the free blurb, page summary, calendar, and default userpic.

The components of linklist and tags are still enabled and will pop up where I've put them in the layout when you select them in the sidebar customizations section of your LJ customizations. You can also adjust their locations by adjusting the px of the top and left coding lines for each component.

You can find the coding for each labeled in the sidebar section.

I recommend sticking with these two components, however, but if you feel so inclined you can change it up.

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.

98. Oasis

no subject

no subject