News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Menu buttons using images

Started by German_AC, June 14, 2014, 11:23:28 PM

Previous topic - Next topic

German_AC

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.

mashby

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

Streamlife

#2
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

German_AC

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.

German_AC

Quote from: German_AC on June 15, 2014, 11:10:38 AMI 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)


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



Artificial intelligence is not a rival for natural stupidity.

mashby

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

Streamlife

Quote from: German_AC 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!




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

Antechinus

Quote from: mashby 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. :)

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

_AXE_

Quote from: Streamlife 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

......


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

Advertisement: