[layout: flexible squares] #16 Twiglets
As promised! Will probably post the layout we're currently using on biconic tomorrow night. It'll probably look a little different since I've been tweaking it a lot since :)
Theme: Flexible Squares S2
Works with: paid, basic and plus
Tested on: Firefox, 1024x768 resolution and above
Includes: Comment pages, Sidebar, Currents, Archive
Disabled: Header navigation
>> larger image preview
Copy & Paste:
/*---------------------------------------------------
FLEXIBLE SQUARES S2
"Twiglets" by calixa @ biconic.livejournal.com
-----------------------------------------------------*/
body {
background-color: #8F826B;
background-image: url();
background-repeat: repeat-all;
color: #AF9F83;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
line-height: 160%;
margin: 0px 0 20px 0;
}
a, a:link, a:visited {
color: #9EE6D6;
text-decoration: none;
}
a:hover {
color: #8F826B;
text-decoration: none;
}
blockquote {
padding: 25px;
color: #AF9F83;
font-family: "arial", sans-serif;
border-left: #FF3F6F 4px solid;
border-right: #FF3F6F 1px solid;
}
code, kbd, pre, tt {
font-family: monospace;
}
#qrform table{ border: 0 !important;}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content {
width: 77%;
margin: auto;
padding: 0px;
}
#maincontent {
margin: 0px 260px 0px 0px;
}
#sidebar {
padding: 0px 0px 0px 0px;
margin: 5px auto 5px auto;
width: 250px;
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 -5px 0px;
padding: 0px 0px 10px 0px;
border-left: #E8F07D 0px solid;
background-color: #756C5C;
}
.subcontent:hover {
border-left: #E8F07D 0px solid;
}
.entry {
margin: 0px 0px 0px 0px;
padding: 105px 35px 25px 35px;
background-color: #756C5C;
color: #AF9F83;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
}
.datesubject {
margin: 0px 0px 0px 0px;
background-color: #756C5C;
padding: 20px 20px 0px 0px;
text-align: right;
border-bottom: #8F826B 1px solid;
}
.date {
margin-bottom: 0px;
color: #8F826B;
padding: 0px 10px 0px 0px;
font-family: "arial narrow", sans-serif;
font-size: 7pt;
}
.subject {
color: #FF3F6F;
padding: 0px 0px 10px 0px;
font-family: "times new roman", sans-serif;
text-transform: lowercase;
font-size: 20px;
line-height: 100%;
font-style: italic;
background-color: #756C5C;
}
.subject a, .subject a:link, .subject a:visited {
color: #D4CFBE;
}
.subject a:hover {
color: #D4CFBE;
}
.ljtags {
margin: 45px 0px 0px 0px;
padding: 8px 0px 0px 8px;
color: #9EE6D6;
font-size: 7pt;
line-height: 120%;
width: 300px;
text-align: left;
border-left: #AF9F83 4px solid;
}
.ljtags a:link,.ljtags a:visited {
color: #9EE6D6;
}
.ljtags a:hover {
color: #2EB094;
}
.entry ul li
{
padding-left: 5px;
margin-left: 10px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 10px;
}
/*------------------------------------------------------------
Userpics
-------------------------------------------------------------------------------*/
.userpic {
position: relative;
float: left;
padding: 10px 5px 10px 5px;
margin: 20px 10px 0px 35px;
text-align: center;
background-color: #756C5C !important;
border-bottom: #AF9F83 1px dashed;
font-size: 7pt;
z-index: 15;
}
.userpicfriends {
position: relative;
float: left;
padding: 8px 5px 5px 5px;
margin: 20px 10px 0px 35px;
text-align: center;
background-color: #756C5C !important;
border-bottom: #AF9F83 1px dashed;
font-size: 7pt;
z-index: 15;
}
.userpic img, .userpicfriends img {
border: #FFC78F 0px solid;
}
.userpic font, .userpicfriends font {
color: #9EE6D6;
}
/*---------------------------------------------------------------------
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: #9EE6D6;
padding: 8px 0px 0px 8px;
margin: -25px 0px 0px 0px;
border-left: #FF3F6F 4px solid;
}
.currentmood, .currentmusic, .currentlocation {
font-family: "arial", sans-serif;
font-size: 7pt;
color: #9EE6D6;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "arial", sans-serif;
font-size: 8pt;
color: #756C5C;
width: 300px;
padding: 8px 0px 0px 8px;
margin: -10px 0px 0px 0px;
border-left: #FF3F6F 4px solid;
position: relative;
text-align: left;
}
div.comments a, div.comments a:link, div.comments a:visited{
font-size: 8pt;
color: #8F826B;
text-transform: lowercase;
font-style: italic;
}
div.comments a:hover {
color: #FF3F6F;
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: 10px 10px 15px 10px;
margin-bottom: 10px;
background-color: #756C5C;
}
.sbarbody2 {
margin: -53px 0px 10px 0px;
padding: 30px;
background-color: #756C5C;
color: #AF9F83;
text-align: justify;
font-size: 8pt;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #9EE6D6;
text-transform: lowercase;
}
div#sidebar a:hover {
color: #9EE6D6;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin: 0px auto auto auto;
}
.sbarcalendar {
text-align: center;
padding: 5px;
color: #AF9F83;
font-size: 8pt;
}
.sbarcalendarposts {
border: #FF3F6F 1px solid;
text-align: center;
padding: 5px;
font-size: 8pt;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist {
padding: 0px 0px 10px 0px;
margin: 0px 10px 3px 10px;
list-style: none;
}
li.sbaritem {
padding: 5px 0px 0px 10px;
margin: 0px 0px 5px 0px;
list-style: none;
background-color: #756C5C;
border-left: #FF3F6F 4px solid;
}
li.sbaritem:hover {
border-left: #AF9F83 4px solid;
list-style: none;
}
li.sbartitle
{
display:none;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
li.viewing {
text-transform: lowercase;
font-style: italic;
padding: 20px;
background-color: #756C5C;
color: #AF9F83;
}
div#footer a, div#footer a:link, div#footer a:visited {
color: #9EE6D6;
background-color: #756C5C;
text-transform: lowercase;
padding: 20px;
}
div#footer a:hover {
color: #8F826B;
text-transform: lowercase;
}
#footer {
width: auto;
padding: 0px;
z-index: 100;
text-align: left;
clear: both;
margin: 0px 0px 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; background-color: #756C5C;
color: #AF9F83;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
background-color: #756C5C;
color: #AF9F83;
text-align: center;
padding: 5px;
}
table.yeartable td.yearday {
background-color: #756C5C;
color: #AF9F83;
text-align: center;
padding: 5px;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
margin: 0px 0px 0px 0px;
color: #AF9F83;
padding: 5px 0px 5px 10px;
font-family: "arial", sans-serif;
font-size: 11px;
line-height: 120%;
text-align: left;
font-style: italic;
border-bottom: #8F826B 1px solid;
}
.userpiccomment {
position: relative;
background-color: #756C5C !important;
border-bottom: #AF9F83 1px dashed;
padding: 0px 0px 10px 5px;
margin: -10px 0px 10px 10px;
z-index: 15;
float: right;
height: 70px;
width: 70px;
}
.box {
background-color: #756C5C;
color: #AF9F83;
padding: 20px;
clear: left;
margin: 0px 0px 15px 0px;
}
input, textarea {
border-left: #FF3F6F 4px solid;
border-right: #FF3F6F 0px solid;
border-top: #FF3F6F 0px solid;
border-bottom: #FF3F6F 0px solid;
color: #9EE6D6;
background-color: #8F826B;
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: #AF9F83;
}
.commentbox {
padding: 10px 10px 10px 10px;
background-color: #756C5C;
color: #AF9F83;
margin: 10px 0px 15px 0px;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #9EE6D6;
}
.datesubjectcomment a:hover {
color: #9EE6D6;
}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #756C5C;
}
.commentinfo {
margin-top: 0px;
width: 100%;
background-color: #756C5C;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.skiplinks {
text-align: left;
margin: -15px 0px -5px 0px;
padding: 8px 0px 8px 40px;
color: #8F826B;
background-color: #756C5C;
}
.skiplinks a, .skiplinks a:link, skiplinks a:visited {
color: #9EE6D6;
}
.skiplinks a:hover {
color: #8F826B;
text-decoration: none;
}
.clear {
height: 15px;
}
NOTE
You can add a header, though the correct size for it will depend on your resolution. This layout would probably look better without a header, but it's up to you.
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 and paste the code into the custom css textarea.
2. To add a header, find background-image:url(); under #header 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.
4. Please credit biconic if you use/edit :)
As always, if there are any bugs or if you have any problems feel free to leave a comment.
Theme: Flexible Squares S2
Works with: paid, basic and plus
Tested on: Firefox, 1024x768 resolution and above
Includes: Comment pages, Sidebar, Currents, Archive
Disabled: Header navigation
>> larger image preview
Copy & Paste:
/*---------------------------------------------------
FLEXIBLE SQUARES S2
"Twiglets" by calixa @ biconic.livejournal.com
-----------------------------------------------------*/
body {
background-color: #8F826B;
background-image: url();
background-repeat: repeat-all;
color: #AF9F83;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
line-height: 160%;
margin: 0px 0 20px 0;
}
a, a:link, a:visited {
color: #9EE6D6;
text-decoration: none;
}
a:hover {
color: #8F826B;
text-decoration: none;
}
blockquote {
padding: 25px;
color: #AF9F83;
font-family: "arial", sans-serif;
border-left: #FF3F6F 4px solid;
border-right: #FF3F6F 1px solid;
}
code, kbd, pre, tt {
font-family: monospace;
}
#qrform table{ border: 0 !important;}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content {
width: 77%;
margin: auto;
padding: 0px;
}
#maincontent {
margin: 0px 260px 0px 0px;
}
#sidebar {
padding: 0px 0px 0px 0px;
margin: 5px auto 5px auto;
width: 250px;
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 -5px 0px;
padding: 0px 0px 10px 0px;
border-left: #E8F07D 0px solid;
background-color: #756C5C;
}
.subcontent:hover {
border-left: #E8F07D 0px solid;
}
.entry {
margin: 0px 0px 0px 0px;
padding: 105px 35px 25px 35px;
background-color: #756C5C;
color: #AF9F83;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
}
.datesubject {
margin: 0px 0px 0px 0px;
background-color: #756C5C;
padding: 20px 20px 0px 0px;
text-align: right;
border-bottom: #8F826B 1px solid;
}
.date {
margin-bottom: 0px;
color: #8F826B;
padding: 0px 10px 0px 0px;
font-family: "arial narrow", sans-serif;
font-size: 7pt;
}
.subject {
color: #FF3F6F;
padding: 0px 0px 10px 0px;
font-family: "times new roman", sans-serif;
text-transform: lowercase;
font-size: 20px;
line-height: 100%;
font-style: italic;
background-color: #756C5C;
}
.subject a, .subject a:link, .subject a:visited {
color: #D4CFBE;
}
.subject a:hover {
color: #D4CFBE;
}
.ljtags {
margin: 45px 0px 0px 0px;
padding: 8px 0px 0px 8px;
color: #9EE6D6;
font-size: 7pt;
line-height: 120%;
width: 300px;
text-align: left;
border-left: #AF9F83 4px solid;
}
.ljtags a:link,.ljtags a:visited {
color: #9EE6D6;
}
.ljtags a:hover {
color: #2EB094;
}
.entry ul li
{
padding-left: 5px;
margin-left: 10px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 10px;
}
/*------------------------------------------------------------
Userpics
-------------------------------------------------------------------------------*/
.userpic {
position: relative;
float: left;
padding: 10px 5px 10px 5px;
margin: 20px 10px 0px 35px;
text-align: center;
background-color: #756C5C !important;
border-bottom: #AF9F83 1px dashed;
font-size: 7pt;
z-index: 15;
}
.userpicfriends {
position: relative;
float: left;
padding: 8px 5px 5px 5px;
margin: 20px 10px 0px 35px;
text-align: center;
background-color: #756C5C !important;
border-bottom: #AF9F83 1px dashed;
font-size: 7pt;
z-index: 15;
}
.userpic img, .userpicfriends img {
border: #FFC78F 0px solid;
}
.userpic font, .userpicfriends font {
color: #9EE6D6;
}
/*---------------------------------------------------------------------
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: #9EE6D6;
padding: 8px 0px 0px 8px;
margin: -25px 0px 0px 0px;
border-left: #FF3F6F 4px solid;
}
.currentmood, .currentmusic, .currentlocation {
font-family: "arial", sans-serif;
font-size: 7pt;
color: #9EE6D6;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "arial", sans-serif;
font-size: 8pt;
color: #756C5C;
width: 300px;
padding: 8px 0px 0px 8px;
margin: -10px 0px 0px 0px;
border-left: #FF3F6F 4px solid;
position: relative;
text-align: left;
}
div.comments a, div.comments a:link, div.comments a:visited{
font-size: 8pt;
color: #8F826B;
text-transform: lowercase;
font-style: italic;
}
div.comments a:hover {
color: #FF3F6F;
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: 10px 10px 15px 10px;
margin-bottom: 10px;
background-color: #756C5C;
}
.sbarbody2 {
margin: -53px 0px 10px 0px;
padding: 30px;
background-color: #756C5C;
color: #AF9F83;
text-align: justify;
font-size: 8pt;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #9EE6D6;
text-transform: lowercase;
}
div#sidebar a:hover {
color: #9EE6D6;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin: 0px auto auto auto;
}
.sbarcalendar {
text-align: center;
padding: 5px;
color: #AF9F83;
font-size: 8pt;
}
.sbarcalendarposts {
border: #FF3F6F 1px solid;
text-align: center;
padding: 5px;
font-size: 8pt;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist {
padding: 0px 0px 10px 0px;
margin: 0px 10px 3px 10px;
list-style: none;
}
li.sbaritem {
padding: 5px 0px 0px 10px;
margin: 0px 0px 5px 0px;
list-style: none;
background-color: #756C5C;
border-left: #FF3F6F 4px solid;
}
li.sbaritem:hover {
border-left: #AF9F83 4px solid;
list-style: none;
}
li.sbartitle
{
display:none;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
li.viewing {
text-transform: lowercase;
font-style: italic;
padding: 20px;
background-color: #756C5C;
color: #AF9F83;
}
div#footer a, div#footer a:link, div#footer a:visited {
color: #9EE6D6;
background-color: #756C5C;
text-transform: lowercase;
padding: 20px;
}
div#footer a:hover {
color: #8F826B;
text-transform: lowercase;
}
#footer {
width: auto;
padding: 0px;
z-index: 100;
text-align: left;
clear: both;
margin: 0px 0px 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; background-color: #756C5C;
color: #AF9F83;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
background-color: #756C5C;
color: #AF9F83;
text-align: center;
padding: 5px;
}
table.yeartable td.yearday {
background-color: #756C5C;
color: #AF9F83;
text-align: center;
padding: 5px;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
margin: 0px 0px 0px 0px;
color: #AF9F83;
padding: 5px 0px 5px 10px;
font-family: "arial", sans-serif;
font-size: 11px;
line-height: 120%;
text-align: left;
font-style: italic;
border-bottom: #8F826B 1px solid;
}
.userpiccomment {
position: relative;
background-color: #756C5C !important;
border-bottom: #AF9F83 1px dashed;
padding: 0px 0px 10px 5px;
margin: -10px 0px 10px 10px;
z-index: 15;
float: right;
height: 70px;
width: 70px;
}
.box {
background-color: #756C5C;
color: #AF9F83;
padding: 20px;
clear: left;
margin: 0px 0px 15px 0px;
}
input, textarea {
border-left: #FF3F6F 4px solid;
border-right: #FF3F6F 0px solid;
border-top: #FF3F6F 0px solid;
border-bottom: #FF3F6F 0px solid;
color: #9EE6D6;
background-color: #8F826B;
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: #AF9F83;
}
.commentbox {
padding: 10px 10px 10px 10px;
background-color: #756C5C;
color: #AF9F83;
margin: 10px 0px 15px 0px;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #9EE6D6;
}
.datesubjectcomment a:hover {
color: #9EE6D6;
}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #756C5C;
}
.commentinfo {
margin-top: 0px;
width: 100%;
background-color: #756C5C;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.skiplinks {
text-align: left;
margin: -15px 0px -5px 0px;
padding: 8px 0px 8px 40px;
color: #8F826B;
background-color: #756C5C;
}
.skiplinks a, .skiplinks a:link, skiplinks a:visited {
color: #9EE6D6;
}
.skiplinks a:hover {
color: #8F826B;
text-decoration: none;
}
.clear {
height: 15px;
}
NOTE
You can add a header, though the correct size for it will depend on your resolution. This layout would probably look better without a header, but it's up to you.
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 and paste the code into the custom css textarea.
2. To add a header, find background-image:url(); under #header 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.
4. Please credit biconic if you use/edit :)
As always, if there are any bugs or if you have any problems feel free to leave a comment.