Left-aligned sidebar tutorial

[carriep63]

**This is a sidebar tutorial for left-aligned layouts. If you want your content to be in the center of the page, use this tutorial**

• Example of left-aligned layout || Get codes for example layout
• You MUST have a website listed on your userinfo in order for this override to work!!!
• This is for the S1 Generator style only.
• This tutorial deals only with the main entries page. You will need a FRIENDS_WEBSITE, DAY_WEBSITE and CALENDAR_WEBSITE override to match your layout across all pages. ( Read More)
• Remember to Keep your numbers even!

Sidebar layout with a header image:
Change these numbers to suit your needs.

GLOBAL_HEAD<=

<=GLOBAL_HEAD

LASTN_WEBSITE<=

The text, links, and pictures you want in your sidebar.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<=LASTN_WEBSITE

Image map instead of headerRemove background image:
#x {
background: url(http://pics.livejournal.com/carriep63/pic/0005gwtp);
position:absolute;
top:0px;
left: 0px;
width: 600px;
height: 330px;
visibility: visible;
}

Add image here (LASTN_WEBSITE portion):

...and map codes afterwards

Example



Dont want a header image?Change this:

#x {
background: url(http://pics.livejournal.com/carriep63/pic/0005gwtp);
position:absolute;
top:0px;
left: 0px;
width: 600px;
height: 330px;
visibility: visible;
}

To this:
#x{
display:none;
}

Want a second sidebar?_HEAD CODES:
Copy the sidebar code and name it something different. Change the numbers to suit your needs.

#sidebartwo{
position:absolute;
top:330px;
left: 390px;
width: 175px;
height: auto;
visibility: visible;
background:#99CA00;
color:#cc0000;
padding:5px;
border:1px solid #cc0000;
}

_WEBSITE CODES:
Copy the sidebar code and give it the new name you chose in your _HEAD overrides.

The text, links, and pictures you want in your sidebar.