ephi (ephi) wrote,
ephi
ephi

S1 Layout - Magazine with Sidebar

Magazine is an S1 Layout for Livejournal. When I help my friend with her layout, this is the most comfortable base layout for override, because:
1. It's the closest S1 layout to be standards compliant
2. It doesn't have any table like Generator! Yay!

Unfortunately, adding sidebar with this override actually making it a little weird when viewing without any CSS (sidebar first, entry second).


How to Add Sidebar in S1 Magazine
1. Define your website
2. Change your Style System to S1
3. Change your Layout to Magazine
4. Go to Custom Options to put the overrides below.


GLOBAL_HEAD<=
<style type="text/css">

/* this is where your CSS codes is */
/* since in the example below I use div with an id called sidebar */
#sidebar
{
position: absolute;
left: 40px;
border: 1px solid red;
width: 200px;
height: 500px;
}

h1, p.Navigation, h2, div.H3Holder
{
position: relative;
left: 200px;
width: 600px;
margin-left: 20px;
}

</style>
<=GLOBAL_HEAD

LASTN_WEBSITE<=
</p>
<div id="sidebar">Contents of your sidebar</div>
<p class="Navigation">(<a href="%%url%%">%%name%%</a>)
<=LASTN_WEBSITE

DAY_WEBSITE
</p>
<div id="sidebar">Contents of your sidebar</div>
<p class="Navigation">(<a href="%%url%%">%%name%%</a>)
<=DAY_WEBSITE

FRIENDS_WEBSITE
</p>
<div id="sidebar">Contents of your sidebar</div>
<p class="Navigation">(<a href="%%url%%">%%name%%</a>)
<=FRIENDS_WEBSITE


Notes:
1. The red ones are the ones you can change.
2. The green one is optional. It is open for creativity (other Classes or IDs)
3. The #sidebar will be inside #content, so if you want to use float instead of absolute and relative positioning, it can be a little tricky.


Last words:
Critics and typos are welcome.
If I'm in the mood, I might answer CSS questions for this tutorial.
Tags: magazine, s1, sidebar
Subscribe
  • Post a new comment

    Error

    default userpic
    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 0 comments