Guide: Smooth Sailing Customization

[daemon]

UPDATED: March 23, 2009

You have found thrashmetal's Smooth Sailing guide! Please be aware that this guide and the base stylesheet contained within are still works-in-progress; if you find any rough edges, feel free to point them out. :)

Please note that my helping-with-edits policy is still in effect for this guide. After all, this is here so you can figure out (and learn) how to do things with your layout on your own.

Table of Contents

• Smooth Sailing FAQ
• Smooth Sailing's Customization Area
• Base Stylesheet
• Useful Software
• How To: Smooth Sailing Topbars
• How To: Other Modifications
• Remove the dash between the entry date and subject
• Target/Remove certain links at the bottom of the entry
• Prevent images from stretching your layout
• Changelog


External Resources

• s2smoothsailing
• everything_lj
• Getting Started
  
• Intro to CSS and Overrides
  
• Basic CSS Guide
  
• [s2 features by layout] Smooth Sailing
  
• Breakdown of the Smooth Sailing Stylesheet
  
• Smooth Sailing Tutorial Index
  

If you're confused about customizing a Smooth Sailing layout, or want to try making your own, this guide should hopefully give you a few pointers.

Please note that the point of this guide is not to teach you CSS, and you should be somewhat familiar with it if you're attempting to create a stylesheet. If you're looking for CSS help, I highly recommend these guides by milou_en_avril: Getting Started and Basic CSS Guide. You could also try Google.

Smooth Sailing FAQ
This section explains certain features of the SS style.

• What is the "Guestbook"?

What is the "Guestbook"?
Click here for an example of a guestbook. You can also view this link for more info about the feature. Click here to learn how to enable it.

( return to top)

Smooth Sailing's Customization Area
If you regularly use Flexible Squares, you'll probably notice that SS has many, many more customization options -- for first time users, this is a little daunting. At the same time, taking advantage of SS's vast customization options has allowed me to add a little individuality to my layouts! A little trial and error and common sense go a long way here, but this guide is here to help you along the way.

What this section of the guide does is point out key customization features and how they could potentially be used in a layout. It isn't a line-by-line explanation. Click here for an extensive walkthrough of SS' built-in features.

Getting Started
To access the options, obviously, you must have a Smooth Sailing theme applied to your journal. Then click Customize your theme to get the ball rolling. You should then see the following links on the sidebar:

Display
Scroll down past the standard navstrip/mood theme options and you will find a whole mess of drop down boxes.

• Userinfo Position in Entries - Set your userpic to display on the left or right side of the page. Thought I'd point this out since some people seem to have a definite preference.
• Header Journal Icon - A rather obscure option that produces this effect. I've yet to make use of it, but I thought I'd point it out.
• Wrap Entry text under userinfo - You can use this to create different looks: Wrapped, Unwrapped, Unwrapped w/ floating userpic effect
• MetaData Position - Above entry text moves the metadata...above your entry text. Below entry text is the default option.
• Entry Tags Position - With metadata (mood, music) is the default. You can separate the tags into their own section in the header by selecting After subject text in subjectbar. You can customize this with .entryHeaderTags and .entryHeaderTags a.
• EntryID of the Guestbook - Use this to enable the Guestbook feature. A Livejournal permalink looks like this: http://scythe.livejournal.com/2416.html. The number in red is the EntryID. Paste this into the box. ( What is the Guestbook?)

Style
You don't need to worry about this since CSS does fonts/colors for you.

Page Text
Change the text for various links/system messages on the journal page. This is also where you can enable a "sticky post" without having to meddle with journal dates.

• Text for Welcome Note on Recent Entries Page - Type your sticky post into this box. Accordingly, Text for the Title of the Welcome Note is where you enter a title. You can give the Welcome Note a unique look via CSS (the ID's for the Welcome Note are pointed out in the Base Stylesheet).
  

Entry Text
Change text for date/time, comment links, metadata, etc. Most of this is self-explanatory.

• Format for Date and Time (Recent/Friends/Entry/Reply page) - Change the formatting of the date/time. I usually alter it since the default is fugly. Click here for LJ's official guide.
  

Menu
Change text and options for the navigation menu (Recent, Archive, Friends, Userinfo etc.). SS's menu is not static and changes with the pages; it will display Previous #/Next # links on the Recent/Friends pages and date links on the Archive. If you want a narrow-width layout, I recommend changing the text here so the menu won't grow too big and overflow. (Unless that's what you want!)

• Show Memories link on Menubar / Show Website link from Userinfo page on Menubar - Tell LJ whether or not you want a link to your Memories/website along with the usual menu links.

Sidebar
For me, this is where the magic happens. You can do an enormous amount of things with the SS sidebar. The options here are pretty straightforward.

• _______ Position/Links Visibility - Change the order of the boxes in the sidebar, or go all the way to the bottom of the dropdown to Hide.

Tags Page
Smooth Sailing has two options for the tags page: a detailed table (default) and a simple list.

• Layout for the Tags Page - Switch between the table and the list.

Links List
Edit your Links List. This remains constant across all themes.

Custom CSS
Paste in custom CSS. Remember to set both drop down boxes to No when using a custom stylesheet! Otherwise, bits and pieces of the base layout will show up.

( return to top)

Base Stylesheet
I have compiled a base CSS stylesheet containing most of the Smooth Sailing selectors, down to the most specific. I recommend referring to carriep63's Smooth Sailing breakdown to understand some of the more general parts of the CSS -- most users will not have to worry about anything beyond what's covered in that guide.

If you're an advanced user, though, the stylesheet has comments explaining what some of the more obscure/specific selectors do. Right-click and save as (or just copy into Notepad if you're so inclined)!

IMPORTANT NOTE: This stylesheet is rather large (to accomodate SS's large number of classes/ID's), so you might end up going over the character limit (LJ will not save the Custom CSS). If this happens, go through the CSS and remove unused/empty selectors. You might also consider a CSS optimizer.

DOWNLOAD BASE STYLESHEET
Go to smoothsailings2 for a live version!

Useful Software

These are some helpful tools that make designing and coding a great deal easier.

• Notepad++ - An upgraded Notepad with syntax highlighting (meaning the different parts of the code are color coded, like this: .pageblock {padding-bottom:12px;)



• Firebug (Firefox) - A very handy Firefox plugin that allows you to identify parts of the CSS simply by pointing and clicking. Also supports live editing and some other useful features.



• Web Developer (Firefox) - I vastly prefer Firebug for the point-and-click Inspect feature, but Web Developer is also a great tool if you want to go into the nitty-gritty of web design.


( return to top)

How To: Smooth Sailing Topbars
How to get the topbar effect, avoid Navstrip compatibility problems, get that neat columned effect (with customizable boxes!) and more.

Click here to view this tutorial!

( return to top)

How To: Other Modifications
Other handy CSS tweaks from various sources. These tutorials may make use of some CSS terms beginners might not be familiar with. Click here for a short and easy introduction.

Remove the dash between the entry date and subject

Read this tutorial.

Target/Remove certain links at the bottom of the entry



Here, we can see the following CSS applied to the default Smooth Sailing layout:
.entryLinkbar a[href*="subscriptions"], .entryLinkbar a[href*="tellafriend"], .entryLinkbar a[href*="memadd"], .entryLinkbar a[href*="edittags"], .entryLinkbar a[href*="editjournal"] {

border:3px solid yellow;

}

If you want to hide these links, simply delete border:3px solid yellow; and add display:none; instead. You will get this.

You can also display this code in expanded form if you find the above too confusing.

.entryLinkbar a[href*="subscriptions"] {
display:none;
}
.entryLinkbar a[href*="tellafriend"] {
display:none;
}
.entryLinkbar a[href*="memadd"] {
display:none;
}
.entryLinkbar a[href*="edittags"] {
display:none;
}
.entryLinkbar a[href*="editjournal"] {
display:none;
}

This code hides the links. You can delete and keep what you need to suit your needs. (ie: if you want to keep the Edit Entry link, delete that entire rule.)

Now you need to remove the extraneous space brought on by hiding the links. Find .entryLinkbar li and padding:0 5px; (This is the SS default). Whatever the value happens to be at the end, change it so it reads padding:0px;. You will get this.

To fix this, add this:
.entryLinkbar a {

margin-right:10px;

}

Note: You can't touch the permalink ("Link") or the link with the number of comments. You could technically hide the "Reply" link too, but I don't see why you would. The selector code is .entryLinkbar a[href*="reply"].

Prevent images from stretching your layout

Add this code to your CSS:
.entryText img {
max-width: VALUEpx;}

Replace the VALUE with the max width you'd like images to be. ( Source)

( return to top)

Changelog
Keeps track of changes/updates made to this guide.

March 23, 2009 - Added a note about the Base Stylesheet possibly exceeded LJ's CSS character limit.
February 16, 2009 - Added links to milou_en_avril's kickass layout-making resources.
February 13, 2009 - Added some more info to the Customization Area section, and modified the base stylesheet to include .entryHeaderTags. Also, happy Friday the 13th.
January 18, 2009 - Added a link to the new Smooth Sailing Topbar tutorial.

( return to top)