News:

Wondering if this will always be free?  See why free is better.

Main Menu

How to change text menus to images.

Started by m3talc0re, April 24, 2008, 01:31:08 PM

Previous topic - Next topic

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:

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


Line 52:

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

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

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

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.
"An important reward for a job well done is a personal sense of worthwhile achievement."

[ Themes ]

Tjda


Alcor

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

/* 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

/* 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?
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 ]

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.
"An important reward for a job well done is a personal sense of worthwhile achievement."

[ Themes ]

Alcor

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

index.template.php (babylon)

// 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)

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

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

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

<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

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

function theme_show_mod_buttons()
{ ...


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

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

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

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:

// 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 career: Color With Jade/Patreon.

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?
"An important reward for a job well done is a personal sense of worthwhile achievement."

[ Themes ]

Jade Elizabeth

Quote from: Rumbaar 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?

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 career: Color With Jade/Patreon.

izar


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.
"An important reward for a job well done is a personal sense of worthwhile achievement."

[ Themes ]

Tyrsson

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.

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:

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:
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:
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.
PM at your own risk, some I answer, if they are interesting, some I ignore.

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.

// 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'];
}
Gary M. Gadsdon
Do NOT PM me unless I say so
War of the Simpsons
Bongo Comics Fan Forum
Youtube Let's Plays

^ YT is changing monetisation policy, help reach 1000 sub threshold.

Septimus

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

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

Advertisement: