News:

SMF 2.1.1 has been released! Take it for a spin! Read more.

Main Menu

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

Started by Kindred, December 08, 2020, 05:45:00 PM

Previous topic - Next topic

Kindred

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

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

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

/* 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)
Слова
Украина

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

landyvlad

Hey mate do you have before and after screenshots by any chance?
Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

The funniest thing about this particular signature is that by the time you realise it doesn't say anything it's too late to stop reading it

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.
Слова
Украина

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Kindred

Слова
Украина

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

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
#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
Слова
Украина

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Advertisement: