[LIVEJOURNAL] [LAYOUT] [S2] [SMOOTH SAILING]
Live preview: ||| HERE |||
Download CSS: @GOOGLE SITES
Download .zip: @MEGAUPLOAD / @FILEFREAK
!!COMMENT IF YOU TAKE!!

quick nav: Details & Previews | Images | Step-by-Step Installation | Copy Stylesheet | How To Credit

RESOLUTION:	good for any resolution, looks best in resolutions 1024x768 or larger
TESTED BROWSERS:	looks the same on both firefox and internet explorer
ACCOUNT TYPE:	basic, plus (paid is assumed)
CSS:	(Valid CSS)
IMAGE PREVIEW:	@ GooglePages.COM
LIVE PREVIEWS:	Recent Entries & Comments Page

All images are uploaded to GooglePages. You may save the images and upload them to your own server if you wish. I can not guarantee that the images will stay up forever on that server, so it is recommended that you upload them to your photobucket/imageshack/whatever account to make sure that they don't go down. Here is the list of images in this layout. This table includes the filename, current url, and the sections the files are in.



(installing the layout css)
1. Switch to the S2 Style System at Customize Journal
2. Scroll down to 'Select a New Theme' and type 'Smooth Sailing' in the 'theme, layout, or designer' search box.
3. Click Customize Selected Theme and then click on Custom CSS on the left-hand side.
4. Change the following like so:

Use Layout's stylesheet(s)	No
Use layout's stylesheet(s) when including custom external stylesheet	No
Custom external stylesheet URL	(Blank) (Or URL to .css)

(Click here for a screenshot)
5. By now you should have your layout's css on your clipboard. Paste the CSS into the Custom Stylesheet textarea.

Extra:
To learn how to edit your sidebar, click here.
To learn how to make your icon appear beside your entries and have your text wrap around your icon, click here.

MAIN LAYOUT
download-> .css: @GOOGLEPAGES / @FILEFREAK (DO NOT DIRECTLINK TO THIS CSS FILE!)



How to edit your sidebar and add freetext
1. Go to Customize Journal, click the button at the bottom to continue customizing and select Sidebar from the side menu.
2. Scroll down to the area that has the header Free Text Sidebox. You may have to click on the header to cause the section to appear.
3. Put whatever you like into the Free Text Sideboxes, but be sure to pay close attention to the Free Text Sidebox Position. Make sure this number does not match the number of any of the other sections in the sidebar.
a. There are ten Free Text Sideboxes in Smooth Sailing. There is also a Private Free Text Sidebox. Anything you put in the Private Free Text Sidebox will be only visible to you.

How to make the sidebar's free text sidebox's text justified
1. In the Free Text Sidebox you want to look similar to the preview, insert the following code at the beginning: <div style="text-align: justify;">
2. At the end of your text, place the following closing tag: </div>

How to make your icon appear next to your entries and have the entry text wrap around it (step 3)
1. This requires editing the CSS. Scroll down (or use Find in your browser/notepad) to the CSS section .entryUserinfo-usericon img .
2. You can either delete display : none; and skip to the next step, or you can make it pretty by deleting the code in that section and adding:
font-weight : normal;
border : 0;
padding: 10px;
background-image : url(http://oh.goshhh.googlepages.com/blackergrungepattern.png);
*IMPORTANT: be sure that there is a closing tag at the end of the section if you do that. The tag is a right curly brace, }.
3. After you have made your icon appear, its time to make your entry wrap around that icon! While still on the Customize Your Theme page, go to Display. Scroll down and click Additional Options. Change Wrap Entry text under userinfo and Wrap Comment text under userinfo to YES.

How to keep large images from breaking your tables
1. Edit your CSS => Find .entryText in the /*ENTRIES*/ section of the CSS.
2. Add overflow: CHANGETHIS ;.
3. Now you have several options of how you want the large image to be displayed:

Value	What it does
visible	Content is not clipped and may be rendered outside of the element's box.
hidden	Content is clipped and content outside of the element's box is not visible.
scroll	Content is clipped as necessary, but a horizontal scrollbar is made available where necessary to view the additional, non-visible content.
auto	Should allow for a horizontal scrollbar if possible in case of overflow.

4. So here is an example of how it should look: overflow : auto ;

How to add a header image to the top of the layout
1. It your CSS => Delete all of .pageheaderblock (shown below)

.pageheaderblock {
background : #000000 url(http://oh.goshhh.googlepages.com/blackgrungepattern.png);
padding-top : 0;
margin : 0 auto;
text-align : center;
}

2. Replace that section with

.pageheaderblock {
background-image: url("HEADERURL");
background-position: top center;
background-repeat: no-repeat;
padding-top: HEIGHTHEREpx; }

3. Edit HEADERURL with the hosted url of your chosen header.
4. Edit HEIGHTHERE with the height of your header in pixels.
5. For more information about adding a header to a smooth sailing layout, go here.



Background pattern is from shizoo.frozen-media.de. Tiny icons are by me, twentynine_.



Copy and paste this into your userinfo's BIO section if you're unaware of how to credit:
stylesheet: <lj user="twentynine_">



I will be screening the comments on this post from now own due to people asking questions and then deleting their comments.

If you need help with your layout please follow the following:

1. Only comment at the entry where the layout codes are posted (not in my personal journal, not on another post, etc).
1. DO NOT COMMENT IN MY PERSONAL JOURNAL ASKING FOR HELP
2. DO NOT IM ME ON AIM ASKING FOR HELP
3. ONLY REPLY AT THE ORIGINAL LAYOUT POST!
2. Read the Step-by-Step Installation Guide and the Mini FAQ in full and follow all of the information before replying with a comment
3. If you're having an issue with a layout, a screenshot or just telling me the issue doesn't help me. I need to either view the css or see the layout and its error.
1. If you have edited the code in some way, I might not be able to help you. Usually if you edit the code, you are on your own!

EDIT: I have added a mini faq for this layout.

EDIT (JULY 27 2008): I've added more to the mini faq. You can now add a header, keep images from breaking your tables, and make your icon appear next to your entries (and make it pretty!).

Also, I have made two profile layouts that match this layout. You can view those here.

EDIT (JULY 28 2008): As of today, all incoming comments will be screened due to people deleting their comments. Just so you guys know, I am willing to help with almost any issue on these layouts, but if you can't show me the layout's error or problem on your journal or by uploading the .css file, I can't help you! Just telling me your issue or taking a screenshot isn't going to help me!