Customizing SMF > Graphics and Templates

Images or css around catigories

<< < (2/4) > >>

K@:
No sweat, mate! :)

Antechinus:
That actually requires rewriting the markup for BoardIndex.template.php. The entire board index is one big table. To get the effect you're after, you would have to break it down into a table for each category (unless you want to go nuts and re-write the markup to be table-less).

Find:


--- Code: --- echo '
<div id="boardindex_table">
<table class="table_list">';

/* Each category in categories is made up of:
id, href, link, name, is_collapsed (is it collapsed?), can_collapse (is it okay if it is?),
new (is it new?), collapse_href (href to collapse/expand), collapse_image (up/down image),
and boards. (see below.) */
foreach ($context['categories'] as $category)
{
--- End code ---

Replace:


--- Code: --- /* Each category in categories is made up of:
id, href, link, name, is_collapsed (is it collapsed?), can_collapse (is it okay if it is?),
new (is it new?), collapse_href (href to collapse/expand), collapse_image (up/down image),
and boards. (see below.) */
foreach ($context['categories'] as $category)
{
echo '
<div class="boardindex_table">
<table class="table_list">';
--- End code ---

Find:


--- Code: --- </tbody>';
}
echo '
</table>
</div>';
--- End code ---

Replace:


--- Code: --- </tbody>
</table>
</div>';
}
--- End code ---

That will break it into separate tables. After that it's just a matter of using borders, etc to get what you want.

AllanD:
Thank you for responding, but since I'm not that good at coding where would I enter the border and background info at.

Antechinus:

--- Code: ---<div class="boardindex_table">
--- End code ---

That wraps each table, so you can use that class to set borders, etc in your css. Example:


--- Code: ---.boardindex_table {
    padding: 25px;
    background: #555;
    border: 2px solid #aaa;
    border-radius: 5px;
}
--- End code ---

AllanD:
ok thank you

Navigation

[0] Message Index

[#] Next page

[*] Previous page