MozillaZine

Firefox default theme gives me incorrect menu highlighting

Discuss application theming and theme development.
jez

User avatar
 
Posts: 119
Joined: October 16th, 2003, 1:20 am

Post Posted July 2nd, 2011, 12:45 am

Wanting to base my theme on the default Firefox theme (I'm currently using 5.0), I've run into a rather early problem: even the default FF5 theme has a small issue! When I hover over a menu item, it is highlighted as white text on a light grey background, which is almost unreadable. The native dialogs highlight menus as white text on a blue background, so the text colour seems to be OK - it's the background that is wrong. Why is it light grey? Below are screenshots of what a native dialog's menu looks like, and a FF5 menu. I'm running Debian 6.0.2 and Firefox 5.0.

Image Image
== Jez ==

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted July 4th, 2011, 10:57 am

You should definitely file a bug on this one. I think it has to do with the fact that Firefox uses Windows-centric colors for the menus:

Code: Select all
  background-color: -moz-menuhover;
  color: -moz-menuhovertext;


Instead of the generic:

Code: Select all
  background-color: highlight;
  color: highlightText;


For my theme I use Highlight for most OS's and only use -moz-menuhover when I detect windows. The Linux builds of the default theme should really use highlight for this.
Last edited by patrickjdempsey on July 5th, 2011, 4:54 pm, edited 1 time in total.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

CatThief

User avatar
 
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post Posted July 5th, 2011, 4:38 pm

patrickjdempsey wrote:The Linux builds of the default theme should really use highlight for this.

I totally agree. I see mixed results on Linux depending on which GTK engine is in use, especially when the default desktop is something other than Gnome.
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.

jez

User avatar
 
Posts: 119
Joined: October 16th, 2003, 1:20 am

Post Posted July 10th, 2011, 10:31 am

patrickjdempsey wrote:You should definitely file a bug on this one. I think it has to do with the fact that Firefox uses Windows-centric colors for the menus:

Code: Select all
  background-color: -moz-menuhover;
  color: -moz-menuhovertext;


Instead of the generic:

Code: Select all
  background-color: highlight;
  color: highlightText;


For my theme I use Highlight for most OS's and only use -moz-menuhover when I detect windows. The Linux builds of the default theme should really use highlight for this.

How does your theme work; do you set -moz-appearance:none? For me, it doesn't matter what I set background-color to for menu and menuitem elements; they have -moz-appearance set to 'menuitem', which is what seems to be overriding the background color and causing it to be light grey. The white text is actually the correct highlight color; it's just meant to have a dark blueish background when highlighted.
== Jez ==

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted July 10th, 2011, 12:34 pm

I think I have mine set to -moz-appearance:none specifically so I can override the colors.... here's a sampling of some of the craziness going on in my theme... honestly I'm still having issues with some things like horizontal positioning and I have no idea what do to next without multiple platforms to test against:

Code: Select all
/* correction for menu hovers by a13c */
menuitem[type="checkbox"],menuitem[checked="true"] {-moz-appearance: inherit;}
menuitem[type="radio"] {-moz-appearance: inherit;}

.menulist-menupopup > menuitem,
menulist > menupopup > menuitem,
.menulist-menupopup > menu,
menulist > menupopup > menu {
  -moz-appearance: none;
  font: message-box;
  color: -moz-FieldText;
}

menulist > menupopup > menuitem[_moz-menuactive="true"] {
  background-color: highlight;
  color: highlighttext;
}

menuitem[type="checkbox"],
menuitem[checked="true"] {
    -moz-appearance: checkmenuitem;
}
menuitem[type="checkbox"] > .menu-iconic-left {
  -moz-appearance: menucheckbox;
}

menuitem[type="radio"] {
  -moz-appearance: radiomenuitem;
}
menuitem[type="radio"][checked="true"] > .menu-iconic-left {
  -moz-appearance: menuradio;
}

@media all and (-moz-windows-default-theme) {
 
  menulist > menupopup > menuitem[_moz-menuactive="true"],
  #appmenu-editmenu[_moz-menuactive="true"],
  #appmenuSecondaryPane > menu[_moz-menuactive="true"],
  #appmenuSecondaryPane > menuitem[_moz-menuactive="true"],
  #appmenuPrimaryPane > menu[_moz-menuactive="true"],
  #appmenuPrimaryPane > menuitem[_moz-menuactive="true"],
  .splitmenu-menuitem[_moz-menuactive="true"],
  .splitmenu-menu[_moz-menuactive="true"],
  menupopup > menu[_moz-menuactive="true"],
  menupopup > menuitem[_moz-menuactive="true"],
  popup > menu[_moz-menuactive="true"],
  popup > menuitem[_moz-menuactive="true"] {
  background-color: -moz-menuhover !important;
  color: -moz-menuhovertext !important;
  }
}
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

ShareBird

User avatar
 
Posts: 2740
Joined: December 8th, 2004, 7:09 am
Location: Berlin | Made in Brasil

Post Posted July 10th, 2011, 2:26 pm

I think your issue has to do with the Windows theme you are using. The light grey indicates that you are hovering a disabled menu item; the font color is that is wrong in this case...
Silvermel - A Theme for Firefox and Thunderbird
YATT - Yet Another Theme Tutorial
Don't give a man a fish. Teach him how to fish instead.

jez

User avatar
 
Posts: 119
Joined: October 16th, 2003, 1:20 am

Post Posted July 10th, 2011, 2:58 pm

ShareBird, this is the default Firefox theme that came with a download from mozilla.org.
== Jez ==

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted July 10th, 2011, 3:15 pm

He's running Debian.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

ShareBird

User avatar
 
Posts: 2740
Joined: December 8th, 2004, 7:09 am
Location: Berlin | Made in Brasil

Post Posted July 10th, 2011, 3:48 pm

patrickjdempsey wrote:He's running Debian.

Heheh.... I've read your information on signature thinking it was his.... :-)

Anyway, if the theme is relying on -moz-appearance, those problems come probably from the system theme, I guess...
Silvermel - A Theme for Firefox and Thunderbird
YATT - Yet Another Theme Tutorial
Don't give a man a fish. Teach him how to fish instead.

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest