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.

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

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

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.

ScotchBonnet

Layout .03 - S2 Tranquility II : Blue Shoes