ScotchBonnet

Layout .05 - S2 Dear Diary : PinkandGrey

Thu, 28 May 2009 23:45:29 GMT

Preview of PinkandGrey Layout

[Click Here for Free Live Preview]

With minor up and downs, mostly on IE side I have enjoyed skimming Dear Diary. I would like to thank so much babyelefant at Everything_LJ as always for last minute help.

PinkandGrey was created from LJ/IJ base layout Dear Diary.
Free: Cascading Style Sheet

Details

layout available: two-column-right
custom colors : in stylesheet
best view: : 1024x768 or higher
browser checked : Firefox, Internet Explorer
works with : Free, Paid, Nav Bar (Unknown with Plus)
available at : http://asylums.insanejournal.com/scotchbonnet/
images used : scotchsour, sem labs

Instructions

How to Style? (using the InsaneJournal customize journal area)

1. In insanejournal's navigational menu, go to journal > customize journal or press the link.

1a. The first page you see is Journal Display that shows four tabs. The first is highlighted as Basics. Look below for Style System and make sure the radio button is highlighted for:
S2 - For users who don't know HTML or CSS, or make only minor alterations.

2. Press Tab for Custom Options. You can either scroll down or press Custom CSS in the Selection area.

3. Look for : Use layout's stylesheet(s) and say No. In the Custom external stylesheet URL You leave blank.

4. Look for : Custom stylesheet and copy/paste PinkandGrey's stylesheet.

5. Save Changes.

6. It will save and look for : "Your settings have been saved. View your Journal."

7. Go to View Journal.

8. You're Done.

9. Thank you for trying this layout.

How to Style? (using the LiveJournal customize journal area)

1. The first page you see is Customize Journal Style there are three main areas shown: [Edit Titles] - [Your Current Theme] - [Customize Your Current Theme]

1b. Go to [Customize Your Current Theme] then under more options select [Select a Different Theme]

2. Under (2. Select a New Theme), go the search box and type Dear Diary and press search. Once the layouts appear go to the bottom and in the drop down choose (show all).

3. Find and press (apply theme) to Dear - (No plain theme available) Choose any by the designer Martin Atkins and then press (apply theme) then press (customize).

4. Back to the main area Customize Journal Style go to Customize Your Theme, press (custom css).

5. Under custom css > page > where it states: ("Use layout's stylesheet(s)") say no. Under that, Custom external stylesheet URL should be blank.

6. Add the LiveJournal "PinkandGrey" Cascading Style Sheet for Free Users into the custom stylesheet textarea.

7. Press "save changes".

8. Go to the blue box on the page that displays your current journal and press your identity link.

9. You should be done.

10. Thank you for trying this layout.

CSS Code

InsaneJournal Cascading Style Sheet for Free Users

/* template  : scotchbonnet .05 - s2 Dear Diary : PinkandGrey
published : May 30, 2009
by        : sam emme / scotchsour.livejournal.com + scotchsour.insanejournal.com
works with: Free, Paid, Nav Bar (Unknown with Plus)
browser   : Firefox 3.0.4, Internet Explorer 7(decent with IE6, unknown with lower)
available : http://asylums.insanejournal.com/scotchbonnet/
original design by : scotchsour
images used : scotchsour, sem labs */

/* ------ BASICS ------ */
* {margin:0px; padding:0px;}
body {background: #333333 url() repeat-x;font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif; color: #aaaaaa;}
body, td, table, th, tr {font-size: 13px;}     
a,a:hover {color: #e63973;text-decoration: none;}
input, textarea {border: 1px solid #aaaaaa; font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif; font-weight: bold; font-size: 11px; color:#e63973; background:#222;}
blockquote {margin: 1em 3em; padding: 1em 1em 1em 40px; border: 1px solid #aaaaaa; width: 80%; background: url(blckqte2.gif) -135px 0px repeat-y transparent;}
hr {color: #e63973; background-color: #000; margin: 0px 150px 0px 150px; height: 1px; width: 75%;}
#postform {margin-top:10px;}
select {color:#e63973;background:#222;}
/* ------ MAIN ------ */
/*Header*/
#title { color: #ffffff; background-color: #000000; background-image: url(pgtopper.png); background-repeat: repeat-x; background-position: top left; width: 100%; font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif; height: 125px; overflow: hidden;}
#title h1 { font-size: 25px; font-weight: bold; margin: 0; padding-top: 15px; padding-left: 8px; white-space: no-wrap;}
#title #journal_subtitle { font-size: 13px; font-weight: bold; margin: 0; padding-left: 8px; white-space: no-wrap;}
/*Main Area*/
#main { margin: 20px 280px 0 10px; font-size:100%; padding: 0px 20px 50px 20px; color: #aaaaaa; min-height: 150%;}
#main strong, b { color:#e63973; background:#222; padding:1px 4px 3px 4px;}
/*Sidebar*/
#paraphernalia { width:270px; float:right; margin: 20px 0 20px 0; font-family: "Tahoma", "Georgia", "Helvetica", "Arial", sans-serif; padding: 0 0 90px 0; background: url(pglogo.png) no-repeat bottom right; font-size: 12px;}
html #paraphernalia {width: 270px;}
#paraphernalia .pbox {width: 270px;}
#paraphernalia h2 { font-size: 14px; font-style: oblique; text-align: center;}
#viewsel a, #recentnav a, #tagslist a, #userlinks a { background: transparent url(pglist-off.gif) left center no-repeat; padding-left: 15px;text-align: left; font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; text-decoration: none; color: #aaa;}
#viewsel a:hover, #recentnav a:hover, #tagslist a:hover, #userlinks a:hover { background: transparent url(pglist-on.gif) left center no-repeat; padding-left: 15px; text-align: left; font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; text-decoration: none; color: #e63973;}
.pbox dt { font-weight: normal; margin-top: 4px; font-weight: bold; color:#e63973;}
.pbox dd { padding: 0; margin-left: 24px;}
.pbox ul { margin: 0; padding: 0; list-style: none;}
.pbox ul ul { margin-left: 24px;}
.pbox li {margin: 0; padding: 0;}
.pbox li.current {text-transform: lowercase; font-weight: bold; color:#e63973;}
.pbox p { margin: 8px 0;}
.pboxcontent { padding: 15px; background-color: #313131; border:1px solid #2d2d2d; margin-right: 20px;}
.pboxcontent ul { margin: 0; list-style: none;}
.pboxcontent li { display: block; padding: 1px 0;}
.pboxcontent a {padding: 0px; text-decoration: none; text-transform: lowercase; color: #FFFFFF;}
.pboxcontent span{color: #e63973;}
#journalinfouserpic {text-align: center;padding: 10px 0px 0px 0px;}
.journallinkbar{margin:0px auto 0px 27px; clear:right;}
/* ------ ENTRY ------ */
.entrycontent {margin: 35px 0 20px 0; overflow:hidden;}
.entry .entryheader {font-size: 12px; font-weight: bold; text-align:left; position:relative; background:url(pgtitle.png) no-repeat center left; padding: 0px 0px 10px 30px; margin: 0px 0 35px 0; height:25px;}
.entry .entrysubject {margin-top: 10px; padding: 0; font-size: 1.2em;}
.entry .entrycontent {margin-right:150px;margin-bottom: 20px;}
.entryheader .entryicon { position:absolute; top: 90px; right:115px; z-index:3;}
.entryheader .entryuserpic { position:absolute; z-index:1;top:0;right:0; width:125px;height:100px; background-color: #313131; border: 1px solid #2d2d2d; text-align:right; padding: 5px 5px 5px 5px;}
.entrylinkbarpre {display:none;}
.page_entry .entrylinkbarpost, .page_reply .entrylinkbarpost {margin: 16px 16px 0px 0px;}
.entrylinkbarpost a img{ padding: 16px 16px 0px 0px; width:0px; height:0px;}
*html .entrylinkbarpost a img {padding:0px;width:22px;height:20px;}
.entryuserpic img { height:100px; width:100px; }
.entryheader .entrytimestamp {display: inline; text-transform:lowercase;}
.entryheader .entrytimestampdate {display: none;}
.entry .entrytimestamptime {color: #000000; position:absolute; top: 110px; right:0px; z-index:7; }
.entrycmdlinks { color:#ccc; border:1px solid #2d2d2d; background:url(pgcom.png) right no-repeat #313131; padding: 5px 15px; margin: 25px 10px 20px 25px; height: 19px;}
.page_entry .entrycmdlinks { color:#ccc; border:1px solid #2d2d2d; background:url(pgcom-4.png) right no-repeat #313131; padding: 6px 15px 6px 15px; margin: 10px 10px 20px 25px; height: 19px;}
.entrymeta { color:#ccc; border:1px solid #2d2d2d; background-color:#313131;  padding: 5px 5px; margin: 10px 10px 20px 25px; height: auto; width: 330px;}
.entrymeta li{list-style-type: none;}
/*------comment links------*/
.entryfooter .entrycmdlinks:before {content: "";}
.entryfooter .entrycmdlinks:after {content: "";}
.entryfooter {margin-top:20px;}
.entrycmdlinks li {display: inline; text-align: center; list-style: none;}
.entrycmdlinks a {padding: 3px 7px;color: #aaa;}
.entrycmdlinks a:hover {color: #e63973;}
* html .entrycmdlinks li {margin-left: 1em;}
.entrycmdlinks li:before {content: " [] ";}
.entrycmdlinks li:first-child:before {content: "";}
li.tagBox { padding-left: 0; margin-left: 0; list-style: none;}
ul.tagList { padding-left: 0; margin-left: 0; list-style: none;}
li.tagItem { padding-left: 0px; list-style: none; color: #e63973; font-weight: bold;}
/*Page*/
.page_friends .entrytimestamptime {color: #000000;position:absolute;top: 110px;right:0px;z-index:8;}
.page_entry .entry {padding-bottom:30px;background-color: !important;}
.page_entry .entryheader .entryposter, .page_reply .entryheader .entryposter { margin: 0px;  padding: 0px;}
.page_entry .entryheader .entrytimestampdate, .page_reply .entryheader .entrytimestampdate { display: block; margin: 20px 0px; padding: 0px; display: none;}
.page_entry .entryheader .entrysubject, .page_reply .entryheader .entrysubject { display: inline; margin: 10px 0px; padding: 0px 0px 0px 5px ;}
.page_friends .entryheader .entryuserpic {display: block;}
.entrymeta .entrymetacaption {font-weight: bold;}
.entrymeta li {white-space: no-wrap;}
.comments {list-style: none; padding: 0; margin-left: 50px;}
.comments .comments { margin-left: 25px;}
.comments > li {margin: 0; padding: 0;}
.ljtags  { margin: 0.9em 0em; padding: 0 0 10px 20px; background: url(pgtagbut.png) 0px 4px no-repeat transparent;}
.comments li{ list-style:none;}
/* ------ CALENDAR ------ */
.calendarmonth {   width: 60%; margin-right: auto; margin-left: auto; border-collapse: collapse; margin-top: 4em; margin-bottom: 2em; border: 1px solid #e63973;}
.calendarmonth td, .calendarmonth th { padding: 0.5em; margin: 0; }
.calendarmonthlink { text-align: center;}
.calendarmonthheader h2 { font-size: 16px; margin: 0; color: #e63973;}
.page_month #main form, .page_month #main dl { margin: 8px; }
.calendardaynum { text-align: center; }
.calendardaycount { text-align: center; }
.calendarday { width: 14%; }
/* ------ IMAGES ------ */
/* so that IE users will see a new image */
* html span.ljuser{background-image: url(pgufbpb.png) !important;background-repeat: no-repeat;background-position: left middle;padding: 24px 24px 0px 0px !important;}
* html span.ljuser img{visibility: hidden;}
/* icon for users */.ljuser img[src*="userinfo.gif"] {width: 0;height: 0;background-repeat: no-repeat;background-image: url(pgufbpb.png) !important; padding: 24px 24px 0 0 !important;}
/* icon for communities */.ljuser img[src*="community.gif"] {width:0;height: 0;background-repeat: no-repeat;background-image: url(pgufmr.png) !important;padding: 24px 24px 0 0 !important;}
.entryposter img[src*="userinfo.gif"], collapsed entry img[src="http://l-stat.livejournal.com/img/userinfo.gif"]{background:url(pgufbpb.png);}
.entryposter img[src*="community.gif"], collapsed entry img[src="http://stat.p-stat.livejournal.com/img/community.gif"]background:url(pgufmr.png);}
.ljuser img, .entryicon img, .entrylinkbarpre a img {height: 0px; width: 0px; padding: 24px 24px 0px 0px !important; background: transparent none no-repeat scroll 0 0;}
img[src*="userinfo.gif"], img[src*="community.gif"]  { width: 0 !important; height: 0 !important; background: none !important; background-repeat: no-repeat !important; padding: 24px 24px 0 0px !important;}
img[src*="userinfo.gif"] {  background-image: url(pgufbpb.png) !important; }
img[src*="community.gif"] { background-image: url(pgufmr.png) !important; }
.entryicon img{padding: 16px 16px 0 0 !important;background-color:transparent;width: 0;height: 0;background-repeat: no-repeat;}
.entryicon img[src*="icon_protected.gif"], dd img[src="http://stat.p-stat.livejournal.com/img/icon_protected.gif"]{background:url(pglock.png);}
.entryicon img[src*="icon_private.gif"], dd img[src="http://stat.p-stat.livejournal.com/img/icon_private.gif"]{background:url(pgshield.png);}
/*------mini images------*/
img[src*="btn_nudge.gif"], img[src*="btn_tracking.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_freeze.gif"], img[src*="btn_del.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="syndicated.gif"], img[src*="btn_edittags.gif"], img[src*="btn_prev.gif"], img[src*="btn_next.gif"], img[src*="btn_addfriend.gif"], img[src*="btn_todo.gif"], img[src*="btn_memories.gif"], img[src*="btn_edit.gif"], img[src*="btn_search.gif"], img[src*="btn_tellfriend.gif"], img[src*="btn_track.gif"], img[src*="btn_addfriend.gif"],img[src*="button-flag.gif"] {height: 0px; width: 0px; padding: 24px 24px 0px 0px !important; background: transparent none no-repeat scroll 0 0;}
img[src*="btn_memories.gif"] {background:url(pgmemories.png);}
img[src*="btn_todo.gif"] {background:url(pgtodo.png);}
img[src*="btn_edit.gif"] {background:url(pgupdate.png);}
img[src*="btn_search.gif"] {background:url(pgsearch.png);}
img[src*="btn_tellfriend.gif"] {background:url(pgtellafriend.png);}
img[src*="btn_track.gif"] {background:url(pgtrack.png);}
img[src*="btn_addfriend.gif"] {background:url(pgaddfriend.png);}
img[src*="button-flag.gif"] {background:url(pgflag.png);}
img[src*="btn_next.gif"] {background:url(pgnext.png);}
img[src*="btn_prev.gif"] {background:url(pgprevious.png);}
img[src*="btn_edittags.gif"] {background:url(pgtag.png);}
img[src*="syndicated.gif"] {background:url(pgrss.png);}
img[src*="btn_del.gif"] {background:url(pgdelete.png);}
img[src*="btn_unscr.gif"] {background:url(pgunscreen.png);}
img[src*="btn_scr.gif"] {background:url(pgscreen.png);}
img[src*="btn_freeze.gif"] {background:url(pgfreeze.png);}
img[src*="btn_unfreeze.gif"] {background:url(pgunfreeze.png);}
img[src*="btn_tracking.gif"] {background:url(pgtracking.png);}
img[src*="btn_nudge.gif"] {background:url(pgnudge.png);}
/* ------ Thank you for using a scotchbonnet layout ------ */

LiveJournal Cascading Style Sheet for Free Users

/* ------ BASICS ------ */
* {margin:0px; padding:0px;}
body {background: #333333 url() repeat-x;font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif; color: #aaaaaa;}
body, td, table, th, tr {font-size: 13px;}     
a,a:hover {color: #e63973;text-decoration: none;}
input, textarea {border: 1px solid #aaaaaa; font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif; font-weight: bold; font-size: 11px; color:#e63973; background:#222;}
blockquote {margin: 1em 3em; padding: 1em 1em 1em 40px; border: 1px solid #aaaaaa; width: 80%; background: url(blckqte2.gif) -135px 0px repeat-y transparent;}
hr {color: #e63973; background-color: #000; margin: 0px 150px 0px 150px; height: 1px; width: 75%;}
#postform {margin-top:10px;}
select {color:#e63973;background:#222;}
/* ------ MAIN ------ */
/*Header*/
#title { color: #ffffff; background-color: #000000; background-image: url(pgtopper.png); background-repeat: repeat-x; background-position: top left; width: 100%; font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif; height: 125px; overflow: hidden;}
#title h1 { font-size: 25px; font-weight: bold; margin: 0; padding-top: 15px; padding-left: 8px; white-space: no-wrap;}
#title #journal_subtitle { font-size: 13px; font-weight: bold; margin: 0; padding-left: 8px; white-space: no-wrap;}
/*Main Area*/
#main { margin: 20px 280px 0 10px; font-size:100%; padding: 0px 20px 50px 20px; color: #aaaaaa; min-height: 150%;}
#main strong, b { color:#e63973; background:#222; padding:1px 4px 3px 4px;}
/*Sidebar*/
#paraphernalia { width:270px; float:right; margin: 20px 0 20px 0; font-family: "Tahoma", "Georgia", "Helvetica", "Arial", sans-serif; padding: 0 0 90px 0; background: url(pglogo.png) no-repeat bottom right; font-size: 12px;}
html #paraphernalia {width: 270px;}
#paraphernalia .pbox {width: 270px;}
#paraphernalia h2 { font-size: 14px; font-style: oblique; text-align: center;}
#viewsel a, #recentnav a, #tagslist a, #userlinks a { background: transparent url(pglist-off.gif) left center no-repeat; padding-left: 15px;text-align: left; font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; text-decoration: none; color: #aaa;}
#viewsel a:hover, #recentnav a:hover, #tagslist a:hover, #userlinks a:hover { background: transparent url(pglist-on.gif) left center no-repeat; padding-left: 15px; text-align: left; font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; text-decoration: none; color: #e63973;}
.pbox dt { font-weight: normal; margin-top: 4px; font-weight: bold; color:#e63973;}
.pbox dd { padding: 0; margin-left: 24px;}
.pbox ul { margin: 0; padding: 0; list-style: none;}
.pbox ul ul { margin-left: 24px;}
.pbox li {margin: 0; padding: 0;}
.pbox li.current {text-transform: lowercase; font-weight: bold; color:#e63973;}
.pbox p { margin: 8px 0;}
.pboxcontent { padding: 15px; background-color: #313131; border:1px solid #2d2d2d; margin-right: 20px;}
.pboxcontent ul { margin: 0; list-style: none;}
.pboxcontent li { display: block; padding: 1px 0;}
.pboxcontent a {padding: 0px; text-decoration: none; text-transform: lowercase; color: #FFFFFF;}
.pboxcontent span{color: #e63973;}
#journalinfouserpic {text-align: center;padding: 10px 0px 0px 0px;}
.journallinkbar{margin:0px auto 0px 27px; clear:right;}
/* ------ ENTRY ------ */
.entrycontent {margin: 35px 0 20px 0; overflow:hidden;}
.entry .entryheader {font-size: 12px; font-weight: bold; text-align:left; position:relative; background:url(pgtitle.png) no-repeat center left; padding: 0px 0px 10px 30px; margin: 0px 0 35px 0; height:25px;}
.entry .entrysubject {margin-top: 10px; padding: 0; font-size: 1.2em;}
.entry .entrycontent {margin-right:150px;margin-bottom: 20px;}
.entryheader .entryicon { position:absolute; top: 90px; right:115px; z-index:3;}
.entryheader .entryuserpic { position:absolute; z-index:1;top:0;right:0; width:125px;height:100px; background-color: #313131; border: 1px solid #2d2d2d; text-align:right; padding: 5px 5px 5px 5px;}
.entrylinkbarpre {display:none;}
.page_entry .entrylinkbarpost, .page_reply .entrylinkbarpost {margin: 16px 16px 0px 0px;}
.entrylinkbarpost a img{ padding: 16px 16px 0px 0px; width:0px; height:0px;}
*html .entrylinkbarpost a img {padding:0px;width:22px;height:20px;}
.entryuserpic img { height:100px; width:100px; }
.entryheader .entrytimestamp {display: inline; text-transform:lowercase;}
.entryheader .entrytimestampdate {display: none;}
.entry .entrytimestamptime {color: #000000; position:absolute; top: 110px; right:0px; z-index:7; }
.entrycmdlinks { color:#ccc; border:1px solid #2d2d2d; background:url(pgcom.png) right no-repeat #313131; padding: 5px 15px; margin: 25px 10px 20px 25px; height: 19px;}
.page_entry .entrycmdlinks { color:#ccc; border:1px solid #2d2d2d; background:url(pgcom-4.png) right no-repeat #313131; padding: 6px 15px 6px 15px; margin: 10px 10px 20px 25px; height: 19px;}
.entrymeta { color:#ccc; border:1px solid #2d2d2d; background-color:#313131;  padding: 5px 5px; margin: 10px 10px 20px 25px; height: auto; width: 330px;}
.entrymeta li{list-style-type: none;}
/*------comment links------*/
.entryfooter .entrycmdlinks:before {content: "";}
.entryfooter .entrycmdlinks:after {content: "";}
.entryfooter {margin-top:20px;}
.entrycmdlinks li {display: inline; text-align: center; list-style: none;}
.entrycmdlinks a {padding: 3px 7px;color: #aaa;}
.entrycmdlinks a:hover {color: #e63973;}
* html .entrycmdlinks li {margin-left: 1em;}
.entrycmdlinks li:before {content: " [] ";}
.entrycmdlinks li:first-child:before {content: "";}
li.tagBox { padding-left: 0; margin-left: 0; list-style: none;}
ul.tagList { padding-left: 0; margin-left: 0; list-style: none;}
li.tagItem { padding-left: 0px; list-style: none; color: #e63973; font-weight: bold;}
/*Page*/
.page_friends .entrytimestamptime {color: #000000;position:absolute;top: 110px;right:0px;z-index:8;}
.page_entry .entry {padding-bottom:30px;background-color: !important;}
.page_entry .entryheader .entryposter, .page_reply .entryheader .entryposter { margin: 0px;  padding: 0px;}
.page_entry .entryheader .entrytimestampdate, .page_reply .entryheader .entrytimestampdate { display: block; margin: 20px 0px; padding: 0px; display: none;}
.page_entry .entryheader .entrysubject, .page_reply .entryheader .entrysubject { display: inline; margin: 10px 0px; padding: 0px 0px 0px 5px ;}
.page_friends .entryheader .entryuserpic {display: block;}
.entrymeta .entrymetacaption {font-weight: bold;}
.entrymeta li {white-space: no-wrap;}
.comments {list-style: none; padding: 0; margin-left: 50px;}
.comments .comments { margin-left: 25px;}
.comments > li {margin: 0; padding: 0;}
.ljtags  { margin: 0.9em 0em; padding: 0 0 10px 20px; background: url(pgtagbut.png) 0px 4px no-repeat transparent;}
.comments li{ list-style:none;}
/* ------ CALENDAR ------ */
.calendarmonth {   width: 60%; margin-right: auto; margin-left: auto; border-collapse: collapse; margin-top: 4em; margin-bottom: 2em; border: 1px solid #e63973;}
.calendarmonth td, .calendarmonth th { padding: 0.5em; margin: 0; }
.calendarmonthlink { text-align: center;}
.calendarmonthheader h2 { font-size: 16px; margin: 0; color: #e63973;}
.page_month #main form, .page_month #main dl { margin: 8px; }
.calendardaynum { text-align: center; }
.calendardaycount { text-align: center; }
.calendarday { width: 14%; }
/* ------ IMAGES ------ */
/* so that IE users will see a new image */
* html span.ljuser{background-image: url(pgufbpb.png) !important;background-repeat: no-repeat;background-position: left middle;padding: 24px 24px 0px 0px !important;}
* html span.ljuser img{visibility: hidden;}
/* icon for users */.ljuser img[src*="userinfo.gif"] {width: 0;height: 0;background-repeat: no-repeat;background-image: url(pgufbpb.png) !important; padding: 24px 24px 0 0 !important;}
/* icon for communities */.ljuser img[src*="community.gif"] {width:0;height: 0;background-repeat: no-repeat;background-image: url(pgufmr.png) !important;padding: 24px 24px 0 0 !important;}
.entryposter img[src*="userinfo.gif"], collapsed entry img[src="http://l-stat.livejournal.com/img/userinfo.gif"]{background:url(pgufbpb.png);}
.entryposter img[src*="community.gif"], collapsed entry img[src="http://stat.p-stat.livejournal.com/img/community.gif"]background:url(pgufmr.png);}
.ljuser img, .entryicon img, .entrylinkbarpre a img {height: 0px; width: 0px; padding: 24px 24px 0px 0px !important; background: transparent none no-repeat scroll 0 0;}
img[src*="userinfo.gif"], img[src*="community.gif"]  { width: 0 !important; height: 0 !important; background: none !important; background-repeat: no-repeat !important; padding: 24px 24px 0 0px !important;}
img[src*="userinfo.gif"] {  background-image: url(pgufbpb.png) !important; }
img[src*="community.gif"] { background-image: url(pgufmr.png) !important; }
.entryicon img{padding: 16px 16px 0 0 !important;background-color:transparent;width: 0;height: 0;background-repeat: no-repeat;}
.entryicon img[src*="icon_protected.gif"], dd img[src="http://stat.p-stat.livejournal.com/img/icon_protected.gif"]{background:url(pglock.png);}
.entryicon img[src*="icon_private.gif"], dd img[src="http://stat.p-stat.livejournal.com/img/icon_private.gif"]{background:url(pgshield.png);}
/*------mini images------*/
img[src*="btn_nudge.gif"], img[src*="btn_tracking.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_freeze.gif"], img[src*="btn_del.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="syndicated.gif"], img[src*="btn_edittags.gif"], img[src*="btn_prev.gif"], img[src*="btn_next.gif"], img[src*="btn_addfriend.gif"], img[src*="btn_todo.gif"], img[src*="btn_memories.gif"], img[src*="btn_edit.gif"], img[src*="btn_search.gif"], img[src*="btn_tellfriend.gif"], img[src*="btn_track.gif"], img[src*="btn_addfriend.gif"],img[src*="button-flag.gif"] {height: 0px; width: 0px; padding: 24px 24px 0px 0px !important; background: transparent none no-repeat scroll 0 0;}
img[src*="btn_memories.gif"] {background:url(pgmemories.png);}
img[src*="btn_todo.gif"] {background:url(pgtodo.png);}
img[src*="btn_edit.gif"] {background:url(pgupdate.png);}
img[src*="btn_search.gif"] {background:url(pgsearch.png);}
img[src*="btn_tellfriend.gif"] {background:url(pgtellafriend.png);}
img[src*="btn_track.gif"] {background:url(pgtrack.png);}
img[src*="btn_addfriend.gif"] {background:url(pgaddfriend.png);}
img[src*="button-flag.gif"] {background:url(pgflag.png);}
img[src*="btn_next.gif"] {background:url(pgnext.png);}
img[src*="btn_prev.gif"] {background:url(pgprevious.png);}
img[src*="btn_edittags.gif"] {background:url(pgtag.png);}
img[src*="syndicated.gif"] {background:url(pgrss.png);}
img[src*="btn_del.gif"] {background:url(pgdelete.png);}
img[src*="btn_unscr.gif"] {background:url(pgunscreen.png);}
img[src*="btn_scr.gif"] {background:url(pgscreen.png);}
img[src*="btn_freeze.gif"] {background:url(pgfreeze.png);}
img[src*="btn_unfreeze.gif"] {background:url(pgunfreeze.png);}
img[src*="btn_tracking.gif"] {background:url(pgtracking.png);}
img[src*="btn_nudge.gif"] {background:url(pgnudge.png);}
/*Extras - Don't Touch Below*/
/*:::::::::::::Contextual PopUp:::::::::::::::*/
div.ContextualPopup { margin: 20px 0px 0 -30px; font: normal 11px "Tahoma", "Verdana", sans-serif !important; background-color: transparent!important;}
div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {text-decoration: none !important;font-weight: normal;color: #313131!important; background-color: #e63973!important;}
div.ContextualPopup div.Inner { background:transparent!important; color: #FFFFFF!important; border:none; padding:10px; width: 220px; font-family: tahoma, sans-serif;}
div.ContextualPopup .Userpic { padding:10px; background:#e63973; margin:0px; border:1px solid #cccccc;}
div.ContextualPopup .Relation { letter-spacing:1px; border-bottom: 1px dotted #ffffff; margin-bottom:4px; padding-bottom:4px;}
div.ContextualPopup .Content { line-height: 1.4; background:#e63973; border:1px solid #aaaaaa; margin-right:80px;}
#lj_controlstrip select {background-color: #313131!important;}
#lj_controlstrip_search_input_text {background-color: #313131!important; color: #e63973!important;}
/*Extras - Don't Touch Above*//* ------ Thank you for using a scotchbonnet layout ------ */

Extras

Implement CCS into Theme Layer
(Paid/Permanent Users)

If I offer a theme layer, follow any of the links below on how to implement into any of mine into your journal. Thank you.

s2bloggish Tutorials by carriep63:
1. Creating a Theme Layer(using Livejournal new customized area)
2. Using CSS with a Theme Layer
scotchbonnet Tutorials by scotchosur:
1. Creating a Theme Layer(for InsaneJournal users)
2. Create a Style(Coming Later...)

Images

If using this layout, please don't hotlink. Upload to your site or use an image storage online such as photobucket to host.

32 Images
The zip file includes all the images to this layout.
Note: The link will go to Megaupload. There is a possible wait to non-members.

For Paid/Permanent Accounts
If you wish to have tags, extra textbox and metadata function (such as image to the left) to work in your journal, please click here for codes.

Notes
This layout is not to be changed, I spent a lot of time to get the graphics, colors and text right that I don't want to see it broken. Right now, this only available as a free theme so no fancy stuff added. However, I do plan on revisiting this layout to add a paid version as well in the future.

Credit
If you keep the image in the layout (logo), then it isn't necessary to have a link in the sidebar. However, if you wish to remove the the image then I would appreciate it.

Questions
If you have questions, please ask in comments. I'll try my best to get to you.

Layout .04 - S2 Flexible Squares : Tomato

Thu, 27 Nov 2008 20:05:34 GMT

With minor up and downs, mostly on IE side I have enjoyed skimming Flexible Squares. I would like to thank so much babyelefant at Everything_LJ as always for last minute help.

Tomato was created for Livejournal base layout Flexible Squares.
Free: Cascading Style Sheet

Preview of Tomato Layout
[Click Here for Free Preview]

Details

layout available: right-side navbar position only
custom colors : in stylesheet
best view: : 1024x768 or higher (unknown with lower res)
browser checked : firefox 3.0.4, internet explorer 7(decent with IE6, unknown with lower)
works with : free, nav bar (decent with plus)
available at : http://asylums.insanejournal.com/scotchbonnet/
original design by : scotchsour
images used : scotchsour

Instructions

How to Style? (using the LiveJournal new customize journal area)

Before you start, make sure you're in the correct journal. At the very top, in Customization Area>Choose Journal Style use the drop down menu to choose.

1. In livejournal's navigational menu, go to journal > customize or press the link.

2. Under (2. Select a New Theme), go the search box and type Flexible Squares and press search. Once the layouts appear go to the bottom and in the drop down choose (show all).

3. Find and press (apply theme) to Flexible Squares - (No plain theme available) Choose any by Yati Mansor and then press (apply theme) then press (customize).

4. Under Customize Your Theme, press (custom css).

5. Under custom css > page > where it states: ("Use layout's "Base Weblog" stylesheet") say no. Under that, Custom external stylesheet URL should be blank.

6. Add the LiveJournal "Tomato" Cascading Style Sheet for Free Users into the custom stylesheet textarea.

7. Press "save changes".

8. Go to the blue box on the page that displays your current journal and press your identity link.

9. You should be done.

10. Thank you for trying this layout.

CSS Code

LiveJournal Cascading Style Sheet for Free Users

/* template  : scotchbonnet .04 - s2 Flexible Squares : Tomato
published : November 27, 2008
y       : sam emme / scotchsour.livejournal.com + scotchsour.insanejournal.com
works with: Free, Paid, Nav Bar (Unknown with Plus)
browser  : Firefox 3.0.4, Internet Explorer 7(decent with IE6, unknown with lower)
available : http://asylums.insanejournal.com/scotchbonnet/
original design by : scotchsour
images used : scotchsour */
/* ------------ BASIC ELEMENTS ------------ */
body {background-color: #d3d48d; text-align: center; color: #ffffff; font-family: "Verdana", sans-serif; font-size: 11px; margin: 20px 0 20px 0; }
a, a:link, a:visited {color: #ff7a08; text-decoration: none; }
a:hover {color: #000000; text-decoration: underline; }
p, td, blockquote {font-size: 11px; }
code, kbd, pre, tt { font-family: monospace;	}

/* ------------ CONTAINER ------------ */
#content { width: 745px; margin-left: auto; margin-right: auto; background-color: #d3d48d; border-style: solid; border-width: none; border-style: none; border-color: #7e8997; padding: 15px; }
#maincontent { margin-top: 5px; font-family: "Verdana", sans-serif; font-size: 11px; background-color: #d3d48d; color: #ffffff; border-color: #7e8997; border-width: 0px; margin-right: 175px; text-align: left; }
#maincontent img { max-width:300px; overflow: hidden; }
.subcontent { width: 560px; background-color: #ca1604; background-image:url(tomato-top.gif); background-position:top; background-repeat:no-repeat; }

/* ------------ ENTRY ------------ */
.entry	{ margin: 0px 0px 0px 0px; padding: 10px 10px 40px 20px; background-color: #ca1604; color: #000000; font-family: "Verdana",sans-serif; font-size: 11px; text-align: left; border-width: 1px; background-image:url(tomato-bottom.gif); background-position:bottom; background-repeat:no-repeat; }

/* entry --  inside the entry */
.userpic { position: relative;	float: left; background-color: #ededed; padding: 5px; margin: 10px; z-index: 15; border-width: 1px; border-color: #999999; border-style: solid; top: 10px; }
.userpicfriends { position: relative; float: left; padding: 5px; margin: 10px; text-align: center; border-style: solid; border-width: 1px; border-color: #999999; font-family: "Verdana", sans-serif; font-size: 11px; z-index: 15; top: 10px; }
.date { line-height: 200%;	top: 5px; color: #999999; font-family: "Verdana", sans-serif; font-size: 11px; }
.subject { font-weight: bold; padding: 10px; color: #c1c1c1; font-family: "Verdana", sans-serif; font-size: 11px; }
.subject a, .subject a:link, .subject a:visited {	 color: #c0c9ce;	}
.subject a:hover { color: #ffffff; }	
.datesubject { padding: 15px 5px 5px 5px; height: 50px; }
.currents, .currentmood, .currentmusic { font-family: "Verdana", sans-serif; font-size: 11px; }
.currents { margin-top:10px; }
.comments { font-family: "Verdana", sans-serif; font-size: 11px; text-align: left; background-color: none; padding: 0px 5px 15px 5px; position: relative; top: 15px; }
div.comments a, div.comments a:link, div.comments a:visited { color: #c0c9ce; }
div.comments a:hover { color: #ffffff; text-decoration: none; }
.datesubjectcomment { background-color: #999999; padding: 5px; margin-top: 20px; }
.userpiccomment { position: relative; border-width: 5px; border-style: solid; border-color: #ededed; background-color: #ededed; top: -30px; left: 0px; padding: 5px; margin: 10px 10px -20px 10px; z-index: 15; float: left; border-width: 1px; border-color: #999999; border-style: solid; }
.box { border-style: solid; 	border-width: 1px 0px 0px 0px; border-color: #7e8997; padding: 10px; clear: left; }
.reply { position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px;	text-align: left; font-family: "Verdana", sans-serif; font-size: 11px; line-height: 125%; background-color: #ededed; color: #000000; }
.replytosubject { font-weight: bold; }
.commentreply { position: relative; margin: 10px; font-size: 11px; font-family: "Verdana", sans-serif; color: #000000; }
.commentbox { border-color: #7e8997; border-width: 1px; border-style: solid; padding: 10px; margin: 10px; background-color: #cc1604; }
.datesubjectcomment a:link, .datesubjectcomment a:visited { color: #c0c9ce; }
.datesubjectcomment a:hover { color: #ffffff; }
.commentboxpartial { border-color: #7e8997; border-width: 0px; border-style: none; padding: 10px; margin: 10px; background-color: #ededed; }
.commentinfo { background-color: #ededed; margin-top: 10px; width: 100%; }
.entry ul li { padding-left: 5px; margin-left: 15px; }
.entry ol li { padding-left: 5px; margin-left: 15px; }

/* ------------ HEADER ------------ */
#header { width: 100%; padding: 10px 0px 0px 0px; margin: 0px; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; font-weight: bold; letter-spacing: 2px; background-color: #ffffff; background-image: url(tomato-header.gif); background-repeat:no-repeat; height: 340px; color: #ffffff; }

/* header -- links to views; title of journal; subtitle of journal */	
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited { color: #8797a0; }
div#header a:hover, div#footer a:hover { color: #ffffff; text-decoration: none; }

/* ------------ SIDEBAR ------------ */
#sidebar { padding-top: 0px; padding-bottom: 70px; background-image: url(tomato-logo.gif); background-position:bottom; background-repeat:no-repeat; margin-top: 15px; background-color: #ca1604; font-size: 11px; font-family: "Verdana", sans-serif; color: #c1c1c1; width: 160px; float: right; text-align: left; list-style: none; }
li.sbartitle { padding-left: 55px; padding-top: 10px; padding-bottom: 0px; list-style: none; border-style: solid; border-width: 0px; background-repeat:no-repeat; background-image:url(slicetomato.gif); background-position:left; border-color: #7e8997; background-color: #ca1604; margin-bottom: 10px; margin-top: 10px; height: 35px; } 
#sidebar #sidebar_summary li.sbaritem, #sidebar_summary ul.sbartitle { list-style: none; padding: 5px 0 2px 0; border-width: 0 0 1px 0; border-color: #000000; border-style: dashed; }
#sidebar #sidebar_linklist li.sbaritem, .sbarblank { list-style: none; padding:0px; }
.sbarblank { display: none; padding:0px; }
ul.sbarlist ul.sbarcontent li.sbaritem { padding:0px; }
.defaultuserpic { text-align: center; padding-top: 20px; background-image:url(tomato-logo-top.gif); background-position:top; background-repeat:no-repeat; }
.sbarheader { padding: 0px 5px 0px 5px; }
.sbarbody { padding: 0px 2px 0px 2px; background-color: #ca1604; }
.sbarbody2 { padding: 0 15px 0 15px; }
table.calendar { margin-right: auto;	margin-left: auto; padding: 5px; border-style: dashed;	border-width: 1px; border-color: #000000; }
#sidebar_calendar ul.sbarlist	{ padding-left: 0px; margin-left: 0px; list-style: none; }
#sidebar #sidebar_calendar a:hover { color: #FFFFFF; text-decoration: none; }
.sbarcalendar { border-color: #ffffff; border-width: 0px; border-style: solid; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; }
.sbarcalendarposts { border-color:  none; border-width: none; border-style: none; background-color: #000000; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; }
ul.sbarlist	{ padding-left: 5px; margin-left: 0px; list-style: none;	}
li.sbaritem { padding-left: 7px; list-style: none; }
#sidebar_tags ul.sbarcontent li.sbaritem ul li { padding-left: 0; margin-left: 0; }
#sidebar_tags ul.sbarcontent, #sidebar_tags ul.sbarcontent ul { padding-left: 5px; margin-left: 0; }
#sidebar_tags ul.sbarcontent li.sbaritem { list-style: square outside; padding-left: 0; margin-left: 10px; color:#000; }
#sidebar_tags ul.sbarcontent ul.sbarlist li.sbartitle { list-style: none; padding: 5px 0 2px 0; border-width: 0 0 1px 0; border-color: #000000; border-style: dashed;	}
div#sidebar a:hover { color: #000000; text-decoration: none; }

/* ------------ MENU ------------ */
ul.navheader { padding: 0px; margin: 0px; padding-top: 15px; }
ul.navheader li { display: inline; padding: 0 3px 0 3px; }
.title { font-family: "Verdana", sans-serif; font-size: 11px; font-weight: normal; line-height: 200%; top: 10px; }

/* ------------ FOOTER ------------ */
#footer { width: 100%; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; font-weight: bold; letter-spacing: 1px; color: #ffffff; z-index: 100; clear: both; background-image: url(tomato-footer.gif); background-repeat: no-repeat; background-position: bottom; height: 96px; }
ul.navfooter{ padding: 40px 0px 0px 125px; margin: 0px; }
ul.navfooter li { display: inline; margin: 0 5px 0 5px; }
.clearfoot { clear: both; }

/* -------- ARCHIVE -------- */
.year { background-image: url(archiveyear.png); background-position: center; background-repeat: no-repeat; margin: 10px auto; }
table.yeartable { background-image: url(tomatoarchivecalendar.png); background-repeat: no-repeat; width: 430px; height: 277px; }
table.yeartable td.yearday { background-color: #d3d48d; text-align: center; }
ul.year li { display: inline; }
ul.year { text-align: center; padding-top: 10px; padding-bottom: 10px; padding-right:30px; }
.year a, a:link, a:visited, a:hover{ color: #ff7a08; text-decoration: none; }
.yeardate div:first-child { text-align:center !important; }
.lj-view-month center{ background-image: url(archiveyear.png); background-position: center; background-repeat:no-repeat; padding-bottom: 13px; }
.lj-view-month .entry dl:first-child { width: 540px; background-color: #ca1604; background-image:url(tomato-top.gif); padding:20px 0px 0px 20px; background-position:top left; background-repeat:no-repeat; position:relative; left:-20px; top:-22px; }

/* -------- EXTRAS and MISC. -------- */
input, textarea {background-color: #d3d48d;color: #000000;}
textarea.textbox  {width: 100% !important;}
.clear {height: 5px;}
.skiplinks {text-align: center; background-image: url(archiveyear.png); background-position: center; background-repeat:no-repeat; padding-top: 18px; height:34px; }	
.headerimage {/* for formatting header image */}
.separator{/* for formatting separators between entries */height: 15px;}
blockquote {margin: 1em 3em; padding: 1em; border: 3px double #d3d48d; font-size: 1.1em; font-family: georgia, perpetua, "times new roman", serif;}

/* DON'T TOUCH BELOW*/
/* -------- MINI ICONS -------- */
.subject img {width: 0; height: 0; padding: 17px 0px 0px 16px; background-repeat: no-repeat; /* so that IE users will still see an image */
background-image: url("minitomato2.gif");}
.subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{width: 0; height: 0; padding: 16px 0px 0px 16px !important;
background: url(minitomato4.gif);}
.subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 16px 0px 0px 16px !important;
background: url(minitomato3.gif);}
.entry img[src="http://p-stat.livejournal.com/img/userinfo.gif"]{width: 0; height: 0; padding: 17px 0px 0px 16px;
background: url("minitomato2.gif");}
.entry img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 16px 0px 0px 16px;
background: url("minitomato3.gif");}
.entry img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{width: 0; height: 0; padding: 16px 0px 0px 16px;
background: url("minitomato4.gif");}
.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {width: 0; height: 0; padding: 17px 0px 0px 16px !important;
background-image: url(minitomato2.gif);}
.ljuser img[src="http://p-stat.livejournal.com/img/icon_private.gif"] {width: 0; height: 0; padding: 17px 0px 0px 16px !important;
background-image: url(minitomato4.gif);}
.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {width: 0; height: 0; padding: 16px 0px 0px 16px;
background-image: url(minitomato5.gif);}
.ljuser img[src="http://p-stat.livejournal.com/img/syndicated.gif"] {width: 0; height: 0; padding: 16px 0px 0px 16px;
background-image: url(minitomato5.gif);}
#sidebar_summary img[src="http://p-stat.livejournal.com/img/userinfo.gif"]{width: 0; height: 0; padding: 16px 0 0 16px!important;
background: url(minitomato2.gif);}
#sidebar_summary img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 16px 0 0 16px!important;
background: url(minitomato3.gif);}
#sidebar_summary img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{width: 0; height: 0; padding: 16px  0 0 16px!important;
background: url(minitomato4.gif);}
#sidebar_summary img[src="http://p-stat.livejournal.com/img/community.gif"]{width: 0; height: 0; padding: 16px 0 0 16px!important;
background: url(minitomato5.gif);}
#sidebar_summary img[src="http://p-stat.livejournal.com/img/syndicated.gif"]{width: 0; height: 0; padding: 16px  0 0 16px!important;
background: url(minitomato5.gif);}

/* -------- Don't touch CONTROLSTRIP -------- */
#lj_controlstrip img[src="http://p-stat.livejournal.com/img/userinfo.gif"]{width: 0; height: 0; padding: 16px 0 0 16px!important;
background: url(minitomato2.gif);}
#lj_controlstrip img[src="http://p-stat.livejournal.com/img/community.gif"]{width: 0; height: 0; padding: 16px 0 0 16px!important;
background: url(minitomato5.gif);}
#lj_controlstrip {background-color: #ca1604; /*may change color*/ background-image: url(http://i193.photobucket.com/albums/z113/SourWhiskey/layout/minitomato2.gif); height:63px;}
#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember {margin: 0pt; padding: 0pt; line-height: 16.5px; background-color: #d3d48d; /*may change color*/ color: #000;/*may change color*/ font-family: tahoma; font-size: 8pt; letter-spacing: 2px; text-transform: lowercase;}
#lj_controlstrip input {background-color: #d3d48d;}

/* ------ Don't touch ICON POPUP INFO ------ */
div.ContextualPopup {margin: 5px 0 0 20px; font: normal 11px "Tahoma", sans-serif !important;}
div.ContextualPopup img { border:1px solid #CCCCCC;}
div.ContextualPopup div.Inner { background:transparent!important;color: #FFFFFF!important;border: 1px solid #CCCCCC; padding: 5px; width: 20em;}
div.ContextualPopup .Content { padding: 2px 4px 6px 4px; margin-right: 50px; line-height: 1.4; text-align:left;border:1px solid #CCCCCC; background:#ca1604;}
div.ContextualPopup .Relation {font-weight: bold !important;letter-spacing:1px;border-bottom: 1px dashed #cccccc;margin-bottom:4px; padding-bottom:4px;}
div.ContextualPopup .Content .OnlineStatus {font-weight: bold;}
div.ContextualPopup .Userpic { padding: 4px; background:#ca1604;border:1px solid #CCCCCC; margin-top:8px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {text-decoration: underline !important;font-weight: bold;color: #000!important;}/*---*/

Images
If using, please don't hotlink. There is no direct link in the css layout, just the images' names. Upload to another storage online, try photobucket. Or try this post for other places I might add.

Notes
This layout is not to be changed, I spent a lot of time to get the graphics, colors and text right that I don't want to see it broken. Right now, this only available as a free theme so no fancy stuff added. However, I do plan on revisiting this layout to add a paid version as well in the future. If you want the same sidebar as mine, just go to the sidebar's customization area 1. Make sure your Tags | Page Summary | Linkslist are turned on (Yes). 2. In the 1-6 boxes choose from the drop down menu. Default Userpic | Calendare | Links List | Blurb | Tags Page | Summary. If you wish to use the Navigation Strip, which is coordinated with the layout go to Customization Area, look for Navigation Strip and check off either:
Always show on my journal/community
Always show on any journal or community I view

Credit
If you keep the image in the layout (logo), then it isn't necessary to have a link in the sidebar. However, if you wish to remove the the image then I would appreciate it.

Questions
If you have questions, please ask in comments. I'll try my best to get to you.

Layout .03 - S2 Tranquility II : Blue Shoes

Mon, 28 Jan 2008 02:58:32 GMT

With minor up and downs, mostly on IE side I have enjoyed skimming Tranquility II. I would like to thank so much babyelefant at Everything_LJ as always for patient help to get this layout working properly and not banging my brains against the monitor.

Blue Shoes was created for Livejournal base layout Tranquility II.
Free: Cascading Style Sheet
Paid/Permanent: Theme Layer (includes metadata to the left and tags in sidebar.)

Preview of Blue Shoes Layout
[Click Here for Free Preview]
[Click Here for Paid Preview]

Details

layout available: left-side navbar position only
custom colors : in stylesheet and theme layer
best view: : 1024x768 or higher (unknown with lower res)
browser checked : firefox 2.11, internet explorer 7(decent with IE6, unknown with lower)
works with : free, paid, nav bar (decent with plus)
available at : http://asylums.insanejournal.com/scotchbonnet/
original design by : scotchsour
images used : scotchsour, sweetie

Instructions

How to Style? (using the LiveJournal new customize journal area)

Before you start, make sure you're in the correct journal. At the very top, in Customization Area>Choose Journal Style use the drop down menu to choose.

1. In livejournal's navigational menu, go to journal > customize or press the link.

2. Under (2. Select a New Theme), go the search box and type tranquility ii and press search. Once the layouts appear go to the bottom and in the drop down choose (show all).

3. Find and press (apply theme) to Tranquility II - Plain Theme by Matthew Vince" and then press (apply theme) then press (customize).

4. Under Customize Your Theme, press (custom css).

5. Under custom css > page > where it states: ("Use layout's "Base Weblog" stylesheet") say no. Under that, Custom external stylesheet URL should be blank.

6. Add the LiveJournal "Blue Shoes" Cascading Style Sheet for Free Users into the custom stylesheet textarea.

7. Press "save changes".

8. Go to the blue box on the page that displays your current journal and press your identity link.

9. You should be done.

10. Thank you for trying this layout.

Extras

Implement CCS into Theme Layer
(Paid/Permanent Users)

If I offer a theme layer, follow any of the links below on how to implement into any of mine into your journal. Thank you.

CSS Code

LiveJournal Cascading Style Sheet for Free Users

/* template  : scotchbonnet .04 - s2 tranquility ii : blue shoes
published : January 31, 2008
by        : sam emme / scotchsour.livejournal.com + scotchsour.insanejournal.com
works with: Free, Paid, Nav Bar (Unknown with Plus)
browser   : Firefox 2.11, Internet Explorer 7(pretty decent with IE6, Unknown below)
available : http://asylums.insanejournal.com/scotchbonnet/
original design by : scotchsour
images used : sweetie, scotchsour */
/* ------------ BASIC ELEMENTS ------------ */
ul#lj-links, ul#lj-summary, ul#user-links { margin:  0; padding: 0; }
body {
 	    background: #87A4DF url(http://i193.photobucket.com/albums/z113/SourWhiskey/layout/sebsmain-bg.gif)  repeat-x;
 	    font-family: Tahoma, sans-serif;
 	    font-size: 13px;
 	    line-height: 125%;
 	    color: #2D2D2D;
 	    text-align: center;
}
a {
 	    font-family: Tahoma, sans-serif;
 	    font-size: 100%;
	    color: #000;
	    font-weight: bold;
 	    text-decoration: none;
        }
a:visited { 
 	    color: #fff; 
}
a:hover, a:visited:hover, a:active {
 	    color: #fff;
	    font-weight: bold;
 	    text-decoration: underline; 
}
p {margin: 5px; padding: 5px;}
form {display: inline; margin: 0px; padding: 0px;}       
input, select, textarea { font-family: Verdana, Helvetica, sans-serif;background: #6699FF;font-size: 100%;color: #ffffff; padding: 2px; margin: 3px; border: 1px solid #99CCFF;}
textarea.textbox{width:95% !important;}
blockquote { margin: 1em 3em; padding: .3em .7em .3em 2.5em; border: 1px solid #99CCFF; width: 80%; background: url(http://i193.photobucket.com/albums/z113/SourWhiskey/layout/sebs-bgquote.gif)  repeat-y transparent;color: #ffffff;}
span.ljuser { background: url(http://i193.photobucket.com/albums/z113/SourWhiskey/ij_images/16-cube-green.png) no-repeat; background-position:left; width: 16px; height: 16px;margin:0px;}
span.ljuser img { visibility: hidden;width:16px; height:16px;}
h2 {color: #ffffff;}
/* ------------ CONTAINER ------------ */
#container {
            position: relative;
            width: 820px;
            margin: 0 auto;
            text-align: left;
}
/* ------------ HEADER ------------ */
#header {
            margin-bottom: 15px;
            border: none ;
            background-color: transparent;
}
#header h1 {

font-family: Georgia, serif;
            font-size: 145%;
            color: #fff;
        }
#banner hr {display:none;}
/* ------------ MENU ------------ */
#menu {
            position: relative;
            border: 1px solid #99CCFF;
            float: left;
            width: 210px;
            font-family: Georgia, serif;
            font-size: 100%;
            color: #000;
            padding-bottom: 125px;
 	    background: #6699FF url(http://i193.photobucket.com/albums/z113/SourWhiskey/layout/sebslogo.gif) no-repeat center bottom;
}
#menu h2 {
            font-size:140%;
            color: #ffffff;
            font-family: Georgia, serif;
            padding-left:5px;
            font-style: normal;
}
#menu h2.userpic {
            text-align: center;
            padding: 5px;
            border: 1px solid #99CCFF;
            width:100px;
            length:100px;
            margin: 10px auto;
}
#menu a {
            font-family: Verdana, Helvetica, sans-serif;
            font-size: 80%;
            color: #000;
}
#menu a:visited { color: #fff; }
#menu a:hover, #menu a:visited:hover, #menu a:active { color: #000; }
#menu ul {
            margin: 3px;
            list-style: none;
}
#menu ul li {
            margin: 3px;
            padding: 2px;
            list-style: none;
        }
#menu ul li.active {
            font-family: Verdana, Helvetica, sans-serif;
            font-size: 80%;
            color: #000;
            font-weight: bold;
        }
/*menu individuals*/
#menu #lj-links ul {
            list-style: none;
            margin: 0px;
            margin-left: 4px;
            margin-bottom: 10px;
            margin-top: 8px;
            padding: 0px;
            font-size: 13px;
}
#menu #lj-links li {
            background: url(http://i193.photobucket.com/albums/z113/SourWhiskey/layout/sebsmenu-bg.gif) no-repeat;
            display: block;
            font-size: 12px;
            height: 20px;
            list-style: none;
            margin: 0px;
            padding:1px 0px 5px 25px;
            text-transform: lowercase;
}
#menu #lj-links a {
            font-family: Verdana, Helvetica, sans-serif;
            font-size: 100%;
            color: #fff;
}
#menu #lj-links a:visited { color: #000; }
#menu #lj-links a:hover, #menu a:visited:hover { color: #fff; }
#menu #lj-links a:active { color: #000; }
#menu #lj-summary a {
            font-family: Verdana, Helvetica, sans-serif;
            font-size: 80%;
            color: #fff;
}
#menu #lj-summary a:visited, #menu #lj-summary a:hover, #menu a:visited:hover, #menu #lj-summary a:active { color: #fff; }
#menu #user-links li{
            padding: 0px 0px 0px 7px;
            text-transform: lowercase;
}
#menu #user-links b {
            background: url(http://i193.photobucket.com/albums/z113/SourWhiskey/layout/sebsmenu-bg.gif) no-repeat;
            display: block;
            font-size: 13px;
            height: 20px;
            list-style: none;
            margin: 5px 0px 5px 0px;
            padding:1px 0px 7px 25px;
            color: #ffffff;
}
#menu #user-links a {
            font-family: Verdana, Helvetica, sans-serif;
            font-size: 80%;
            color: #000;
}
#menu #user-links a:visited, #menu #user-links a:hover, #menu a:visited:hover, #menu #user-links a:active { color: #ffffff; }

#menu #tags a, #menu #tags2 a {
            font-family: Tahoma, sans-serif;
            font-size: 80%;
            color: #fff;
}
#menu #tags a:visited, #menu #tags a:hover, #menu #tags2 a:hover, #menu #tags a:active, #menu #tags2 a:active { color: #ffffff; }
#menu #tags2 a:visited, #menu #tags a:visited:hover, #menu #tags2 a:visited:hover{ color: #000000; }
#menu #tags li{
            padding: 0px 0px 0px 7px;
            text-transform: lowercase;
}
#menu #tags, #menu #tags2 {background:#; margin:0px; padding:0px 0px 0px 5px}
#menu #tags ul, #menu #tags2 ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
}
#menu #tags2 h2{font-size:140%; color: #ffffff; font-family: Georgia, serif; padding-left:5px; font-style: normal;}
#menu #linklist a {
            font-family: Tahoma, sans-serif;
            font-size: 80%;
            color: #fff; margin:0px;
}
#menu #linklist a:visited, #menu #linklist a:hover, #menu a:visited:hover, #menu #linklist a:active { color: #fff; }

/*images*/
#menu #lj-summary img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
            width: 0;
            height: 0;
            padding: 0 16px 16px 0;
            background: url("http://i193.photobucket.com/albums/z113/SourWhiskey/ij_images/16-security-lock.png");
}
#menu #lj-summary img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
            width: 0;
            height: 0;
            padding: 0 16px 16px 0;
            background: url("http://i193.photobucket.com/albums/z113/SourWhiskey/ij_images/16-em-plus.png");
}
#menu #lj-summary img{
            width: 0;
            height: 0;
            background-repeat: no-repeat;
/* so that IE users will still see an image */
            background-image: url("http://i193.photobucket.com/albums/z113/SourWhiskey/ij_images/16-security-lock.png");
            padding: 16px 16px 0 0
} 
/* ------------ CONTENT ------------ */
#content {
            position: relative;
            margin-left: 0px;
            background-color:transparent;
            background-image:
url(http://i193.photobucket.com/albums/z113/SourWhiskey/layout/sebs-shoe.gif);
            background-repeat:no-repeat;
            background-position:top left;
            z-index:100;
            overflow:hidden;
            width: 605px;
}

#entries {
            margin:343px 0px 0px 20px;
            width:566px;
            padding:0px;
            overflow:hidden;
}
#content h2 {
 	    background: #6699FF url(http://i193.photobucket.com/albums/z113/SourWhiskey/layout/sebstextboxtop.gif) no-repeat;
            height:50px;
            margin: 0px;
            padding: 5px 0px 0px 15px;
            font-style: oblique;
}
.ind-entry {
            padding: 10px 0px 15px 5px;
            background: #78ABFF url(http://i193.photobucket.com/albums/z113/SourWhiskey/layout/sebsbigbox.gif) no-repeat;
            margin-bottom: 15px;
            border: 1px solid #99CCFF;
}
.ind-entry div.entry-item {
            font-size: 95%;
            overflow:hidden;
            margin-right: 3px;
            margin-left:3px;
}
.ind-entry div.entry-item a, .ind-entry div.entry-item a:visited, .ind-entry div.entry-item a:hover, .ind-entry div.month-entries a:hover, .ind-entry div.entry-item a:active { 
            color: #000; 
}
.ind-entry h3 img {
            float: right;
            position: relative;
            padding: 5px;
            top: -20px;
            border: 1px solid #99CCFF;
            margin-bottom:10px;
            margin-right: 15px;
}
.ind-comment-one h3 img, .ind-comment-two h3 img, .ind-comment-screened h3 img{
            float: right;
            position: relative;
            padding: 5px;
            top: -10px;
            border: 1px solid #99CCFF;
            margin-bottom:10px;
}
.ind-entry h2 {
            font-family: Georgia, serif;
            font-size: 130%;
            color: #fff;
            margin: 20px 0px;
            line-height: 140%;
            font-style: normal;
}
.ind-entry h4 {
            font-family: Verdana, Helvetica, sans-serif;
            font-size: 80%;
            color: #fff;
}
.ind-entry h4 a, .ind-entry h4 a:visited, .ind-entry h4 a:hover, .ind-entry h4 a:visited:hover, .ind-entry h4 a:active { color: #fff; }

/*images*/
#content h2 img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
            width: 0;
            height: 0;
            padding: 0 16px 16px 0;
            background: url("http://i193.photobucket.com/albums/z113/SourWhiskey/ij_images/16-security-lock.png");
}

#content h2 img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
            width: 0;
            height: 0;
            padding: 0 16px 16px 0;
            background: url("http://i193.photobucket.com/albums/z113/SourWhiskey/ij_images/16-em-plus.png");
}

#content h2 img   {
            width: 0;
            height: 0;
            background-repeat: no-repeat;
/* so that IE users will still see an image */
            background-image: url("http://i193.photobucket.com/albums/z113/SourWhiskey/ij_images/16-security-lock.png");
            padding: 16px 16px 0 0;
} 
/*tags*/
.ljtags {
            margin-left: 5px;
            margin-top: 25px;
            color: #ffffff;
	    font-weight: bold;
}
.ljtags a:linked, a:visited, a:visited:hover, a:active{
            color: #000000; 
}
/* ------- DAYS-MONTHS-YEARS ------- */
.month-entries {
            margin: 10px 0;
	    font-size: 95%;
            color: #fff;
}
.month-entries a { 
            color: #000;
            font-size: 95%;
}
.month-entries a:visited, .month-entries  a:hover, .month-entries  a:visited:hover, .month-entries a:active {
            color: #fff; 
            font-size: 95%;
}
.month-entries b {
            background: url(http://i193.photobucket.com/albums/z113/SourWhiskey/menu1.gif) no-repeat;
            font-size: 13px;
            height: 30px;
            display:block;
            margin: 5px 0px 5px 0px;
            padding-left: 25px;
            padding-top: 1px;
            color: #fff;
}
.month-entries ul {
            margin: 0px;
        }
.month-entries ul li {
            padding: 0px;
        }
/* ------------ ENTRY COMMENTS ------------ */
#comments {
	}
.ind-comment-one, .ind-comment-two {
            margin: 10px 0px;
            padding: 5px;
            font-size: 95%;
            color: #fff;
            border-top: 1px solid #99CCFF;
            border-bottom: 1px solid #99CCFF;
}
.ind-comment-one h2, .ind-comment-two h2 {
            font-size: 105%;
            color: #fff;
            font-family: Georgia, serif;
            background: url(http://i193.photobucket.com/albums/z113/SourWhiskey/layout/sebscomment-bg.gif)  repeat-x;
}
.ind-comment-one h4, .ind-comment-two h4 {
            font-family: Verdana, Helvetica, sans-serif;
            font-size: 95%;
            color: #fff;
}
.ind-comment-one h4 a, .ind-comment-two h4 a {
            font-size: 95%;
            color: #fff;
}

div.entry-item {
            font-family: Tahoma, sans-serif;
            font-size: 100%;
            color: #fff;
            margin: 15px 0px;
}
.ind-comment-one div.entry-item a, .ind-comment-two div.entry-item a {
            font-family: Tahoma, sans-serif;
            font-size: 100%;
            color: #fff;
            text-decoration: underline;
}
.ind-comment-one div.entry-item a:visited, .ind-comment-two div.entry-item a:visited { 
            color: #fff; 
}
.ind-comment-one div.entry-item a:hover, 
.ind-comment-one div.entry-item a:visited:hover, 
.ind-comment-two div.entry-item a:hover, 
.ind-comment-two div.entry-item a:visited:hover { color: #000; 
}
.ind-comment-one div.entry-item a:active, .ind-comment-two div.entry-item a:active {
            color: #fff; 
}
/* ------ screened comments ------ */

.ind-comment-screened {
	margin: 10px 0;
	padding: 5px;
	background-color: #fff; 
	border-bottom: 1px solid #999;
	}

.ind-comment-screened h2 {
	font-family: Georgia, serif;
	font-size: 130%;
	color: #333;
	margin: 20px 0px;
	}

.ind-comment-screened h4 {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 80%;
	color: #000000;
	}
	
.ind-comment-screened h4 a {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 100%;
	text-decoration: underline;
	}

.ind-comment-screened h4 a:visited { color: #5ab300; }
.ind-comment-screened h4 a:hover, .ind-comment-screened h4 a:visited:hover, .ind-comment-screened h4 a:active { color: #336600; }

.ind-comment-screened div.entry-item {
	font-family: Georgia, serif;
	font-size: 100%;
	color: #333;
	margin: 10px 0px;
	}

.ind-comment-screened div.entry-item a {
	font-family: Georgia, serif;
	font-size: 100%;
	color: #708cc4;
	text-decoration: underline;
	}
.ind-comment-screened div.entry-item a:visited { color: #5ab300; }
.ind-comment-screened div.entry-item a:hover, .ind-comment-screened div.entry-item a:visited:hover, .ind-comment-screened div.entry-item a:active { color: #336600; }
.ind-comment-one div.entry-item, .ind-comment-two div.entry-item, .ind-comment-screened div.entry-item {color:#ffffff;}
/* ------------ FOOTER ------------ */
#footer {
            position: relative;
            font-family: Georgia, serif;
            font-size: 100%;
            color: #ffffff;
            margin-left: 25px;
            margin-right: 13px;
}
#footer p {
            padding: 20px 0 0 20;
}
#footer a {
            font-family: Georgia, serif;
            font-size: 100%;
            color: #fff;
}

#footer a:visited, #footer a:hover, #footer a:visited:hover, #footer a:active { color: #fff; }
/* -------- Don't touch CONTROLSTRIP -------- */
/*Unless stated, don't touch anything below*/
#lj_controlstrip form div{
            margin: 0px;
}
#lj_controlstrip table {
            margin: 0pt;
            padding: 0pt;
            background: transparent none repeat scroll 0%;
            width: auto;
}
#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember {
            margin: 0pt;
            padding: 0pt;
            line-height: 16.5px;
            background-color: #6699FF; /*may change color*/
            color: #fff;/*may change color*/
            font-family: tahoma;
            font-size: 8pt;
            letter-spacing: 2px;
            text-transform: lowercase;
}
/* -------- End CONTROLSTRIP -------- */
/* ------ Don't touch ICON POPUP INFO ------ */
div.ContextualPopup { margin: 5px 0 0 20px; font: normal 11px "Tahoma", sans-serif !important;}
div.ContextualPopup img { border:1px solid #CCCCCC;}
div.ContextualPopup div.Inner { background:transparent!important;color: #FFFFFF!important;border: 1px solid #CCCCCC; padding: 5px; width: 20em;}
div.ContextualPopup .Content { padding: 2px 4px 6px 4px; margin-right: 50px; line-height: 1.4; text-align:left;border:1px solid #CCCCCC; background:#78ABFF;}
div.ContextualPopup .Relation {font-weight: bold !important;letter-spacing:1px;border-bottom: 1px dashed #cccccc;margin-bottom:4px; padding-bottom:4px;}
div.ContextualPopup .Content .OnlineStatus {font-weight: bold;}
div.ContextualPopup .Userpic { padding: 4px; background:#87A4DF;border:1px solid #CCCCCC; margin-top:8px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {text-decoration: underline !important;font-weight: bold;color: #000!important;}/*---*/

CSS Code

LiveJournal Theme Layer for Paid Users

layerinfo "type" = "theme";
layerinfo "name" = "scotchsour's blue shoes layout";

# tell the system to not auto-magically add tags to entry text
set tags_aware = false;

# add colons to mood/music
set text_meta_location = "location:";
set text_meta_mood = "mood:";
set text_meta_music = "music:";

function Page::print_custom_head()
{
"""
<style type="text/css">
/* template  : scotchbonnet .04 - s2 tranquility ii : blue shoes
published : January 31, 2008
by        : sam emme / scotchsour.livejournal.com + scotchsour.insanejournal.com
works with: Free, Paid, Nav Bar (Unknown with Plus)
browser   : Firefox 2.11, Internet Explorer 7(pretty decent with IE6, Unknown below)
available : http://asylums.insanejournal.com/scotchbonnet/
original design by : scotchsour
images used : sweetie, scotchsour */
/* ------------ BASIC ELEMENTS ------------ */
ul#lj-links, ul#lj-summary, ul#user-links { margin:  0; padding: 0; }
body {
 	    background: #87A4DF url(http://i193.photobucket.com/albums/z113/SourWhiskey/layout/sebsmain-bg.gif)  repeat-x;
 	    font-family: Tahoma, sans-serif;
 	    font-size: 13px;
 	    line-height: 125%;
 	    color: #2D2D2D;
 	    text-align: center;
}
a {
 	    font-family: Tahoma, sans-serif;
 	    font-size: 100%;
	    color: #000;
	    font-weight: bold;
 	    text-decoration: none;
        }
a:visited { 
 	    color: #fff; 
}
a:hover, a:visited:hover, a:active {
 	    color: #fff;
	    font-weight: bold;
 	    text-decoration: underline; 
}
p {margin: 5px; padding: 5px;}
form {display: inline; margin: 0px; padding: 0px;}       
input, select, textarea { font-family: Verdana, Helvetica, sans-serif;background: #6699FF;font-size: 100%;color: #ffffff; padding: 2px; margin: 3px; border: 1px solid #99CCFF;}
textarea.textbox{width:95% !important;}
blockquote { margin: 1em 3em; padding: .3em .7em .3em 2.5em; border: 1px solid #99CCFF; width: 80%; background: url(http://i193.photobucket.com/albums/z113/SourWhiskey/layout/sebs-bgquote.gif)  repeat-y transparent;color: #ffffff;}
span.ljuser { background: url(http://i193.photobucket.com/albums/z113/SourWhiskey/ij_images/16-cube-green.png) no-repeat; background-position:left; width: 16px; height: 16px;margin:0px;}
span.ljuser img { visibility: hidden;width:16px; height:16px;}
h2 {color: #ffffff;}
/* ------------ CONTAINER ------------ */
#container {
            position: relative;
            width: 820px;
            margin: 0 auto;
            text-align: left;
}
/* ------------ HEADER ------------ */
#header {
            margin-bottom: 15px;
            border: none ;
            background-color: transparent;
}
#header h1 {

.ind-comment-screened {
	margin: 10px 0;
	padding: 5px;
	background-color: #fff; 
	border-bottom: 1px solid #999;
	}

.ind-comment-screened h2 {
	font-family: Georgia, serif;
	font-size: 130%;
	color: #333;
	margin: 20px 0px;
	}

.ind-comment-screened h4 a:visited { color: #5ab300; }
.ind-comment-screened h4 a:hover, .ind-comment-screened h4 a:visited:hover, .ind-comment-screened h4 a:active { color: #336600; }

.ind-comment-screened div.entry-item {
	font-family: Georgia, serif;
	font-size: 100%;
	color: #333;
	margin: 10px 0px;
	}

</style>
""";
}

# -------------------------------
# tags (main page layout)
# -------------------------------
function Page::print() {
  var string title = $this->title();

# make helper vars
  var string k1SBheader      = "";
  var string k1SBheader_one  = "<h2>";
  var string k1SBheader_two  = "</h2>";
  var string k1SBcontent     = "";
  var string k1SBcontent_one = "";
  var string k1SBcontent_two = "";

# generate page id:
  var string current_view = $.view;
  if ( $.view == "month" or $.view == "day" ) {
    $current_view = "archive";
  }
  if ( $.view == "entry" or $.view == "reply" ) {
    $current_view = "recent";
  }

# begin main page html:
  print "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n";
  print "<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"\">\n";
  print "<head>\n";
  print "<meta name=\"resource-type\" content=\"Document\" />\n";
  print "<meta name=\"type\" content=\"index\" />\n";
  print "<link rel=\"stylesheet\" type=\"text/css\" href=\"\" />\n";
  $this->print_head();
  print "<link rel=\"bookmark\" href=\"#header\" title=\"Top of the Page\" />\n";
  print "<link rel=\"bookmark\" href=\"#menu\" title=\"Main Menu\" />\n";
  print "<link rel=\"bookmark\" href=\"#summary\" title=\"Page Summary\" />\n";
  print "<link rel=\"bookmark\" href=\"#content\" title=\"Entries\" />\n";
  print "<title>$title</title>\n";
  print "</head>\n";
  print "<body id=\"$current_view\">\n";

$this->print_control_strip();

print "<div id=\"container\">\n";
      print "<div id=\"header\">\n";
        print "<div id=\"banner\">\n";
          print "<h1>$title</h1>\n";
          print "<hr />";
        print "</div>\n";
      print "</div>\n";
      print "<div id=\"menu\">\n";

# <sidebar>

# default userpic
        $this->lay_top_userpic();
        print "\n";

# navigation links
        print_lj_links($this);

# page summary
        print($this->lay_sidebar_view_summary());

# linklist
        $this->print_linklist();

# tags unordered list
        # set header
        $k1SBheader  = "Tags";

# start <ul>
        $k1SBcontent = "<ul id=\"tags\">\n";

# add tags <li>'s
        foreach var TagDetail tag ($this->visible_tag_list()) {
          $k1SBcontent = $k1SBcontent + """<li><a href="$tag.url">$tag.name</a></li>\n""";
        }
        # end <ul>
        $k1SBcontent = $k1SBcontent + "</ul>";

# print tags unordered list

# tags CSV list
        # set header
        $k1SBheader  = "My Tags";

# blankify content
        $k1SBcontent = "";

# add tags
        var int tcount = 0;
        var TagDetail[] taglist = $this->visible_tag_list();
        foreach var TagDetail tag ($taglist) {
          $k1SBcontent = $k1SBcontent + """<a href="$tag.url">$tag.name</a>""";
          if(++$tcount < size($taglist)) {
            $k1SBcontent = $k1SBcontent + ", ";
          }
        }

# print tags CSV list
        print "<h2>$k1SBheader_one$k1SBheader$k1SBheader_two</h2>";
        print "<ul id=\"tags2\">";
        print $k1SBcontent;
        print "</ul>";

# </sidebar>

print "</div>\n";
      print "<div id=\"content\">\n";
        $this->print_body();
      print "</div>\n";
    print "</div>\n";
  print "</body>\n";
  print "</html>\n";
}

# -------------------------------
# metadata
# -------------------------------

function Entry::print_metadata() 
{

var string tags_sep        = ", ";           # text for tags separator, ", " for "tag, tag, tag"

var string show_tags_link  = "none";         # set to "edit" if you want the tags label to act as an 'edit tags' link
                                               # set to "page" if you want the tags label to link to the poster's journal's tag page
                                               # set to "manage" to link to the Tags Management page
                                               # set to "none" to delinkify the tags label completely

var bool   show_loc_link   = false;          # set to false to delinkify location (no Google Maps link)
                                               # set to true to display the Google Map link

var string alignment       = "left";         # set the side of the mood icon (left or right of the currents)
  
  # here, set mood, music, location and tags into the order you want them to be displayed in
  # any metadata you want to hide journalwide, delete it from this list
  var string[] metaorder    = ["mood", "music", "location", "tags"];

# optional:
  # here, put in the URLs to the pics you want to use instead of the currents' labels
  # if you leave it blank, the current's text label will be used instead
  var string{} metapics     = { "mood"     => "IMAGE URL",
                                "music"    => "IMAGE URL",
                                "location" => "IMAGE URL",
                                "tags"     => "IMAGE URL" };

var string currents       = """<div class="clear"> </div>
                                 <div class="currents">""";         # here all metadata will be added to print it out in the end
  var string currents_close = """</div>""";                         # html for closing of currents container

var Link   edit_tags      = $this->get_link("edit_tags");         # helper var to see if remote user can edit tags

if ((size $.metadata > 0) or ((size $.tags > 0) and ($*tags_aware))) {  
    
    # display mood and moodicon?
    var bool display_mood = false;
    foreach var string moodtest ($metaorder) {
      if ($moodtest == "mood") { $display_mood = true; }
    }
    
    # table and mood icon
    if (defined $.mood_icon and $display_mood == true) {
      $currents = ($alignment == "left") ?
                  $currents + """<table border="0"><tr><td width="$.mood_icon.width"><img src="$.mood_icon.url" width="$.mood_icon.width" height="$.mood_icon.height" alt="$.metadata{"mood"}" title="$.metadata{"mood"}" /></td><td>""" :
                  $currents + """<table border="0"><tr><td>""";
    }
    
    # step through metadata in the order the user wants
    foreach var string k ($metaorder) {
    
      var string text;                     # the actual value of the metadata
      var string label;                    # the label of the metadata as set in the wizard or set-statements
      
      # handling tags metadata
      if (($k == "tags") and (size $.tags > 0) and $*tags_aware) {
        
        # label as image or text
        $label = clean_url($metapics{$k}) != "" ? """<img src="$metapics{$k}" title="$*text_tags" alt="$*text_tags" border=0>""" : $*text_tags;
        
        # optional linkage around tags label
        if (($show_tags_link == "edit") and ($edit_tags.url != "")) {  # Edit Tags Page link
          $label = """<a href="$edit_tags.url">""" + $label + """</a>""";
        }
        elseif ($show_tags_link == "page") {                           # Visible Tags Page link
          $label = """<a href=" """ + $.journal->base_url() + """/tag/ ">""" + $label + """</a>""";
        }
        elseif ($show_tags_link == "manage" and viewer_is_owner()) {   # Tags Management Page link
          $label = """<a href=" """ + $.journal->tag_manage_url() + """ ">""" + $label + """</a>""";
        }
        
        # build tag list
        var bool addsep = false;
        foreach var Tag t ($.tags) {
          if ($addsep) {
            $text = $text + $tags_sep + """<a rel="tag" href="$t.url">$t.name</a>""";
          }
          else {
            $text = $text + """<a rel="tag" href="$t.url">$t.name</a>""";
            $addsep = true;
          }
        }
      }
      
      # handling all other metadata
      elseif (($k != "tags") and ($.metadata{$k} != "")) {
        
        # metadata value
        $text = $.metadata{$k};
        
        # label as image or text
        $label = clean_url($metapics{$k}) != "" ? """<img src="$metapics{$k}" title='""" + lang_metadata_title($k) + """' alt='""" + lang_metadata_title($k) + """' border=0>""" : lang_metadata_title($k);
        
        # strip location link
        if (not ($show_loc_link) and ($k == "location") and ($.metadata{"location"} != "")) {
          $text = striphtml($text);
        }
      }
      
      # skipping empty quotes (= hidden metadata)
      else {
        continue;
      }
      
      # assemble the individual currents 
      $currents = $currents + """<div class="current$k"><strong>$label</strong> $text</div>""";
      
    }

# table and mood icon
    if ($display_mood == true and defined $.mood_icon) {
      $currents = ($alignment == "left") ?
                  $currents + """</td></tr></table>""" :
                  $currents + """</td><td width="$.mood_icon.width"><img src="$.mood_icon.url" width="$.mood_icon.width" height="$.mood_icon.height" alt="$.metadata{"mood"}" title="$.metadata{"mood"}" /></td></tr></table>""";
    }

# close currents container
    $currents = $currents + $currents_close;

# print currents
    println "$currents";
  }
}

# -------------------------------
# display an entry (all views )
# -------------------------------
function print_entry ( Page p, Entry e )
{
    # get date/time
    var string datetime;
    $datetime = $e.time->date_format($*date_format) + " | " + $e.time->time_format($*time_format);

# get any extra user info (if posting to community, etc)
    var string poster = "";
    var string userpic = "";
    var bool other_poster = ($p.view == "friends" or $p.journal_type == "C" or $e.poster.username != $e.journal.username);
    if ( $other_poster ) {
        if ( $e.poster.username != $e.journal.username ) {
                    $poster = $e.poster->as_string() + " in " + $e.journal->as_string();
        } else {
                    $poster = $e.poster->as_string();
        }

$poster = "<b>posted by:</b> $poster";
    }

if ( $other_poster or $*show_entry_userpic ) {
        if ( defined $e.userpic ) {
            $userpic = "<h3 class=\"userpic\"><img border=\"0\" src=\"$e.userpic.url\" width=\"$e.userpic.width\" height=\"$e.userpic.height\" alt=\"$e.journal.username\" /></h3>";
        }
    }

# print the entry now:
    print "<div id=\"entry_$e.itemid\" class=\"ind-entry\">";

# print icon (if needed)
        if ( $userpic != "" ) {
            print "$userpic";
        }

print "<h2>";
        if ( $e.security != "" ) {
            $e.security_icon->print();
            print " ";
        }
        if ( $e.subject == "" ) {
            print safe "<i>$*text_nosubject</i>";
        } else {
            print "$e.subject";
        }
        print "</h2>";

print "<h4>";
        if ( $p.view == "entry" and $*show_entrynav_icons ) {
            var string item_link = "";
            foreach var string key (["nav_prev","nav_next"]) {
                var Link link = $e->get_link($key);
                if ( $link ) {
                    if ( $key == "nav_prev" ) {
                        $item_link = $item_link + "<a href=\"$link.url\" title=\"" + $link.caption->lower() + "\">« " + $link.caption->lower() + "</a> | ";
                    } elseif ( $key == "nav_next" ) {
                        $item_link = $item_link + "<a href=\"$link.url\" title=\"" + $link.caption->lower() + "\">" + $link.caption->lower() + " »</a>";
                    }
                }
            }
            print $item_link;
            print "<br />";
        }
        print "<b>$datetime</b><br />";
        
        $e->print_metadata();

if ( $poster != "" ) {
            print "$poster";
        }
        print "</h4>";

print "<div class=\"entry-item\">";
                $e->print_text();
                print "</div>\n";

print "<h4>";
        print safe get_permalink($e.permalink_url);
        if ( $p.view != "entry" and $p.view != "reply" ) {
            print " | ";
            $e.comments->print();
        } elseif ( $e.comments.enabled ) {
            print " | ";
            $e.comments->print_postlink();
        }
        var Link link;
        foreach var string link_key ($e.link_keyseq) {
            $link = $e->get_link($link_key);
            var string url  = $link.url;
            var string text = $link.caption;
            if (defined $link) {
                """ | <a href="$url" title="$text">$text</a>""";
            }
        }
        print "</h4>";
    print "</div>";
}

For Paid/Permanent Accounts
If you wish to have tags and metadata function to work in your journal, please click here for extra code.

Images
If using, please don't hotlink. Upload to another storage online, try photobucket.

Notes
This layout is not to be changed, I spent a lot of time to get the graphics, colors and text right that I don't want to see it broken.

Credit
If you keep the image in the layout (logo), then it isn't necessary to have a link in the sidebar. However, if you wish to remove the the image then I would appreciate it.

Questions
If you have questions, please ask in comments. I'll try my best to get to you.

Layout .01 - S2 Dear Diary : Baroque

Thu, 06 Dec 2007 01:27:34 GMT

I would like to thank babyelefant for the last minute help to get this layout working properly.

Preview of Baroque Layout
[Click Here for Preview]

Details

layout available: two-column-left
custom colors : in stylesheet
best view: : 1024x768 or higher
browser checked : Firefox, Internet Explorer
works with : Free, Paid, Nav Bar (Unknown with Plus)
available at : http://asylums.insanejournal.com/scotchbonnet/
based design on : http://www.freecsstemplates.org/ornate
images used : sweetie, famfamfam, pdphoto, freecsstemplates

Instructions

How to Style? (using the InsaneJournal customize journal area)

1. In insanejournal's navigational menu, go to journal > customize journal or press the link.

2. 2. Press Tab for Custom Options. You can either scroll down or press Custom CSS in the Selection area.

3. Look for : Use layout's stylesheet(s) and say No. In the Custom external stylesheet URL You leave blank.

4. Look for : Custom stylesheet and copy/paste Baroque's stylesheet.

5. Save Changes.

6. It will save and look for : "Your settings have been saved. View your Journal."

7. Go view Journal.

8. You're Done.

9. Thank you for trying this layout.

Instructions

How to Style? (using the LiveJournal new customize journal area)

1. In livejournal's navigational menu, go to journal > customize journal or press the link.

2. Under (2. Select a New Theme), go the search box and type dear diary. Once the layouts appear go to the bottom and in the drop down choose (all).

3. Find and press (apply theme) to "striking by martin atkins" and then press (customize).

4. Under (customize your theme), press custom css.

5. Under custom css > page > where it states: ("Use layout's "Base Weblog" stylesheet") say no. In the Custom external stylesheet URL You leave blank.

6. Add the css into the custom stylesheet textarea.

7. Press "save changes".

8. In the blue box where it says your current theme, press on your journal's name.

9. You're Done.

10. Thank you for trying this layout.

Extras

Implement CCS into Theme Layer
(Paid/Permanent Users)

If I offer a theme layer, follow any of the links below on how to implement into any of mine into your journal. Thank you.

CSS Code

InsaneJournal Cascading Style Sheet

/*
template  : semi-layout .02 - s2 dear diary : baroque
published : november 06, 2007
by        : sam emme / scotchsour.livejournal.com + scotchsour.insanejournal.com
works with: Free, Paid, Nav Bar
browser   : Firefox, Internet Explorer
available : http://community.livejournal.com/semi_layouts/
original design by : http://www.freecsstemplates.org
images used : sweetie, famfamfam, pdphoto, freecsstemplates
*/
/* ------ BASICS ------ */
* {
    margin:0px;
    padding:0px;
}
body {
    background: #FFFFFF url(bbody.gif) repeat-y;
    font-family: "Tahoma", "Georgia", "Helvetica", "Arial", sans-serif;
    color: #ffffff;
}
body, td, table, th, tr {
    font-size: 11px;
}

a,a:hover {
    color: #9E0000;
    text-decoration: none;
}
#title {
    color: #ffffff;
    background-color: #000000;
    background-image: url(bflowerheader.jpg);
    background-repeat: no-repeat;
    background-position: top right;
position:absolute;
top:0px; right:0px;
    width: 100%;
    font-family: "Garamond", "Palatino", "Palatino Linotype", serif;
    height: 130px;
    overflow: hidden;
}
#title h1 {
    font-size: 35px;
    font-weight: bold;
    margin: 0;
    padding-top: 15px;
    padding-left: 8px;
    white-space: no-wrap;
}
#title #journal_subtitle {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    padding-left: 8px;
    white-space: no-wrap;
}
#paraphernalia {
    position: absolute;
    left: 0;
    top: 130px;
    width: 200px;
    font-family: "Tahoma", "Georgia", "Helvetica", "Arial", sans-serif;
	margin: 0px 10px;
    padding: 0 0px 90px 0;
    background: url(logo-1.gif) no-repeat bottom right;
    font-size: 12px;
}
#paraphernalia h2 {
    font-size: 14px;
    font-style: oblique;
    text-align: center;
    border-right: 1px solid #CB7575;
    border-left: 1px solid #CB7575;
    background-color: #A91313;
}
#paraphernalia .pbox {
    margin-left: 8px;
    margin-right: 8px;
}
#journalinfouserpic {
    text-align: center;
    padding: 10px 0px;
}
.journallinkbar{
    width:170px;
    margin:0px auto 0px 17px;
}
#journalinfo dt:first-child{
    padding: 30px 0px 0px 0px;
}
.journallinkbar a{
    display:inline;
    float:left;
    clear:right;
}
#viewsel a, #recentnav a, #tagslist a, #userlinks a {
    padding: 0 0 0 16px;
    background: url(bbullet.gif) no-repeat left center;
    text-decoration: none;
    text-transform: lowercase;
}
.pbox {
    background: url(bcontainertop.gif) no-repeat;
    margin: 15px;
    padding: 25px 0 0 0;
    width: 200px
}
.pbox dt {
    font-weight: normal;
    margin-top: 4px;
}
.pbox dd {
    padding: 0;
    margin-left: 24px;
}
.pbox ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pbox ul ul {
    margin-left: 24px;
}
.pbox li {
    margin: 0;
    padding: 0;
}
.pbox li.current {
    font-weight: bold;
}
.pbox p {
    margin: 8px 0;
}

.pboxcontent {
    padding: 15px;
    background: #A91313 url(bcontainer.gif) no-repeat 100% 100%;
    border: 1px solid #CB7575;
    border-top: none;
}
.pboxcontent ul {
    margin: 0;
    list-style: none;
}
.pboxcontent li {
    display: block;
    padding: 5px 0;
}

.pboxcontent a {
    padding: 0px;
    text-decoration: none;
    text-transform: lowercase;
    color: #FFFFFF;
}
#main {
    position: absolute;
    /*left: 20%;*/
    left: 250px;
    top: 160px;
    right: 0;
    margin: 0;
    color: #000000;
    min-height: 150%;
    padding: 0 10px 50px 0;
}
* html #main {
    width: 74% !important;
}
#main a:link {
    color: #cc0000;
}
#main a:visited {
    color: #cc0000;
}
.comments .entry {
    margin-left: 0;
    margin-bottom: 8px;
}
.comments {
    list-style: none;
    padding: 0;
    margin-left: 50px;
}
.comments .comments {
    margin-left: 25px;
}
.comments > li {
    margin: 0;
    padding: 0;
}
.itemrange {
    list-style: none;
    padding: 0;
    margin: 0.5em;
    text-align: center;
}
.itemrange li {
    display: inline;
    margin: 0 0.25em;
}
.itemrange li a:before, .itemrange li.current:before {
    content: "[";
}
.itemrange li a:after, .itemrange li.current:after {
    content: "]";
}
.calendarmonth {
    width: 60%;
    margin-right: auto;
    margin-left: auto;
    border-collapse: collapse;
    margin-top: 4em;
    margin-bottom: 2em;
    background: url(bcalendarimage.gif) no-repeat bottom right;
    border: 1px solid #CB7575;
}
.calendarmonth td, .calendarmonth th {
    padding: 0.5em;
    margin: 0;
}
.calendarmonthlink {
    text-align: center;
}
.calendarmonthheader h2 {
    font-size: 16px;
    margin: 0;
}
.page_month #main form, .page_month #main dl {
    margin: 8px;
}
.calendardaynum { 
    text-align: center; 
}
.calendardaycount { 
    text-align: center; 
}
.calendarday {
    width: 14%;
}
.entry {
clear: both;
margin: 32px 16px 32px 26px;
font-size:12px;
}

.day h2 {
    font-size: 18px;
    font-weight: bold;
    padding: 0 0 5px 10px;
    background-image: url(http://www.insanejournal.com/palimg/deardiary/headinggrad.png/ptffffffcc0000);
    background-position: bottom left;
    background-repeat: no-repeat;
    margin: 16px 0 8px 0;
    font-family: "Garamond", "Palatino", "Palatino Linotype", serif;
color: #A91313;
}
.entry .entryheader {
font-size:12px;
font-weight: bold;
text-align: left;
position:relative;
background:url(bentryimage.gif) no-repeat center left;
padding: 15px 0px 10px 50px;
height:40px;
}
.entry .entryheader h3 {
font-size: 1em;
margin: 0;
padding: 0;
color: #A91313;
}
.entry .entrycontent {
margin-right:150px;
margin-bottom: 20px;
}
.entryheader .entryicon {
position:absolute;
top: 90px;
right:115px;
z-index:3;
}
.entryheader .entryuserpic {
position:absolute;
z-index:1;
top:0;
right:0;
width:125px;
height:100px;
background: #A91313 url(bbody.gif) repeat-y;
border: 1px solid #333333;
text-align:right;
padding: 5px 5px 5px 5px;
}
.entrylinkbarpre {
display:none;
}
.page_entry .entrylinkbarpost, .page_reply .entrylinkbarpost {
margin: 16px 16px 0px 0px;
}
.entrylinkbarpost a img{
padding: 16px 16px 0px 0px;
width:0px;
height:0px;
}
*html .entrylinkbarpost a img {
padding:0px;
width:16px;
height:16px;
}
.entryuserpic img {
height:100px;
width:100px;
}
.entryposter img, .collapsed_entry img {
    height: 17px;
    width: 17px;
}
.entryheader .entryposter {
display: inline;
float:left;
}
.entryheader .entryposter:after {
content: " : ";
display: none;
}
.entryheader .entrytimestamp {
display: inline;
text-transform:lowercase;
}
.entryheader .entrytimestampdate {
display: none;
}
.entry .entrytimestamptime {
color: #970000;
position:absolute;
top: 120px;
right:0px;
z-index:7;
}
.page_entry .entry {
padding-bottom:30px;
background-color: !important;
}
.page_entry .entryheader .entryposter, .page_reply .entryheader .entryposter {
    color: #970000;
    margin: 0px;
    padding: 0px;
}
.page_entry .entryheader .entrytimestampdate, .page_reply .entryheader .entrytimestampdate {
    display: block;
    color: #970000;
    margin: 20px 0px;
    padding: 0px;
display: none;
}
.page_entry .entryheader .entrysubject, .page_reply .entryheader .entrysubject {
    display: inline;
    color: #970000;
    margin: 10px 0px;
    padding: 0px 0px 0px 5px ;
}
.page_friends .entryheader .entryuserpic {
    display: block;
}
.entrymeta {
    list-style: none;
    padding: 0;
    margin: 0 0 .7em 0;
    display: block;
    background-color:;
}
.entrymeta .entrymetacaption {
    font-weight: bold;
}
.entrymeta li {
    white-space: no-wrap;
}
.ljtags  {
    margin: 0.2em 0em;
}
.entry .entryfooter {
    clear: both;
    margin: 0 0 .2em 0;
}
.entryfooter .entrycmdlinks {
    list-style: none;
    vertical-align: middle;
    margin: 20px 0 0 0; padding: 0em;
    white-space: no-wrap;
    text-align: right;
}
.entryfooter .entrycmdlinks:before {
    content: "";
}
.entryfooter .entrycmdlinks:after {
    content: "";
}
.entrycmdlinks li {
    display: inline;
    margin-top: 10px;
}
* html .entrycmdlinks li {
    margin-left: 1em;
}
.entrycmdlinks li:before {
    content: " - ";
}
.entrycmdlinks li:first-child:before {
    content: "";
}
input, textarea {
	border: 1px solid #BE2A26;
	background: #990000;
	color: #ffffff;
	}
blockquote {
	border: 1px solid #BE2A26;
	padding: 10px;
	background-image: url() bottom right !important;
}
hr{
color: #f00;
background-color: #f00;
height: 1px;
width: 80%;
}
.entryposter img{
width: 0;
height: 0;
padding: 14px 16px 0px 0px;
margin : 5px 0px 0px 0px;
}
.entryposter img[src="http://www.insanejournal.com/img/community.gif"], collapsed entry
img[src="http://stat.livejournal.com/img/community.gif"]{
background:url(group.png);
}

.entryposter img[src="http://www.insanejournal.com/img/userinfo.gif"], collapsed entry
img[src="http://stat.livejournal.com/img/userinfo.gif"]{
background:url(16-member.png);
}

.ljuser img, .entryicon img{
padding: 14px 16px 0 0 !important;
background-color:transparent;
width: 0;
height: 0;
background-repeat: no-repeat;
}
.entryicon img[src="http://www.insanejournal.com/img/icon_protected.gif"], dd img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
background:url(lock.png);
}
.entryicon img[src="http://www.insanejournal.com/img/icon_private.gif"], dd img[src="http://stat.livejournal.com/img/icon_private.gif"]{
background:url(shield.png);
}
/* icon for users */
.ljuser img[src="http://www.insanejournal.com/img/userinfo.gif"] {
background-image: url(16-member.png) !important;
}
/* icon for communities */
.ljuser img[src="http://www.insanejournal.com/img/community.gif"] {
background-image: url(group.png) !important;
}
/* icon for news */
.ljuser img[src="http://www.insanejournal.com/img/newsinfo.gif"] {
background-image: url(newspaperIcon.jpg) !important;
}
.entrylinkbarpost a img[src="http://www.insanejournal.com/img/btn_prev.gif"] {
background:url(16-circle-red-remove.png);
}
.entrylinkbarpost a img[src="http://www.insanejournal.com/img/btn_memories.gif"] {background:url(16-heart-red-m.png);
}
.entrylinkbarpost a img[src="http://www.insanejournal.com/img/btn_tellfriend.gif"] {background:url(comments.png);
}
.entrylinkbarpost a img[src="http://www.insanejournal.com/img/btn_edittags.gif"] {background:url(tag_red.png);
}
.entrylinkbarpost a img[src="http://www.insanejournal.com/img/btn_edit.gif"] {background:url(16-em-pencil.png);
}
.entrylinkbarpost a img[src="http://www.insanejournal.com/img/btn_next.gif"] {background:url(16-circle-red-add.png);
}
.entrylinkbarpost a img[src="http://www.insanejournal.com/img/btn_track.gif"] {background:url(mouse.png);
}
.entrylinkbarpost a img[src="http://www.insanejournal.com/img/btn_scr.gif"] {background:url(lightbulb.png);
}
.entrylinkbarpost a img[src="http://www.insanejournal.com/img/btn_unscr.gif"] {background:url(lightbulb_off.png);
}
.entrylinkbarpost a img[src="http://www.insanejournal.com/img/btn_tracking.gif"] {background:url(disconnect.png);
}
.entrylinkbarpost a img[src="http://www.insanejournal.com/img/btn_freeze.gif"] {background:url(16-cube-red.png);
}
.entrylinkbarpost a img[src="http://www.insanejournal.com/img/btn_del.gif"] {background:url(16-em-cross.png);
}/* ------ END MINI IMAGES ------ */

LiveJournal Cascading Style Sheet

/* ------ BASICS ------ */

* {
    margin:0px;
    padding:0px;
}
body {
    background: #FFFFFF url(bbody.gif) repeat-y;
    font-family: "Tahoma", "Georgia", "Helvetica", "Arial", sans-serif;
	color: #333333;
}
body, td, table, th, tr {
    font-size: 11px;
}

a,a:hover {
    color: #9E0000;
    text-decoration: none;
}
/* ------ END BASICS ------ */
/* ------ TITLES (TOP OF PAGE) ------ */
#title {
    color: #ffffff;
    background-color: #000000;
    background-image: url(bflowerheader.jpg);
    background-repeat: no-repeat;
    background-position: top right;
position:absolute;
top:0px; right:0px;
    width: 100%;
    font-family: "Garamond", "Palatino", "Palatino Linotype", serif;
    height: 130px;
    overflow: hidden;
}

#title h1 {
    font-size: 35px;
    font-weight: bold;
    margin: 0;
    padding-top: 15px;
    padding-left: 8px;
    white-space: no-wrap;
}
#title #journal_subtitle {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    padding-left: 8px;
    white-space: no-wrap;
}
/* ------ END TITLES (TOP OF PAGE) ------ */
/* ------ PARAPHERNALIA (SIDEBAR) ------ */
#paraphernalia {
    position: absolute;
    left: 0;
    top: 130px;
    width: 200px;
    font-family: "Tahoma", "Georgia", "Helvetica", "Arial", sans-serif;
	margin: 0px 10px;
    padding: 0 0px 90px 0;
    background: url(logo-1.gif) no-repeat bottom right;
    font-size: 12px;

}
#paraphernalia h2 {
    font-size: 14px;
    font-style: oblique;
    text-align: center;
    border-right: 1px solid #CB7575;
    border-left: 1px solid #CB7575;
    background-color: #A91313;

}
#paraphernalia .pbox {
    margin-left: 8px;
    margin-right: 8px;
}
#journalinfouserpic {
    text-align: center;
    padding: 10px 0px;
}
.journallinkbar{
    width:170px;
    margin:0px auto 0px 17px;
}

#journalinfo dt:first-child{
    padding: 30px 0px 0px 0px;
}

.journallinkbar a{
    display:inline;
    float:left;
    clear:right;
}
#viewsel a, #recentnav a, #tagslist a, #userlinks a {
    padding: 0 0 0 16px;
    background: url(bbullet.gif) no-repeat left center;
    text-decoration: none;
    text-transform: lowercase;
}
/* ------ END PARAPHERNALIA ------ */
/* ------ PBOX ------ */
.pbox {
        background: url(bcontainertop.gif) no-repeat;
	margin: 15px;
	padding: 25px 0 0 0;
        width: 200px
}

.pbox dt {
    font-weight: normal;
    margin-top: 4px;
}
.pbox dd {
    padding: 0;
    margin-left: 24px;
}
.pbox ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pbox ul ul {
    margin-left: 24px;
}
.pbox li {
    margin: 0;
    padding: 0;
}
.pbox li.current {
    font-weight: bold;
}
.pbox p {
    margin: 8px 0;
}

.pboxcontent {
    padding: 15px;
    background: #A91313 url(bcontainer.gif) no-repeat 100% 100%;
    border: 1px solid #CB7575;
    border-top: none;
}

.pboxcontent ul {
    margin: 0;
    list-style: none;
}

.pboxcontent li {
    display: block;
    padding: 5px 0;
}

.pboxcontent a {
    padding: 0px;
    text-decoration: none;
    text-transform: lowercase;
    color: #FFFFFF;
}
/* ------ END SIDEBAR ------ */
/* ------ MAIN ------ */
#main {
    position: absolute;
    /*left: 20%;*/
    left: 250px;
    top: 160px;
    right: 0;
    margin: 0;
    color: #000000;
    min-height: 150%;
    padding: 0 10px 50px 0;
}

* html #main {
    width: 74% !important;
}

#main a:link {
    color: #cc0000;
}
#main a:visited {
    color: #cc0000;
}
/* ------ COMMENTS ------ */
.comments .entry {
    margin-left: 0;
    margin-bottom: 8px;
}

.comments {
    list-style: none;
    padding: 0;
    margin-left: 50px;
}
.comments .comments {
    margin-left: 25px;
}
.comments > li {
    margin: 0;
    padding: 0;
}
/**/
.itemrange {
    list-style: none;
    padding: 0;
    margin: 0.5em;
    text-align: center;
}
.itemrange li {
    display: inline;
    margin: 0 0.25em;
}
.itemrange li a:before, .itemrange li.current:before {
    content: "[";
}
.itemrange li a:after, .itemrange li.current:after {
    content: "]";
}
/* ------ END MAIN ------ */
/* ------ CALENDAR ------ */
.calendarmonth {
    width: 60%;
    margin-right: auto;
    margin-left: auto;
    border-collapse: collapse;
    margin-top: 4em;
    margin-bottom: 2em;
    background: url(bcalendarimage.gif) no-repeat bottom right;
    border: 1px solid #CB7575;
}

.calendarmonth td, .calendarmonth th {
    padding: 0.5em;
    margin: 0;
}
.calendarmonthlink {
    text-align: center;
}
.calendarmonthheader h2 {
    font-size: 16px;
    margin: 0;
}

.page_month #main form, .page_month #main dl {
    margin: 8px;
}

.calendardaynum { 
    text-align: center; 
}

.calendardaycount { 
    text-align: center; 
}

.calendarday {
    width: 14%;
}
/* ------ END CALENDAR ------ */
/* ------ ENTRY ------ */
.entry {
    clear: both;
    margin: 32px 16px 32px 26px;
    font-size:12px;
}

.entry .entryheader h3 {
    font-size: 1em;
    margin: 0;
    padding: 0;
    color: #A91313;
}

.entry .entrycontent {
    margin-right:150px;
    margin-bottom: 20px;
}

.entryheader .entryicon {
    position:absolute;
    top: 90px;
    right:115px;
    z-index:3;
}
.entryheader .entryuserpic {
    position:absolute;
    z-index:1;
    top:0;
    right:0;
    width:125px;
    height:100px;
    background: #A91313 url(bbody.gif) repeat-y;
    border: 1px solid #333333;
    text-align:right;
    padding: 5px 5px 5px 5px;
}
.entrylinkbarpre {
    display:none;
}
.page_entry .entrylinkbarpost, .page_reply .entrylinkbarpost {
    margin: 16px 16px 0px 0px;
}
.entrylinkbarpost a img{
    padding: 16px 16px 0px 0px;
    width:0px;
    height:0px;
}
*html .entrylinkbarpost a img {
    padding:0px;
    width:16px;
    height:16px;
}
.entryuserpic img {
    height:100px;
    width:100px;
}
.entryposter img, .collapsed_entry img {
    height: 17px;
    width: 17px;
}
.entryheader .entryposter {
    display: inline;
    float:left;
}
.entryheader .entryposter:after {
    content: " : ";
    display: none;
}
.entryheader .entrytimestamp {
    display: inline;
    text-transform:lowercase;
}
.entryheader .entrytimestampdate {
    display: none;
}

.entry .entrytimestamptime {
    color: #970000;
    position:absolute;
    top: 120px;
    right:0px;
    z-index:7;
}

.page_entry .entry {
    padding-bottom:30px;
    background-color: !important;
}

.page_entry .entryheader .entryposter, .page_reply .entryheader .entryposter {
    color: #970000;
    margin: 0px 0px;
    padding: 0px;
}

.page_entry .entryheader .entrytimestampdate, .page_reply .entryheader .entrytimestampdate {
    display: block;
    color: #970000;
    margin: 20px 0px;
    padding: 0px;
    display: none;
  }

.page_entry .entryheader .entrysubject, .page_reply .entryheader .entrysubject {
    display: inline;
    color: #970000;
    margin: 10px 0px;
    padding: 0px 0px 0px 5px ;
}
.page_friends .entryheader .entryuserpic {
    display: block;
}
.entrymeta {
    list-style: none;
    padding: 0;
    margin: 0 0 .7em 0;
    display: block;
    background-color:;

}

.entrymeta .entrymetacaption {
    font-weight: bold;
}
.entrymeta li {
    white-space: no-wrap;
}

.ljtags  {
    margin: 0.2em 0em;
}
.entry .entryfooter {
    clear: both;
    margin: 0 0 .2em 0;
}

.entryfooter .entrycmdlinks {
    list-style: none;
    vertical-align: middle;
    margin: 20px 0 0 0; padding: 0em;
    white-space: no-wrap;
    text-align: right;
}
.entryfooter .entrycmdlinks:before {
    content: "";
}
.entryfooter .entrycmdlinks:after {
    content: "";
}

.entrycmdlinks li {
    display: inline;
    margin-top: 10px;
}
* html .entrycmdlinks li {
    margin-left: 1em;
}
.entrycmdlinks li:before {
    content: " - ";
}
.entrycmdlinks li:first-child:before {
    content: "";
}
/* ------ END ENTRY ------ */
/* ------ MISC ------ */
input, textarea {
    border: 1px solid #BE2A26;
    background: #990000;
    color: #ffffff;
}
blockquote {
    border: 1px solid #BE2A26;
    padding: 10px;
    background-image: url() bottom right !important;
}
hr{
    color: #f00;
    background-color: #f00;
    height: 1px;
    width: 80%;
}
div.ContextualPopup {
    margin: 20px 0px 0 -30px;
    font: normal 11px "Tahoma", "Verdana", sans-serif !important;
    background-color: #990000!important;
}
div.ContextualPopup div.Inner {
    background:transparent!important;
    color: #FFFFFF!important;
    border:none;
    padding:10px;
    width: 240px;
    font-family: tahoma, sans-serif;
}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
    text-decoration: underline!important;
    font-weight: normal;
    color: #ffffff !important;
}
div.ContextualPopup .Userpic {
    padding:10px;
    background:#A30E0E;
    margin:0px;
    border:1px solid #cccccc;
}
div.ContextualPopup .Relation {
    letter-spacing:1px;
    border-bottom: 1px dotted #ffffff;
    margin-bottom:4px;
    padding-bottom:4px;
}
div.ContextualPopup .Content {
    line-height: 1.4;
    background:#BE2A26;
    border:1px solid #8C1B1D;
}
/* ------ END MISC ------ */
/* ------ MINI IMAGES ------ */
.entryposter img{
    width: 0;
    height: 0;
    padding: 14px 16px 0px 0px;
    margin : 5px 0px 0px 0px;
}
.entryposter img[src="http://stat.livejournal.com/img/community.gif"], collapsed entry
img[src="http://stat.livejournal.com/img/community.gif"]{
background:url(group.png);
}

.entryposter img[src="http://stat.livejournal.com/img/userinfo.gif"], collapsed entry
img[src="http://stat.livejournal.com/img/userinfo.gif"]{
background:url(16-member.png);
}

.entryicon img[src="http://stat.livejournal.com/img/icon_private.gif"], dd img[src="http://stat.livejournal.com/img/icon_private.gif"]{
background:url(shield.png);
}

/* icon for users */
.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-image: url(16-member.png) !important;
}

/* icon for communities */
.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-image: url(group.png) !important;
}

/* icon for news */
.ljuser img[src="http://stat.livejournal.com/img/newsinfo.gif"] {
background-image: url(newspaperIcon.jpg) !important;
}

.entrylinkbarpost a img[src="http://stat.livejournal.com/img/btn_prev.gif"] {
background:url(16-circle-red-remove.png);
}
.entrylinkbarpost a img[src="http://stat.livejournal.com/img/btn_memories.gif"] {background:url(16-heart-red-m.png);
}
.entrylinkbarpost a img[src="http://stat.livejournal.com/img/btn_tellfriend.gif"] {background:url(comments.png);
}
.entrylinkbarpost a img[src="http://stat.livejournal.com/img/btn_edittags.gif"] {background:url(tag_red.png);
}
.entrylinkbarpost a img[src="http://stat.livejournal.com/img/btn_edit.gif"] {background:url(16-em-pencil.png);
}
.entrylinkbarpost a img[src="http://stat.livejournal.com/img/btn_next.gif"] {background:url(16-circle-red-add.png);
}
.entrylinkbarpost a img[src="http://stat.livejournal.com/img/btn_track.gif"] {background:url(mouse.png);
}
.entrylinkbarpost a img[src="http://stat.livejournal.com/img/btn_scr.gif"] {background:url(lightbulb.png);
}
.entrylinkbarpost a img[src="http://stat.livejournal.com/img/btn_unscr.gif"] {background:url(lightbulb_off.png);
}
.entrylinkbarpost a img[src="http://stat.livejournal.com/img/btn_tracking.gif"] {background:url(disconnect.png);
}
.entrylinkbarpost a img[src="http://stat.livejournal.com/img/btn_freeze.gif"] {background:url(16-cube-red.png);
}
.entrylinkbarpost a img[src="http://stat.livejournal.com/img/btn_del.gif"] {background:url(16-em-cross.png);
}
/* ------ END MINI IMAGES ------ */

*Remember, the Cascading Style Sheets only have the name of the images but no direct address to show them in your journal.
You must upload them to a server or file storage and replace them into the css to get them to work.*

For Paid/Permanent Accounts
If you wish to have tags, extra textbox and metadata function to work in your journal, please click here for code.

Images
If using, please don't hotlink. Upload to another storage online, try photobucket or imageshack.

On each image link, right click [Save target as] or [Save Link as] to your computer (downloading) then upload them to a server or personal storage to use.

Optional
the zip file includes: a html file with css and images.
Note: The link will go to Megaupload. There is a 45 second wait to non-members.

Credit
If you keep the image in the layout (logo), then it isn't necessary to have a link in the sidebar. However, if you wish to remove the the image then I would appreciate it.

Questions
If you have questions, please ask in comments. I'll try to get to you. If you are not part of InsaneJournal, please leave a name so I'll at least know who you are. :)

Note
If you see a staggered gradation in the images in your layout, which might result from your computer saving the images as .bmp only, I learned from carriep63 that it is most likely due to the need to clean out your temporary internet files.