SMF 2.1 RC3 - Change your board index to be tabbed categories

[Kindred]

Code (In BoardIndex.template.php find this code) Select Expand


/* 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)
{
// If theres no parent boards we can see, avoid showing an empty category (unless its collapsed)
if (empty($category['boards']) && !$category['is_collapsed'])
continue;

echo '
<div class="main_container">
<div class="cat_bar ', $category['is_collapsed'] ? 'collapsed' : '', '" id="category_', $category['id'], '">
<h3 class="catbg">';

// If this category even can collapse, show a link to collapse it.
if ($category['can_collapse'])
echo '
<span id="category_', $category['id'], '_upshrink" class="', $category['is_collapsed'] ? 'toggle_down' : 'toggle_up', ' floatright" data-collapsed="', (int) $category['is_collapsed'], '" title="', !$category['is_collapsed'] ? $txt['hide_category'] : $txt['show_category'], '" style="display: none;"></span>';

echo '
', $category['link'], '
</h3>', !empty($category['description']) ? '
<div class="desc">' . $category['description'] . '</div>' : '', '
</div>
<div id="category_', $category['id'], '_boards" ', (!empty($category['css_class']) ? ('class="' . $category['css_class'] . '"') : ''), '>';


Either comment it out or delete it

Then

Code (replace with this code) Select Expand


// tabbed categories -- start
foreach ($context['categories'] as $category_tab)
{
// If theres no parent boards we can see, avoid showing an empty category
if (empty($category_tab['boards']))
continue;

echo '
<input class="cat_tab" id="category_', $category_tab['id'], '" type="radio" name="cattabs" ', $category_tab['id']==1 ? 'checked' : '' , '>
<label for="category_', $category_tab['id'], '" class="cat_tab"><h3 class="catbg">', $category_tab['name'], '</h3></label>';
}

foreach ($context['categories'] as $category)
{

echo'
<div class="cat_board_content">
<div id="category_', $category['id'], '_boards">
', !empty($category['description']) ? '
<div class="cat_bar"><div class="desc">' . $category['description'] . '</div></div>' : '', '';
// tabbed categories -- end

Code (in index.css add this to the end of the file) Select Expand


/* tabbed categories */
.cat_board_content > div {
display: none;
padding: 20px 25px 5px;
}
input.cat_tab {display: none;}
label.cat_tab {
background: #557ea0;
border-bottom: 1px solid #777;
padding: 5px 15px;
border-radius: 6px 6px 0 0;
box-shadow: 0 16px 20px rgba(255, 255, 255, 0.15) inset;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
display: inline-block;
}
label.cat_tab:hover {
color: #222;
background: orange;
cursor: pointer;
}
input.cat_tab:checked + label .cat_tab  {
background: orange;
color: #222;
}

/* there are 11 categories defined here, if you have more than 11, add more lines in the same pattern */
#category_1:checked ~ .cat_board_content #category_1_boards,
#category_2:checked ~ .cat_board_content #category_2_boards,
#category_3:checked ~ .cat_board_content #category_3_boards,
#category_4:checked ~ .cat_board_content #category_4_boards,
#category_5:checked ~ .cat_board_content #category_5_boards,
#category_6:checked ~ .cat_board_content #category_6_boards,
#category_7:checked ~ .cat_board_content #category_7_boards,
#category_8:checked ~ .cat_board_content #category_8_boards,
#category_9:checked ~ .cat_board_content #category_9_boards,
#category_10:checked ~ .cat_board_content #category_10_boards,
#category_11:checked ~ .cat_board_content #category_11_boards {
display: block;
}



Added before and after in the curve2 theme
(WithTabs1 shows a category with no description, WithTabs2 shows a category with a description)

[landyvlad]

Hey mate do you have before and after screenshots by any chance?

[Kindred]

Well, I have the after shown  on my test site...

test2.turtleshellprod.com

The before was just the standard display.
(That test site has only changes to css to have the green look, so it's core code, except the css and these changes)


I'll see what I can put together.

[Kindred]

added before and after screen shots to the OP

[shadav]

hm...slight snag...
when loading the page the category doesn't show....if I click on the category tab it does pop up

is there a default tab that should be set somewhere?

[edit]while typing this out figured out the issue...I deleted the default category created so I didn't have a id_cat 1

i tried to remove

Code Select Expand

#category_1:checked ~ .cat_board_content #category_1_boards,
from the css but that didn't do anything

since it's a test board i went in to the db and changed the category id from 2 to 1 and 3 to 2 and then the boards id_cat to reflect the change and now it works as it's supposed to....

so that may be an issue with others that deleted the default category instead of editing it

[Kindred]

Ah, yeah... didn't think about that...   but yes,  the CSS depends on the category ID