MM5 Skinning - Changing Main Menu Item Text and Icon Colors

To discuss development of addons / skins / customization of MediaMonkey.

Moderators: jiri, drakinite, Addon Administrators

chris_a_johnson
Posts: 16
Joined: Sun Jul 17, 2011 8:33 pm

MM5 Skinning - Changing Main Menu Item Text and Icon Colors

Post by chris_a_johnson »

I have been trying for the last few days to figure out how to change the icon and text colors for the items under the main menu. I was able to change the hover background color and I have looked through the Inspect Element and Dev Tools, searched the forum, and reviewed all of the available skins, but can't figure it out. Logically, it should be under .mainmenuitem[hover] or .mainmenuitem:hover, but neither of these work. I can sort of do it by using menutext and .menuicon, but you need to actually touch the text or icon for it to change, it doesn't just change when hovering over the menu item. Can you tell me what the right object is to change this? Thank you!
drakinite
Posts: 880
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: MM5 Skinning - Changing Main Menu Item Text and Icon Colors

Post by drakinite »

Hi,

Are you referring to the text (File, Edit, View, etc.); or the contents of the menus?

Image

If you are referring to the former, mainmenuitem is correct.
If you are referring to the latter, the associated classes are menuitem, menutext, menuitem, and submenuicon:

Image
Lmk if you want an explanation on how to inspect those menus with the dev tools. It's a bit more complicated than the rest of the app.
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
chris_a_johnson
Posts: 16
Joined: Sun Jul 17, 2011 8:33 pm

Re: MM5 Skinning - Changing Main Menu Item Text and Icon Colors

Post by chris_a_johnson »

Hi Drakinite,

I want to do both sets of menu items - the top level and the submenu. I am able to get the main menu items to work and I will see if I can figure out the sub menu items based on your response. Thank you - the info is very helpful.
drakinite
Posts: 880
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: MM5 Skinning - Changing Main Menu Item Text and Icon Colors

Post by drakinite »

No problem.

The reason submenus can't be inspected in the main window is because they're technically a separate window, with its own document tree. If you open a browser and connect to http://localhost:9222, you'll be able to open devtools on all windows, including menu ones.
The way I was able to poke through the HTML was by right clicking MediaMonkey's icon in the taskbar. Normally, when you open a right click menu then click anywhere else (even the devtools in-browser), the menu will disappear. Not the case for the taskbar one, however.
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
chris_a_johnson
Posts: 16
Joined: Sun Jul 17, 2011 8:33 pm

Re: MM5 Skinning - Changing Main Menu Item Text and Icon Colors

Post by chris_a_johnson »

Thanks again for your help. I am still stuck on the right css for changing the submenu items. I have tried every configuration I can think of such as:

Code: Select all

[data-control-class="mainmenuitem"] .menuitem.menutext:hover {
	color: @hoverTextColor!important;
	fill: @hoverTextColor!important;
}

Code: Select all

.mainmenuitem.menuitem.menutext:hover {

Code: Select all

.menuitem.menutext:hover {
The one thing that has worked, but only for the top level menu is:

Code: Select all

.mainmenuitem:hover {
I also tried accessing the dev tools by right-clicking on the mediamonkey icon in the taskbar, but I just get the options to launch MediaMonkey, close the window, or remove it from the taskbar.

Could you tell me what the code needs to be for this?

Thanks.
drakinite
Posts: 880
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: MM5 Skinning - Changing Main Menu Item Text and Icon Colors

Post by drakinite »

chris_a_johnson wrote: Thu Jun 23, 2022 3:45 pm I also tried accessing the dev tools by right-clicking on the mediamonkey icon in the taskbar, but I just get the options to launch MediaMonkey, close the window, or remove it from the taskbar.
I believe you misunderstood: http://files.drakinite.net/2022-06-23_18-01-00.mp4

Try this:

Code: Select all

.menuitem[data-focused], .menuitem[data-selected] {

}
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
chris_a_johnson
Posts: 16
Joined: Sun Jul 17, 2011 8:33 pm

Re: MM5 Skinning - Changing Main Menu Item Text and Icon Colors

Post by chris_a_johnson »

Thanks for the video - I was able to view the HTML for the menu. I tried the code you suggested, specifically this:

Code: Select all

.menuitem[data-focused], .menuitem[data-selected], .menuitem[hover] {
   	        background-color: @accentNavy; //@hoverBgColor;
		color: @black!important;
		fill: @black!important;
		pointer-events: all;
}
It changes the background color for the main and submenus, but not the font color. It will also change the font style, so it seems like somewhere white is defined as the permanent color of submenu items. I checked the HTML files in the directory because I had to modify the player.html file to make the player panel look the way I wanted, but didn't see anything. Do you have any other suggestions or is it an element that can't be altered? Thanks.
drakinite
Posts: 880
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: MM5 Skinning - Changing Main Menu Item Text and Icon Colors

Post by drakinite »

Try this:

Code: Select all

.menuitem[data-focused], .menuitem[data-selected] {
    background-color: @accentNavy;
    & .menutext {
        color: @black;
        fill: @black;
    }
}
The "& .menutext" bit is something unique to LESS. When it compiles to CSS, it becomes this:

Code: Select all

.menuitem[data-focused], .menuitem[data-selected] {
    background-color: @accentNavy;
}

.menuitem[data-focused] .menutext, .menuitem[data-selected] .menutext {
    color: @black;
    fill: @black;
}
Note the difference between the [xyz] syntax and the :xyz syntax.

- [selector] is used for specific HTML attributes (note the <div class="menuitem" data-focused="1">: If it's something with an equals sign that you can see inside the HTML, you use [square brackets] to select them, like .menuitem[data-focused])
- :selector is used for "pseudo classes". This is what you need to use for hover. When an element is hovered, it gains the "hover" pseudo class and you can select it via something like .menuitem:hover

In this case, because MM assigns the custom data-focused and data-selected attributes, you don't need to worry about :hover.
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
chris_a_johnson
Posts: 16
Joined: Sun Jul 17, 2011 8:33 pm

Re: MM5 Skinning - Changing Main Menu Item Text and Icon Colors

Post by chris_a_johnson »

That worked! Thank you. I now need to go back and clean up my code for the skin I've been developing. I am not a coder, so it's a slow process, but now I have it configured the way I want it.
Post Reply