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