QUICK NEWS

{NEW} - A new css video is up.

{OLD} - New video courtesy of Skhilled, Thanks for posting it up.

Video of the moment:


Internal Links

SMF Sites

Quick Info

small board icon

Started by lesmond, Mar 22, 2019, 09:58 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

lesmond

Quote from: SychO on Mar 28, 2019, 06:40 AMremove the set of code you added before live's :P

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

The only person who got all his work done by Friday was Robinson Crusoe

lesmond

If I change this section..

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

The only person who got all his work done by Friday was Robinson Crusoe

lesmond

Got it, I was missing a curly bracket } :emb

The only person who got all his work done by Friday was Robinson Crusoe

Skhilled

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

lesmond


The only person who got all his work done by Friday was Robinson Crusoe

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

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

Find:

.floatleft {
float: left;
}

Replace with:

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

Then find:

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

Replace with:

.mark_read {
margin: -5px 0 16px 5px;
/* float: right; */
}

Then adjust the following code in BoardIndex.template.php to space it properly.

Find:

<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:

<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