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
Quote Reply
Re: [brewt] Glinks 3.x HOWTO: Changing the luna template set to use faux columns In reply to
Quote:

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


In IE the text isn't in the left column, it is half in the left column and half in the content box, and half the left column is empty. I can get you a screenshot if you need it.

I don't understand why it is possible to manage the right column easily and the left column doesn't work.
Quote Reply
Re: [loxly] Glinks 3.x HOWTO: Changing the luna template set to use faux columns In reply to
In Reply To:
In IE the text isn't in the left column, it is half in the left column and half in the content box, and half the left column is empty. I can get you a screenshot if you need it.

I don't understand why it is possible to manage the right column easily and the left column doesn't work.
It's because IE is a terrible browser in terms of rendering things properly - every other browser correctly renders it. It should be fixed now.

For those interested, the issue with IE was because of this ie bug.

Adrian

Last edited by:

brewt: Apr 15, 2005, 1:04 PM
Quote Reply
Re: [brewt] Glinks 3.x HOWTO: Changing the luna template set to use faux columns In reply to
Unfortunately most of our visitors are still using IE, so we have to program for them Crazy

It's working now, as you said.

You appear to have YahooSubCats working correctly on that site also, on my site it is working on the home page but not when you click on a category.

Last edited by:

loxly: Apr 15, 2005, 12:59 PM
Quote Reply
Re: [loxly] Glinks 3.x HOWTO: Changing the luna template set to use faux columns In reply to
Please see this thread on the issue with YahooSubcats.

Adrian
Quote Reply
Re: [brewt] Glinks 3.x HOWTO: Changing the luna template set to use faux columns In reply to
In Reply To:
Please see this thread on the issue with YahooSubcats.

Will be watching.... thanks.
Quote Reply
Re: [brewt] Glinks 3.x HOWTO: Changing the luna template set to use faux columns In reply to
How do create a detail page template?

I can't find any info on this.

I am using the category templates to change the header in the directory for each category. However when you click on a detailed page it uses default template. How can i display my custom template on detail page based on the category that the link is in.

In the example below you will see what i mean when you click on detail page.
http://www.netsitesonline.com/...s%2Fdefault.html;d=1

I think the templates should be explained a little better