The Incredible Edible Header

Blurb

Nullam dictum pulvinar mauris. Duis est risus, condimentum sit amet, faucibus id, aliquet a, eros. Integer bibendum lorem a magna. Aliquam feugiat condimentum lacus. Maecenas sed nibh ac nisi commodo rutrum. Duis vitae purus. Morbi at quam sit amet purus venenatis iaculis. Donec pulvinar mi vel pede. Proin tortor pede, facilisis vel, dignissim in, varius vel, metus. Donec eu turpis. Vivamus ac lectus. Suspendisse hendrerit tempus nulla. Sed feugiat eros eget diam. Vivamus augue. In hac habitasse platea dictumst. Nam erat. Proin dapibus luctus est. Integer porta, mauris sed ultrices scelerisque, ipsum augue varius diam, at commodo nisi velit ultrices risus.

September 2008

Tags

bloody good time dexter flexible squares lorem ipsum s2 showtime tags here test

20 September 2008 @ 01:12 pm

How To Do It

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

Instructions and Codes:

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

/*--------------------
Dexter custom layout by: ernestsewell
Style: Flexible Squares (S2)
Layout Name:  #1 - Dexter 2008
Credit:  ernestsewell
--------------------------*/

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

blockquote {
                margin: 10px; 
                padding: 0px; 
                color: #901c1e;
                font-size: 8px;
                border-left: 3px solid #1e2f37;
                background: #ffffff;
                text-align: justify;
                }

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

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

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

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

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

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

#content
	{
		width: 770px;
		margin-left: auto; margin-right: auto;
		background-color: #ffffff;
		border-top: solid 0px #ffffff;
                border-bottom: solid 0px #ffffff;
                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: #ffffff;
		color: #780a0b;
		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: #ffffff;
	  	font-size: 11px;
		font-family: "calibri", sans-serif;
	  	color: #000000;
		width: 170px;
		float: left;
		text-align: justify;
		}

/*-----------------------------------------------------------------------------
   Header - You may 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: #ffffff;
                background-image: url();
	        background-position: top;
	        background-repeat: repeat;
		color: #202e35;
		}

/*look  and color of links (also partially for the 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: #780a0b;
	}

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

/*title and subtitle*/
	.title	{
		font-family: "calibri", sans-serif;
		font-size: 13px;
		color: #3d0504;
                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;
                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;
                }

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

.subcontent { 
	}
        
        .entry	{
		margin-right: 125px;
		margin-left: 190px /*width of sidebar plus 20px*/
                margin-top: 5px;
                padding-right: -130px;
		background-color: #ffffff;
		color: #780a0b;
		font-family: "calibri", sans-serif;
		font-size: 12px;
		text-align: justify;
                background-image:  url(http://farm4.static.flickr.com/3023/2860310479_df260c9987_o.png);
	        background-position: top;
	        background-repeat: repeat;

}

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

}

.date {
		line-height: 200%;
		top: 5px;
		color: #1c2c34;
                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: #000000;
		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: #888888;
		}

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

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

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

/*---------------------------------------------------------------------
  Current Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
         .currents {
                margin-top: -30px; 
                color: #1c2c34;
                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: #1c2c34;
		margin-top: 30px;
		margin-bottom:0px;
		position: left;
		}

/*---------------------------------------------------------------------
  Comment Stuff - Comments
------------------------------------------------------------------------*/

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

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

/*---------------------------------------------------------------------
  Other Stuff - Separator
------------------------------------------------------------------------*/

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

/*------------------------------------------------------------
  Extra Friends page customization
-------------------------------------------------------------------------------*/

.userpicfriends {
                position: relative;
                background: #fff !important;
                border: 1px solid #fff !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: #ffffff !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: #152429;
                 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:  #c4151c;
		border-width: 1px;
		border-style: solid;
		background-color: #ffffff;
		text-align: center;
		font-family: "calibri", sans-serif;
		font-size: 10px;
		}

/*------------------------------------------------------------
  Sidebar - Link Contents, and all 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 #dddddd solid;
	}

li.sbartitle {
                list-style: none;		
                margin-bottom: -13px;
                margin-top: 10px;
                text-align: left;
                padding-left: 11px;
                padding-bottom: 0px;
                color: #700606;
                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: #ffffff;
		color: #c4151c;
		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: #780a0b;
		}

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

td.yearmonth {
		border-style: none;
		}

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

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

.userpiccomment {
		position: relative;
		background-color: #ffffff;
		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: #780a0b;
		padding: 10px;
		clear: left;
		}

input, textarea {
		background-color: #ffffff;
		color: #192a31;
		}

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: #ffffff;
		color: #192a31;
		}

.replytosubject {
		font-weight: bold;
		}

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

.commentbox {

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

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

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

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

.commentinfo {
		background-color: #ffffff;
		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/3177/2860449294_84e3ea76cf_o.png"); 
                background-repeat: no-repeat;
                }

/*---------------------------------------------
Tiny Icons.  You may delete this section, or remove/replace the URLs with your own.
You might have to play with the padding to align them correctly.
-------------------------------------------*/

.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/3129/2852805746_601d527ac8_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/3279/2852021991_297cc398fc_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/3260/2863387173_fa79a18be0_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:

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

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 Friends
Private

Click here for the faded blood background for Entry Background
Click here for the Dexter Header

Friends Only Banner (transparent background, doesn't have faded blood in the image)

User Icon (transparent background, doesn't have faded blood in the image):

Entry Content Background:

If you don't want a content background, search for the URL of the above pic (http://farm4.static.flickr.com/3023/2860310479_df260c9987_o.png) and delete it from the code.

Posted in

freelayouts. Comment there. It's my first, be gentle.

Tags: bloody good time, dexter, flexible squares, s2, showtime

Advertisement

Advertisement