Layout Customizations: Lines - Smooth Sailing

[gossymer]

Customization Guide

NOTICE
I made this guide sort of as a Do It Yourself kind of tutorial - I tend to stop responding to layout issues after a few weeks because:

• I don't want to have to answer the same questions a dozen times or more
• The issues have been addressed in earlier comments. Please read those comments and fix your layout.
• I only started making shared layouts this year. I don't have all the answers. Please check with everything_lj or s2smoothsailing for help from people who are truly brilliant.
• Layouts are something I play around with. The code is not perfect. There probabably are a lot of ways to make my layouts break. So, just an FYI

Change Colors
Download the CSS file for the Ocean color scheme.
Open it in a text editor. Add this code to the end:
.pageblock {
border-left: 20px solid #COLOR; /* left border */
border-right: 20px solid #COLOR; /* right border */
background-color: #COLOR; /* the color behind your entries */
}

body {
background-color: #COLOR; /* the background color for the whole journal */
background: url() repeat-x top fixed;
}

Now do Find/Replace All to change the following colors:

• line color: replace #eee for #COLORCODE
• link color: replace #47BFA4 for #COLORCODE
• hover color and color for linkbar, menu and sidebar links: replace #505050 for #COLORCODE

Adding a header image
If you want a header image at the top, add this code to the end :
.header-title {
background-image: url(''); /* put link between the quotes */
padding-top: AAApx;
/* replace AAA with the height of the image (NOT THE WIDTH! PLEASE CHECK) + 35px so if your header is 250px high, type in 285px*/
}

.sidebar {
top: 95px;
/* replace BBB with the height of the image plus 95px */
/* FOR EXAMPLE if the header image is 400px in height, BBB will be 495 */
}
Adding a background image
If you want a background image at the top, add this code to the end:
body {
background-image: url(''); /* put link between the quotes */
background-position: top left; /* choose top left or top center or top right */
background-repeat: no-repeat; /* choose no-repeat, repeat, repeat-x or repeat-y */
background-attachment: scroll; /* scroll or fixed */
}
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

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 */
}
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 */
}
Add a side header
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 */
}
Disable Header Image
If you want to disable the header image, add this code to the end:
.header-title {
background-image: url(''); /* put link between the quotes */
padding-top: 35px;
}

.sidebar {
top: 95px;
}
Disable sidebar
If you want to disable the sidebar across the top, add this code to the end:
.sidebar {
display: none;
}

.header-subtitle {
height: 0px;
}