ScotchBonnet - Layout .03 - S2 Tranquility II : Blue Shoes


	ScotchBonnet Scotchsour's Place for Layouts, Codes, Icons, Mood Themes... Recent Entries Archive Friends Entries User Info Memories scotchbonnet

	Profile
	Profile

User:

scotchbonnet

Name: scotchbonnet

	Latest Layout
	Latest Layout

Pink and Grey .05

Tomato .04

Blue Shoes .03

Coffee Template .02

Press for Coffee Template Layout(Not Available Yet)

Baroque .01

	Latest Month
	Latest Month

May 2011
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

	Links
	Links

basics

update

instructions for layouts

instructions for mood themes

resources

	Page Summary
	Page Summary

· Layout .03 - S2 Tranquility II : Blue Shoes [+10]

baggyeyes - Tranquility II Blue Shoes [+2]

· Anonymous - (no subject) [+1]

mycherylipstick - (no subject) [+1]

· Anonymous - изготовление и поставка элементов трубопроводов

· Anonymous - Деньги теперь не проблема.

· Anonymous - Сайт знакомств для взрослых

	Search
	Search

	Tags
	Tags

colors
- s2smoothsailing [1]
efiction
- modification [3]
friends only [4]
graphics [4]
icons
- actors [1]
- anime [1]
- body [1]
- dc [3]
- due south [3]
- movies [1]
journal update [1]
journals
- code [3]
- css [3]
- tutorials [4]
layout
- banners [1]
- s2deardiary [3]
- s2flexiblesquares [1]
- s2tranquilityii [1]
layouts [6]
misc
- brushes [1]
- firefox [1]
- images [8]
- photos [1]
mood theme
- instructions [1]
- ray vecchio [1]
- tutorial [1]
personal update [2]
previews [1]
profile card
- blue shoes [1]
- stackable [1]
question [3]
resources [2]
thematic [3]

Layout .03 - S2 Tranquility II : Blue Shoes

	27th-Jan-2008 09:56 pm
	27th-Jan-2008 09:56 pm


	scotchsour

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]

Press for bigger size of Blue Shoes Layout

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.

Tags:layout: s2tranquilityii, layouts

	Read 10 Speak Link Remember Tell a Friend
	Read 10 Speak Link Remember Tell a Friend

	Comments
	Comments

	25th-Jul-2008 10:08 am (UTC) - Tranquility II Blue Shoes
	25th-Jul-2008 10:08 am (UTC) - Tranquility II Blue Shoes

baggyeyes

Just one quick note -

I love this layout, and I will snag it for future use. Really great work.

But for LiveJournal users, the address for tiny icons changed:

Replace this: http://stat.livejournal.com/

with this: http://p-stat.livejournal.com/

A simple find and replace in any text editor will do.

	Reply Thread Link
	Reply Thread Link

	25th-Jul-2008 11:02 am (UTC) - Re: Tranquility II Blue Shoes

scotchsour

I will adjust it, thank you for telling me. It has been a while since I changed this layout.

	Reply Parent Thread Link
	Reply Parent Thread Link

	30th-Jul-2008 03:58 pm (UTC) - Re: Tranquility II Blue Shoes

baggyeyes

I'd use this, if not for the fact that I already have your quite beautiful Baroque as my layout. I usually skipped over Dear Diary because I thought they were so plain. Thank you for making them so lovely!

	Reply Parent Link
	Reply Parent Link

	27th-Jul-2008 12:43 pm (UTC)
	27th-Jul-2008 12:43 pm (UTC)

Anonymous

Hi, really beautiful layout. Will stock it for future use, or I might use it now. Thank you. - mai

	Reply Thread Link
	Reply Thread Link

	10th-Aug-2008 02:57 pm (UTC)
	10th-Aug-2008 02:57 pm (UTC)

scotchsour

I'm glad you like it. :)

	Reply Parent Link
	Reply Parent Link

	9th-Apr-2009 12:08 pm (UTC)
	9th-Apr-2009 12:08 pm (UTC)

mycherylipstick

Hi! I absolutely love this layout and would really love to use it on IJ. Is there any way I can do that? I tried to use IJ's css but because IJ doesn't have tranquility II I'm not too sure how to do it or if I even can.

	Reply Thread Link
	Reply Thread Link

	10th-Apr-2009 09:09 am (UTC)
	10th-Apr-2009 09:09 am (UTC)

scotchsour

If you have a paid account, you can get the base tranquility layout and upload it your customize journal section for IJ. Then you can use the blue shoes base css.

	Reply Parent Link
	Reply Parent Link

	9th-Feb-2018 08:39 am (UTC) - изготовление и поставка элементов трубопроводов

Anonymous

http://zaporka.net - Неподвижные опоры в ППУ

	Reply Link
	Reply Link

	25th-Apr-2018 12:44 pm (UTC) - Деньги теперь не проблема.
	25th-Apr-2018 12:44 pm (UTC) - Деньги теперь не проблема.

Anonymous

Деньги теперь не проблема. Заработать от 5000 руб в день легко на сайте - http://vmagazze.ru

	Reply Link
	Reply Link

	3rd-May-2018 08:57 am (UTC) - Сайт знакомств для взрослых
	3rd-May-2018 08:57 am (UTC) - Сайт знакомств для взрослых

Anonymous

Someone, text me, I wanna webcam! Let's go

https://bit.ly/2reqT6Z?9865 - https://pp.userapi.com/c629505/v629505057/1f772/_1ODB2tmlls.jpg

	Reply Link
	Reply Link

	Leave a Comment to the Entry
	Leave a Comment to the Entry

	Code by masterslacker. Fiddled by scotchsour. This page was loaded on Apr 16th 2024, 4:29 pm GMT.