News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Creating a Multi-Column Home Page (EASY!)

Started by KahneFan, December 20, 2008, 12:38:23 PM

Previous topic - Next topic

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

/* 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...

/* 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


<div class="categoryframe tborder">


Replace with:


<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.
#eric_on_twit| (video) Creating Themes for SMF | Reset Your Forum
NOTE: No PM's for support please.

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!!!
PM at your own risk, some I answer, if they are interesting, some I ignore.

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.
#eric_on_twit| (video) Creating Themes for SMF | Reset Your Forum
NOTE: No PM's for support please.

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


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.

Advertisement: