News:

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

Main Menu

SMF 2.1beta

Started by djoos5, May 04, 2015, 05:30:58 PM

Previous topic - Next topic

djoos5

I have just installed the 2.1 beta on a test site and was wondering how to change the little image icons on the Main Menu. I have edited my SUBS.php file to add new menu items and right now the new buttons have the question mark. When I inspect the element, it says it comes from generic_icons.png - which php file controls this, and is the generic_icons.png mapped?

Thanks in advance!

vbgamer45

yeah it is tricky it is mapped to that png file using css
Community Suite for SMF - Take your forum to the next level built for SMF, Gallery,Store,Classifieds,Downloads,more!

SMFHacks.com -  Paid Modifications for SMF

Mods:
EzPortal - Portal System for SMF
SMF Gallery Pro
SMF Store SMF Classifieds Ad Seller Pro

djoos5

Well that makes things difficult.

I also found, too, that I cannot get my subs-editor.php file to point to the GIF files I created and put in the bbc folder, which add new buttons to my Post Reply screen.

I am not sure I will want to upgrade my site if the prior user friendliness is lost.

margarett

Don't do assumptions just because you are not (yet) familiar with the changes we introduced ;)

Menu has a fallback icon for the items you add. In order to add your icon to your new menu item, you need to add the respective CSS. You can edit index.css or hook your own CSS

At the question mark icons that shows up you should have now something like "class="generic_icons your_button"
So you just need to add in CSS something like:
.generic_icons.your_button {
background: url(path/to/your/image);
}
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

br360

Nice. Thanks for that Bruno. :)

margarett

Nah, credits go to Antes and Suki, they explained this to me some time ago (because of a MOD I was writing for 2.1) ;)

I understand squat about CSS ;D
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

djoos5

Quote from: margarett on May 04, 2015, 07:11:29 PMDon't do assumptions just because you are not (yet) familiar with the changes we introduced ;)

Menu has a fallback icon for the items you add. In order to add your icon to your new menu item, you need to add the respective CSS. You can edit index.css or hook your own CSS

At the question mark icons that shows up you should have now something like "class="generic_icons your_button"
So you just need to add in CSS something like:
.generic_icons.your_button {
background: url(path/to/your/image);
}

I apologize - it was not my intent that my post came across as snarky.

As a novice PHP-editor, I will be having troubles with the new release. I understood when an array pointed to an image file, but not when an index.css points to a PNG that has been mapped. So, my intention above was not that the new product isn't better, it's just that I may not be able to use it because of my limited ability to modify the new code.

I give two troubling examples:


I appreciate your code help above regarding changing the above question marks, but where do I add this new code to the Index.css?



With this issue, I cannot get the bbc images to show up for the buttons. Do you see the blank squares? It says on the Subs-editor.php that the task is still easy by using the coding style from previous versions. In fact, the buttons work, I just cannot get the button gifs to be shown.

array(
'image' => 'roll',
'code' => 'roll',
'before' => '[roll]',
'after' => '[/roll]',
'description' => $txt['bbc_code_roll']
),


If you wouldn't mind helping me out with the code you gave me above, as to where it goes on the Index.css, that would help me greatly. I would appreciate it very much.

Antes

You can also upload png or gif file to images folder, menu has its fallback to static file. I still personally suggesting our mod authors or developers to use CSS.

margarett

Let me give you an example.

I add a test button in Subs.php (after "Home" button)
'test_button' => array(
'title' => 'MyButton',
'href' => 'http://www.google.com',
'show' => true,
'sub_buttons' => array(
),
),

It shows up as expected (with the fallback question mark). But if you look at Firebug, the span "generic_buttons test_button" is there as expected ;)


Now I create an icon "test_button_icon.png" and copy it to Themes/default/images. The icon should be 16x16 (pixels)

And finally I head to index.css and add at the very end of the file:
.generic_icons.test_button {
background: url(../images/test_button_icon.png);
}


And here it is, my menu icon replaces the "question mark" ;)
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

margarett

Quote from: Antes on May 05, 2015, 06:07:43 PM
You can also upload png or gif file to images folder, menu has its fallback to static file. I still personally suggesting our mod authors or developers to use CSS.
This was discussed before :P Unless it was added after our last conversation about it :P only the admin icons have fallback ;)
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

Antes

Quote from: margarett on May 05, 2015, 06:11:48 PM
Quote from: Antes on May 05, 2015, 06:07:43 PM
You can also upload png or gif file to images folder, menu has its fallback to static file. I still personally suggesting our mod authors or developers to use CSS.
This was discussed before :P Unless it was added after our last conversation about it :P only the admin icons have fallback ;)

I was searching inside GitHub, I do remember(?) Live patched the main menu as well to support the same fallback. Meh kitty gets worse day by day it seems :(

margarett

About the BBC icons, the principle is the same, but a LOT easier ;) Your "roll" code will generate a "sceditor-button-roll" class

You just need to create an icon, call it "roll.png" and upload it to images/bbc. There is a fallback in this case.

Yeah, that works! ;D
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

djoos5

That did it! Thanks!

One last question and I will leave you be. Do you know which php file controls the actual button description when you mouseover?

Is that the modification_english?

Thanks again!!

djoos5

Never mind... found it!

Thanks for your help, I am now looking at keeping my new forum build.  ;D

Advertisement: