Advertisement:

Author Topic: Menu buttons using images  (Read 2457 times)

Offline German_AC

  • Jr. Member
  • **
  • Posts: 110
  • Gender: Male
  • SMF Spanish Translator
    • ChevyNet.com.ar
Menu buttons using images
« on: June 14, 2014, 11:23:28 PM »
Hi, I'm wondering if it is possible to replace the plane text menu buttons with image buttons. I don't need it to have any hover effect, just replace the text with an image.

Is that possible?


I'm using 2.0.7.


Thanks!


Artificial intelligence is not a rival for natural stupidity.

Offline mashby

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,394
  • Gender: Male
  • badass beer hound
    • Choppix
Re: Menu buttons using images
« Reply #1 on: June 14, 2014, 11:50:02 PM »
It's possible but I'm not entirely sure of the benefit. This theme does it:
http://custom.simplemachines.org/themes/index.php?lemma=2338
You don't need to install the theme, but if you look in the index.template.php file for that theme, specifically looking in this function:
Code: [Select]
function template_menu()You can see how it was done there.

What is the reason you want image-based menu items?
Always be a little kinder than necessary.
- James M. Barrie

Offline Streamlife

  • Jr. Member
  • **
  • Posts: 110
  • Gender: Male
  • ~Streamlife~
    • https://www.facebook.com/SmartBuy.Steam on Facebook
    • @VskGaming on Twitter
    • Administrador
Re: Menu buttons using images
« Reply #2 on: June 15, 2014, 10:32:06 AM »
good morning there

I could change my menu bar opening

Subs.php   Into           ../forum/Sources
Open it with some note editor ( i use Notepad++ )

Search this

// All the buttons we can possible want and then some, try pulling the final list of buttons from cache first.

And u must Change

this chain

'home' => array(
            'title' => $txt['home'],
            'href' => $scripturl,
            'show' => true,
            'sub_buttons' => array(
            ),
         ),
replaces for this

'title' => '<img src="url from image here" alt="" />',

and thus will remain

Here one example mine

I change the
HOME
HELP
SEARCH
Buttons
And this the result

$buttons = array(
         'home' => array(
            'title' => '<img src="/foro/Themes/VskGaming/images/imagenesvarias/iconos%20barra%20home/boton%20inicio.png" alt="" />',
            'href' => $scripturl,
            'show' => true,
            'sub_buttons' => array(
            ),
            'is_last' => $context['right_to_left'],
         ),
         'help' => array(
            'title' => '<img src="/foro/Themes/VskGaming/images/imagenesvarias/iconos%20barra%20home/boton%20ayuda.png" alt="" />',
            'href' => $scripturl . '?action=help',
            'show' => true,
            'sub_buttons' => array(
            ),
         ),
         'search' => array(
            'title' => '<img src="/foro/Themes/VskGaming/images/imagenesvarias/iconos%20barra%20home/BUSCAR.png" alt="" />',
            'href' => $scripturl . '?action=search',
            'show' => $context['allow_search'],
            'sub_buttons' => array(
            ),
         ),


that all

I hope I've helped

See mine Example how look

http://i.imgur.com/NNAX4Re.png

by the way

a good size for the icons would be 37 pixels high becouse if you set it with more pixel can be offset the Background of you theme  ( no matter how long pixels ) only the high pixel

I also recommend you to create a folder in your FTP called new images or images and then put all the images in the menu bar

Always remember to backup your files before modifying
« Last Edit: June 15, 2014, 10:44:00 AM by streamdark »

Offline German_AC

  • Jr. Member
  • **
  • Posts: 110
  • Gender: Male
  • SMF Spanish Translator
    • ChevyNet.com.ar
Re: Menu buttons using images
« Reply #3 on: June 15, 2014, 11:10:38 AM »
Thank you guys!

I got it working.


I can't find the text color setting in the css for the dropdown menus, I have changed the background to black, and need to change the text to white...



Thanks again!


Artificial intelligence is not a rival for natural stupidity.

Offline German_AC

  • Jr. Member
  • **
  • Posts: 110
  • Gender: Male
  • SMF Spanish Translator
    • ChevyNet.com.ar
Re: Menu buttons using images
« Reply #4 on: June 15, 2014, 11:16:39 AM »
I can't find the text color setting in the css for the dropdown menus, I have changed the background to black, and need to change the text to white...


Found it, the text color for the dropdown menu is this one (in case anyone else need it)

Code: [Select]
.dropmenu a
{
display: block;
color: #ffffff;
text-decoration: none;
}


Artificial intelligence is not a rival for natural stupidity.

Offline mashby

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,394
  • Gender: Male
  • badass beer hound
    • Choppix
Re: Menu buttons using images
« Reply #5 on: June 15, 2014, 11:31:01 AM »
Ah, bummer. I was hoping you'd keep your text buttons and use CSS3 to achieve what I'm seeing now, but that's OK. If you like it, that's all that might really matter. :)
Always be a little kinder than necessary.
- James M. Barrie

Offline Streamlife

  • Jr. Member
  • **
  • Posts: 110
  • Gender: Male
  • ~Streamlife~
    • https://www.facebook.com/SmartBuy.Steam on Facebook
    • @VskGaming on Twitter
    • Administrador
Re: Menu buttons using images
« Reply #6 on: June 15, 2014, 12:42:24 PM »
Thank you guys!

I got it working.


I can't find the text color setting in the css for the dropdown menus, I have changed the background to black, and need to change the text to white...



Thanks again!




I'm so glad to hear that
I do not have much knowledge about smf but as I learn I like to help others

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Menu buttons using images
« Reply #7 on: June 15, 2014, 06:01:11 PM »
Ah, bummer. I was hoping you'd keep your text buttons and use CSS3 to achieve what I'm seeing now, but that's OK. If you like it, that's all that might really matter. :)

That would have been easy, and a better solution. :)

Offline _AXE_

  • Newbie
  • *
  • Posts: 1
Re: Menu buttons using images
« Reply #8 on: November 13, 2017, 07:40:47 PM »
good morning there

I could change my menu bar opening

Subs.php   Into           ../forum/Sources
Open it with some note editor ( i use Notepad++ )

Search this

// All the buttons we can possible want and then some, try pulling the final list of buttons from cache first.

And u must Change

......


Hello

I can't find "Subs.php   Into           ../forum/Sources" on my Forum....

I need to "delete" ( search ) on my Menu Buttoms...

We have SMF Default Theme - Curve (2.0.14) and Aluminium (2.0 ) as template...


Who help me ???



Regards