Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: Kindred on December 08, 2020, 05:51:29 PM

Title: SMF 2.1 RC3 - tabbed infocenter
Post by: Kindred on December 08, 2020, 05:51:29 PM
Code (in BoardIndex.template.php find this code) Select

foreach ($context['info_center'] as $block)
{
$func = 'template_ic_block_' . $block['tpl'];
$func();
}



either delete or comment it out

then
Code (replace it with this) Select

// start infocenter tabs
echo '
<div id="infocenter_tabs">';
$i=0;
foreach ($context['info_center'] as $block_tab)
{
$i=$i+1;
echo '
<input class="infoblock_tab" id="infoblock_', $i, '" type="radio" name="ibtabs" ', $i==1 ? 'checked' : '' ,'>
<label for="infoblock_', $i, '" class="infoblock_tab"><h3 class="catbg">', $txt[$block_tab['txt']], '</h3></label>';
}

$i=0;
foreach ($context['info_center'] as $block)
{
$i=$i+1;
echo'
<div class="infoblock_content">
<div id="infoblock_', $i, '_block">';
$func = 'template_ic_block_' . $block['tpl'];
$func();
echo '
</div><!-- #infoblock_#_block -->
</div><!-- #infoblock_content -->';
}

echo '
</div><!-- #infocenter_tabs -->';
// end infocenter tabs


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

/* tabbed infoblock */
.infoblock_content > div {
display: none;
padding: 20px 25px 5px;
}
input.infoblock_tab {display: none;}
label.infoblock_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.infoblock_tab:hover {
background: orange;
color: #222;
cursor: pointer;
}
input.infoblock_tab:checked + label .infoblock_tab  {
background: orange;
color: #222;
}

#infoblock_1:checked ~ .infoblock_content #infoblock_1_block,
#infoblock_2:checked ~ .infoblock_content #infoblock_2_block,
#infoblock_3:checked ~ .infoblock_content #infoblock_3_block,
#infoblock_4:checked ~ .infoblock_content #infoblock_4_block,
#infoblock_5:checked ~ .infoblock_content #infoblock_5_block,
#infoblock_6:checked ~ .infoblock_content #infoblock_6_block,
#infoblock_7:checked ~ .infoblock_content #infoblock_7_block,
#infoblock_8:checked ~ .infoblock_content #infoblock_8_block,
#infoblock_9:checked ~ .infoblock_content #infoblock_9_block {
display: block;
}



edit - added screen shots of before and after
Title: Re: SMF 2.1 RC3 - tabbed infocenter
Post by: landyvlad on December 09, 2020, 07:51:16 PM
Hey mate do you have before and after screenshots by any chance?
Title: Re: SMF 2.1 RC3 - tabbed infocenter
Post by: Kindred on December 10, 2020, 01:05:48 PM
Added screen shots
Title: Re: SMF 2.1 RC3 - tabbed infocenter
Post by: shadav on January 01, 2021, 05:03:44 PM
works like a charm and way easy
Title: Re: SMF 2.1 RC3 - tabbed infocenter
Post by: FrizzleFried on March 27, 2022, 10:39:01 AM
I just tried this.  Unfortunately it does not work for 2.1.1... it doesn't create the tabs but rather 5 lines of white text with a selection circle next to it (can't think of the stupid name right now)...

Any way to update this code to work with 2.1.1?

Thanks!

Title: Re: SMF 2.1 RC3 - tabbed infocenter
Post by: Kindred on March 27, 2022, 10:53:52 AM
Works fine for my 2.1.1

test2.turtleshellprod.com
Title: Re: SMF 2.1 RC3 - tabbed infocenter
Post by: FrizzleFried on March 27, 2022, 11:18:12 AM
Strange.  I followed the exact instructions (a 2nd time) and got this:



You cannot view this attachment.
Title: Re: SMF 2.1 RC3 - tabbed infocenter
Post by: Arantor on March 27, 2022, 11:21:19 AM
Did you add the CSS to your theme's index.css file? Did you hard-refresh your browser to tell it to pick up the new CSS? (or delete the minified CSS files so they have to be regenerated fresh)
Title: Re: SMF 2.1 RC3 - tabbed infocenter
Post by: FrizzleFried on March 27, 2022, 11:22:37 AM
I did... and I did a hard refresh too... (Ctrl-F5).
Title: Re: SMF 2.1 RC3 - tabbed infocenter
Post by: FrizzleFried on March 27, 2022, 11:23:39 AM
BTW... where are the minified css files to delete so that I can do that in the future which would force everyone's css to update (right)?

Title: Re: SMF 2.1 RC3 - tabbed infocenter
Post by: FrizzleFried on March 27, 2022, 11:30:16 AM
Fixed.  Not sure what was up but I moved over to using Notepad++ versus the online editor in Cpanel and it worked.

Title: Re: SMF 2.1 RC3 - tabbed infocenter
Post by: marcosbr on March 27, 2022, 11:49:59 AM
Features and Options>General  and uncheck this.