Gossamer Forum
Home : Products : Gossamer Links : Discussions :

Glinks 3.x HOWTO: Changing the luna template set to use faux columns

Quote Reply
Glinks 3.x HOWTO: Changing the luna template set to use faux columns
One downside to how the CSS is done in the luna template is that you can't use images for the backgrounds of the sidebars. However, because of some of the cool things you can do with CSS, you can still manage to do this. With a few changes, you can still achieve Faux columns with the luna template set.

I won't go into too much detail in what faux columns are or how to actually create faux columns, since it's described in the link above. Instead, I'll be showing you what needs to be changed in the luna template set to get to the point where you can do what's described in the article.

If you read the article, you'll notice that you need to be able set a single background image on the behind both the content and sidebar(s). However, for the luna template set, the default uses borders to create the background colours of the sidebars. This means even if you got a background behind everything, the borders would overlap it. So first the first thing you need to do is remove all border on #ocwrapper:
Code:
#ocwrapper {
border: 0px;
}

Now that we've removed the border, we need to reallocate space for the sidebar(s). By default, only the right sidebar is visible, so all we need to do is:
Code:
#ocwrapper {
border: 0px;
padding-right: 200px;
}

At this point, everything should look like it was before (except if you set a different background colour on the sidebar, then the background colour is different). To finish setting things up, you'll need to reset the backgrounds of various containers as well as hide the shadows so the faux column background on #ocwrapper will show up:
Code:
#contentheader, #contentfooter, #content {
background: transparent;
}
.shadowtop, .shadowbottom, .shadowleft, .shadowright {
background: none;
}
.shadowtopleft, .shadowtopright, .shadowbottomleft, .shadowbottomright {
width: auto;
height: auto;
float: none;
background: none;
}

You may now proceed with actually creating the faux columns as described in the article. Pretty much all you need to do is to Just set the background on #ocwrapper:
Code:
#ocwrapper {
border: 0px;
padding-right: 200px;
background: url(images/fauxcols.gif) repeat-y;
}

Your image should be the same width as #ocwrapper (you won't need to specify the position like in the article since you're not setting the background on the body) and have the columns in the appropriate positions (depending on which sidebars you show and their widths).

That was pretty easy, but there's a catch - it only works if you're using a fixed width layout (ie. setting width: 750px on #ocwrapper rather than a percentage). But of course, there's a way around it. If you use both #ocwrapper and #icwrapper to generate the faux columns, then you can accommodate a fluid width layout.

Fluid layouts

With what we have from above, set the background on #ocwrapper, except with the background draw the background of the left sidebar (if you have one) and the content, but leave out the right sidebar. Since the content grows with the browser window size, make sure your #content area of the image is long enough to accommodate all screen sizes. Since this image will probably be wider than #ocwrapper, we need to position the background image.
Code:
#ocwrapper {
border: 0px;
padding-right: 200px;
background: url(images/fauxcol-left.gif) left repeat-y;
}

Now to create the background image on #icwrapper, we instead position it to the right, but also set the background colour to be transparent so the left area will show the background of #ocwrapper underneath:
Code:
#icwrapper {
background: transparent url(images/fauxcol-right.gif) right repeat-y;
}

If you're trying these rules out as we go along, you'll notice we've got a problem. The background image on #icwrapper's in the wrong place! What's happening is with the right padding on #ocwrapper, #icwrapper's width now isn't the full width of #wrapper. What can you do? Just move the padding into #icwrapper:
Code:
#ocwrapper {
border: 0px;
background: url(images/fauxcol-left.gif) left repeat-y;
}
#icwrapper {
padding-right: 200px;
background: transparent url(images/fauxcol-right.gif) right repeat-y;
}

There still is one outstanding issue that has to be dealt with - #contentheader and #contentfooter. You will still have to make some adjustments to it to make it display properly (easy with a fixed layout - just add the background image to it, a little harder to fix with a fluid layout).

See it in action

I've created a sample theme to demonstrate this and put it up on the Gossamer Links demo.

I've also created a fluid layout that uses all three columns: http://demo.gossamer-threads.com/...d=1;t=luna.fluidfaux

Have fun!

Adrian

Last edited by:

brewt: Mar 12, 2013, 3:08 PM
Subject Author Views Date
Thread Glinks 3.x HOWTO: Changing the luna template set to use faux columns brewt 3782 Apr 15, 2005, 2:16 AM
Thread Re: [brewt] Glinks 3.x HOWTO: Changing the luna template set to use faux columns
loxly 3672 Apr 15, 2005, 10:14 AM
Thread Re: [loxly] Glinks 3.x HOWTO: Changing the luna template set to use faux columns
brewt 3696 Apr 15, 2005, 12:37 PM
Thread Re: [brewt] Glinks 3.x HOWTO: Changing the luna template set to use faux columns
loxly 3670 Apr 15, 2005, 12:57 PM
Thread Re: [loxly] Glinks 3.x HOWTO: Changing the luna template set to use faux columns
brewt 3686 Apr 15, 2005, 1:02 PM
Post Re: [brewt] Glinks 3.x HOWTO: Changing the luna template set to use faux columns
loxly 3671 Apr 15, 2005, 1:21 PM
Post Re: [brewt] Glinks 3.x HOWTO: Changing the luna template set to use faux columns
netnow21 3158 Feb 29, 2008, 6:33 PM