amavel_bel | Spike - Hands of a poet, heart of a man

After those layouts I posted at

spring_spangel, I thought it would be interesting to play a little more with S2 styles. So, today I'm posting a Spike layout (yay) using S2 Smooth Sailing. As always, look, take, credit ;-).

Style: S2 Smooth Sailing
Title: Spike - Hands of a poet, heart of a man
Website: Not needed
Default Icon: Not needed
Best view: 800x600 and higher.
Browser(s) Compatible: Firefox, Internet Explorer, Netscape, Opera.
Maker:

amavel_bel (Mabel). Credit me in your user info page.
Resources: Images from the web site The DTD Angel & BtVS Gallery. Other resources (like brushes, textures and so on) are credited at my LJ Info Page.
Notes: For basic (free) and paid accounts and it works with Nav bar strip and Sponsored Plus Account (it looks better with horizontal ads).

Preview:

Working preview:

bel_btvsats117

| IMAGES |
Obs.: The images are provided in the code for convenience. They are hosted and I don't intend to take them down (hopefully I won't have exceeding bandwidth problem). If you want, I'm providing the links below, so you can take the images and upload them in your own server. Just the FRIENDS ONLY BANNER and the ICONS are optional.

Header:
http://i38.photobucket.com/albums/e107/bel_layouts/spike_handsofapoet_header.jpg

Background:
http://i38.photobucket.com/albums/e107/bel_layouts/spike_handsofapoet_back.jpg

Friends Only Banner:

Icons:

Extra images:

background of the links in the navigation bar

background of the subject title in the entries

background of the sidebar titles

| CUSTOM COLORS |

Leave all the color fields blank. Actually, it's better to leave all the color fields blank.

| CSS CODE |

/* COLORS, BACKGROUND IMAGE AND GENERAL TEXT SETTINGS */
body {
font-family: Tahoma, Arial;
font-size: 9px;
text-align: justify;
letter-spacing: 1px;
color: #510E08;
background: #EDE7E0 url(http://i38.photobucket.com/albums/e107/bel_layouts/spike_handsofapoet_back.jpg) repeat;
margin: 0;
}

/* PAGE HEADER AND HEADER IMAGE SETTINGS */
.pageheaderblock { 
background: #fcf9f5 url(http://i38.photobucket.com/albums/e107/bel_layouts/spike_handsofapoet_header.jpg) no-repeat top center;
width: 740px;
padding-top: 380px;
margin: auto;
text-align: center; 
}

/* PAGE SETTINGS */
.pageblock { 
background-color: #FCF9F5;
width: 740px;
margin: auto;
border-left: 1px solid #5B392D;
border-right: 1px solid #5B392D;
}

/* GENERAL LINKS */
a:link,a:active,a:visited { 
font-weight: bold;
text-decoration: none;
color: #360E0C;
}

a:hover { 
cursor: e-resize;
font-weight: bold;
text-decoration: none;
color: #AC4F47;
}

/* HEADER TITLE AND SUBTITLE */
.header-title,.header-subtitle {
display: none;
}

/* FOOTER SETTINGS */
.pagefooterblock {
text-transform: lowercase;
text-align: right;
padding: 10px 0px 10px 0px;
margin: auto;
width: 740px;
background-color: transparent; 
border: 0;
}

.pagefooterblock a, .pagefooterblock a:link, .pagefooterblock a:visited { 
color: #360E0C; 
text-decoration: none; 
}

.pagefooterblock a:hover, .pagefooterblock a:active { 
color: #B19C8E; 
text-decoration: none; 
}

#footer-menu {
text-transform: lowercase;
text-align: right;
background-color: transparent;
}

#footer-menu ul {
margin: 0px;
padding: 0px;
}

#footer-menu li {
display: inline;
}

#footer-menu a, .footer-menu a:visited {
color: #000000;
white-space: nowrap;
font-family: Georgia, Verdana;
text-transform: uppercase;
padding-left: 15px;
}

#footer-menu a:hover {
color: #AC4F47;
}

/* NAVIGATION BAR */  
.header-menu {
position: relative;
font-family: Georgia, Arial;
font-size: 7pt;
font-weight: bold;
text-transform: uppercase;
text-align: center;
background-color: transparent;
margin: auto;
width: auto;
padding-bottom: 15px;
border: 0;
}

.header-menu ul {
margin: 0px;
padding: 0px;
}

.header-menu li {
position: relative;
display: inline;
padding: 0px;
left: 0px;
right: 0px;
line-height: 24px;
}

/* NAVIGATION BAR LINKS */ 
.header-menu a, .header-menu a:visited, .header-menu a:active { 
color: #000000;
text-decoration: none;
white-space: normal;
padding: 0px 8px 0px 8px;
}

.header-menu a:hover {
color: #000000;
text-decoration: none;
cursor: e-resize;
background: #FCF9F5 url(http://i38.photobucket.com/albums/e107/bel_layouts/spike_handsofapoet_backnav.jpg) no-repeat bottom center;
padding-bottom: 15px;
}

/* TITLE IN EACH PAGE (entries, friends, calendar) */
.body-title {
font-family: Georgia, Verdana;
font-weight: bold;
font-size: 11px;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
color: #000000;
line-height: 20px;
width: 740px;
margin: auto;
background-color: #E2D8CB;
padding: 3px 0px 3px 0px;
}

.body-midtitle {
font-family: Georgia, Verdana;
font-size: 8pt;
color: #000000;
text-align: left;
padding: 2px 0px 2px 0px;
background-color: transparent;
margin: auto;
}
 
/* MORE ENTRIES AND SIDEBAR BLOCK SETTINGS */
.bodyblock {
color: #510E08;
background-color: transparent;
padding: 15px 0px 0px 0px;
margin: auto;
width: 740px;
}

/* TITLE PAGE (entries, friends etc) SETTINGS */
.bodyheaderblock {
border: 0;
background-color: transparent;
padding: 0px;
margin: auto;
}

/* NAVIGATION LINKS (previous entries/top of page at the bottom) */
.bodynavblock {
color: #000000;
background-color: transparent;
margin: 0;
padding: 8px;
text-align: right;
border: 0;
}

.bodynavblock a, .bodynavblock a:visited {
color: #000000;
}

.bodynavblock a:hover {
color: #AC4F47;
}

/* SIDEBAR SETTINGS */
.sidebar {
font-size: 11px;
margin: 0px 10px 0px 3px;
padding: 0;
width: 200px;
}

/* SIDEBAR BOX - BACKGROUND, BORDER, TEXT */
.sidebox { 
color: #591816;
background-color: #EDE7E0;
margin-bottom: 10px;
padding: 2px 2px 5px 2px;
border-top: 1px solid #AF9C8F; 
border-left: 1px solid #AF9C8F; 
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}

/* SIDEBAR - BOX TITLES */
.sideboxTitle { 
font-family: Georgia, Arial;
font-size: 10px;
text-align: left;
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;
color: #721c18;
line-height: 24px;
margin-top: 0px;
margin-bottom: 15px;
padding-left: 28px;
background: #ede7e0 url(http://i38.photobucket.com/albums/e107/bel_layouts/spike_handsofapoet_backtitle.jpg) no-repeat center left;
border: 0;
}

/* SIDEBAR - BOX CONTENTS */
.sideboxContent { 
font-family: Tahoma, Verdana;
font-size: 9px;
text-align: justify;
padding-left: 5px;
}

/* PROFILE */
.sidebox #profile { 
text-align: left; 
text-transform: lowercase; 
line-height: 16px;
}

#profile a, #profile a:active, #profile a:visited {
color: #591816;
}

#profile a:hover {
color: #AC4F47;
}

/* PROFILE USERPIC */
.profile-userpic {
border: 1px solid #AF9C8F;
padding: 2px;
margin-left: 40px;
margin-bottom: 15px;
}

/* PROFILE - user AND name */  
.profile-label {
font-weight: bold;
text-transform: lowercase;
}

/* TITLE OF EACH LINKS SECTION IN THE SYSTEM LINKS */
.listtitle { 
display: block;
text-decoration: underline;
font-weight: bold; 
line-height: 16px; 
}

/* SYSTEM LINKS IN THE SIDEBAR */
.sidebox #systemlinks { 
line-height: 13px; 
}

.sidebox #systemlinks a:link, .sidebox #systemlinks a:active, .sidebox #systemlinks a:visited {
display: block;
font-weight: normal;
color: #591816;
padding-left: -10px;
}

.sidebox #systemlinks a:hover { 
color: #AC4F47;
background-color: #FCF9F5; 
}

/* TAGS LIST IN THE SIDEBAR */
.sidebox #tags_sidebox { 
line-height: 16px; 
text-align: left; 
color: #591816; /* commas color */
}

#tags_sidebox a {
display: block;
margin-bottom: -16px;
color: #DED3C7;
}

.sidebox #tags_sidebox a:link, .sidebox #tags_sidebox a:active, .sidebox #tags_sidebox a:visited { 
display: inline; 
text-decoration: none; 
font-weight: normal;
padding-bottom: 0px; 
padding-left: 0px;
color: #591816;
}

.sidebox #tags_sidebox a:hover { 
color: #AC4F47;  
}

/* FREETEXT IN THE SIDEBAR */
#freetext a:link, #freetext a:active, #freetext a:visited { 
line-height: 16px; 
display: block; 
padding-left: -10px; 
}

#freetext a:hover { 
color: #AC4F47; 
line-height: 16px; 
display: block; 
padding-left: -10px; 
}

/* SUMMARY IN THE SIDEBAR */
.summaryList { 
text-align: left; 
}

.summaryList a:link, .summaryList a:active, .summaryList a:visited { 
line-height: 16px; 
font-weight:normal;
color: #591816;
}

.summaryList a:hover { 
line-height: 16px; 
color: #AC4F47; 
}

/* MINI-CALENDAR IN THE SIDEBAR */
.sidebox #latestmonth {
text-align: left;
}

/* MINI-CALENDAR POSITION */
.sidebox #latestmonth table {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 2px;
}

/* SPACE AMONG DAYS IN MINI-CALENDAR */
#latestmonth table td {
padding: 1px;
text-align: center;
color: #553E30;
text-transform: uppercase;
}

/* APPEARANCE OF DAYS IN MINI-CALENDAR */
.latestmonth-inactive {
background-color: #DED3C7;
text-align: center;
padding: 3px;
}

.latestmonth-active {
background-color: #DED3C7;
text-align: center;
padding: 3px;
}

.latestmonth-active a {
text-decoration: none;
}

.latestmonth-active a:hover {
color: #AC4F47;
}

/* APPEARANCE OF SEARCH AND COMMENTS BUTTONS */
.sidebox #search {
text-align: left;
}

input {
font-family: Verdana, Arial;
font-size: 9.5px;
text-transform: lowercase;
letter-spacing: 1px;
color: #492A0A;
background-color: #DED3C7;
line-height: 20px;
margin-bottom: 2px;
margin-top: 2px;
}

/* WIDTH OF THE SEARCH BOX */
#SearchTerm {
position: relative;
left: 0;
width: 90%;
margin-left: 0;
}

/* CATEGORY LISTBOX IN SEARCH */
#SearchType, select {
font-family: Verdana, Arial;
font-size: 9.5px;
text-transform: lowercase;
letter-spacing: 1px;
line-height: 20px;
color: #492A0A;
width: 100px;
background-color: #DED3C7;
margin-bottom: 2px;
margin-top: 2px;
}

/* ENTRIES BLOCK SETTINGS */
.entryHolder {
font-family: Tahoma, Verdana;
font-size: 8pt;
color: #290705;
margin: 0px 0px 10px 0px;
background-color: transparent;
border: 0;
}

.entryHeader {
padding: 5px;
margin-right: 5px;
border-top: 1px solid #AF9C8F; 
border-left: 1px solid #AF9C8F; 
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #EDE7E0 url(http://i38.photobucket.com/albums/e107/bel_layouts/spike_handsofapoet_backsubj.jpg) repeat-y center left;
}

.entryHeader a{
color: #000000;
}

/* DATE IN THE ENTRIES */
.entryHeaderDate {
font-family: Century, Arial;
font-size: 7pt;
font-weight: bold;
text-transform: lowercase;
color: #360E0C;
padding: 5px 5px 5px 0px;
}

.entryHeaderDate a {
color: #000000;
text-decoration: none;
}

.entryHeaderDate a:hover {
color: #AC4F47;
text-decoration: underline;
}

/* SECURITY ICON */
.entryHeaderSubject img {
margin-bottom: -2px;
}

/* ENTRIES SUBJECT */
.entryHeaderSubject {
display: inline;
font-family: Georgia, Verdana;

font-size: 13px;
letter-spacing: 2px;
color: #741F1D;
font-weight: bold;
text-align: left;
}

.entryHeaderSubject a { 
color: #000000; 
text-decoration: none; 
}

/* DISTANCE BETWEEN ICON AND ENTRIES */
.entryUserinfo {
text-align: center;
margin: 0px 0px 8px 8px;
background-color: transparent;
}

/* ICON IN THE ENTRIES */
.entryUserinfo-usericon img {
border: 1px solid #360E0C;
padding: 2px;
margin-top: 6px;
}

/* USERNAME IN THE FRIENDS PAGE */
.entryUserinfo-username {
text-align: center;
margin-top: 5px;
}

/* POSITION OF THE ENTRIES TEXT */
.entryText {
padding: 6px;
margin-bottom: 15px;
}

/* MOOD AND MUSIC */
.entryMetadata {
padding-left: 6px;
text-transform: lowercase;
color: #360E0C;
}

.entryMetadata ul {
margin: 0px;
padding: 0px;
}

.entryMetadata li {
list-style: none;
padding-right: 0;
}

.entryMetadata-label {
font-weight: bold;
padding-right: 4px;
}

/* TAGS LINKS IN MOOD AND MUSIC */
.entryMetadata-content a:link, .entryMetadata-content a:active, .entryMetadata-content a:visited {
color: #360E0C;
font-weight: normal;
}

.entryMetadata-content a:hover {
color: #AC4F47;
text-decoration: underline;
}

/* COMMENTS */
.entryLinkbar {
font-size: 11px;
color: #430404;
text-align: right;
background-color: #EDE7E0; 
padding: 5px;
margin: 10px 5px 20px 0px;
}

.entryLinkbar ul {
margin: 0px;
padding: 0px;
}

.entryLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}

.entryLinkbar a, .entryLinkbar a:link, .entryLinkbar a:visited { 
text-decoration: none;
padding-left: 8px;
}

.entryLinkbar a:hover, .entryLinkbar a:active { 
color: #AC4F47; 
text-decoration: none; 
}

.commentHolder {
font-family: Tahoma, Verdana;
font-size: 9pt;
color: #290705;
background-color: transparent;
margin: 4px 0px 4px 0px;
border: 0;
}

.commentUserinfo {
font-size: 8pt;
text-align: center; 
background-color: transparent;
margin: 0px 8px 8px 0px;
}

.commentUserinfo-usericon img { 
border: 1px solid #360E0C;
padding: 2px;
margin-top: 6px;
}

.commentText {
font-family: Tahoma, Verdana;
font-size: 8pt;
padding: 6px;
width: 90%;
}

.commentHeader {
background-color: #E2D8CB;
color: #591816;
font-size: 10px;
padding: 4px 0px 4px 8px;
}

.commentHeader a{
color: #F3F1E2;
}

.commentHeaderScreened {
font-size: 12px;
background-color: #DED3C7;
padding: 4px 4px 4px 8px;
}

.commentHeaderSubject {
font-weight: bold;
padding: 4px 0px 4px 8px;
}

.commentLinkbar {
font-size: 11px;
color: #430404;
text-align: center;
padding-top: 4px;
padding-bottom: 4px;
}

.commentLinkbar ul {
margin: 0px;
padding: 0px;
}

.commentLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}

.commentLinkbar a, .commentLinkbar a:link, .commentLinkbar a:visited { 
color: #000000; 
text-decoration: none;
}

.commentLinkbar a:hover, .commentLinkbar a:active { 
color: #AC4F47; 
text-decoration: none; 
}

.replyform {
padding-left: 10px;
background-color: transparent;
}

.replyform textarea {
width: 90%;
}

/* CALENDAR PAGE */
.yearlinks{
text-align: right;
}

.yearlink{
padding-left: 4px;
padding-right: 4px;
}

.month {
width: 90%;
border: 1px solid #DED3C7;
margin: 8px 8px 8px 40px;
}

.daysubjects {
color: #000000;
padding: 8px 8px 8px 40px;
}

.daytitles {
text-align: center;
color: #000000;
background-color: #DED3C7;
border: 0;
}

.day-blank {
border: 1px solid #DED3C7;
}

.day {
border: 1px solid #DED3C7;
}

.day-date {
text-align: center;
color: #000000;
width: 50%;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}

.day-count {
float: right;
text-align: center;
font-size: 12px;
width: 50%;
}

.day-count a {
text-decoration: none;
color: #360E0C;
}

.day-count a:hover {
text-decoration: none;
color: #AC4F47;
}

/* TAGS PAGE */
.tagstable, .tagstable td {
border: 1px solid #DED3C7;
text-align: left;
}

.tagstable { 
font-size:90%; 
width: 90%;
}

| SPECIAL INSTRUCTIONS |

Preparing the code:
- Copy the CSS code and paste it in the Notepad.
- If you decided to host the images in your own server, replace every i38.photobucket.com/albums/e107/bel_layouts by the server address where you uploaded the images.

Configuring the layout:
- In the LJ page, go to Journal >> Change Journal Theme.
- If you're using S1 style do the following. If not, skip this step: Click in the link Switch to S2 in the blue box on the right side of the page. Then, click in the button "Yes, I want to upgrade to S2".
- In the 2. Select a New Theme section, type Smooth Sailing in the search box. Then select one of the themes listed and click in Apply Theme.
- In the 3. Choose a Page Setup section at the bottom of the page, choose "2 Column (sidebar on left)" and click in the button "Apply Layout".
- Then click in the button Customise your theme, in the bottom on the right side.
- Click in the option Custom CSS and under Use layout's stylesheet(s) choose No (THIS IS VERY IMPORTANT!). Then copy the CSS from the Notepad and paste it in the field Custom stylesheet.
- Then you can navigate through the links in the Customize Your Theme and personalize other things as you wish, like going to the Sidebar link and putting personalized labels or entering personalized texts inside the free text boxes, for example.
- Click in the button Save Changes and it's done.

Cross-posted to

btvsats_layouts,

layouts_for_fun and

freelayouts.

Current Mood: gloomy

Tags:

s2 layouts

Flat | Top-Level Comments Only

Date: 2006-08-03 12:27 am (UTC)

From:

Page Summary

Style Credit

Expand Cut Tags