layoutlounge | 90. Oxygen

Layout Style: S2 Flexible Squares
Features: Simple navbar, hover gray sidebar links and tags
Layout Width: 1000px

{ Preview } { Live }
Credit:

layout_lounge

Theme and Layout Change Tutorial

All embedded in coding from Google Fonts

/*--------------------------------
S2 Flexible Squares - 90. Oxygen
Layout by http://layout-lounge.livejournal.com
PLEASE DO NOT REMOVE THIS SECTION 
----------------------------------*/
body{
 background-color: #F6F6F6;
 background-image: url(BACKGROUND IMAGE URL);
 background-repeat: repeat, repeat;
 background-attachment: fixed, fixed;
background-position: left top, left top;
 color: #888888;
 font-family: "lucida grande", "lucida sans", trebuchet ms, arial, sans-serif;
 font-size: 12px;
 margin: 10px 0 20px 0;
 }

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

blockquote {
 width: 70%;
 background: #444444;
 margin-left: auto;
 margin-right: auto;
 padding: 10px; 
 color: #ffffff;
 font-size: 13px;
 line-height: 16px;
 font-family: "trebuchet ms", arial, sans-serif;
 text-align: left;
box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.1);
 }

blockquote a { color: #cccccc !important;  font-style: italic; }
blockquote a:hover { color: #ffffff !important; }

img.special, i img { border: 10px solid #f5f5f5; }

b, strong { color: #004359; }
i, em { color: #4c228a; }
u { color: #8CB53F; }
s, strike { color: #AD5C00; }

/*--------------General------------*/
#content {   
 width: 1000px; 
 background-color: #ffffff !important;
 margin-left: auto; 
 margin-right: auto;  
 text-align: left;
 padding: 0px;
 }

#maincontent {
 font-family: "trebuchet ms", arial, trebuchet ms, sans-serif;
 font-size: 12px;
 color: #333333;
 margin-left: 285px;
 text-align: center;
 }

.subcontent {
 background-color: #ffffff;
 width: 710px; 
 margin-top: 0px;
 }

/*---------------Header--------------*/
#header {  
 position: inherit;
 width: 1000px;
 height: 30px;
 text-align: left;
 color: #282828;
 padding: 0px;
 margin-bottom: 5px;
 margin-right: 10px;
font-family: "Abel", georgia, arial;
  font-size: 16px !important; line-height: 130%;  line-height: 130%; 
 letter-spacing: 1px;
 text-transform: lowercase;
 font-weight: none;
z-index: 199;
}

div#header a, div#header a:link, div#header a:visited, div#header a:active {
 padding: 5px 5px 5px 5px;
 margin: 0px 2px 0px 0px;
 letter-spacing: 1px;
 color: #0da4d3;
 text-align: left;
 border:0px solid #E0E0E0;
 -webkit-transition: box-shadow 0.3s linear;
 -moz-transition: box-shadow 0.3s linear;
 -ms-transition: box-shadow 0.3s linear;
 -o-transition: box-shadow 0.3s linear;
 transition: box-shadow 0.3s linear;
}

div#header li.view { 
 padding: 5px 10px 5px 15px;
 margin: 0px 5px;
 color: #cccccc;
 -webkit-transition: box-shadow 0.3s linear;
 -moz-transition: box-shadow 0.3s linear;
 -ms-transition: box-shadow 0.3s linear;
 -o-transition: box-shadow 0.3s linear;
 transition: box-shadow 0.3s linear;
 }

div#header a:hover { 
 color: #000000;
 -webkit-box-shadow: #f6f6f6 0 0 10px inset;
 -moz-box-shadow: #f6f6f6 0 0 10px inset;
 -ms-box-shadow: #f6f6f6 0 0 10px inset;
 -o-box-shadow: #f6f6f6 0 0 10px inset;
 box-shadow: #f6f6f6 0 0 10px inset;
 }

ul.navheader {
 list-style: none;
 line-height: 24px;
 margin: 0 15px 0px;
 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;
right:0;
text-align:left;
text-transform:lowercase;
width:100%;
z-index:99;
}

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

ul.navfooter a {
}

ul.navfooter li + li a {
float: right;
background-color: rgba(0, 0, 0, 0.3);
padding: 20xp 10px 20px 10px;
 }

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(0, 0, 0, 0.3);
color: #ffffff;
font-family: open sans condensed, georgia,arial,sans-serif;
font-size: 13px;
padding: 20px 30px 20px 30px;
margin: 0px 10px -10px 10px;
}

.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-color: #ffffff;
 padding: 10px; 
 font-family: "Abel", arial, georgia;
 font-size: 14px;
 color: #000000;
 width: 260px;
 float: left;
 text-align: right;
 text-transform: normal;
 }

.sbarbody2, li.sbaritem2 { 
padding: 5px; 
margin: 0px 0px 0 10px; 
 font-family: "Abel", arial, sans-serif;
font-size: 14px !important; 
text-transform: lowercase; 
text-align: left;
 }

.sbarbody {
margin:0;
padding: 5px;
padding-bottom: 5px; 
}

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: #8A1751;
display: inline;
 font-family: "Abel", arial, sans-serif;
font-size: 14px;
font-weight: lighter;
margin-right: 0px;
padding: 0px;
text-align: left; }

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

li.sbartitle {
background-color: rgba(255, 255, 255, 0.5); 
 list-style: none;
 color: #aaaaaa; 
text-align: left;
letter-spacing: 2px;
 font-family: "Abel", trebuchet ms, arial, sans-serif;
 font-size: 14px;
 text-transform: uppercase;
 margin: 5px -12px 0px 8px;
 }

#sidebar_linklist  {
list-style-type:none;
padding: 5px;
text-align: left !important;
text-transform: uppercase; }

#sidebar_linklist li.sbaritem a {
background-color: #111111; 
border-bottom: 1px solid #1d1d1d;
color: #eeeeee;
display:block;
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 8px;
margin: 0px 0px -2px 0px;
text-align: left;
}

#sidebar_linklist li.sbaritem a:hover {
color:#FFFFFF; 
background-color: #000000;
text-align: left;
}

td.sbarcalendar {background-color: transparent !important;
padding: 5px;}

td.sbarcalendarposts {background-color: #ffffff; 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 {
 color: #000000;
 padding: 5px;
 text-transform: normal;
 margin: 5px 0px 5px 0px;
 text-align: left;
 font-size: 12px;
 border-bottom: 1px solid #dedede!important;
 }

#sidebar_summary li.sbaritem a {
 text-decoration: none;
 display: inline !important;
 color: #91C3D0;
 }

#sidebar_summary li.sbaritem a: hover{
 color: #ffffff !important;
 border: 0px solid #777777;
 background-color: transparent !important;
 }

#sidebar_tags .sbarcontent { height: 500px;         overflow-x: hidden; overflow-y: auto; margin-right: -12px; padding: 5px; }

li.tagBox a { 
background-color: #111111; 
background: url("http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/greyarrow.gif") no-repeat scroll left center #111111;
border-bottom: 1px solid #1d1d1d;
color: #eeeeee;
display:block;
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 5px 1px 5px 12px;
margin: 0px 0px -2px 0px;
text-align: left;
}

li.tagBox a:hover { 
color:#FFFFFF; 
background-color: #000000;
text-align: left;
 }

#sidebar_tags li.sbaritem a { 
background-color: #111111; 
background: url("http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/greyarrow.gif") no-repeat scroll left center #111111;
border-bottom: 1px solid #1d1d1d;
color: #eeeeee;
display:block;
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 5px 1px 5px 9px;
margin: 0px 0px -2px 0px;
text-align: left;
}

#sidebar_tags li.sbaritem a:hover { color:#FFFFFF; 
background-color: #000000;
text-align: left;
 }

.defaultuserpic {
width: 100px;
height: 100px;
margin: 8px auto 10px auto;
padding: 10px;
background-color: #ffffff !important;
border: 0px solid #cccccc;
 -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;
}

.defaultuserpic img {
}

/*-----------Entries-----------*/
.entry {
 padding: 20px 30px 30px 30px;
 margin: 0px;
 color: #444444;
 font-family: "arial";
 font-size: 14px;
 line-height: 150%;
 text-align: left;
 }
 
hr { color: transparent; height: 1px; border-bottom: 1px solid #cccccc; }

.entry ul li, ol li, li {
 padding-left: 5px;
 margin-left: 5px;
 list-style: normal;
 list-style-position: outside;
 }

.userpic, .userpicfriends {
 float: right;
margin: 5px -60px 25px 15px;
 padding: 10px;
 width: 100px;
 height: 100px;
 text-align: center;
 color: #FFF!important; 
 background: #FFF!important;
 -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 img, .userpicfriends img {
 width: 100px;
 height: 100px;
 }
 
.userpicfriends a, .userpicfriends font {
 margin: 0px 0px 0px 0px;
 position: relative;
 background-color: transparent!important;
 float: center;
 font-family: 'TuffyRegular', sans-serif;
 font-size: 11px;
 text-align: center;
 color: #FF5DDD;
text-shadow: 2px 2px 4px #777777;
 -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: 10px 80px -15px 0px;
 text-align: right; 
 padding-right: auto;
 padding-left: auto;
 color: #ccccca;
 font-family: "trebuchet ms", 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: 15px 10px 0px 10px;
 color: #0da4d3;
font-family: "Abel", open sans condensed, georgia, arial;
 font-size: 28px;
 font-weight: normal; 
 text-align: left;
 text-transform: uppercase;
 border-bottom: 1px solid #dedede;
 }
 
.subject a, .subject a:link, .subject a:visited {color: #0da4d3;}

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

.datesubject {
 background-color: transparent;
 padding: 0px;
 text-align: left;
 }

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

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

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

/*-----------  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 {
margin-top: 20px;
text-align: left;
color: #808080;
font-family: verdana; 
font-weight: bold; 
font-size: 10px; 
text-transform: uppercase;
}

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

div.comments a, div.comments a:link, div.comments a:visited {
background-color: #111111;
color:#eeeeee;
font-family: open sans condensed, arial !important;
 font-size: 14px !important; line-height: 130%; 
line-height:1;
padding: 10px;
margin:0;
text-align: center; }

div.comments a:hover {
background-color: #000000;
color:#ffffff;
}

/*------------Comments Page--------*/
.box, form div.box {
 width: 700px;
 padding: 5px 5px 5px 10px;
 margin: 0px;
 text-align: left;
 clear: right;
 background-color: #ffffff;
 }

.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: #f1f1f1;
 color: #000000;
 }
  
.replytosubject {
 font-weight: none;
 }
  
.commentreply {
 font-family: "trebuchet ms", arial, sans-serif;
 position: relative;
 margin: 10px;
 font-size: 13px;
 color: #000000;
 }
  
.commentbox {
 align: left; 
 padding: 2px; 
 margin: 2px; 
 }

.userpiccomment {
 margin: -2px 5px 5px 0px;
 padding: 10px;
 width: 100px;
 height: 100px;
 float: right;
 background: #FFF!important;
 -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: 12px;
 background-color: #f6f6f6;
 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 {  text-align: center;  padding: 5px;         background-color: #ffffff; }

ul.year li {display: inline;}

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

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: "Abel", arial, trebuchet ms, sans-serif;
 font-size: 16px;
 text-align: left;
 text-transform: uppercase;
 padding: 8px 8px 8px 50px;
 background-color: #ffffff;
 border: 0px solid #dedede;
 }

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

/*----------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/owl.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/owl.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://s77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/tiny_icon_tree_summer.png) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/*-----------Fonts-----------*/
@font-face {
  font-family: 'Grand Hotel';
  font-style: normal;
  font-weight: 400;
  src: local('Grand Hotel'), local('GrandHotel-Regular'), url(http://themes.googleusercontent.com/static/fonts/grandhotel/v1/NrGQkrs9rbHm5EYx0Eil0obN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  src: local('Great Vibes'), local('GreatVibes-Regular'), url(http://themes.googleusercontent.com/static/fonts/greatvibes/v1/6q1c0ofG6NKsEhAc2eh-3YbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

@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/v6/uXyrEUnoWApxIOICunRq7-HbywbERJ_YcOpO6Co4fHY.woff) format('woff');
}

@font-face {
  font-family: 'IM Fell DW Pica SC';
  font-style: normal;
  font-weight: 400;
  src: local('IM FELL DW Pica SC'), local('IM_FELL_DW_Pica_SC'), url(http://themes.googleusercontent.com/static/fonts/imfelldwpicasc/v4/xBKKJV4z2KsrtQnmjGO17ORrWueMUZPacwWUa4j7Ahg.woff) format('woff');
}

@font-face {
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
  src: local('Abel'), local('Abel-Regular'), url(http://themes.googleusercontent.com/static/fonts/abel/v4/EAqh528fFdbUek8UOky4sA.woff) format('woff');
}

/*-----------Mics-----------*/
.clear { height: 0px; font-size: 0.01px; }
 
#lj_controlstrip_statustext {
 color: #999999;
 font-size: 12px;
 font-weight: bold;
 }

#lj_controlstrip td {
 font-family: "georgia" !important;
 font-size: 12px;
 background-color: #000000 !important;
 border: 0px solid #999999;
 }

#lj_controlstrip a, #lj_controlstrip a:visited {
 font-family: "georgia" !important;
 font-size: 11px;
 color: #999999 !important;
 text-transform: lowercase;
 }

#lj_controlstrip a:hover { color: #6DA9C1 !important; }

.headerimage {
 position: relative;
 width: 960px;
 height: 200px;
 margin-left: auto;
 margin-right: auto;
 padding: 0px;
 border: 20px solid #ffffff;
 background-color: transparent !important;
 background-image: url(HEADER IMAGE URL);
 background-repeat: no-repeat;
 background-position: center top;
z-index: -10;
}

.separator { height: 0px; }

Theme and Layout Change Tutorial

Additional Layout Directions:
1. Header image should adjust as you adjust the height.
2. The width is going to need to be 40px smaller than your actual image because of the border. So my image is 1000px but I have it listed as 960px in the coding.

Background Image

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

90. Oxygen

(no subject)

About

Links

Tags

Summary

April 2025