Snapshot_Seeker Layout Code

[livebackward]

This post is going to be a bit of step by step instruction on how to set up a journal to look like the snapshot_seeker layout.




Instructions

Visit the journal customization page - http://www.livejournal.com/customize/
- Make sure that your journal uses the s2 style system
- type unstyled into the search box. Click Apply Theme under the EXPRESSIVE layout.
- lower on the page, select the 2 column (sidebar on right) page setup)
- click the 'Customize Selected Theme' button on the bottom right of the page.

Customize Display Section

Everything here is a matter of personal taste. I make sure that the navigation strip is turned off however as I don't much like it.

Customize Text Section

This is where you alter the wording for all of the links in your journal. (comments, reply, etc)
Be sure to expand all sections and alter anything you wish to be altered. Again this is a matter of personal taste and your journal's theme.
If your journal is friends only, or a community, make use of the sticky post. This post will always be at the top of your page when viewing anything in your style (recent entries, friends page, etc).

Customize Sidebars Section

Expand All
This is where you can decide what goes into your sidebar. Also, where you can edit the custom text for the sidebar (if you use it). This is where the "Layout by danielefton " would go if you wish to credit me in the journals main page - Be sure it goes at the bottom of the custom text widget so its unobtrusive.
My custom text box in my sidebar contains images, this is done with the img src html code.

Customize Links ListThis is pretty self explanatory. If you activated the links section in your sidebar this is where you can maintain the links.
In this layout since the tags are turned off in the sidebar I made links to a couple of frequently used tags.

Custom CSS - THE BIG ONE

This section is where all of the design customization is done. Color choices, header bar images, placements. Change this code to change those aspects. But Beware! Changing the wrong thing can have undesired effects. Be sure the first drop-down box always says YES


/*
general formatting
page structure
page banner header
header nav styles
headers
hover edit (sticky post header in LJ)
widget styling
asset styling
pager
utitlity code
*/

/* general formatting --------------------------------------------------- */
body {
font-family: Georgia;
font-size: 11px;
color: #000000;
background: #663300
}
body.layout-wt #alpha { margin: 0px 180px 0px 0px; }
body.layout-wt #beta { float: right; position: absolute; left: 650px; }
#beta { width: 150px; margin-top: 10px; }

a {
text-decoration: none;
color: #663300;
}

a:hover {
color: #996633;
text-decoration: overline underline;
}

/* page structure ----------------------------------------------------------- */

#page-inner {
width: 800px;
margin: 0 0 0 0;
padding-right: 10px;
padding-left: 10px;
background-color: #996633;
background-position: top left;
background-repeat: no-repeat;
background-image: url(http://pics.livejournal.com/danielefton/pic/000s984a);
}

#content-inner {
width: 800px;
align: center;
padding-top: 10px;
padding-right: 0px;
padding-left: 0px;
margin: 0px;
}

#alpha-inner {
background: transparent;
width: 800px;
padding: 0px 0px 0px 0px;
margin-left: 10px;
}

#beta-inner,
#gamma-inner {
background: transparent;
width: 150px;
padding: 0px 10px 0px 0px;
margin: 0px; }

.asset-inner {
overflow: hidden !important;
background: white;
width: 640px;
}

/*hover edit --------------------------------------------------*/
/*in LJ, this is the sticky post header*/
.asset-name-hover {
width: 640px;
margin: 0 0 0 0;
padding-left: 20px;
background-color: #663300;
color: white;
}

/* variations of sidebar backgrounds */
.layout-wt #content-inner {
background-position: top right;
background-repeat: repeat-y;
background-color:#ffffff;
}

.layout-wt #content-inner { background-image: url(content-bg-wt.gif); }

/* page banner header ----------------------------------------------------------- */

.page-header1 { font-size: 28px; }
.page-header2 { font-size: 22px; }
.page-header3 { font-size: 18px; }
.page-header4 { font-size: 14px; }

#header-text,
.page-header1,
.page-header2,
.page-header3,
.widget-header {
font-family: Georgia;
}

#header {
position: static; /* fixes positioning issue on IE where header content displays outside #header-content */
background-color: transparent;
align: right;
}

#header-inner {
position: static; /* fixes positioning issue on IE where header content displays outside #header-content */
align: right;
background-position: top left;
background-repeat: no-repeat;
background-image: url();
height: 250px; width: 800px;
}

#header-content-inner {
margin: 10px 5px 0px 20px;
padding-bottom: 60px;
}

#header-text {
display:none;
}

#header-name {
display:none
}

#header-name,
#header-name a {
color: #990000;
text-decoration: none;
}

#header-name a:hover {
text-decoration: underline;
}

#header-description {
display: none;
}

#header-description,
#header-description a {
color: #cccccc;
}

/* header nav styles ------------------------------------------------- */
.nav,
.nav a {
color: #ffffff;
}
.nav .item {
border-color: #ffffff;
}
.nav .current a {
text-decoration:none;
}

#header ul.nav li.item a {
align: right;
color: white;
text-decoration: none;
}

#header ul.nav li.item a:hover {
align: right;
color: #ffffff;
text-decoration: overline underline;
}

/* Sidebar Widgets --------------------------------------------------- */
#beta a, #gamma-inner a {
color: #663300;
}

h3.widget-header,
.widget .widget-header a,
.page-header2,
.post-asset .asset-name a {
font-family: Georgia, serif;
font-weight: bold;
margin-right: 10px;
}

.widget-content .user-pic{
float: none;
text-align: center;
}

.profile-username {
text-align: center;
}

.about-me-widget {
text-align: right;
}

.customtext-widget {
text-align: right;
}

.profile-name { display: none; }

.typelist-widget, .syndicate-widget, .powered-widget {
text-align: right;
}

.typelist-widget a, .syndicate-widget a, .powered-widget a {
color: #663300;
text-decoration: none;
}

.typelist-widget a:hover, .syndicate-widget a:hover, .powered-widget a:hover {
color: #663300;
text-decoration: overline underline;
}

.powered-widget {
height: 40px;
}

.widget-header, .widget-content {
background-color: transparent;
}

.widget-header {
padding: 8px 0 8px 0;
font-size: 13px;
font-weight: bold;
height: 8px;
}

.categories-widget .tagcloud {
text-align: center;
}

.categories-widget .tagcloud a {
color: #6d4d76;
text-decoration: none;
}

.categories-widget .tagcloud a:hover{
color: #6d4d76;
text-decoration underline overline;
}

.calendar-widget table, .calendar-widget .widget footer {
align: center;
text-align: center;
}

/* Asset Styling --------------------------------------------------- */

.asset-meta {
padding: 1px;
color: #663300;
}

.asset a, .asset-content a, .asset-stream a, .asset-footer a {
color: #663300;
text-decoration: none;
}

.asset a:hover, .asset-content a:hover, .asset-stream a:hover, .asset-footer a:hover {
color: #0996633;
text-decoration: overline underline;
}

/* Utility Code --------------------------------------------------- */

/* clear floats, inspired by positioniseverything.net/easyclearing.html */
.comment-body:after,
#page-inner:after,
#header-inner:after,
#header-photo:after,
#content-inner:after,
#alpha-inner:after,
#beta-inner:after,
#gamma-inner:after,
#delta-inner:after,
#footer-inner:after,
.widget .user-pic:after {
content: ".";
display: block;
visibility: hidden;
clear: both;
height: 0.1px;
font-size: 0.1em;
line-height: 0.1px;
}

/* float in post bodies around enclosures */
#content-inner,
.asset-body {
height: 1%;
}

/* Win IE < 7 */
* html #header-name a { word-wrap: break-word; }

And that's it! If you have any problems or questions, come back and ask.