S2 Layouts
Style: S2 Flexible Squares
Sidebar: Sidebar & Topbar
Browsers: FF & IE
Ads: Between Entries & Horizontal
Account: Basic, Plus & Paid
Live Preview
Live Preview
Live Preview
Live Preview
Type your cut contents here.
CSS StylesheetsRunaway Love - Topbar/*---------------------------------------------------
Flexible Squares CSS [Runaway Love] by berserk_reality.livejournal.com
You can edit the CSS but don't forget to credit!!!
-----------------------------------------------------*/
body {
text-align: justify;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 140%;
text-decoration: none;
background-image: url(http://i4.photobucket.com/albums/y135/ghettoplayasmooth/patterns/fondo.gif);
;){kind=link}
background-repeat: repeat;
}
a, a:link, a:visited {
color: #656c89;
}
a:hover {
color: #bee2ee;}
b, u, strong { color: #070c22;}
i, s, em, strike { color: #656c89;}
blockquote {
padding:8px;
margin: 7px;
color: #000000;
background-color: #f3f3f3;
text-align: justify;
border-right: 3px dashed #bee2ee;
border-left: 3px dashed #bee2ee;
}
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: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;}
#maincontent {
margin: 0 0 0 100px;
text-align: justify;
background-color: #fdfaf6;
}
#sidebar {
width: 700px;
padding-top: 5px;
font-size: 10px;
float: right;
text-align: justify;
background-color: #fdfaf6;
}
.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 - Customize the look of the footer
--------------------------------------------------------------------------------*/
#header {
float: left;
width: 100px;
font-size: 12pt;
letter-spacing: -1px;
color: #656c89;
text-align: left;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: lowercase;
background-color: #fdfaf6;
padding: 5px 0px 5px 0px;
margin: 0px 0px 0px 0px;
}
#footer {
width: 700px;
padding: 5px 0px 5px 0px;
margin: 0 0 0 100px;
font-size: 10pt;
letter-spacing: -1px;
color: #656c89;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: lowercase;
background-color: #fdfaf6;
}
.headerimage {position: relative;
background: url('INSERTIMAGEURLHERE');
width: 800px;
height: 200px;
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: #656c89;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-align: left;
font-size: 8pt;
letter-spacing: -1px;
display: block;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #bee2ee;
}
div#footer a, div#footer a:link, div#footer a:visited {
color: #656c89;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-decoration: none;
text-align: center;
font-size: 8pt;
letter-spacing: -1px;
}
div#header a:hover {
color: #bee2ee;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-align: left;
font-size: 8pt;
letter-spacing: -1px;
background-color: #F2F2F2;
display: block;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #656c89;
}
div#footer a:hover {
color: #bee2ee;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-align: center;
font-size: 8pt;
letter-spacing: -1px;
background-color: #F2F2F2;
}
/*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: #000000;
font-size: 9px;
text-align: justify;
}
.userpic {
background-color: #FFFFFF !important;
position: relative;
float: right;
padding: 5px;
margin: 5px;
z-index: 15;
}
.date {
display:none;
top: 5px;
color: #3e3d3d;
font-size: 10px;
padding-right: 10px;
text-align: left;
}
.subject {
padding: 10px;
color: #bee2ee;
font-size: 32px;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: right;
font-style: italic;
}
.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: "Tahoma", sans-serif;
color: #000000;
margin-top: 5px;
}
.currentlocation {
font-size: 10px;
color: #000000;}
.currentmood {
font-size: 10px;
font-size: 10px;
color: #000000;}
.currentmusic {
font-size: 10px;
font-size: 10px;
color: #000000;}
.ljtags {
font-size: 10px;
font-size: 10px;
color: #000000;
margin-top: 25px;}
.currentmood strong, .currentmusic strong, .currentlocation strong, .currentgroups { display: none; }
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
text-align: right;
padding: 0px 6px 0px 6px;
position: relative;
top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #656c89;
text-decoration: none;
}
div.comments a:hover {
color: #bee2ee;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
height: 20px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
background-color: #FFFFFF !important;
position: relative;
float: right;
padding: 5px;
margin: 5px;
z-index: 15;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.default
{
display:none;
}
.defaultuserpic img{
display:none;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #656c89;
}
div#sidebar a:hover {
color: #bee2ee;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
width: auto;
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
text-align: center;
background-color: transparent;
font-size: 10px;}
.sbarcalendarposts {
text-align: center;
color: #fdfdfd;
font-size: 10px;
background-color:#bee2ee;}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding: 0;
margin: 20px 0;
list-style: none;
text-align: left;
}
li.sbaritem{ display: inline;
padding: 0 15px 0 0;
list-style: none;}
li.sbaritem:hover {color: #bee2ee;}
li.sbartitle
{
display: none;
padding: 4px;
font-size: 10pt;
letter-spacing: 1px;
color: #bee2ee;
text-align: right;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: lowercase;
}
/*----------------------------------------------------
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 #656c89;
}
table.yeartable td.yearday {
text-align: center;
background-color: #FFFFFF;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
padding: 3px;
margin-top: 10px;
font-size: 8pt;
color: #656c89;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.userpiccomment {
position: relative;
padding: 10px;
background-color: #FFFFFF;
margin: 10px 10px 10px 10px;
z-index: 15;
float: left;
}
input, textarea, select {
border: 1px solid #bee2ee;
background-color: #f3f3f3;
padding: 2px;
}
textarea.textbox {width: 95% !important;}
.reply {
position: relative;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
text-align: justify;
background: #f3f3f3;
color: #bee2ee; }
.replytosubject {font-weight: bold;}
.commentreply {
position: relative;
margin: 10px;
color: #000000;
}
.commentbox {
background-color: #f3f3f3;
color: #000000;
font-size: 10px;
padding: 6px;
margin: 5px;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #656c89;
}
.datesubjectcomment a:hover {
color: #bee2ee;
}
.commentboxpartial {
background-color: #bee2ee;
padding: 5px;
margin: 10px;
}
.commentinfo {
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: right;
}
/*--------------------------------------------
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;}Runaway Love - Sidebar/*---------------------------------------------------
Flexible Squares CSS [Runaway Love] by berserk_reality.livejournal.com
You can edit the CSS but don't forget to credit!!!
-----------------------------------------------------*/
body {
text-align: justify;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 140%;
text-decoration: none;
background-image: url(http://i4.photobucket.com/albums/y135/ghettoplayasmooth/patterns/fondo.gif);
background-repeat: repeat;
}
a, a:link, a:visited {
color: #656c89;
}
a:hover {
color: #bee2ee;}
b, u, strong { color: #070c22;}
i, s, em, strike { color: #656c89;}
blockquote {
padding:8px;
margin: 7px;
color: #000000;
background-color: #f3f3f3;
text-align: justify;
border-right: 3px dashed #bee2ee;
border-left: 3px dashed #bee2ee;
}
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: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;}
#maincontent {
width: 520px;
margin: 0 0 0 100px;
text-align: justify;
background-color: #fdfaf6;
}
#sidebar {
width: 180px;
margin: 0 0 0 5px;
font-size: 10px;
float: right;
text-align: justify;
background-color: #fdfaf6;
}
.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 - Customize the look of the footer
--------------------------------------------------------------------------------*/
#header {
float: left;
width: 100px;
text-align: left;
font-size: 12pt;
letter-spacing: -1px;
color: #656c89;
text-align: left;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: lowercase;
background-color: #fdfaf6;
display: block;
padding: 5px 0px 5px 0px;
}
#footer {
width: 520px;
padding: 5px 0px 5px 0px;
margin: 0 0 0 100px;
font-size: 10pt;
letter-spacing: -1px;
color: #656c89;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: lowercase;
background-color: #fdfaf6;
}
.headerimage {position: relative;
background: url('INSERTIMAGEURLHERE');
width: 800px;
height: 200px;
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: #656c89;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-align: left;
font-size: 8pt;
letter-spacing: -1px;
display: block;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #bee2ee;
}
div#footer a, div#footer a:link, div#footer a:visited {
color: #656c89;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-decoration: none;
text-align: center;
font-size: 8pt;
letter-spacing: -1px;
}
div#header a:hover {
color: #bee2ee;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-align: left;
font-size: 8pt;
letter-spacing: -1px;
background-color: #F2F2F2;
display: block;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #656c89;
}
div#footer a:hover {
color: #bee2ee;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-align: center;
font-size: 8pt;
letter-spacing: -1px;
background-color: #F2F2F2;
}
/*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: #000000;
font-size: 9px;
text-align: justify;
}
.userpic {
background-color: #FFFFFF !important;
position: relative;
float: right;
padding: 5px;
margin: 5px;
z-index: 15;
}
.date {
display:none;
top: 5px;
color: #3e3d3d;
font-size: 10px;
padding-right: 10px;
text-align: left;
}
.subject {
padding: 10px;
color: #bee2ee;
font-size: 32px;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: right;
font-style: italic;
}
.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: "Tahoma", sans-serif;
color: #000000;
margin-top: 5px;
}
.currentlocation {
font-size: 10px;
color: #000000;}
.currentmood {
font-size: 10px;
font-size: 10px;
color: #000000;}
.currentmusic {
font-size: 10px;
font-size: 10px;
color: #000000;}
.ljtags {
font-size: 10px;
font-size: 10px;
color: #000000;
margin-top: 25px;}
.currentmood strong, .currentmusic strong, .currentlocation strong, .currentgroups { display: none; }
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
text-align: right;
padding: 0px 6px 0px 6px;
position: relative;
top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #656c89;
text-decoration: none;
}
div.comments a:hover {
color: #bee2ee;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
height: 20px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
background-color: #FFFFFF !important;
position: relative;
float: right;
padding: 5px;
margin: 5px;
z-index: 15;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.default
{
display:none;
}
.defaultuserpic img{
display:none;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
display: block;
color: #656c89;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #bee2ee;
}
div#sidebar a:hover {
color: #bee2ee;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #656c89;
background-color: #F2F2F2;
display: block;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
width: auto;
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
text-align: center;
background-color: transparent;
font-size: 10px;}
.sbarcalendarposts {
text-align: center;
color: #fdfdfd;
font-size: 10px;
background-color:#bee2ee;}
/*------------------------------------------------------------
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: #bee2ee;}
li.sbartitle
{
padding: 4px;
font-size: 10pt;
letter-spacing: 1px;
color: #bee2ee;
text-align: right;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: lowercase;
}
/*----------------------------------------------------
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 #656c89;
}
table.yeartable td.yearday {
text-align: center;
background-color: #FFFFFF;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
padding: 3px;
margin-top: 10px;
font-size: 8pt;
color: #656c89;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.userpiccomment {
position: relative;
padding: 10px;
background-color: #FFFFFF;
margin: 10px 10px 10px 10px;
z-index: 15;
float: left;
}
input, textarea, select {
border: 1px solid #bee2ee;
background-color: #f3f3f3;
padding: 2px;
}
textarea.textbox {width: 95% !important;}
.reply {
position: relative;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
text-align: justify;
background: #f3f3f3;
color: #bee2ee; }
.replytosubject {font-weight: bold;}
.commentreply {
position: relative;
margin: 10px;
color: #000000;
}
.commentbox {
background-color: #f3f3f3;
color: #000000;
font-size: 10px;
padding: 6px;
margin: 5px;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #656c89;
}
.datesubjectcomment a:hover {
color: #bee2ee;
}
.commentboxpartial {
background-color: #bee2ee;
padding: 5px;
margin: 10px;
}
.commentinfo {
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: right;
}
/*--------------------------------------------
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;}Spot of bother - Topbar/*---------------------------------------------------
Flexible Squares CSS [A spot of bother - Topbar version] by berserk_reality.livejournal.com
You can edit the CSS but don't forget to credit!!!
-----------------------------------------------------*/
body {
background-color:#000000;
text-align: justify;
color: f3f3f3;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 140%;
}
a, a:link, a:visited {
color: #773e46;
}
a:hover {
color: #f1c299;}
b, u, strong { color: #f1c299;}
i, s, em, strike { color: #f1c299;}
blockquote {
padding:8px;
margin: 7px;
color: #000000;
border: 1px dashed #ff8b8b;
background-color: #CDBEBA;
text-align: justify; }
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 {
margin-top: 0px;
text-align: justify;
float: right;
background-color: #fdfdfd;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#sidebar {
width: 750px;
padding-top: 5px;
margin-top: -5px;
font-size: 10px;
float: left;
text-align: justify;
background-color: #282828;
}
.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 {
width:750px;
padding: 5px 0px;
margin: 0px 0 5px 0px;
text-align: left;
font-size: 8pt;
letter-spacing: 1px;
color: #F6F3E7;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;s
text-transform: lowercase;
background-color: #282828;
-moz-border-radius-topleft: 3%;
-moz-border-radius-topright: 3%;
}
#footer {
width:750px;
padding: 5px 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: #282828;
margin-top: -15px;
margin-right: 240px;
-moz-border-radius-bottomleft: 3%;
-moz-border-radius-bottomright: 3%;
}
.headerimage {position: relative;
background: url('IMAGEURLHERE');
width: 750px;
height: 250px;
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: #F6F3E7;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-decoration: none;
text-align: center;
font-size: 8pt;
letter-spacing: 1px;
}
div#footer a, div#footer a:link, div#footer a:visited {
color: #F6F3E7;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-decoration: none;
text-align: center;
font-size: 8pt;
letter-spacing: 1px;
}
div#header a:hover, div#footer a:hover {
color: #f2f2f2;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-align: center;
font-size: 8pt;
letter-spacing: 1px;
}
/*title and subtitle*/
.title {
display: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: italic;
color: #773e46;
width: 210px;
margin: -5px 0px 0px -250px;
float: left;
padding-right: 0;
padding-left: 0px;
}
.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: #000000;
font-size: 9px;
text-align: justify;
}
.userpic {
background-color: #CDBEBA !important;
position: relative;
float: right;
padding: 5px;
margin: 5px;
z-index: 15;
text-align:center;
border: 1px dashed #ff8b8b;
}
.date {
display:none;
top: 5px;
color: #3e3d3d;
font-size: 10px;
padding-right: 10px;
text-align: left;
}
.subject {
padding: 5px;
color: #773e46;
font-size: 18px;
font-family: Geneva, Arial, Helvetica, sans-serif;
text-align: right;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #ff8b8b;
}
.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: "Tahoma", sans-serif;
color: #000000;
margin-top: 5px;
}
.currentlocation {
font-size: 10px;
color: #000000;}
.currentmood {
font-size: 10px;
font-size: 10px;
color: #000000;}
.currentmusic {
font-size: 10px;
font-size: 10px;
color: #000000;}
.ljtags {
font-size: 10px;
font-size: 10px;
color: #000000;
margin-top: 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: 12px;
font-style: italic;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #773e46;
text-decoration: none;
}
div.comments a:hover {
color: #f1c299;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
height: 20px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
background-color: #CDBEBA !important;
position: relative;
float: right;
padding: 5px;
margin: 5px;
z-index: 15;
text-align:center;
border: 1px dashed #ff8b8b;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.default
{
display:none;
}
.defaultuserpic img{
background-color: #CDBEBA;
margin: 3px 10px 3px 10px;
padding: 10px;
float: right;
border: 1px dashed #ff8b8b;
position: relative;
}
.sbarheader {
padding: 0 5px 0 5px;
}
.sbarbody {
padding: 0 5px 0 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
color: #FFFFFF;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #773e46;
text-decoration: none;
}
div#sidebar a:hover {
color: #f1c299;
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: 0;
margin: 20px 0;
list-style: none;
text-align: left;
}
li.sbaritem {
display: inline;
padding: 0 15px 0 0;
list-style: none;
}
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 #f1c299;
}
table.yeartable td.yearday {
text-align: center;
background-color: #FFFFFF;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
padding: 3px;
margin-top: 10px;
font-size: 8pt;
color: #773e46;
font-family: Geneva, Arial, Helvetica, sans-serif;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #ff8b8b;
}
.userpiccomment {
background-color: #CDBEBA !important;
position: relative;
float: right;
padding: 5px;
margin: 5px;
z-index: 15;
text-align:center;
border: 1px dashed #ff8b8b;
}
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: #F8F8EB;
color: #fdfdfd; }
.replytosubject {font-weight: bold;}
.commentreply {
position: relative;
margin: 10px;
color: #000000;
}
.commentbox {
background-color: transparent;
color: #000000;
font-size: 10px;
padding: 6px;
margin: 5px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: dashed;
border-bottom-style: dashed;
border-top-color: #ff8b8b;
border-bottom-color: #ff8b8b;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #773e46;
}
.datesubjectcomment a:hover {
color: #f1c299;
}
.commentboxpartial {
background-color: #f1c299;
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;}Spot of bother - Sidebar/*---------------------------------------------------
Flexible Squares CSS [A spot of bother - Sidebar version] by berserk_reality.livejournal.com
You can edit the CSS but don't forget to credit!!!
-----------------------------------------------------*/
body {
background-color:#000000;
text-align: justify;
color: f3f3f3;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 140%;
}
a, a:link, a:visited {
color: #773e46;
}
a:hover {
color: #f1c299;}
b, u, strong { color: #f1c299;}
i, s, em, strike { color: #f1c299;}
blockquote {
padding:8px;
margin: 7px;
color: #000000;
border: 1px dashed #ff8b8b;
background-color: #CDBEBA;
text-align: justify; }
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: 510px;
margin-top: 0px;
text-align: justify;
float: right;
background-color: #fdfdfd;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#sidebar {
width: 210px;
margin: 5px 0 0px 0;
padding: 5px 0 5px 0px;
font-size: 10px;
float: left;
text-align: justify;
background-color: #282828;
-moz-border-radius-topleft: 3%;
-moz-border-radius-topright: 3%;
-moz-border-radius-bottomleft: 3%;
-moz-border-radius-bottomright: 3%;
}
.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 {
width:510px;
padding: 5px 0px;
margin: 0px 0 0 240px;
text-align: left;
font-size: 8pt;
letter-spacing: 1px;
color: #F6F3E7;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;s
text-transform: lowercase;
background-color: #282828;
-moz-border-radius-topleft: 3%;
-moz-border-radius-topright: 3%;
}
#footer {
width:510px;
padding: 5px 0px;
margin: -15px 0 0 240px;
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: #282828;
-moz-border-radius-bottomleft: 3%;
-moz-border-radius-bottomright: 3%;
}
.headerimage {position: relative;
background: url('IMAGEURLHERE');
width: 750px;
height: 250px;
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: #F6F3E7;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-decoration: none;
text-align: center;
font-size: 8pt;
letter-spacing: 1px;
}
div#footer a, div#footer a:link, div#footer a:visited {
color: #F6F3E7;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-decoration: none;
text-align: center;
font-size: 8pt;
letter-spacing: 1px;
}
div#header a:hover, div#footer a:hover {
color: #f2f2f2;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-align: center;
font-size: 8pt;
letter-spacing: 1px;
}
/*title and subtitle*/
.title {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: italic;
color: #773e46;
width: 210px;
margin: -5px 0px 0px -250px;
float: left;
padding-right: 0;
padding-left: 0px;
}
.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: #000000;
font-size: 9px;
text-align: justify;
}
.userpic {
background-color: #CDBEBA !important;
position: relative;
float: right;
padding: 5px;
margin: 5px;
z-index: 15;
text-align:center;
border: 1px dashed #ff8b8b;
}
.date {
display:none;
top: 5px;
color: #3e3d3d;
font-size: 10px;
padding-right: 10px;
text-align: left;
}
.subject {
padding: 5px;
color: #773e46;
font-size: 18px;
font-family: Geneva, Arial, Helvetica, sans-serif;
text-align: right;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #ff8b8b;
}
.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: "Tahoma", sans-serif;
color: #000000;
margin-top: 5px;
}
.currentlocation {
font-size: 10px;
color: #000000;}
.currentmood {
font-size: 10px;
font-size: 10px;
color: #000000;}
.currentmusic {
font-size: 10px;
font-size: 10px;
color: #000000;}
.ljtags {
font-size: 10px;
font-size: 10px;
color: #000000;
margin-top: 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: 12px;
font-style: italic;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #773e46;
text-decoration: none;
}
div.comments a:hover {
color: #f1c299;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
height: 20px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
background-color: #CDBEBA !important;
position: relative;
float: right;
padding: 5px;
margin: 5px;
z-index: 15;
text-align:center;
border: 1px dashed #ff8b8b;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.default
{
display:none;
}
.defaultuserpic img{
display:none;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #773e46;
text-decoration: none;
}
div#sidebar a:hover {
color: #f1c299;
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
{
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 #f1c299;
}
table.yeartable td.yearday {
text-align: center;
background-color: #FFFFFF;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
padding: 3px;
margin-top: 10px;
font-size: 8pt;
color: #773e46;
font-family: Geneva, Arial, Helvetica, sans-serif;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #ff8b8b;
}
.userpiccomment {
background-color: #CDBEBA !important;
position: relative;
float: right;
padding: 5px;
margin: 5px;
z-index: 15;
text-align:center;
border: 1px dashed #ff8b8b;
}
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: #F8F8EB;
color: #fdfdfd; }
.replytosubject {font-weight: bold;}
.commentreply {
position: relative;
margin: 10px;
color: #000000;
}
.commentbox {
background-color: transparent;
color: #000000;
font-size: 10px;
padding: 6px;
margin: 5px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: dashed;
border-bottom-style: dashed;
border-top-color: #ff8b8b;
border-bottom-color: #ff8b8b;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #773e46;
}
.datesubjectcomment a:hover {
color: #f1c299;
}
.commentboxpartial {
background-color: #f1c299;
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
Additional Instructions for Topbar layouts
Go to "Sidebar" and put the following to No.. Show the page summary in the sidebar? & Show the calendar in the sidebar?
Then Click on Ordering and set The 'Default Userpic' first, 'Blurb' to second, 'Links' to third & 'Tabs' to fourth.
If you wanna add a header, there is already a header code in the CSS...Look for the code starting with .headerimage and change the URL to the URL of your header then change the Width and the Height to the width and height of your image.
That's all...Any questions, don't hesitate to ask ^_^...
Credit berserk_reality or heaven_smiles if using
Watch berserk_reality for more layouts!