Creating a Multi-Column Home Page (EASY!)

[KahneFan]

Wow! This was easier than I thought.

If you have a lot of boards and would like a multi-colmn layout (since there's dead spaces in the name/description fields) try this...

I went to style.css and found

Code Select Expand


/* This is used on tables that should just have a border around them. */
.tborder
{
padding: 1px;
border: 1px solid #696969;
background-color: #FFFFFF;
}


and out of that I made a NEW class...

Code Select Expand


/* This is used for the main categry section */
.cattborder
{
padding: 1px;
border: 1px solid #696969;
background-color: #FFFFFF;
float: left;
width: 31%;
margin: 5px;
}


Then go to "Boardindex.template.php" and find

Code Select Expand


<div class="categoryframe tborder">


Replace with:

Code Select Expand


<div class="categoryframe cattborder">



And to finish off, the "float: left" makes all the cats form a single line, which will then wrap when hitting the end of the page, effectively creating a multiple column look. Changing "width: 31%" and "margin: 5px"  to whatever size looks correct and creates however many columns you desire. PLUS, you can simply move your categories around in your admin to make them more visually appealing if some are larger/smaller than others (like a puzzle). It may be best to make you width "fixed" on your board, so that you can "fix" the widths of the columns, this way your site looks the same for everyone.

Below is a screenshot of my test site. I did not re-order the cats so they are a little spread out, but it gives you an idea.

[Antechinus]

Nice tip. This should be added to the Tips and Tricks board as I'm sure other people will be interested in it. I suspect it could easily be adapted for themes that have the categories wrapped in a container div.

[Tyrsson]

Man I racked my brain over that for like two days.... I did not try it in the css though...Great idea!!!

[circles]

what if this line does not exist in your BoardIndexTemplate:

<div class="categoryframe tborder">

[KahneFan]

Then you're probably using a different version of SMF, or a different them. In which case you would want to manually adjust these instructions to fit your site.

[NHWD]

can't figure out how to use this on a custom theme
can anyone help?

[Illori]

which custom theme are you wanting to add this to? also which version of smf? it looks like this was made for the 1.1.* branch.

[NHWD]

oh really? im using rc4 and i want to add to this theme: http://custom.simplemachines.org/themes/index.php?lemma=2325

[Illori]

if the directions provided dont match up with your theme, you are best to ask the theme author or you can try asking in the graphics/templates board and see if someone can do the changes for you.

[Matthew K.]

This tip is for 1.1. versions, and is definitely different for SMF 2.0 series.