SMF 2.1 RC3 - tabbed infocenter

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

Previous topic - Next topic

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

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?
"Put as much effort into your question as you'd expect someone to give in an answer"

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.

Be the person your dog thinks you are.

Kindred

Слaва
Украинi

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


FrizzleFried

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!


Kindred

Слaва
Украинi

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."

FrizzleFried

Strange.  I followed the exact instructions (a 2nd time) and got this:



You cannot view this attachment.

Arantor

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)

FrizzleFried

I did... and I did a hard refresh too... (Ctrl-F5).

FrizzleFried

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)?


FrizzleFried

Fixed.  Not sure what was up but I moved over to using Notepad++ versus the online editor in Cpanel and it worked.


marcosbr

Features and Options>General  and uncheck this.

Nothing in life is absolute. We are always learning... Did you know that?
https://amigosdaeletronica.com.br

Advertisement: