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 Expand


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


Line 52:

Code Select Expand


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


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


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

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

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

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 Expand

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

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

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

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

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

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 Expand

function theme_show_mod_buttons()
{ ...

Code Select Expand

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

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 Expand

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 Expand

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 Expand

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

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

Code Select Expand

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 Expand

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 Expand

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 Expand

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 Expand

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

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


[ravenzmoon]

m3talc0re,
Thank you sooooo sooo very much.  I spent hours workin on this for someone else and I was about to throw myself off the steps and found your post.   

[Shawnchapp]

Does anyone know how to fix the problem with all the buttons going to the right hand side instead of left side?

2.0 rc3 other then that the code works great.

[Hj Ahmad Rasyid Hj Ismail]

Does anyone know how to fix the problem with all the buttons going to the right hand side instead of left side?

2.0 rc3 other then that the code works great.

You are asking the same question at too many threads. You should avoid that in the future. As solutions to this is originally referred to Babylon theme, you should IMHO refer to it too. It is for RC2 but is not much different with RC3. Here is the link for the theme. http://custom.simplemachines.org/themes/index.php?lemma=1993

IMHO the copy of code you take from the above is basically from the earlier SMF 2.0 which may not be compatible with RC3.

[Hj Ahmad Rasyid Hj Ismail]

Does anyone know how to fix the problem with all the buttons going to the right hand side instead of left side?

2.0 rc3 other then that the code works great.

I am not sure whether to answer you here or elsewhere. But IMHO here since the above question is directly presented here. IMHO you just need to edit your index.css. I have checked index.css for raven and I think you should try change this:

Code Select Expand

.buttonlist ul li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
}
to this:

Code Select Expand

.buttonlist ul li
{
margin: 0;
padding: 0;
list-style: none;
float: right;
}

See how it goes. Btw, please close the topic that have already been solved so it would not be confusing. Next time, open a new thread for question or help like this ok?

[Shawnchapp]

I am not sure whether to answer you here or elsewhere. But IMHO here since the above question is directly presented here. IMHO you just need to edit your index.css. I have checked index.css for raven and I think you should try change this:

Code Select Expand

.buttonlist ul li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
}
to this:

Code Select Expand

.buttonlist ul li
{
margin: 0;
padding: 0;
list-style: none;
float: right;
}

See how it goes. Btw, please close the topic that have already been solved so it would not be confusing. Next time, open a new thread for question or help like this ok?

Thanks for the help but that didn't work.... and topic closed

So what should i wait a few days and open a new thread with this question or no?

[Hj Ahmad Rasyid Hj Ismail]

Just be patient and wait ok. I'll see to it at the same time.

[Hj Ahmad Rasyid Hj Ismail]

I still think it is your css and I have visited your site to check you index.css. Try to change this:

Code Select Expand

.buttonlist ul li
{
margin: 0;
padding: 0;
list-style: none;
float: right;
}
.buttonlist ul li a
{
/*display: block;
font-size: 0.8em;
color: #EEE;
background: url(../images/theme/menu_gfx.png) no-repeat 0 -60px;
padding: 0;
margin-left: 12px;
text-transform: uppercase;
cursor: pointer;*/
}
.buttonlist ul li a:hover
{
/*background: url(../images/theme/menu_gfx.png) no-repeat 0 0;
color: #fff;
text-decoration: none;*/
}
.buttonlist ul li a span
{
/*background: url(../images/theme/menu_gfx.png) no-repeat 100% -60px;
display: block;
height: 24px;
line-height: 20px;
padding: 0 8px 0 0;
position: relative;
right: -8px;*/
}

to this:

Code Select Expand

.buttonlist ul li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
}
.buttonlist ul li a
{
display: block;
font-size: 0.8em;
/* color: #EEE;
background: url(../images/theme/menu_gfx.png) no-repeat 0 -60px; */
padding: 0;
margin-left: 12px;
text-transform: uppercase;
cursor: pointer;
}
.buttonlist ul li a:hover
{
/* background: url(../images/theme/menu_gfx.png) no-repeat 0 0;
color: #fff; */
text-decoration: none;
}
.buttonlist ul li a span
{
/* background: url(../images/theme/menu_gfx.png) no-repeat 100% -60px; */
display: block;
height: 24px;
line-height: 20px;
padding: 0 8px 0 0;
position: relative;
right: -8px;
}


[Shawnchapp]

I still think it is your css and I have visited your site to check you index.css. Try to change this:

Didn't do anything

[Hj Ahmad Rasyid Hj Ismail]

Did you make any changes to your Display.template.php?

[Shawnchapp]

Did you make any changes to your Display.template.php?

No....

[Hj Ahmad Rasyid Hj Ismail]

Try this. Open your MessageIndex.template.php and find 2 occurences of this and change it:

Code Select Expand

<div class="pagesection">
to this:

Code Select Expand

<div class="pagesection" align="right">
Remember there is two places for that. The reference was just above in http://www.simplemachines.org/community/index.php?topic=235833.msg1959371#msg1959371

[Shawnchapp]

Try this. Open your MessageIndex.template.php and find 2 occurences of this and change it:

Code Select Expand

<div class="pagesection">
to this:

Code Select Expand

<div class="pagesection" align="right">
Remember there is two places for that. The reference was just above in http://www.simplemachines.org/community/index.php?topic=235833.msg1959371#msg1959371

Thanks it worked like a charm i did read that post but i had no clue what file it was in so i search the index one and couldn't find it...

EDIT: nevermind, now when your in a post that part isn't fix..... so hlaf of it is fixed Lol

Also since i got you here, in the member list its tring to use the same image fore all members and search members where would i got to change that to set the image link to somewhere else....

[Hj Ahmad Rasyid Hj Ismail]

I dont quite get your last question. Explain to me further please.

[Shawnchapp]

I dont quite get your last question. Explain to me further please.

When your reading a thread it still shows the reply, notify, mark as unread, and print buttons on the let hand side...

And the member list is Like view all members is /image/english/mlist.gif  and search for member is the same link /image/english/mlist.gif how do i change that...

[Hj Ahmad Rasyid Hj Ismail]

I dont quite get your last question. Explain to me further please.

When your reading a thread it still shows the reply, notify, mark as unread, and print buttons on the let hand side...

And the member list is Like view all members is /image/english/mlist.gif  and search for member is the same link /image/english/mlist.gif how do i change that...

I suspect that too. Do the same change to your Display.template.php. See how it goes. 2 occurrences as well.

You can just change mlist.gif to other image if you have it.

[Shawnchapp]

I suspect that too. Do the same change to your Display.template.php. See how it goes. 2 occurrences as well.

You can just change mlist.gif to other image if you have it.

Is it the same line of code you posted above? I know i can change the image but i want to know if i can change the link of where it grabs the image. because i don't want to same button for "View all members" and "Search for members" becasuse it looks stupid have 2 buttons the excat same beside each other.

[Hj Ahmad Rasyid Hj Ismail]

Yes the same line.

Yes, you can change the link, the image and the image folder.

[Shawnchapp]

Yes the same line.

Yes, you can change the link, the image and the image folder.

ok sweet, is there other files i should use the code in? like the mod buttons and what not? also what file would i go in to edit the image root for one of those images...

[Hj Ahmad Rasyid Hj Ismail]

Yes the same line.

Yes, you can change the link, the image and the image folder.

ok sweet, is there other files i should use the code in? like the mod buttons and what not? also what file would i go in to edit the image root for one of those images...

Better off with new thread this time. Or else you gonna 'spam' this thread with the 'irrelevant'.

[Shawnchapp]

Yes the same line.

Yes, you can change the link, the image and the image folder.

ok sweet, is there other files i should use the code in? like the mod buttons and what not? also what file would i go in to edit the image root for one of those images...

Better off with new thread this time. Or else you gonna 'spam' this thread with the 'irrelevant'.

oh ok... i thought I'd asked it here since it was created by this code but I'll make a new thread

[Ruriko]

I am using the core default theme and I following this tutorial but the main menu is still using text but all the others are buttons

[Regller]

On this buttons I want put hover, but I want edit from index.template.php

Is it possible ?