small board icon

[lesmond]

What I am trying to do is add the small board icons that are displayed on 2.0.15 just above the info center.

This is how they are in 2.0.15


I want to add those to 2.1 I know they are called from BoardIndex.template.php so I copied that to my theme, and added the relevant code for those icons..

this is what I have added.

Code Select Expand

echo '
 <ul class="reset">
 <li class="floatleft"><img src="' . $settings['images_url'] . '/new_some.png" alt="" /> ', $txt['new_posts'], '</li>
 <li class="floatleft"><img src="' . $settings['images_url'] . '/new_none.png" alt="" /> ', $txt['old_posts'], '</li>
 <li class="floatleft"><img src="' . $settings['images_url'] . '/new_redirect.png" alt="" /> ', $txt['redirect_board'], '</li>
 </ul>
 </div>';
which works to a certain extent, but does not show the images just text, like so..


also I am getting errors in the log after doing so.

Code Select Expand

Type of error: Undefined
Undefined variable: settings
/Themes/test-theme/BoardIndex.template.php (Line 145)
and before you ask, I did add the images to the image folder in my theme 

Obviously I am doing something wrong   

[Bigguy]

Would changing this:

Code Select Expand

/new_some.pngto this:

Code Select Expand

/images/new_some.pngWork at all. I know it already is in the code with this:

Code Select Expand

$settings['images_url']but that seems to be erroring. Not sure but maybe. How is it written in 2.0

[lesmond]

this is how it is in 2.0.15

BoardIndex.template.php

Code Select Expand

echo '
<ul class="reset">
<li class="floatleft"><img src="' . $settings['images_url'] . 'new_some.png" alt="" /> ', $txt['new_posts'], '</li>
<li class="floatleft"><img src="' . $settings['images_url'] . 'new_none.png" alt="" /> ', $txt['old_posts'], '</li>
<li class="floatleft"><img src="' . $settings['images_url'] . 'new_redirect.png" alt="" /> ', $txt['redirect_board'], '</li>
</ul>
</div>';
And I have tried changing it too

Code Select Expand

/images/new_some.png

[SychO]

you need to add $settings to the the globals at the start of the function you're editing,

basically change this

Code Select Expand

function template_main()
{
global $context, $txt, $scripturl;
to this

Code Select Expand

function template_main()
{
global $context, $txt, $scripturl, $settings;

[lesmond]

Thats was it @SychO knew it was something simple

I also had to change the image_url as BG said too..

Code Select Expand

/new_some.png
Marked as Solved 

[Bigguy]

Hey glad ya got it. Not sure why they took that out really. Oh well.

[lesmond]

Not sure why they took that out really.

I agree, it's a small thing but I missed it.

[Bigguy]

Maybe a mod can be made out of this code.

[lesmond]

I wonder, shouldn't be too hard,

* lesmond goes away scratching his head?

[lesmond]

This is what I did, this is for the default theme, so if you dont have an BoardIndex.template.php in your other themes it will also show the text in those too, but not the images, unless you add them to your other themes.

In /Themes/default/BoardIndex.template.php find

Code Select Expand

function template_main()
{
 global $context, $txt, $scripturl;
Change too

Code Select Expand

function template_main()
{
 global $context, $txt, $scripturl, $settings;
Then find..

Code Select Expand

', template_button_strip($context['mark_read_button'], 'right'), '
 </div>';
add after..

Code Select Expand

{
 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>';
}
Add the images below to /Themes/default/images
They will be resized automatic.


and when logged out


If you want this to work in other custom themes you will have to add the same images below that match your board icons.

I am sure there is a better way to do this with css.

[Bigguy]

That's very cool. Right on. It's almost a mod now, lol.

[lesmond]

I forgot to add code for user and guest, when logged in/out, edited my post above.

[live627]

Niffy @lesmond! And now let's reuse the sprite.

Find

Code Select Expand

</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>';
Replace with

Code Select Expand

</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>';
mark_read  needs its float removed

[lesmond]

Thanks, I was trying to figure this out, but unless I am doing something wrong, I am getting to sets of icons now.



This is what I have after adding your code. I assume I should remove something?

Code Select Expand

</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>';

 {
 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>';
}

[SychO]

remove the set of code you added before live's