Topic: How to change text menus to images.

[m3talc0re]

For all the tabs and such that can be images (there are some "tabs" in the admin section that don't have the option to be images), this is how you make them image buttons instead of text links.
You do not need to edit any templates other than the index.template.php.

Here are the needed edits:

Line 49:

Code: [Select]

/* Set a setting that tells the theme that it can render the tabs. */
$settings['use_tabs'] = false;

Line 52:

Code: [Select]

/* Use plain buttons - as oppossed to text buttons? */
$settings['use_buttons'] = false;

Now, at the very bottom of the template file, you should find this:

Code: [Select]

// Generate a strip of buttons.
function template_button_strip($button_strip, $direction = 'top', $force_reset = false, $custom_td = '')
{
global $settings, $buttons, $context, $txt, $scripturl;

// Create the buttons...
foreach ($button_strip as $key => $value)
{
if (isset($value['test']) && empty($context[$value['test']]))
{
unset($button_strip[$key]);
continue;
}
elseif (!isset($buttons[$key]) || $force_reset)
$buttons[$key] = '<a href="' . $value['url'] . '" ' .( isset($value['custom']) ? $value['custom'] : '') . '>' . $txt[$value['text']] . '</a>';

$button_strip[$key] = $buttons[$key];
}

if (empty($button_strip))
return '<td>&nbsp;</td>';

echo '
<td class="maintab_back">', implode('', $button_strip) , '</td>';
}

Rename function template_button_strip to something like function TEXTLINKS_template_button_strip just so you know that it is for the text links and so that the forum will not read that function.

Below or above that entire block of code, add this to your template file:

Code: [Select]

// Generate a strip of buttons, out of buttons.
function template_button_strip($button_strip, $direction = 'top', $force_reset = false, $custom_td = '')
{
global $settings, $buttons, $context, $txt, $scripturl;

if (empty($button_strip))
return '';

// Create the buttons...
foreach ($button_strip as $key => $value)
{
if (isset($value['test']) && empty($context[$value['test']]))
{
unset($button_strip[$key]);
continue;
}
elseif (!isset($buttons[$key]) || $force_reset)
$buttons[$key] = '<a href="' . $value['url'] . '" ' .( isset($value['custom']) ? $value['custom'] : '') . '>' . ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . ($value['lang'] ? $context['user']['language'] . '/' : '') . $value['image'] . '" alt="' . $txt[$value['text']] . '" border="0" />' : $txt[$value['text']]) . '</a>';

$button_strip[$key] = $buttons[$key];
}

echo '
<td height="40" valign="middle" ', $custom_td, '>', implode($context['menu_separator'], $button_strip) , '</td>';
}

I believe that is all that you need to make the forum use button images instead of text based tabs.

The images in "yourforum/Themes/Default/images/english/" will be used. Also, if you are using the UTF-8 setting for your forum, you will need to rename the english directory to "english-utf8", I believe is the right name.

[Rumbaar]

Thx m3talc0re.  Though this wont change the main menu from text to buttons if you are using the CORE theme.  This will require changes to the function template_menu() as well.

[Tjda]

thanks, works !!

[Alcor]

I'm trying to do this mod, that it works, but when I replace

Code: [Select]

/* Set a setting that tells the theme that it can render the tabs. */
$settings['use_tabs'] = true;

/* Use plain buttons - as oppossed to text buttons? */
$settings['use_buttons'] = true;
to

Code: [Select]

/* Set a setting that tells the theme that it can render the tabs. */
$settings['use_tabs'] = false;

/* Use plain buttons - as oppossed to text buttons? */
$settings['use_buttons'] = false;
a javascript error "document.getElementById("quickmodsubmit") is null" is showed in the console error of FF.

some solution

[Rumbaar]

Are you using a custom theme?  In your Display.template.php do you have the following code?

Code: [Select]

if (empty($settings['use_tabs']))
echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
document.getElementById("quickmodSubmit").style.display = "none";
// ]]></script>';

[Alcor]

Hello Rumbaar.

I'm doing a small modification of the default theme and the piece of code that you indicate is included, but if I do these changes in the default theme the error is showed too.

[Rumbaar]

I have to admit, I've not actually tested the code above.  Though in one of my themes I've set the same and use buttons without issue.

You might want to check how Babylon theme has done it for comparison.

[Alcor]

With babylon theme there aren't errors. I write the code for comparison

index.template.php (babylon)

Code: [Select]

// Generate a strip of buttons, out of buttons.
function template_button_strip($button_strip, $direction = 'top', $force_reset = false, $custom_td = '')
{
global $settings, $buttons, $context, $txt, $scripturl;

if (empty($button_strip))
return '';

// Create the buttons...
foreach ($button_strip as $key => $value)
{
if (isset($value['test']) && empty($context[$value['test']]))
{
unset($button_strip[$key]);
continue;
}
elseif (!isset($buttons[$key]) || $force_reset)
$buttons[$key] = '<a href="' . $value['url'] . '" ' .( isset($value['custom']) ? $value['custom'] : '') . '>' . ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . ($value['lang'] ? $context['user']['language'] . '/' : '') . $value['image'] . '" alt="' . $txt[$value['text']] . '" border="0" />' : $txt[$value['text']]) . '</a>';

$button_strip[$key] = $buttons[$key];
}

echo '
<td ', $custom_td, '>', implode($context['menu_separator'], $button_strip) , '</td>';
}
index.template.php (default modified)

Code: [Select]

// Generate a strip of buttons, out of buttons.
function template_button_strip($button_strip, $direction = 'top', $force_reset = false, $custom_td = '')
{
   global $settings, $buttons, $context, $txt, $scripturl;

   if (empty($button_strip))
      return '';

   // Create the buttons...
   foreach ($button_strip as $key => $value)
   {
      if (isset($value['test']) && empty($context[$value['test']]))
      {
         unset($button_strip[$key]);
         continue;
      }
      elseif (!isset($buttons[$key]) || $force_reset)
         $buttons[$key] = '<a href="' . $value['url'] . '" ' .( isset($value['custom']) ? $value['custom'] : '') . '>' . ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . ($value['lang'] ? $context['user']['language'] . '/' : '') . $value['image'] . '" alt="' . $txt[$value['text']] . '" border="0" />' : $txt[$value['text']]) . '</a>';

      $button_strip[$key] = $buttons[$key];
   }

   echo '
      <td height="35" valign="middle" ', $custom_td, '>', implode($context['menu_separator'], $button_strip) , '</td>';
}
Display.template.php (babylon) line #429

Code: [Select]

// Show a checkbox for quick moderation?
if (!empty($options['display_quick_mod']) && $options['display_quick_mod'] == 1 && $message['can_remove'])
echo '
<input type="checkbox" name="msgs[]" value="', $message['id'], '" class="check" onclick="document.getElementById(\'quickmodSubmit\').style.display = \'\';" />';
Display.template.php (default) line #484

Code: [Select]

// Show a checkbox for quick moderation?
if (!empty($options['display_quick_mod']) && $options['display_quick_mod'] == 1 && $message['can_remove'])
echo '
<input type="checkbox" name="msgs[]" value="', $message['id'], '" class="check" ', empty($settings['use_tabs']) ? 'onclick="document.getElementById(\'quickmodSubmit\').style.display = \'\';"' : '', ' />';
Display.template.php (babylon) lines #609... 616

Code: [Select]

<div style="padding-top: 4px; padding-bottom: 4px;">', theme_show_mod_buttons(), '</div>';

if (!empty($options['display_quick_mod']) && $options['display_quick_mod'] == 1 && $context['can_remove_post'])
echo '
<input type="hidden" name="sc" value="', $context['session_id'], '" />
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
document.getElementById("quickmodSubmit").style.display = "none";
// ]]></script>';
Display.template.php (default) lines #669... 677

Code: [Select]

if (!empty($options['display_quick_mod']) && $options['display_quick_mod'] == 1 && $context['can_remove_post'])
echo '
<input type="hidden" name="sc" value="', $context['session_id'], '" />';

if (empty($settings['use_tabs']))
echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
document.getElementById("quickmodSubmit").style.display = "none";
// ]]></script>';
Display.template.php (babylon) line #681 and 703

Code: [Select]

function theme_show_mod_buttons()
{ ...

Code: [Select]

...
if ($context['can_remove_post'] && !empty($options['display_quick_mod']) && $options['display_quick_mod'] == 1)
$moderationButtons[] = $settings['use_image_buttons'] ? '<input type="image" name="submit" id="quickmodSubmit" src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/delete_selected.gif" alt="' . $txt['quickmod_delete_selected'] . '" />' : '<a href="javascript:document.forms.quickModForm.submit();" id="quickmodSubmit">' . $txt['quickmod_delete_selected'] . '</a>';
Display.template.php (default) lines #659... 660. The if statement is not within a function like in babylon

Code: [Select]

if ($context['can_remove_post'] && !empty($options['display_quick_mod']) && $options['display_quick_mod'] == 1)
$mod_buttons[] = array('text' => 'quickmod_delete_selected', 'image' => 'delete_selected.gif', 'lang' => true, 'custom' => 'onclick="return confirm(\'' . $txt['quickmod_confirm'] . '\');" id="quickmodSubmit"', 'url' => 'javascript:document.quickModForm.submit();');
Thanks Rumbaar.

[Alcor]

Finally I got not javascript errors replacing

Code: [Select]

if (!empty($options['display_quick_mod']) && $options['display_quick_mod'] == 1 && $context['can_remove_post'])
echo '
<input type="hidden" name="sc" value="', $context['session_id'], '" />';

if (empty($settings['use_tabs']))
echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
document.getElementById("quickmodSubmit").style.display = "none";
// ]]></script>';
by

Code: [Select]

if (!empty($options['display_quick_mod']) && $options['display_quick_mod'] == 1 && $context['can_remove_post'])
echo '
<input type="hidden" name="sc" value="', $context['session_id'], '" />
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
document.getElementById("quickmodSubmit").style.display = "none";
// ]]></script>';
If I don't use tabs the if statement "if (empty($settings['use_tabs']))", I don' t need it.

[Jade Elizabeth]

For anyone wanting to do this on 2.0 I got it working by using this code on the last part:

Code: [Select]

// Generate a strip of buttons.
function template_button_strip($button_strip, $direction = 'top', $force_reset = false, $custom_td = '')
{
global $settings, $context, $txt, $scripturl;
 
// Create the buttons...
$buttons = array();
foreach ($button_strip as $key => $value)
{
if (!isset($value['test']) || !empty($context[$value['test']]))
$buttons[] = '<a href="' . $value['url'] . '" ' . (isset($value['custom']) ? $value['custom'] : '') . '>' . ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . ($value['lang'] ? $context['user']['language'] . '/' : '') . $value['image'] . '" alt="' . $txt[$value['text']] . '" border="0" />' : $txt[$value['text']]) . '</a>';
}

if (empty($buttons))
return '';

echo '
<div class="buttonlist', $direction != 'top' ? '_bottom' : '', '">
', implode('&nbsp;', $buttons), '&nbsp;
</div>';

}
It is still being tested, and some images need to be renamed for 2.0 .

[iceytina]

Hi,

this coding works for my custom theme (that I modified off of the default theme), but the "Ordered Stickied Topics" button is undefined. What do I need to edit to define this button?

SMF 1.1.7

[Rumbaar]

Ordered stickied topics isn't a default feature of SMF.  If that's undefined you'll need to look at the mod specific code for that button?

[Jade Elizabeth]

Ordered stickied topics isn't a default feature of SMF.  If that's undefined you'll need to look at the mod specific code for that button?

No. Just use IE to see the X box from no image, and get the image's name and location.
Put an image for it in there, that's how I did it for mine

[izar]

Thanks, very useful

[Septimus]

Can someone get this working on RC1 please?

I can't seem to get it to work.

[Rumbaar]

You might want to look at the Babylon theme of SMF 2.0 for comparison code for the 2.x stream, as this was originally written for 1.1.x stream.

[Joey Smith™]

This is pretty much the same for 2.0 RC1.. Just make sure that you look closely at how the Babylon theme is coded and make sure that you change the image calls in the display template . In the default core they are now listed in <li> and in the Babylon they are only called with <a href....>... Just add the code from Babylon inside the <li> and it will work.

Another tip is the when you set up the buttons they will most likely be aligned to the left in the messageindex view so to fix this you can find the following code.

Code: [Select]

if (!$context['no_topic_listing'])
{
echo '
<div id="modbuttons_top" class="modbuttons clearfix margintop">
<div class="floatleft middletext">', $txt['pages'], ': ', $context['page_index'], !empty($modSettings['topbottomEnable']) ? $context['menu_separator'] . '&nbsp;&nbsp;<a href="#bot"><b>' . $txt['go_down'] . '</b></a>' : '', '</div>
', template_button_strip($normal_buttons, 'bottom'), '
</div>';
and change it to this:

Code: [Select]

if (!$context['no_topic_listing'])
{
echo '
<div id="modbuttons_top" class="modbuttons clearfix margintop" align="right">
<div class="floatleft middletext">', $txt['pages'], ': ', $context['page_index'], !empty($modSettings['topbottomEnable']) ? $context['menu_separator'] . '&nbsp;&nbsp;<a href="#bot"><b>' . $txt['go_down'] . '</b></a>' : '', '</div>
', template_button_strip($normal_buttons, 'bottom'), '
</div>';
The only change is the align="right". You will also need to do this on the lower buttons as well.

Find:

Code: [Select]

echo '
<div id="modbuttons_bottom" class="modbuttons clearfix marginbottom">
<div class="floatleft middletext">', $txt['pages'], ': ', $context['page_index'], !empty($modSettings['topbottomEnable']) ? $context['menu_separator'] . '&nbsp;&nbsp;<a href="#top"><strong>' . $txt['go_up'] . '</strong></a>' : '', '</div>
', template_button_strip($normal_buttons, 'top'), '
</div>';
Change to:

Code: [Select]

echo '
<div id="modbuttons_bottom" class="modbuttons clearfix marginbottom" align="right">
<div class="floatleft middletext">', $txt['pages'], ': ', $context['page_index'], !empty($modSettings['topbottomEnable']) ? $context['menu_separator'] . '&nbsp;&nbsp;<a href="#top"><strong>' . $txt['go_up'] . '</strong></a>' : '', '</div>
', template_button_strip($normal_buttons, 'top'), '
</div>';
As you go through the previously posted steps you will see that not all the changes have to be made in the 2.0 RC1. I basically just moved the code from the Babylon into the default (while paying close attention to the xhtml to stay valid) and had no problems. As a matter of fact I can't recall changing anything for jscript.

[Septimus]

Isnt there a way to do it with just a change to the index template like in the first post?

[Gary]

If you're looking to change the Go Up/Go Down buttons, no. If you're not bothering to do that, then you should be fine in just copying over Babylon's template_menu into your theme.

Code: [Select]

// Show the menu up top.  Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

// We aren't showing all the buttons in this theme.
$hide_buttons = array('pm', 'mlist');

foreach ($context['menu_buttons'] as $act => $button)
if (in_array($act, $hide_buttons))
continue;
else
echo '
<a href="', $button['href'], '">', $settings['use_image_buttons'] ? '<img src="' . $settings['lang_images_url'] . '/' . $act . '.gif" alt="' . $button['title'] . '" border="0" />' : $button['title'], '</a>', !empty($button['is_last']) ? '' : $context['menu_separator'];
}


[Septimus]

I did it with the button strip from that theme, thanks

Code: [Select]

function template_button_strip($button_strip, $direction = 'top', $custom_td = '')
{
global $settings, $context, $txt, $scripturl;

if (empty($button_strip))
return '';

// Create the buttons...
$buttons = array();
foreach ($button_strip as $key => $value)
if (!isset($value['test']) || !empty($context[$value['test']]))
$buttons[] = '<a href="' . $value['url'] . '"' . (isset($value['content']) ? $value['content'] : (isset($value['active']) ? ' class="active"' : '') . (isset($value['custom']) ? ' ' . $value['custom'] : '') . '>' . ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . ($value['lang'] ? $context['user']['language'] . '/' : '') . $value['image'] . '" alt="' . $txt[$value['text']] . '" border="0" />' : $txt[$value['text']])) . '</a>';

if (empty($button_strip))
return '';

echo '
<div ', $custom_td, '>', implode($context['menu_separator'], $buttons) , '</div>';
}