In the Blues - Layout #2 - Version 2.0 (smoothsailing)

[gossymer]

Style: S2 Smooth Sailing
Best view: 800x600 and up
Browsers Tested On: IE, Firefox, Opera
Custom Comment Page: yes
Navbar: Disabled automatically
Ads: Yes (between entries)
Website link: Not Needed
Default Icon (sidebar): Disabled

The Original Optimized


Preview

Blue & Green

Pinks

Grey Blue & Orange

Bright Spring

Purple Mocha

Mellow Spring


Optimized!

• Easily change the layout width
• Align the layout left or right or center
• 6 additional color schemes!

NOTE: As always, the sideboxes at the top are completely scrollable so add as many links as you want. Tag boxes, search boxes etc. should also work fine with this layout.


Instructions
Go to the layout customization area

[On the Basics section]
Type in your Title
Type in your Subtitle
Choose S2 layouts

[Click Save]
[Go to Look and Feel]
[Under Layout & Language]
Choose "Smooth Sailing"

[Click Save]
[Go to Custom Options]
[Under Menu]
Show Memories link on Menubar: No
Show Website link from User info Page: No

[Under Sidebar]
Profile Position: hide
Summary Position: hide or position 1-4
Latest Month Position: hide or position 1-4
Links Visibility: hide or position 1-4
Tags Position: hide or position 1-4
Multisearch Position: hide or position 1-4

NOTE: You can have a MAXIMUM of 4 boxes at the top.
I myself used the latest month and 3 free text boxes, 1 for Blurb (position is 1), Links on my LJ (position is 2) and links outside LJ(position 3).

[Under Custom CSS]
Use layout stylesheet: Yes
Use layout's stylesheet(s) when including custom external stylesheet: YES (VERY IMPORTANT)
Paste the code: The Original, Blues & Greens, Pinks, Grey-blue & Orange, Bright Spring, Purple Mocha, Mellow Spring

Codes Notice:
You are free to make *any* changes as long as you give credit for the base code.
So the only rule is to comment & credit.

Paste this code into your profile page:

Credits:
Layout by

Further Customizations

Icons on the right
Add this code to the END of all the code
.entryUserinfo {
padding-left: 0px;
margin: 2px 15px;
}

.commentUserinfo {
padding-left: 0px;
margin: 2px 15px;
}

Wrapping Text Under Icons
Add this code to the END of all the code
.entryUserinfo {
padding-left: 0px;
margin-left: 15px; /* if entry icon is on the right change this to 7px */
margin-right: 7px; /* if entry icon is on the right change this to 15px */
}

.commentUserinfo {
padding-left: 0px;
margin-left: 15px; /* if comment icon is on the right change this to 7px */
margin-right: 7px; /* if entry icon is on the right change this to 15px */
}

Adding mini icons for user names and community names

• Right click and save the user pic
  (credit: _excentric_) and the community pic
  (credit: damnicons)
• Upload the images to your own server
• Add the following code and adjust the image link addresses
  .ljuser img {
  width: 0;
  height: 0;
  background-repeat: no-repeat;
  background-color:transparent;
  /* so that IE users will still see an image */
  background-image: url(USERPIC LINK HERE);
  padding: 18px 15px 0 2px;
  }
  
  .ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
  background-color:transparent;
  background-image: url(USERPIC LINK HERE AGAIN);
  padding: 18px 15px 0 2px;
  }
  
  .ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
  background-color:transparent;
  background-image: url(COMMUNITY PIC LINK HERE);
  padding: 18px 17px 0 2px;
  }

Please credit the image makers on your profile page.
Alternatively, if you'd like to use different icons, the site here will automatically generate the code for you
If you have a paid account, you can use this code

Adding mini icons for the linkbar
You must have a paid account to do this

• Upload the images you've chosen to your own server ( I used famfamfam.com's icons here)
• Put the image links into the code here
• Create a theme layer for your layout (guide over here)
• Put the code you created into the theme layer

If you have any issues with layers, please check out s2smoothsailing for help!

Changing the layout width
add this code to the END of all your code
.entryHolder, .pageblock, .sidebar {
width: XXXpx !important;
/* Replace XXX with the width you want */
/* FOR EXAMPLE if you want a width of 800px, XXX will be 800 */
}

.sidebar {
margin-left: -YYYpx !important;
/*Divide your chosen width by 2 and replace YYY with that number*/
/* FOR EXAMPLE if your width is 800px, YYY will be 400 and margin left will be -400px */
}

For color schemes "Bright Spring" and "Blue & Green", add this code to the END too:
.entryHolder {
width: ZZZpx !important;
/* subtract 2 from the width you chose and replace ZZZ with that dumber */
/* FOR EXAMPLE if your width is 800px, ZZZ will be 798 */
}

Align layout left
Copy/paste this code to the END

.pageblock, .sidebar {
margin-left: 10px;
left: 0%;
}Align layout right
Copy/paste this code to the END
.pageblock {
margin-right: 10px;
}

.sidebar {
left: 100%;
margin-left: -650px;
/* Your Width with an extra 10px */
/* FOR EXAMPLE if you change the width to 800px, margin-left for sidebar will be -810px */
}
Adding a header image
If you want a header image at the top, add this code to the end:
body {
background-image: url(''); /* put link between the quotes */
background-position: top center;
background-repeat: no-repeat;
background-attachment: scroll;
margin-top: AAApx;
/* replace AAA with the height of the image */
}

.sidebar {
top: BBBpx;
/* replace BBB with the height of the image plus 50px */
/* FOR EXAMPLE if the header image is 400px in height, BBB will be 450 */
}

If you have aligned the layout left or right you can easily add a side header image by adding this code to the end instead:
body {
background-image: url(''); /* put link between the quotes */
background-position: left; /* change this to right if you want the image on the right */
background-repeat: no-repeat;
background-attachment: fixed; /* even if you scroll the image will still be there */
}
Remove the sidebar at the top
Add this code to the end of all the code
.sidebar {
display: none;
}

.header-subtitle {
padding: 7px 3px;
}

★ Feel free to watch noveltybox