layout: two versions

Previous | | Next

23 September 2009 @ 08:18 pm

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;
		}

.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;
		}

.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
-------------------------------------------------------------------------------*/

/*------------------------------------------------------------
  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
----------------------------------------------------------------*/

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;
			}

.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;
   		}

.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:

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!

Tags: -layout codes: simple, codes

3 comments | Leave a comment

3 comments —

( 3 comments — Leave a comment )

dearswindler on October 4th, 2009 11:59 pm (UTC)

Uh, I'm using the first one, and I've been editing the colours, but the box around the ads at the top is still the original colour, same with usernames. How do I change them? >__<; Thanks~

(Reply) (Thread) (Link)

dejaentendu810 on October 5th, 2009 04:56 pm (UTC)

For the ads, you need to change it on Customize journal, not in the code. Just go to Journal -> Customize Journal Style -> Style -> and then change the color of "Background color of the outer table". That should change the color of the box around the ads.

As for the usernames, it should be the same code as for the links. Just be sure you change every link code, you might've missed one. If not, then I have no idea why it's not working.

(Reply) (Parent) (Thread) (Link)

herzausglas on July 25th, 2010 09:22 pm (UTC)

Very nice! Thank you for sharing :)

(Reply) (Thread) (Link)

Log in