Bloody Good Black - Flexible Squares (S2)

2008-09-25T22:33:12Z

Layout Style: Flexible Square (S2)
Best view: 1024 or higher
Browser(s) Compatible: Firefox and IE and Safari (on PC) but should work in all
Works with Nav bar?: Yes
Works with Ads?: Yes (horizontal is better)
Credit: ernestsewell

Preview
Live Preview (and the codes, etc) @ bloodygoodblack

1. Login and go to the "Customize Journal" section.
2. In the search box, type "Flexible Squares" and chose the Nautical by Yati Mansor.
3. At the bottom of the page, chose your sidebar on the left. It might work on the right, but this is made with the left side in mind.
4. Back up on the top right, choose "Customize Your Theme"
5. On the left side, click on "Custom CSS"
6. Cut and Paste the code below into the "Custom Stylesheet" box. (Choose "NO" in all the drop down boxes.)

Overrides

/*--------------------
Custom layout by: ernestsewell
Style: Flexible Squares
Dexter-ized by ernestsewell
Layout Name:  #3 - Dexter On Black 2008
--------------------------*/

body	{
		background-color: #000000;
                background-image: url();
                background-position: center;
                background-attachment: scroll;
		text-align: center;
		color: #f84a4e;
		font-family: "times new roman", "calibri", sans-serif;
		font-size: 12px;
		margin-top: 20px;
                margin-bottom: 30px;
		}

blockquote {
                margin: 10px; 
                padding: 0px; 
                color: #e42927;
                font-size: 12px;
                border-left: 3px solid #c4151c;
                background: #000000;
                text-align: justify;
                }

a, a:link, a:visited {
                text-transform: uppercase;
		color: #8e9a94;
		text-decoration: none;
		}

a:hover {
		color: #bd0001;
                font-weight: none;
		text-decoration: none;
		}

p, td, blockquote {
	    	font-size: 12px;
		}

b, i, s, u, emphasise, abbr, strong, strike {
                color: #ed9fa1;
                }

code, kbd, pre, tt {
	    	font-family: monospace;
		}

/*---------------------------------------------------------------------
   General page alignment and width
------------------------------------------------------------------------*/

#content
	{
		width: 770px;
		margin-left: auto; margin-right: auto;
		background-color: #000000;
		border-top: solid 0px #000000;
                border-bottom: solid 0px #000000;
                padding: 15px;
                padding-top: 8px;
                padding-bottom: 8px;
                text-align: justify;
	}

#maincontent {
		margin-top: 0px;
		font-family: "times new roman", sans-serif;
		font-size: 12px;
		background-color: #000000;
		color: #f84a4e;
		margin-left: 200px; /*width of sidebar plus 20px*/
		text-align: justify;
		}

#sidebar {
		padding-top: 3px;
                padding-right: 15px;
		margin-top: 10px;
                margin-left: 0px;
                margin-right: -10px;
		background-color: #000000;
	  	font-size: 11px;
		font-family: "calibri", sans-serif;
	  	color: #e42927;
		width: 170px;
		float: left;
		text-align: justify;
		}

/*-----------------------------------------------------------------------------
   Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/

#header {
                padding-top: 1px;
                padding-bottom: 0px;
		margin-bottom: 30px;
		text-align: center;
                text-transform: uppercase;
		font-family: "calibri", sans-serif;
		font-size: 14px;
		letter-spacing: 2px;
		background-color: #000000;
                background-image: url();
	        background-position: top;
	        background-repeat: repeat;
		color: #e42927;
		}

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

{
                font-size: 12px;
		color: #8e9a94;
	}

div#header a:hover, div#footer a:hover {
		font-size: 12px;
                color: #bd0001;
		text-decoration: none;
	}

/*title and subtitle*/
	.title	{
		font-family: "calibri", sans-serif;
		font-size: 13px;
		color: #e42927;
                font-weight: bold;
		text-transform: uppercase;
                letter-spacing: 2px;
                margin-top: 10px;
		}

.subtitle{
		font-family: "calibri", sans-serif;
                color: #c4151c;
		font-size: 12px;
		font-weight: bold;
		text-transform: lowercase;
                letter-spacing: 1px;
		}

/*-----------------------------------------------------------------------------
   Header - top navigation
--------------------------------------------------------------------------------*/

/* header -- links to views; title of journal; subtitle of journal */

ul.navheader
		{
		padding: 0px;
		margin: 0px;
                font-size: 12px;
		}

ul.navheader li  {
		display: inline;
		padding: 0 3px 0 3px;
		font-size: 12px;
                }

/*-----------------------------------------------------------------------------
   Entry stuff
------------------------------------------------------------------------*/

.subcontent { 
	}
        
        .entry	{
		margin-right: 125px;
		margin-left: 190px /*width of sidebar plus 20px*/
                margin-top: 5px;
                padding-right: -130px;
		background-color: #000000;
		color: #f84a4e;
		font-family: "calibri", sans-serif;
		font-size: 12px;
		text-align: justify;
                background-image: url();
	        background-position: top;
	        background-repeat: repeat;

}

.userpic {
                position: relative;
                background: #000;
                border: 1px solid #c4151c;
		float: right;
		text-align: center;
		padding: 5px;
		margin-left: 10px;
                margin-right: 15px;
		z-index: 15;
                font-size: 8px;
                border-width: 1px;
		border-color: #000000;
		border-style: solid;

}

.date {
		line-height: 200%;
		top: 5px;
		color: #dbe9ef;
                text-transform: uppercase;
                text-align: left;
		font-family: "calibri", sans-serif;
		font-size: 11px;
		}

.subject {
                border-bottom: dotted #c4151c 1px;
		padding: 1px;
		text-align: left;
                letter-spacing: 1px;
                color: #dbe9ef;
		font-family: "calibri";
		font-size: 16px;
                font-weight: bold;
                font-style: none;
		}

.subject a, .subject a:link, .subject a:visited {
		color: #888888;
		}

.subject a:hover {
		color: #aedbee;
		}

.datesubject {
		background-color: #000000;
		padding: 1px;
		}

.entry ul li
		{
		padding-left: 1px;
		margin-left: 1px;
		}

.entry ol li
		{
		padding-left: 1px;
		margin-left: 1px;
		}

/*---------------------------------------------------------------------
  Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
         .currents {
                margin-top: -30px; 
                color: #dd0c0d;
                font-size: 11px;
                text-transform: uppercase;
                font-weight: none;
                font-style: none;
         }

.ljtags {
		font-family: "calibri", sans-serif;
		font-size: 11px;
                font-weight: bold;
                font-style: none;
                text-transform: uppercase;
		color: #dbe9ef;
		margin-top: 30px;
		margin-bottom:0px;
		position: left;
		}

/*---------------------------------------------------------------------
  Entry Stuff - Comments
------------------------------------------------------------------------*/

.comments {
		font-family: "calibri", sans-serif;
		font-size: 12px;
		text-align: right;
                text-transform: uppercase;
		background-color: #000000;
		padding: 0px 0px 0px 0px;
		position: relative;
		top: 0px;
		}
	
	div.comments a, div.comments a:link, div.comments a:visited{
		color: #dbe9ef;
	}

div.comments a:hover {
		color: #aedbee;
		text-decoration: none;
                font-size: 12px;
                padding: 0px
	}

/*---------------------------------------------------------------------
  Entry Stuff - Separator
------------------------------------------------------------------------*/

.separator{
		/* for formatting separators between entries */
		height: 9px;
	}

/*------------------------------------------------------------
  Special friends page customization
-------------------------------------------------------------------------------*/

.userpicfriends {
                position: relative;
                background: #c4151c !important;
                border: 1px solid #c4151c !important;
		float: right;
		text-align: center;
		padding: 5px;
		margin-left: 10px;
                margin-right: 15px;
		z-index: 15;
                font-size: 8px
		border-width: 1px;
		border-color: #000000 !important;
		border-style: solid;
		}

/*------------------------------------------------------------
  Sidebar
-------------------------------------------------------------------------------*/

.defaultuserpic {
		text-align: center;
		}

.sbarheader {
		padding: 0px 5px 0px 5px;
		}

.sbarbody {
		padding: -10px 5px 0px 5px;
		}

.sbarbody2 {
		padding: 0 0px 0 0px;
	}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
                 color: #c4151c;
         }

div#sidebar a:hover {
                 color: #bd0001;
                 text-decoration: none;
         }

/*------------------------------------------------------------
  Sidebar - Calendar
-------------------------------------------------------------------------------*/

table.calendar {
		margin-right: auto;
		margin-left: auto;
		}

.sbarcalendar {
		border-color: #c4151c;
		border-width: 1px;
		border-style: solid;
		text-align: center;
		font-family: "calibri", sans-serif;
		font-size: 10px;
		}

.sbarcalendarposts {
		border-color:  #dbe9ef;
		border-width: 1px;
		border-style: solid;
		background-color: #000000;
		text-align: center;
		font-family: "calibri", sans-serif;
		font-size: 10px;
		}

/*------------------------------------------------------------
  Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/

ul.sbarlist {
		padding-left: -10px;
		margin-left: 0px;
		list-style: none;
	}

li.sbaritem {
		padding-left: -15px;
                margin: 0px 2px 2px 2px;
                padding-top: -15px;
                padding-bottom: 2px;
		list-style: none;
                border-bottom: 1px #c4151c solid;
	}

li.sbartitle {
                list-style: none;		
                margin-bottom: -13px;
                margin-top: 10px;
                text-align: left;
                padding-left: 11px;
                padding-bottom: 0px;
                color: #e42927;
                font-family: "calibri", sans-serif;
                font-size: 15px;
                text-transform: lowercase;
                font-style: italic;
                letter-spacing: 1px;
                background: url(http://farm4.static.flickr.com/3103/2864304202_8b9c457731_o.png) 0px 1px no-repeat; 
        }

/*----------------------------------------------------
  footer
----------------------------------------------------------------*/

#footer {
		width: 100%;
		text-align: center;
		font-family: "calibri", sans-serif;
		font-size: 12px;
		font-weight: none;
		letter-spacing: 1px;
		background-color: #000000;
		color: #aedbee;
		font-style: none;
		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: #c4151c;
		}

table.yeartable td.yearday {
		background-color: #000000;
		text-align: center;
		}

td.yearmonth {
		border-style: none;
		}

/*----------------------------------------------------
 Comments pages
----------------------------------------------------------------*/

.datesubjectcomment {
	       background-color: #000000;
	       padding: 5px;
	       margin-top: 20px;
	       }

.userpiccomment {
		position: relative;
		background-color: #000000;
		top: -30px;
		left: 0px;
		padding: 5px;
		margin: 10px 10px -20px 10px;
		z-index: 15;
		float: left;
		}

.box {
		border-style: none;
		border-width: 0px 0px 0px 0px;
		border-color: #c4151c;
		padding: 10px;
		clear: left;
		}

input, textarea {
		background-color: #000000;
		color: #dbe9ef;
		}

textarea.textbox  {
          	width: 100% !important;
   		}

.reply	{
		position: relative;
		margin: 20px 30px 10px 30px;
		padding: 25px 10px 10px 10px;
		text-align: left;
		font-family: "calibri", sans-serif;
		font-size: 11px;
		line-height: 125%;
		background-color: #000000;
		color: #dbe9ef;
		}

.replytosubject {
		font-weight: bold;
		}

.commentreply {
		position: relative;
		margin: 10px;
		font-size: 11px;
		font-family: "calibri", sans-serif;
		color: #dbe9ef;
		}

.commentbox {

border-color: #c3141b;
		border-width: 0px;
		border-style: solid;
		padding: 10px;
		margin: 10px;
		background-color: #000000;
		}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
		color: #dbe9ef;
		}

.datesubjectcomment a:hover {
		color: #aedbee;
		}

.commentboxpartial {
		border-color: #40424c;
		border-width: 1px;
		border-style: solid;
		padding: 10px;
		margin: 10px;
		background-color: #000000;
		}

.commentinfo {
		background-color: #000000;
		margin-top: 10px;
		width: 100%;
		}

.skiplinks {
		text-align: center;
		}

/*--------------------------------------------
Misc
-----------------------------------------*/

.clear {
		height: 15px;
		}

.headerimage {
                position: relative;
                width: 800px; 
                height: 300px; 
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 0px; 
                background-image: url("http://farm4.static.flickr.com/3051/2887723061_74e9d7b14e_o.png"); 
                background-repeat: no-repeat;
                }

/*---------------------------------------------
Tiny Icons, feel free to remove/replace
-------------------------------------------*/

.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://farm4.static.flickr.com/3190/2887828909_fc44b88cc1_o.png) !important;
padding: 11px 4px 3px 2px !important;
}

.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://farm4.static.flickr.com/3150/2888662800_79bace7880_o.png) !important;
padding: 9px 9px 3px 1px !important;
}

.subject
  img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{

width: 0;

height: 0;

padding: 12px 4px 4px 10px;

background: url(http://farm4.static.flickr.com/3156/2863396591_d7c4e078ba_o.png);

}

.subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{

width: 0;

height: 0;

padding: 11px 4px 4px 11px;

background: url(http://farm4.static.flickr.com/3146/2888662820_dba1cb0e2a_o.png);

}

.subject img[src="http://p-stat.livejournal.com/img/icon_groups.gif"]{

width: 0;

height: 0;

padding: 12px 5px 5px 9px;

background: url(http://farm4.static.flickr.com/3017/2864230604_efa0b0daa2_o.png);

}

Save changes.

Note: the "Blood On My Hands" are actually your links for your header navigation. If you want it to read as such, change them as follows:

Recent Entries = Blood
Archive = On
Friends = My
User Info = Hands

You have to change these yourself, under the "Text" area of your Customize Journal Style page (as directed above), or leave them as the LJ defaults.

As far as I know, you do NOT need a website listed for this to work. This works out well if you don't want any other text hogging up your header navigation.

Save the images to your own server or photo hosting page and change the URLs in the code. They are on my Flickr page, but that could be changed at any time, although I personally have no plans of changing them.

Here are quick links to the photos. Click the icon to open it in a new window/tab, or right click on the icons and "Save Image As" (you can also "Save Target/Link As")
Sidebar Content (tiny icon near the title)

If you don't want any of the icons below, take out the last portion of the code titled "Tiny Icons...." and everything under that.

User Icon
Comm Icon
Friends Only
Filtered Friend Groups
Private

Click here for the Dexter Header

Friends Only Banner

User Icon:

Feedback welcome.

Test Post

2008-09-25T20:58:05Z

UPPERCASE

lower case

bold italics underline ~~strike~~

This is a block quote.

Bullet

Bullet

Number

Number

Number

This is a link.

bloodygoodblack
freelayouts

Bloody Good On Black

Bloody Good Black - Flexible Squares (S2)

Test Post