I love these colours together, especially the oranges. Mmmm, orange.
Theme: Flexible Squares S2
Works with: paid, basic and plus
Tested on: Firefox & IE* (see note below), 1024x768 resolution and above
Includes: Comment pages, Sidebar, Currents, Archive
Disabled: Header navigation
>>
larger image preview Copy & Paste:
/*---------------------------------------------------
FLEXIBLE SQUARES S2
"Mandarin Cubed" by calixa @ biconic.livejournal.com
-----------------------------------------------------*/
body {
background-color: #D4D3AE;
background-image: url();
background-repeat: repeat-all;
color: #BF6217;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
line-height: 170%;
margin: 10px 0 0px 0;
}
a, a:link, a:visited {
color: #FFE7CF;
text-decoration: none;
}
a:hover {
color: #ffffff;
text-decoration: none;
}
blockquote {
padding: 10px;
color: #BF6217;
border: #FFC78F 1px solid;
background-color: transparent;
}
blockquote:hover {
}
code, kbd, pre, tt {
font-family: monospace;
}
#qrform table{ border: 0 !important;}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content {
width: 85%;
margin: auto;
padding: 0px;
}
#maincontent {
margin: 0px 323px -20px 0px;
}
#sidebar {
padding: 20px 0px 10px 0px;
margin: 0px auto 5px auto;
background-color: #F7A765;
border: #E1E4CF 5px solid;
width: 300px;
float: right;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: left;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header; remember to change the width and height to fit your header image.
--------------------------------------------------------------------------------*/
#header {
width: 0px;
height: 0px;
background-image:url(yoururlhere);
margin-bottom: 30px;}
.title {
display:none;
}
.subtitle{
display:none;
}
ul.navheader
{
display:none;
}
ul.navheader li {
display:none;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
margin: 0px 0px 0px 0px;
padding: 25px;
border: #E1E4CF 5px solid;
background-color: #F7A765;
}
.entry {
margin: 0px 0px 0px 0px;
padding: 15px 0px 0px 10px;
background-color: #F7A765;
color: #BF6217;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
}
.datesubject {
margin: 0px 130px 0px 0px;
background-color: #F7A765;
padding: 0px 0px 5px 0px;
}
.date {
margin-bottom: 2px;
color: #BF6217;
font-family: "arial narrow", sans-serif;
font-size: 7pt;
}
.subject {
color: #ffffff;
padding: 5px 0px 5px 10px;
font-family: "arial", sans-serif;
font-size: 11px;
line-height: 120%;
text-align: left;
font-style: italic;
background-color: #FFB66F;
border-left: #F2852C 5px solid;
}
.subject:hover {
border-left: #BF6217 5px solid;
}
.subject a, .subject a:link, .subject a:visited {
color: #ffffff;
}
.subject a:hover {
color: #ffffff;
}
.ljtags {
border: #FFC78F 1px solid;
margin: 45px 0px -5px 0px;
padding: 5px 10px 5px 5px;
color: #FFD6AF;
font-size: 7pt;
line-height: 120%;
width: 300px;
text-align: left;
}
.ljtags a:link,.ljtags a:visited {
color: #FFD6AF;
}
.ljtags a:hover {
color: #BF6217;
}
.entry ul li
{
padding-left: 5px;
margin-left: 10px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 10px;
}
/*------------------------------------------------------------
Userpics
-------------------------------------------------------------------------------*/
.userpic {
position: relative;
float: right;
padding: 8px;
margin: 0px 0px 0px 10px;
text-align: center;
background-color: #F7A765 !important;
border: #FFC78F 1px solid;
font-size: 7pt;
z-index: 15;
}
.userpicfriends {
position: relative;
float: right;
padding: 8px 8px 0px 8px;
margin: 0px 0px 0px 10px;
text-align: center;
background-color: #F7A765 !important;
border: #FFC78F 1px solid;
font-size: 7pt;
z-index: 15;
}
.userpic img, .userpicfriends img {
border: #FFC78F 0px solid;
}
.userpic font, .userpicfriends font {
color: #FFD6AF;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents {
font-family: "arial", sans-serif;
font-size: 8pt;
line-height: 120%;
width: 300px;
text-align: left;
color: #FFD6AF;
border: #FFC78F 1px solid;
padding: 5px 10px 5px 5px;
margin: -20px 0px -10px 0px;
}
.currentmood, .currentmusic, .currentlocation {
font-family: "arial", sans-serif;
font-size: 7pt;
color: #FFD6AF;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "arial", sans-serif;
font-size: 8pt;
color: #F7A765;
margin: 0px 0px 0px 0px;
padding: 5px 0px 0px 10px;
position: relative;
text-align: right;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #FFC78F;
text-transform: lowercase;
font-style: italic;
}
div.comments a:hover {
color: #BF6217;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 0px;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
display:none;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 0px 0px 0px;
}
.sbarbody2 {
margin: 0px 30px 0px 30px;
padding: 10px 10px 10px 10px;
background-color: #F7A765;
border: #FFC78F 1px solid;
color: #BF6217;
text-align: justify;
font-size: 8pt;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #FFE7CF;
}
div#sidebar a:hover {
color: #F2852C;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin:auto;
}
.sbarcalendar {
text-align: center;
padding: 8px;
border: #FFC78F 1px solid;
color: #BF6217;
font-size: 7pt;
}
.sbarcalendarposts {
border: #FFC78F 1px solid;
text-align: center;
padding: 8px;
font-size: 7pt;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist {
padding: 0px 10px 0px 10px;
margin: 20px 20px 3px 20px;
list-style: none;
}
li.sbaritem {
padding: 3px 0px 3px 10px;
margin: 0px 0px 2px 0px;
list-style: none;
background-color: #FFB66F;
border-left: #F2852C 5px solid;
}
li.sbaritem:hover {
border-left: #BF6217 5px solid;
list-style: none;
}
li.sbartitle
{
display:none;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
li.viewing {
color: #BF6217;
text-transform: lowercase;
padding: 0px 10px 0px 0px;}
div#footer a, div#footer a:link, div#footer a:visited {
color: #FFD6AF;
text-transform: lowercase;
font-style: italic;
padding: 0px 10px 0px 0px;
}
div#footer a:hover {
color: #ffffff;
text-transform: lowercase;
font-style: italic;
padding: 0px 10px 0px 0px;}
#footer {
width: auto;
padding: 10px;
z-index: 100;
text-align: center;
clear: both;
border: #E1E4CF 5px solid;
background-color: #F7A765;
margin: 0px 320px 0px 0px;}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0px 0px 0 0px;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/
ul.year {
text-align: left;
padding-bottom: 0px;
color: #615748;
}
ul.year li {
display: inline;
}
table.yeartable {
margin: 0px;
padding: 20px;
border: #E1E4CF 5px solid;
background-color: #F7A765;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
background-color: #FFC78F;
text-align: center;
padding: 5px;
}
table.yeartable td.yearday {
background-color: #FFC78F;
text-align: center;
padding: 5px;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
margin: 0px 110px 0px 0px;
color: #ffffff;
padding: 5px 0px 5px 10px;
font-family: "arial", sans-serif;
font-size: 11px;
line-height: 120%;
text-align: left;
font-style: italic;
background-color: #FFC78F;
border-left: #F2852C 5px solid;
}
.userpiccomment {
position: relative;
border: #FFC78F 1px solid;
background-color: #F7A765;
padding: 5px;
margin: -10px -120px 10px 10px;
z-index: 15;
float: right;
}
.box {
border: #E1E4CF 5px solid;
background-color: #F7A765;
padding: 30px;
clear: left;
margin: 0px 0px 15px 0px;
}
input, textarea {
border: #FFC78F 1px solid;
color: #BF6217;
background-color: #F7A765;
font-family: "arial", sans-serif;
font-size: 8pt;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
padding: 30px 0px 50px 0px;
font-size: 8pt;
font-family: "arial", sans-serif;
color: #BF6217;
}
.commentbox {
padding: 10px 20px 10px 10px;
background-color: #F7A765;
border: #FFC78F 1px solid;
margin: 10px 0px 15px 0px;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ffffff;
}
.datesubjectcomment a:hover {
color: #ffffff;
}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #F7F3EA;
}
.commentinfo {
margin-top: 0px;
width: 100%;
background-color: #F7F3EA;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.skiplinks {
text-align: center;
margin: -15px 0px 0px 0px;
padding: 5px;
color: #F7A765;
border: #E1E4CF 5px solid;
background-color: #F7A765;
}
.skiplinks a, .skiplinks a:link, skiplinks a:visited {
color: #FFC78F;
}
.clear {
height: 15px;
}
NOTE
You can add a header, though the correct size for it will depend on your resolution.
Since there is no header navigation bar, you'll have to add your navigation links (recent entries, profile, archive, etc) to the sidebar links list or blurb.
Installation Instructions
1. Under
customize css, set all the drop down boxes to no.
2. To add a header, find background-image:url(); under .headerimage in the css and add your image url between the brackets. Also make sure to change the dimensions of the width and height (width: 800px; height: 0px;) to whatever size your image is.
3. Feel free to edit the css as much as you want, but if you mess up don't ask me to fix it.
4. Please credit
biconic if you use :)
If there are any bugs or if you have any problems feel free to leave a comment and I'll get to it as soon as I can.