?

Log in

No account? Create an account
 

S1 Layout - Magazine with Sidebar

About what you think I should put in here?

Previous Entry S1 Layout - Magazine with Sidebar Nov. 6th, 2006 @ 04:40 pm Next Entry
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.
Leave a comment
Top of Page Powered by LiveJournal.com