Advertisement:

Author Topic: How to change text menus to images.  (Read 36858 times)

Offline m3talc0re

  • Full Member
  • ***
  • Posts: 630
  • Gender: Male
  • Life Sux, use hax, lol.
How to change text menus to images.
« on: April 24, 2008, 01:31:08 PM »
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.
The real hell is your life gone wrong.

Offline Rumbaar

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 15,805
  • Gender: Male
  • Inherent Omniscience
    • Rumbaar.net
Re: How to change text menus to images.
« Reply #1 on: May 04, 2008, 04:10:05 AM »
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.
"An important reward for a job well done is a personal sense of worthwhile achievement."

[ Themes ]

Offline Tjda

  • Jr. Member
  • **
  • Posts: 146
  • Gender: Male
    • Biovolts
Re: How to change text menus to images.
« Reply #2 on: July 19, 2008, 09:48:38 PM »
thanks, works !!

Offline Alcor

  • Jr. Member
  • **
  • Posts: 187
    • @cosasagapornis on Twitter
Re: How to change text menus to images.
« Reply #3 on: September 05, 2008, 02:00:40 PM »
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 ???

Offline Rumbaar

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 15,805
  • Gender: Male
  • Inherent Omniscience
    • Rumbaar.net
Re: How to change text menus to images.
« Reply #4 on: September 05, 2008, 05:58:35 PM »
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>';
"An important reward for a job well done is a personal sense of worthwhile achievement."

[ Themes ]

Offline Alcor

  • Jr. Member
  • **
  • Posts: 187
    • @cosasagapornis on Twitter
Re: How to change text menus to images.
« Reply #5 on: September 06, 2008, 03:32:04 AM »
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.

Offline Rumbaar

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 15,805
  • Gender: Male
  • Inherent Omniscience
    • Rumbaar.net
Re: How to change text menus to images.
« Reply #6 on: September 06, 2008, 05:04:50 AM »
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.
"An important reward for a job well done is a personal sense of worthwhile achievement."

[ Themes ]

Offline Alcor

  • Jr. Member
  • **
  • Posts: 187
    • @cosasagapornis on Twitter
Re: How to change text menus to images.
« Reply #7 on: September 06, 2008, 06:34:41 AM »
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.
« Last Edit: September 06, 2008, 06:38:42 AM by Alcor »

Offline Alcor

  • Jr. Member
  • **
  • Posts: 187
    • @cosasagapornis on Twitter
Re: How to change text menus to images.
« Reply #8 on: September 09, 2008, 06:59:08 AM »
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.

Offline Jade Elizabeth

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 12,629
  • Gender: Female
  • Keep your enemies close and your friends closer ;)
    • jadetrainor on LinkedIn
    • @alundra on Twitter
    • Jades-World
Re: How to change text menus to images.
« Reply #9 on: October 26, 2008, 06:30:26 PM »
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 :).
Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring forum: Color Me Forum/Patreon.

Offline iceytina

  • Newbie
  • *
  • Posts: 2
Re: How to change text menus to images.
« Reply #10 on: January 05, 2009, 08:37:03 PM »
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

Offline Rumbaar

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 15,805
  • Gender: Male
  • Inherent Omniscience
    • Rumbaar.net
Re: How to change text menus to images.
« Reply #11 on: January 05, 2009, 11:52:42 PM »
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?
"An important reward for a job well done is a personal sense of worthwhile achievement."

[ Themes ]

Offline Jade Elizabeth

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 12,629
  • Gender: Female
  • Keep your enemies close and your friends closer ;)
    • jadetrainor on LinkedIn
    • @alundra on Twitter
    • Jades-World
Re: How to change text menus to images.
« Reply #12 on: January 06, 2009, 08:43:28 AM »
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 :)
Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring forum: Color Me Forum/Patreon.

Offline izar

  • Semi-Newbie
  • *
  • Posts: 44
Re: How to change text menus to images.
« Reply #13 on: February 06, 2009, 08:04:16 PM »
Thanks, very useful

Offline Septimus

  • Semi-Newbie
  • *
  • Posts: 77
Re: How to change text menus to images.
« Reply #14 on: February 28, 2009, 08:16:45 PM »
Can someone get this working on RC1 please?

I can't seem to get it to work.

Offline Rumbaar

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 15,805
  • Gender: Male
  • Inherent Omniscience
    • Rumbaar.net
Re: How to change text menus to images.
« Reply #15 on: March 01, 2009, 12:09:02 AM »
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.
"An important reward for a job well done is a personal sense of worthwhile achievement."

[ Themes ]

Offline Joey Smithâ„¢

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 6,356
  • Gender: Male
Re: How to change text menus to images.
« Reply #16 on: March 03, 2009, 02:30:32 AM »
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.

Offline Septimus

  • Semi-Newbie
  • *
  • Posts: 77
Re: How to change text menus to images.
« Reply #17 on: March 08, 2009, 03:10:48 PM »
Isnt there a way to do it with just a change to the index template like in the first post?

Offline Gary

  • Lead Customizer
  • SMF Super Hero
  • *
  • Posts: 17,317
  • Gender: Male
  • So this is the luck of the draw...
    • Gazmanafc on Facebook
    • garygadsdon on LinkedIn
    • @Gazmanafc on Twitter
    • The Bongo Comics Fan Forum
Re: How to change text menus to images.
« Reply #18 on: March 08, 2009, 05:34:23 PM »
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'];
}

Offline Septimus

  • Semi-Newbie
  • *
  • Posts: 77
Re: How to change text menus to images.
« Reply #19 on: March 29, 2009, 05:06:20 PM »
I did it with the button strip from that theme, thanks :D

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