layout: two versions
I made a layout available in two versions. It's basically the same code with a different background and a few different colors. The background is by 77words (I edited it a bit to fit the layout). It works well with a header. I recommend checking the bigger preview, as the smaller preview looks a bit weird after resizing.
VERSION 1
Bigger Image - Live Preview (Temp)
VERSION 2
Bigger Image - No Live Preview
Instructions
1. Go to Select Journal Style and choose the Flexible Squares theme.
2. Choose the following Page Setup: 2 Column (sidebar on the right)
3. Now go to Customize Journal Style.
4. Go to Custom CSS and set all drop downs to No.
5. Copy and paste the following code in the Custom Stylesheet area the version you prefer:
VERSION 1
/* Cleaned CSS: */
/*---------------------------------------------------
S2 Flexible Squares
Layout by Lucia dejaentendu810
http://community.livejournal.com/ablessedcurse/
Pattern by http://77words.livejournal.com/
Feel free to edit!
-----------------------------------------------------*/
body {
background-color: #979797;
background-image: url(http://i34.tinypic.com/2z8uss1.jpg);
text-align: center;
color: #A0A0A0;
font-family: "georgia", sans-serif;
font-size: 10px;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #92A6D9;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: underline;
}
td, p {
font-size: 10px;
}
blockquote {
font-size: 10px;
font-family: "georgia", sans-serif;
background-color: #DFDFDF;
color: #A0A0A0;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 60%;
margin-left: auto; margin-right: auto;
background-color: #FFFFFF;
border-width: 0px;
border-style: solid;
border-color: #999999;
padding: 15px;
}
#maincontent {
margin-top: 15px;
font-family: "georgia", sans-serif;
font-size: 10px;
background-color: #FFFFFF;
color: #A0A0A0;
border-style: solid;
border-color: #999999;
border-width: 0px;
margin-right: 190px;
text-align: left;
}
#sidebar {
padding-top: 15px;
margin-top: 15px;
background-color: #FFFFFF;
border-color: #999999;
border-width: 0px;
border-style: solid;
font-size: 10px;
font-family: "georgia", sans-serif;
color: #A0A0A0;
width: 150px;
float: right;
text-align: justify;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 100%;
padding: 10px 0px 10px 0px;
margin-bottom: 20px;
text-align: center;
font-family: "arial";
font-size: 25px;
font-weight: bold;
font-style: italic;
letter-spacing: 2px;
border-style: solid;
border-color: #E2E2E2;
border-width: 15px;
border-right: none;
border-left: none;
background-color: #FFFFFF;
color: #313131;
text-transform: lowercase;
}
.headerimage {
/* for formatting header image */
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #92A6D9;
}
div#header a:hover, div#footer a:hover {
color: #FFFFFF;
text-decoration: none;
}
/*title and subtitle*/
.title {
display: none;
}
.subtitle{
display: none;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
}
.entry {
margin: 0px 0px 10px 10px;
padding: 10px;
background-color: #FFFFFF;
color: #A0A0A0;
font-family: "georgia", sans-serif;
font-size: 10px;
text-align: justify;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}
.userpic {
position: relative;
float: left;
background-color: #FFFFFF;
padding: 5px;
margin: 10px 10px 20px -136px;
z-index: 15;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}
.date {
line-height: 200%;
top: 5px;
color: #DADADA;
font-family: "georgia", sans-serif;
font-size: 15px;
text-align: center;
border-style: italic;
}
.subject {
font-weight: bold;
font-style: italic;
padding: 5px;
color: #92A6D9;
font-family: "georgia", sans-serif;
font-size: 25px;
}
.subject a, .subject a:link, .subject a:visited {
color: #92A6D9;
}
.subject a:hover {
color: #000000;
}
.datesubject {
background-color: #FFFFFF;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 110px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 110px;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents, .currentmood, .currentmusic {
font-family: "Arial", sans-serif;
font-size: 9px;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "georgia", sans-serif;
font-size: 16px;
text-align: right;
background-color: #FFFFFF;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #92A6D9;
}
div.comments a:hover {
color: #000000;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 35px;
background-color: #E2E2E2;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: relative;
float: left;
padding: 5px;
text-align: center;
border-style: solid;
border-width: 0px;
border-color: #EDEBEB;
font-family: "Arial", sans-serif;
font-size: 10px;
z-index: 15;
background-color: #FFFFFF;
margin: 10px 10px 20px -136px;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
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: #92A6D9;
}
div#sidebar a:hover {
color: #000000;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #B5B5B5;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 10px;
}
.sbarcalendarposts {
border-color: #B5B5B5;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 10px;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
padding-left: 15px;
list-style: none;
border-style: solid;
border-width: 1px;
border-color: #999999;
border-top: none;
border-right: none;
border-left: none;
background-color: #FFFFFF;
margin-bottom: 10px;
margin-top: 20px;
color: #92A6D9;
font-family: "georgia", sans-serif;
font-size: 16px;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
text-align: center;
font-family: "arial", sans-serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
letter-spacing: 1px;
background-color: #FFFFFF;
color: #313131;
border-color: #999999;
border-width: 0px;
border-style: solid;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
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 {
border-width: 1px;
border-style: solid;
border-color: #999999;
}
table.yeartable td.yearday {
background-color: #E2E2E2;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
background-color: #E2E2E2;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border-width: 0px;
border-style: solid;
border-color: #d4dce8;
background-color: #E2E2E2;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}
.box {
border-style: solid;
border-width: 0px 0px 0px 0px;
border-color: #999999;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #E2E2E2;
color: #A0A0A0;
font-family: "georgia", sans-serif;
font-size: 10px;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "georgia", sans-serif;
font-size: 10px;
line-height: 125%;
background-color: #FFFFFF;
color: #A0A0A0;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "georgia", sans-serif;
color: #A0A0A0;
}
.commentbox {
border-color: #E2E2E2;
border-width: 0px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #FFFFFF;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #92A6D9;
}
.datesubjectcomment a:hover {
color: #000000;
}
.commentboxpartial {
border-color: #999999;
border-width: 0px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #E2E2E2;
}
.commentinfo {
background-color: #E2E2E2;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 15px;
}
or VERSION 2
/* Cleaned CSS: */
/*---------------------------------------------------
S2 Flexible Squares
Layout by Lucia dejaentendu810
http://community.livejournal.com/ablessedcurse/
Pattern by http://77words.livejournal.com/
Feel free to edit!
-----------------------------------------------------*/
body {
background-color: #979797;
background-image: url(http://i36.tinypic.com/k55px5.jpg);
text-align: center;
color: #949393;
font-family: "georgia", sans-serif;
font-size: 10px;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #536184;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: underline;
}
td, p {
font-size: 10px;
}
blockquote {
font-size: 10px;
font-family: "georgia", sans-serif;
background-color: #DFDFDF;
color: #949393;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 60%;
margin-left: auto; margin-right: auto;
background-color: #FFFFFF;
border-width: 0px;
border-style: solid;
border-color: #999999;
padding: 15px;
}
#maincontent {
margin-top: 15px;
font-family: "georgia", sans-serif;
font-size: 10px;
background-color: #FFFFFF;
color: #949393;
border-style: solid;
border-color: #999999;
border-width: 0px;
margin-right: 190px;
text-align: left;
}
#sidebar {
padding-top: 15px;
margin-top: 15px;
background-color: #FFFFFF;
border-color: #999999;
border-width: 0px;
border-style: solid;
font-size: 10px;
font-family: "georgia", sans-serif;
color: #949393;
width: 150px;
float: right;
text-align: justify;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 100%;
padding: 10px 0px 10px 0px;
margin-bottom: 20px;
text-align: center;
font-family: "arial";
font-size: 25px;
font-weight: bold;
font-style: italic;
letter-spacing: 2px;
border-style: solid;
border-color: #E2E2E2;
border-width: 15px;
border-right: none;
border-left: none;
background-color: #FFFFFF;
color: #313131;
text-transform: lowercase;
}
.headerimage {
/* for formatting header image */
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #536184;
}
div#header a:hover, div#footer a:hover {
color: #FFFFFF;
text-decoration: none;
}
/*title and subtitle*/
.title {
display: none;
}
.subtitle{
display: none;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
}
.entry {
margin: 0px 0px 10px 10px;
padding: 10px;
background-color: #FFFFFF;
color: #949393;
font-family: "georgia", sans-serif;
font-size: 10px;
text-align: justify;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}
.userpic {
position: relative;
float: left;
background-color: #FFFFFF;
padding: 5px;
margin: 10px 10px 20px -136px;
z-index: 15;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}
.date {
line-height: 200%;
top: 5px;
color: #DADADA;
font-family: "georgia", sans-serif;
font-size: 15px;
text-align: center;
border-style: italic;
}
.subject {
font-weight: bold;
font-style: italic;
padding: 5px;
color: #536184;
font-family: "georgia", sans-serif;
font-size: 25px;
}
.subject a, .subject a:link, .subject a:visited {
color: #536184;
}
.subject a:hover {
color: #000000;
}
.datesubject {
background-color: #FFFFFF;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 110px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 110px;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents, .currentmood, .currentmusic {
font-family: "Arial", sans-serif;
font-size: 9px;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "georgia", sans-serif;
font-size: 16px;
text-align: right;
background-color: #FFFFFF;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #536184;
}
div.comments a:hover {
color: #000000;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 35px;
background-color: #E2E2E2;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: relative;
float: left;
padding: 5px;
text-align: center;
border-style: solid;
border-width: 0px;
border-color: #EDEBEB;
font-family: "Arial", sans-serif;
font-size: 10px;
z-index: 15;
background-color: #FFFFFF;
margin: 10px 10px 20px -136px;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
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: #536184;
}
div#sidebar a:hover {
color: #000000;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #B5B5B5;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 10px;
}
.sbarcalendarposts {
border-color: #B5B5B5;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 10px;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
padding-left: 15px;
list-style: none;
border-style: solid;
border-width: 1px;
border-color: #999999;
border-top: none;
border-right: none;
border-left: none;
background-color: #FFFFFF;
margin-bottom: 10px;
margin-top: 20px;
color: #536184;
font-family: "georgia", sans-serif;
font-size: 16px;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
text-align: center;
font-family: "arial", sans-serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
letter-spacing: 1px;
background-color: #FFFFFF;
color: #313131;
border-color: #999999;
border-width: 0px;
border-style: solid;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
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 {
border-width: 1px;
border-style: solid;
border-color: #999999;
}
table.yeartable td.yearday {
background-color: #E2E2E2;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
background-color: #E2E2E2;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border-width: 0px;
border-style: solid;
border-color: #d4dce8;
background-color: #E2E2E2;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}
.box {
border-style: solid;
border-width: 0px 0px 0px 0px;
border-color: #999999;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #E2E2E2;
color: #949393;
font-family: "georgia", sans-serif;
font-size: 10px;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "georgia", sans-serif;
font-size: 10px;
line-height: 125%;
background-color: #FFFFFF;
color: #949393;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "georgia", sans-serif;
color: #949393;
}
.commentbox {
border-color: #E2E2E2;
border-width: 0px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #FFFFFF;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #536184;
}
.datesubjectcomment a:hover {
color: #000000;
}
.commentboxpartial {
border-color: #999999;
border-width: 0px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #E2E2E2;
}
.commentinfo {
background-color: #E2E2E2;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 15px;
}
And that's it!
It should work fine in all browsers, but I haven't tested it on any other than IE.
You can add a header image by inserting this in the Header section:
.headerimage {
position: relative;
width: 500px; /* Width of the banner, in pixels */
height: 220px; /* Height of the banner, in pixels */
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url(""); /* Header image URL */
background-repeat: no-repeat;
}
Let me know if there's any trouble, but it should all work just fine.
Feel free to edit, but don't claim it as your own.
Credit to ablessedcurse is much appreciated.
Please remember the credit 77words for the background.
Comments make me smile!
VERSION 1
Bigger Image - Live Preview (Temp)
VERSION 2
Bigger Image - No Live Preview
Instructions
1. Go to Select Journal Style and choose the Flexible Squares theme.
2. Choose the following Page Setup: 2 Column (sidebar on the right)
3. Now go to Customize Journal Style.
4. Go to Custom CSS and set all drop downs to No.
5. Copy and paste the following code in the Custom Stylesheet area the version you prefer:
VERSION 1
/* Cleaned CSS: */
/*---------------------------------------------------
S2 Flexible Squares
Layout by Lucia dejaentendu810
http://community.livejournal.com/ablessedcurse/
Pattern by http://77words.livejournal.com/
Feel free to edit!
-----------------------------------------------------*/
body {
background-color: #979797;
background-image: url(http://i34.tinypic.com/2z8uss1.jpg);
;){kind=link}
text-align: center;
color: #A0A0A0;
font-family: "georgia", sans-serif;
font-size: 10px;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #92A6D9;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: underline;
}
td, p {
font-size: 10px;
}
blockquote {
font-size: 10px;
font-family: "georgia", sans-serif;
background-color: #DFDFDF;
color: #A0A0A0;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 60%;
margin-left: auto; margin-right: auto;
background-color: #FFFFFF;
border-width: 0px;
border-style: solid;
border-color: #999999;
padding: 15px;
}
#maincontent {
margin-top: 15px;
font-family: "georgia", sans-serif;
font-size: 10px;
background-color: #FFFFFF;
color: #A0A0A0;
border-style: solid;
border-color: #999999;
border-width: 0px;
margin-right: 190px;
text-align: left;
}
#sidebar {
padding-top: 15px;
margin-top: 15px;
background-color: #FFFFFF;
border-color: #999999;
border-width: 0px;
border-style: solid;
font-size: 10px;
font-family: "georgia", sans-serif;
color: #A0A0A0;
width: 150px;
float: right;
text-align: justify;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 100%;
padding: 10px 0px 10px 0px;
margin-bottom: 20px;
text-align: center;
font-family: "arial";
font-size: 25px;
font-weight: bold;
font-style: italic;
letter-spacing: 2px;
border-style: solid;
border-color: #E2E2E2;
border-width: 15px;
border-right: none;
border-left: none;
background-color: #FFFFFF;
color: #313131;
text-transform: lowercase;
}
.headerimage {
/* for formatting header image */
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #92A6D9;
}
div#header a:hover, div#footer a:hover {
color: #FFFFFF;
text-decoration: none;
}
/*title and subtitle*/
.title {
display: none;
}
.subtitle{
display: none;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
}
.entry {
margin: 0px 0px 10px 10px;
padding: 10px;
background-color: #FFFFFF;
color: #A0A0A0;
font-family: "georgia", sans-serif;
font-size: 10px;
text-align: justify;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}
.userpic {
position: relative;
float: left;
background-color: #FFFFFF;
padding: 5px;
margin: 10px 10px 20px -136px;
z-index: 15;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}
.date {
line-height: 200%;
top: 5px;
color: #DADADA;
font-family: "georgia", sans-serif;
font-size: 15px;
text-align: center;
border-style: italic;
}
.subject {
font-weight: bold;
font-style: italic;
padding: 5px;
color: #92A6D9;
font-family: "georgia", sans-serif;
font-size: 25px;
}
.subject a, .subject a:link, .subject a:visited {
color: #92A6D9;
}
.subject a:hover {
color: #000000;
}
.datesubject {
background-color: #FFFFFF;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 110px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 110px;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents, .currentmood, .currentmusic {
font-family: "Arial", sans-serif;
font-size: 9px;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "georgia", sans-serif;
font-size: 16px;
text-align: right;
background-color: #FFFFFF;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #92A6D9;
}
div.comments a:hover {
color: #000000;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 35px;
background-color: #E2E2E2;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: relative;
float: left;
padding: 5px;
text-align: center;
border-style: solid;
border-width: 0px;
border-color: #EDEBEB;
font-family: "Arial", sans-serif;
font-size: 10px;
z-index: 15;
background-color: #FFFFFF;
margin: 10px 10px 20px -136px;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
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: #92A6D9;
}
div#sidebar a:hover {
color: #000000;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #B5B5B5;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 10px;
}
.sbarcalendarposts {
border-color: #B5B5B5;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 10px;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
padding-left: 15px;
list-style: none;
border-style: solid;
border-width: 1px;
border-color: #999999;
border-top: none;
border-right: none;
border-left: none;
background-color: #FFFFFF;
margin-bottom: 10px;
margin-top: 20px;
color: #92A6D9;
font-family: "georgia", sans-serif;
font-size: 16px;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
text-align: center;
font-family: "arial", sans-serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
letter-spacing: 1px;
background-color: #FFFFFF;
color: #313131;
border-color: #999999;
border-width: 0px;
border-style: solid;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
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 {
border-width: 1px;
border-style: solid;
border-color: #999999;
}
table.yeartable td.yearday {
background-color: #E2E2E2;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
background-color: #E2E2E2;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border-width: 0px;
border-style: solid;
border-color: #d4dce8;
background-color: #E2E2E2;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}
.box {
border-style: solid;
border-width: 0px 0px 0px 0px;
border-color: #999999;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #E2E2E2;
color: #A0A0A0;
font-family: "georgia", sans-serif;
font-size: 10px;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "georgia", sans-serif;
font-size: 10px;
line-height: 125%;
background-color: #FFFFFF;
color: #A0A0A0;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "georgia", sans-serif;
color: #A0A0A0;
}
.commentbox {
border-color: #E2E2E2;
border-width: 0px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #FFFFFF;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #92A6D9;
}
.datesubjectcomment a:hover {
color: #000000;
}
.commentboxpartial {
border-color: #999999;
border-width: 0px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #E2E2E2;
}
.commentinfo {
background-color: #E2E2E2;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 15px;
}
or VERSION 2
/* Cleaned CSS: */
/*---------------------------------------------------
S2 Flexible Squares
Layout by Lucia dejaentendu810
http://community.livejournal.com/ablessedcurse/
Pattern by http://77words.livejournal.com/
Feel free to edit!
-----------------------------------------------------*/
body {
background-color: #979797;
background-image: url(http://i36.tinypic.com/k55px5.jpg);
;){kind=link}
text-align: center;
color: #949393;
font-family: "georgia", sans-serif;
font-size: 10px;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #536184;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: underline;
}
td, p {
font-size: 10px;
}
blockquote {
font-size: 10px;
font-family: "georgia", sans-serif;
background-color: #DFDFDF;
color: #949393;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 60%;
margin-left: auto; margin-right: auto;
background-color: #FFFFFF;
border-width: 0px;
border-style: solid;
border-color: #999999;
padding: 15px;
}
#maincontent {
margin-top: 15px;
font-family: "georgia", sans-serif;
font-size: 10px;
background-color: #FFFFFF;
color: #949393;
border-style: solid;
border-color: #999999;
border-width: 0px;
margin-right: 190px;
text-align: left;
}
#sidebar {
padding-top: 15px;
margin-top: 15px;
background-color: #FFFFFF;
border-color: #999999;
border-width: 0px;
border-style: solid;
font-size: 10px;
font-family: "georgia", sans-serif;
color: #949393;
width: 150px;
float: right;
text-align: justify;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 100%;
padding: 10px 0px 10px 0px;
margin-bottom: 20px;
text-align: center;
font-family: "arial";
font-size: 25px;
font-weight: bold;
font-style: italic;
letter-spacing: 2px;
border-style: solid;
border-color: #E2E2E2;
border-width: 15px;
border-right: none;
border-left: none;
background-color: #FFFFFF;
color: #313131;
text-transform: lowercase;
}
.headerimage {
/* for formatting header image */
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #536184;
}
div#header a:hover, div#footer a:hover {
color: #FFFFFF;
text-decoration: none;
}
/*title and subtitle*/
.title {
display: none;
}
.subtitle{
display: none;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
}
.entry {
margin: 0px 0px 10px 10px;
padding: 10px;
background-color: #FFFFFF;
color: #949393;
font-family: "georgia", sans-serif;
font-size: 10px;
text-align: justify;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}
.userpic {
position: relative;
float: left;
background-color: #FFFFFF;
padding: 5px;
margin: 10px 10px 20px -136px;
z-index: 15;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}
.date {
line-height: 200%;
top: 5px;
color: #DADADA;
font-family: "georgia", sans-serif;
font-size: 15px;
text-align: center;
border-style: italic;
}
.subject {
font-weight: bold;
font-style: italic;
padding: 5px;
color: #536184;
font-family: "georgia", sans-serif;
font-size: 25px;
}
.subject a, .subject a:link, .subject a:visited {
color: #536184;
}
.subject a:hover {
color: #000000;
}
.datesubject {
background-color: #FFFFFF;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 110px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 110px;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents, .currentmood, .currentmusic {
font-family: "Arial", sans-serif;
font-size: 9px;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "georgia", sans-serif;
font-size: 16px;
text-align: right;
background-color: #FFFFFF;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #536184;
}
div.comments a:hover {
color: #000000;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 35px;
background-color: #E2E2E2;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: relative;
float: left;
padding: 5px;
text-align: center;
border-style: solid;
border-width: 0px;
border-color: #EDEBEB;
font-family: "Arial", sans-serif;
font-size: 10px;
z-index: 15;
background-color: #FFFFFF;
margin: 10px 10px 20px -136px;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
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: #536184;
}
div#sidebar a:hover {
color: #000000;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #B5B5B5;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 10px;
}
.sbarcalendarposts {
border-color: #B5B5B5;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 10px;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
padding-left: 15px;
list-style: none;
border-style: solid;
border-width: 1px;
border-color: #999999;
border-top: none;
border-right: none;
border-left: none;
background-color: #FFFFFF;
margin-bottom: 10px;
margin-top: 20px;
color: #536184;
font-family: "georgia", sans-serif;
font-size: 16px;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
text-align: center;
font-family: "arial", sans-serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
letter-spacing: 1px;
background-color: #FFFFFF;
color: #313131;
border-color: #999999;
border-width: 0px;
border-style: solid;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
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 {
border-width: 1px;
border-style: solid;
border-color: #999999;
}
table.yeartable td.yearday {
background-color: #E2E2E2;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
background-color: #E2E2E2;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border-width: 0px;
border-style: solid;
border-color: #d4dce8;
background-color: #E2E2E2;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}
.box {
border-style: solid;
border-width: 0px 0px 0px 0px;
border-color: #999999;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #E2E2E2;
color: #949393;
font-family: "georgia", sans-serif;
font-size: 10px;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "georgia", sans-serif;
font-size: 10px;
line-height: 125%;
background-color: #FFFFFF;
color: #949393;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "georgia", sans-serif;
color: #949393;
}
.commentbox {
border-color: #E2E2E2;
border-width: 0px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #FFFFFF;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #536184;
}
.datesubjectcomment a:hover {
color: #000000;
}
.commentboxpartial {
border-color: #999999;
border-width: 0px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #E2E2E2;
}
.commentinfo {
background-color: #E2E2E2;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 15px;
}
And that's it!
It should work fine in all browsers, but I haven't tested it on any other than IE.
You can add a header image by inserting this in the Header section:
.headerimage {
position: relative;
width: 500px; /* Width of the banner, in pixels */
height: 220px; /* Height of the banner, in pixels */
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url(""); /* Header image URL */
background-repeat: no-repeat;
}
Let me know if there's any trouble, but it should all work just fine.
Feel free to edit, but don't claim it as your own.
Credit to ablessedcurse is much appreciated.
Please remember the credit 77words for the background.
Comments make me smile!