small board icon

[lesmond]

remove the set of code you added before live's

I tried that first, but I get "This page isn't working"

[lesmond]

If I change this section..

Code Select Expand

echo '
</div><!-- #boardindex_table -->';

// Show the mark all as read button?
if ($context['user']['is_logged'] && !empty($context['categories']))
echo '
<div class="mark_read">
', template_button_strip($context['mark_read_button'], 'right'), '
</div>';

{
if ($context['user']['is_guest'])
echo '
<div id="posting_icons" class="flow_hidden">
<ul class="reset">
<li class="floatleft"><img src="', $settings['images_url'], '/new_none.png" alt="" width="20" height="20"/> ', $txt['old_posts'], '</li>
<li class="floatleft"><img src="', $settings['images_url'], '/new_redirect.png" alt="" width="20" height="20"/> ', $txt['redirect_board'], '</li>
</ul>
</div>';

}
    if ($context['user']['is_logged'])   
echo '
<div id="posting_icons">
<ul class="reset">
<li class="floatleft"><img src="', $settings['images_url'], '/', $context['theme_variant_url'], 'new_some.png" alt="" width="20" height="20"/> ', $txt['new_posts'], '</li>
<li class="floatleft"><img src="', $settings['images_url'], '/', $context['theme_variant_url'], 'new_none.png" alt="" width="20" height="20"/> ', $txt['old_posts'], '</li>
<li class="floatleft"><img src="', $settings['images_url'], '/', $context['theme_variant_url'], 'new_redirect.png" alt="" width="20" height="20"/> ', $txt['redirect_board'], '</li>
</ul>
</div>';
}
Too this..

Code Select Expand

echo '
</div><!-- #boardindex_table -->
<div class="mark_read">
<div class="floatleft">';

if ($context['user']['is_logged'])
echo '
<div class="board_icon" style="width: 20px; vertical-align: sub;">
<a href="#" style="background-size: 45px; width: 20px; height: 20px;" class="board_on" title="', $txt['new_posts'], '"></a>
</div> ', $txt['new_posts'];

echo '
<div class="board_icon" style="width: 20px; vertical-align: sub;">
<a href="#" style="background-position: 0 -24px; background-size: 45px; width: 20px; height: 20px;" class="board_off" title="', $txt['old_posts'], '"></a>
</div> ', $txt['old_posts'], '
<div class="board_icon" style="width: 20px; vertical-align: sub;">
<a href="#" style="background-position: -24px -24px; background-size: 45px; width: 20px; height: 20px;" class="board_redirect" title="', $txt['redirect_board'], '"></a>
</div> ', $txt['redirect_board'], '
</div>';

// Show the mark all as read button?
if ($context['user']['is_logged'] && !empty($context['categories']))
echo '
', template_button_strip($context['mark_read_button'], 'right'), '';

echo '
<br class="clear">
</div>';
Thats with the code that live posted

[lesmond]

Got it, I was missing a curly bracket }

[Skhilled]

You're missing more than a curly bracket... LMAO

[lesmond]

Yeah curly hair lmao

[Skhilled]

I meant your marbles...

[Skhilled]

Ok, Les and I've both tried on separate sites to add this code along with the code I was given in:

.board_icon, .info, .board_stats, .lastpost Alignment (https://www.smfhelper.com/index.php?topic=260.0)

However, it makes the posting icons float right and aligns everything vertically! I've tried for a bit yesterday and have spent the last few hours trying to fix it but couldn't. Something is mixed into the separate codes to make this happen. Have a look at my site which still has both codes:

https://skhilled.com/rc2/index.php

[live627]

Set its display to flex and remove the float.

[Skhilled]

Thanks! Took a bit to figure out but got it.

Find:

Code Select Expand

.floatleft {
float: left;
}
Replace with:

Code Select Expand

.floatleft {
float: left;
display: flex;
}
Then find:

Code Select Expand

.mark_read {
margin: -5px 0 16px -2px;
        float: right;
}
Replace with:

Code Select Expand

.mark_read {
margin: -5px 0 16px 5px;
/* float: right; */
}
Then adjust the following code in BoardIndex.template.php to space it properly.

Find:

Code Select Expand

<div class="mark_read">
<div class="floatleft">';

if ($context['user']['is_logged'])
echo '
<div class="board_icon" style="width: 20px; vertical-align: sub;">
<a href="#" style="background-size: 45px; width: 20px; height: 20px;" class="board_on" title="', $txt['new_posts'], '"></a>
</div> ', $txt['new_posts'];

echo '
<div class="board_icon" style="width: 20px; vertical-align: sub;">
<a href="#" style="background-position: 0 -24px; background-size: 45px; width: 20px; height: 20px;" class="board_off" title="', $txt['old_posts'], '"></a>
</div> ', $txt['old_posts'], '
<div class="board_icon" style="width: 20px; vertical-align: sub;">
<a href="#" style="background-position: -24px -24px; background-size: 45px; width: 20px; height: 20px;" class="board_redirect" title="', $txt['redirect_board'], '"></a>
</div> ', $txt['redirect_board'], '
</div>';
Replace with:

Code Select Expand

<div class="mark_read">
<div class="floatleft">';

if ($context['user']['is_logged'])
echo '
<div class="board_icon" style="width: 30px; vertical-align: sub;">
<a href="#" style="background-size: 45px; width: 20px; height: 23px;" class="board_on" title="', $txt['new_posts'], '"></a>
</div> ', $txt['new_posts'];

echo '
<div class="board_icon" style="width: 30px; vertical-align: sub;">
<a href="#" style="background-position: 0 -24px; background-size: 45px; width: 22px; height: 23px;" class="board_off" title="', $txt['old_posts'], '"></a>
</div> ', $txt['old_posts'], '
<div class="board_icon" style="width: 30px; vertical-align: sub;">
<a href="#" style="background-position: -22px -24px; background-size: 45px; width: 22px; height: 23px;" class="board_redirect" title="', $txt['redirect_board'], '"></a>
</div> ', $txt['redirect_board'], '
</div>';

[live627]

A word of caution , though: many many places use the floatleft class, so making it flex may introduce some weird design glitches in odd places.

I recommend to either make a new class or make the icons inline-block.

[Skhilled]

Ok, thanks!