S2 Flexible Squares - Ohh! Minty

[heaven_smiles]

Style: S2 Flexible Squares
Sidebar: Topbar
Browsers: FF & IE
Ads: Between Entries & Horizontal
Account: Basic, Plus & Paid



Live Preview
CSS Stylesheet

/*---------------------------------------------------
Flexible Squares CSS [Ohh! Minty] by berserk_reality.livejournal.com
Topbar code from http://minty_peach.livejournal.com/
You can edit the CSS but don't forget to credit!!!
-----------------------------------------------------*/

body {
background-color:#a7e17d;
text-align: justify;
color: #282828;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
background-image: url(http://i4.photobucket.com/albums/y135/ghettoplayasmooth/patterns/test1.png);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: center;
}

a, a:link, a:visited {
color: #a7e17d;
}

a:hover {
color: #50bec8;}
b, u, strong { color: #e6f7da;}
i, s, em, strike { color: #e6f7da;}

blockquote {
padding:13px;
margin: 9px;
color: #000000;
border: 1px none #ff8b8b;
background-color: #a7e17d;
text-align: justify;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
}
p, td {
font-size:inherit;
}
code, kbd, pre, tt {
font-family: monospace;
}
h2 {
margin-left:20px;
font-weight:normal;
color: #f3f3f3;
font-size: 10px;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/

#content{
width: 750px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;}

#maincontent {
width: 750px;
text-align: justify;
float: right;
background-color: #48a8b0;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

#sidebar {
width: 750px;
padding-top: 5px;
margin-top: 0px;
font-size: 10px;
float: top;
text-align: justify;
background-color: #1b3f42;
}

.subcontent {
padding: 5px 0 5px 0;
background-color: transparent;

}

.subcontent:hover {
padding: 5px 0 5px 0;
background-color: transparent;

}

/*-----------------------------------------------------------------------------
Header - you can add a header image with .headerimage
Footer
--------------------------------------------------------------------------------*/

#header {
padding: 5px 0px;
margin: 0px 0 0 0px;
text-align: left;
font-size: 10pt;
letter-spacing: 1px;
color: #F6F3E7;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: lowercase;
background-color: #48a8b0;
}
#footer {
padding: 5px 0px;
margin: -20px 0 0 0px;
text-align: right;
font-size: 8pt;
letter-spacing: 1px;
color: #F6F3E7;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: lowercase;
background-color: #1b3f42;

}
.headerimage {position: relative;
background: url('HEADERURLHERE');
width: XXXpx;
height: XXXpx;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}

/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited{
color: #a7e17d;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-decoration: none;
text-align: center;
font-size: 10pt;
letter-spacing: 1px;
}

div#footer a, div#footer a:link, div#footer a:visited {
color: #a7e17d;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-decoration: none;
text-align: center;
font-size: 10pt;
letter-spacing: 1px;
}

div#header a:hover, div#footer a:hover {
color: #F6F3E7;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-align: center;
font-size: 10pt;
letter-spacing: 1px;
}

/*title and subtitle*/
.title {
display:none;
}

.subtitle{
display: none;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}

ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}
/*-----------------------------------------------------------------------------
Header - top navigation

--------------------------------------------------------------------------------*/

/* header -- links to views; title of journal; subtitle of journal */

ul.navheader{ padding: 5px 5px 5px 5px; margin: 0px; }

ul.navheader li {display: inline;}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/

.entry {
margin: 0px 10px 10px 20px;
padding: 0px;
background-color: transparent;
color: #282828;
font-size: 10px;
text-align: justify;
}

.userpic {
background-color: #a7e17d !important;
position: relative;
float: right;
padding: 5px;
margin: 5px;
z-index: 15;
text-align:center;
border: 3px solid #46a4ac;
}

.date {
display:none;
}

.subject {
padding: 8px;
color: #4cb4be;
font-size: 18px;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: left;
font-style: italic;
background-color: #e6f7da;
}

.datesubject {
}

.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}

.entry ol {
padding-left: 5px;
margin-left: 15px;
}

/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location, Tags
Tiny Icons from famfamicons
------------------------------------------------------------------------*/

.currents {
font-family: Arial, Helvetica, sans-serif;
color: #282828;
margin-top: 5px;
}
.currentlocation {
font-size: 10px;
color: #282828;}

.currentmood {
font-size: 10px;
color: #282828;}

.currentmusic {
font-size: 10px;
color: #282828;}

.ljtags {
font-size: 10px;
color: #e6f7da;
margin-top: 25px;
background-image: url(http://i4.photobucket.com/albums/y135/ghettoplayasmooth/patterns/tag.png);
background-repeat: no-repeat;
padding-bottom: 10px;
padding-top: 3px;
padding-left: 25px;
}
.currentmood strong, .currentmusic strong, .currentlocation strong, .currentgroups {
font-weight: bold;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/

.comments {
text-align: right;
padding: 0px 6px 0px 6px;
position: relative;
top: 15px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10px;
font-style: italic;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #a7e17d;
text-decoration: none;
}

div.comments a:hover {
color: #50bec8;
text-decoration: none;
}

/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/

.separator{
height: 35px;
}

/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/

.userpicfriends {
background-color: #a7e17d !important;
position: relative;
float: right;
padding: 5px;
margin: 5px;
z-index: 15;
text-align:center;
border: 3px solid #46a4ac;
}

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

.default
{
display:none;
}

.defaultuserpic img{
background-color: #a7e17d !important;
position: relative;
float: right;
padding: 5px;
margin: 5px;
z-index: 15;
text-align:center;
border: 5px solid #46a4ac;
}

.sbarheader {
padding: 0px 5px 0px 5px;
}

.sbarbody {
margin:0px 0px 0px 5px;
padding: 0px 5px;
color: #eefae5;
}
.sbarbody2 {padding: 0px 0px 8px;
margin: 0px 0px 0px 5px;}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #a7e17d;
text-decoration: none;
}

div#sidebar a:hover {
color: #50bec8;
text-decoration: none;
}

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

table.calendar {
width: auto;
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
text-align: center;
background-color: #fdfdfd;
font-size: 10px;}

.sbarcalendarposts {
text-align: center;
color: #773e46;
font-size: 10px;
background-color: transparent;}

/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/

ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;

list-style:none;
}

li.sbaritem{ padding: 2px 7px 2px 7px;}

li.sbaritem:hover {color: #f1c299;}

li.sbartitle
{
display:none;
padding: 2px;
font-size: 12pt;
letter-spacing: -1px;
color: #fdfdfd;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
text-transform: lowercase;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #ff8b8b;
}

/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/

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

ul.year li {
display: inline;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
}

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

table.yeartable td.yearday {
text-align: center;
background-color: #FFFFFF;
color: #50bec8;
}

td.yearmonth {
border-style: none;
}

/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/

.datesubjectcomment {
padding: 3px;
margin-top: 10px;
font-size: 8px;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: justify;
font-style: italic;
background-color: #148f99;
}

.userpiccomment {
background-color: #a7e17d !important;
position: relative;
float: left;
padding: 5px;
margin: 5px;
z-index: 15;
text-align:center;
border: 3px solid #46a4ac;
}

input, textarea, select {
border: 1px solid #ECEDE4;
background-color: #F8F8EB;
padding: 2px;
}
textarea.textbox {width: 95% !important;}

.reply {
position: relative;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
text-align: justify;
background: transparent;
line-height: 125%;
color: #e6f7da; }

.replytosubject {font-weight: bold;}

.commentreply {
position: relative;
margin: 10px;
}

.commentbox {
background-color: transparent;
font-size: 10px;
padding: 6px;
margin: 5px;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #a7e17d;
}

.datesubjectcomment a:hover {
color: #50bec8;
}

.commentboxpartial {
background-color: #a7e17d;
padding: 5px;
margin: 10px;
}

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

.skiplinks {
text-align: center;
}

/*--------------------------------------------
Misc
-----------------------------------------*/

.clear {
height: 15px;
}
img[src*="userinfo.gif"] {width: 0; height: 0; padding: 16px 16px 0 0 !important; background-repeat: no-repeat;
background-image: url(http://i4.photobucket.com/albums/y135/ghettoplayasmooth/lj%20layouts/user.gif) !important;}

Instructions
Go to Customize & select Flexible Squares by Yati Manor
Scroll down to Choose a Page Setup, and set the sidebar on right.
Then Click on Customize Selected themes
Click on Custom CSS and set all drop down boxes to No then Press Save Changes...

Adding the Topbar
Go to "Sidebar" and put everything except for the blurb to No...Then copy the code below into your Blurb box.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus egestas nulla eu mauris. Pellentesque eget ipsum vitae mi tincidunt tempor. Maecenas sed dui

Link Link Link Link

The original topbar code goes to minty_peach, it was just edited by me.

Adding a Header Image
To add a header image look for the code beginning with .headerimage and put in the URL for your image where it says [URLHERE]. Change the width & height on the css to the width & height of your headerimage, save changes and you're done.

Credit berserk_reality if using and also watch/join us for more layouts ^_^