Advertisement:

Author Topic: SMF 2.1 RC3 - tabbed infocenter  (Read 450 times)

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 59,836
  • Gender: Male
    • Kindred-999 on GitHub
SMF 2.1 RC3 - tabbed infocenter
« 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
« Last Edit: December 10, 2020, 01:08:44 PM by 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."

Offline landyvlad

  • Sr. Member
  • ****
  • Posts: 945
  • Gender: Male
    • Michael Reed on Facebook
    • GSX1400 Owners ORG
Re: SMF 2.1 RC3 - tabbed infocenter
« Reply #1 on: December 09, 2020, 07:51:16 PM »
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."

No hack nor blackhats, just persistent asshats.

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 59,836
  • Gender: Male
    • Kindred-999 on GitHub
Re: SMF 2.1 RC3 - tabbed infocenter
« Reply #2 on: December 10, 2020, 01:05:48 PM »
Added screen shots
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."