• Welcome to Simple Machines Community Forum. Please login or sign up.

SMF 2.1 RC3 - tabbed infocenter

Started by Kindred, December 08, 2020, 05:51:29 PM

Previous topic - Next topic

Kindred

December 08, 2020, 05:51:29 PM Last Edit: December 10, 2020, 01:08:44 PM by Kindred
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
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.<br /><br />"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.

To paraphrase Kindred: "There are no technical solutions to social problems."

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.<br /><br />"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

shadav


Advertisement: