What Hack is this? - Looks Great!

[GDA]

Hi,

I was wondering how I could achieve these forum styles:

http://forum.notebookreview.com/

or

http://forums.slickdeals.net/?styleid=17


Are these any certain hacks which you can see they are using?

[Lynne]

What is it I'm supposed to be seeing? They just look like standard vb boards. Or are you talking about the colors? The CSS?

[GDA]

I'm talking about the design, style and css - and also hacks.

In Example one:

How do they achieve the tabbed layout and also how do they achieve the "Latest Laptop Discussion" section? I also would like to know how they achieve the whole "compact" look with everything kept in a container?

Thank-You

[AdrianH]

Why don't you ask the owner of the site?

Looking at the style chooser the style is listed as their own so they either coded the template themselves or bought a design from a template coder.

The side columns are just a part of the design, there are many vB skins available in similar designs and there is a side columns hack available here at vB.org if you prefer to use that with your own skin.

[Lynne]

Do a search on "left" "all mods" "titles only" and you'll get mods like this - Simple Left Side Column Blocks on ForumHome There are others, too.

There are also mods for second navbars.

A lot of this stuff you can figure out by just viewing the source in the page. If you look at the source, you'll see the top tabs are in a div with the id "sitetabContainer". Then just look at their css file (style.css) and you see this:

#sitetabContainer {position: absolute; left: 50%; top: 3px;    margin-left: -340px; width: 680px; height: 30px;}
#sitetabContainer a {display: block;float: left;margin-top: 6px;margin-right: 1px;background: url(/images/bg_sitetab.gif) no-repeat;width: 128px;height: 24px;text-align: center;font-size: 9px;font-weight: bold;color: #000;line-height: 22px;text-decoration: none;}
#sitetabContainer a:hover {background: url(/images/bg_sitetab.gif) 0 -24px no-repeat;text-decoration: none;}
#sitetabContainer a.on {display: block;float: left;background: url(/images/bg_sitetab_on.gif) no-repeat;width: 140px;height: 30px;margin-top: 1px;margin-right: 1px;text-align: center;font-size: 9px;font-weight: bold;color: #FFF;line-height: 28px;text-decoration: none;}
#sitetabContainer a.on:hover {background: url(/images/bg_sitetab_on.gif) no-repeat;text-decoration: none;}

[GDA]

Originally Posted by Lynne

Do a search on "left" "all mods" "titles only" and you'll get mods like this - Simple Left Side Column Blocks on ForumHome There are others, too.

There are also mods for second navbars.

A lot of this stuff you can figure out by just viewing the source in the page. If you look at the source, you'll see the top tabs are in a div with the id "sitetabContainer". Then just look at their css file (style.css) and you see this:

#sitetabContainer {position: absolute; left: 50%; top: 3px;    margin-left: -340px; width: 680px; height: 30px;}
#sitetabContainer a {display: block;float: left;margin-top: 6px;margin-right: 1px;background: url(/images/bg_sitetab.gif) no-repeat;width: 128px;height: 24px;text-align: center;font-size: 9px;font-weight: bold;color: #000;line-height: 22px;text-decoration: none;}
#sitetabContainer a:hover {background: url(/images/bg_sitetab.gif) 0 -24px no-repeat;text-decoration: none;}
#sitetabContainer a.on {display: block;float: left;background: url(/images/bg_sitetab_on.gif) no-repeat;width: 140px;height: 30px;margin-top: 1px;margin-right: 1px;text-align: center;font-size: 9px;font-weight: bold;color: #FFF;line-height: 28px;text-decoration: none;}
#sitetabContainer a.on:hover {background: url(/images/bg_sitetab_on.gif) no-repeat;text-decoration: none;}

Thanks for the help - appreciate it!

Do you know how they do the latest discussions feed?

[Konstantinos]

the increase/decrease skin font is cool. whats the hack for it ?

[Lynne]

Originally Posted by GDA

Do you know how they do the latest discussions feed?

There are several ways to get the latest threads/posts. Do a search in the articles here and on vb.com in the Tips and Tricks forum (or whatever it's called) and you'll see different ways to do that.