[CLOSED] How to adjust (colour of) appmenu button dropmarker

Users and developers helping users with generic and technical Pale Moon issues on all operating systems.

Moderator: trava90

Forum rules
This board is for technical/general usage questions and troubleshooting for the Pale Moon browser only.
Technical issues and questions not related to the Pale Moon browser should be posted in other boards!
Please keep off-topic and general discussion out of this board, thank you!
User avatar
Antonius32
Add-ons Team
Add-ons Team
Posts: 695
Joined: 2014-05-25, 11:18
Location: Netherlands

[CLOSED] How to adjust (colour of) appmenu button dropmarker

Unread post by Antonius32 » 2014-05-25, 13:17

I have been using Pale Moon for Linux for a while now, and I really like it.

I have installed the add-on "Hide Caption Titlebar Plus" in order to have the tabs appear in the titlebar, which was the default behaviour of Firefox 28 on Windows. The add-on has an option to replace the appmenu button with a custom button, but I prefer to use the standard button.

The standard appmenu button, however, is gray, like the rest of the interface, and I thought it would be nice to add some colour to it, thus making PM4Linux look more like it's Windows counterpart. So I added a userChrome.css file to my profile, which tells Pale Moon to show a blue appmenu button with bold white letters in normal mode, and a purple button (again, with bold white letters) in private mode.

So now the text "Pale Moon" appears in bold, white letters. But the appmenu dropmarker (the little down-pointing arrow) still appears in black, and I haven't been able to figure out the proper css selector to change this. So my question is: does anyone know the proper css selector for changing the colour of the appmenu button dropmarker?

PS If anyone is interested in the userChrome.css file I have created so far, I can post it's contents here; just let me know!
Last edited by Antonius32 on 2014-06-29, 22:42, edited 15 times in total.

dark_moon

Re: Css selector: "appmenu button dropmarker" in white

Unread post by dark_moon » 2014-05-25, 13:50

You mean this?:
dropmarker.png
dropmarker.png (610 Bytes) Viewed 1909 times
I use this css code:

Code: Select all

#appmenu-button-container > * > .box-inherit{min-width:12px;background:url("chrome://browser/skin/appmenu-dropmarker.png")center 75% no-repeat}

User avatar
Antonius32
Add-ons Team
Add-ons Team
Posts: 695
Joined: 2014-05-25, 11:18
Location: Netherlands

Re: How to adjust (colour of) appmenu button dropmarker

Unread post by Antonius32 » 2014-05-25, 15:33

Hi dark_moon,

Thank you for your reply. I have added your css code to my userChrome file, but it doesn't seem to do the trick. On Linux, I think, the appmenu button is referred to as "appmenu-toolbar-button" so I have adjusted your code like this:

Code: Select all

#appmenu-toolbar-button-container > * > .box-inherit{min-width:12px;background:url("chrome://browser/skin/appmenu-toolbar-dropmarker.png")center 75% no-repeat}
But still, the new line doesn't seem to change anything.

I have added a screenshot, to show you what my appmenu button currently looks like. As you can see, I have successfully set a blue background colour for the appmenu button, and I have set the colour for the text "Pale Moon" to a shade of white, and the font weight to bold. However, the dropmarker still appears in black.

Of course, this is just a minor detail, but it would be nice if I could have the dropmarker appear in the same colour as the text on the button. The picture you attached does show a white dropmarker, but how can I get this dropmarker to be used on the appmenu button?
Attachments
Appmenu button: blue background, bold white text, black dropmarker
Appmenu button: blue background, bold white text, black dropmarker
screenshot1.png (15.67 KiB) Viewed 1895 times
Last edited by Antonius32 on 2014-05-25, 23:47, edited 8 times in total.

User avatar
Antonius32
Add-ons Team
Add-ons Team
Posts: 695
Joined: 2014-05-25, 11:18
Location: Netherlands

Re: How to adjust (colour of) appmenu button dropmarker

Unread post by Antonius32 » 2014-05-25, 16:27

To further clarify, this is the css code I am using:

Code: Select all

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#main-window:not([privatebrowsingmode]) #appmenu-toolbar-button {
    -moz-appearance: none !important;
    color: #FEEDFC !important;
    font-weight: bold !important;
    background: -moz-linear-gradient(hsl(200,85%,60%), hsl(225,72%,53%) 95%) !important;
    border: 1px solid #000000 !important;
}

#main-window:not([privatebrowsingmode]) #appmenu-toolbar-button:hover:not(:active):not([open]) {
    -moz-appearance: none !important;
    color: #FEEDFC !important;
    font-weight: bold !important;
    background: -moz-linear-gradient(hsl(225,72%,53%), hsl(200,85%,60%) 95%) !important;
    border: 1px solid #000000 !important;
}

#main-window:not([privatebrowsingmode]) #appmenu-toolbar-button:hover:active,
#main-window:not([privatebrowsingmode]) #appmenu-toolbar-button[open] {
    -moz-appearance: none !important;
    color: #FEEDFC !important;
    font-weight: bold !important;
    background: -moz-linear-gradient(hsl(225,72%,53%), hsl(225,72%,53%) 95%) !important;
    border: 1px solid #000000 !important;
}

#appmenu-toolbar-button {
    -moz-appearance: none !important;
    color: #FEEDFC !important;
    font-weight: bold !important;
    background: -moz-linear-gradient(hsl(279,70%,46%), hsl(276,75%,38%) 95%) !important;
    border: 1px solid #000000 !important;
}

#main-window #appmenu-toolbar-button:hover:not(:active):not([open]) {
    -moz-appearance: none !important;
    color: #FEEDFC !important;
    font-weight: bold !important;
    background: -moz-linear-gradient(hsl(276,75%,38%), hsl(279,70%,46%) 95%) !important;
    border: 1px solid #000000 !important;
}

#main-window #appmenu-toolbar-button:hover:active,
#main-window #appmenu-toolbar-button[open] {
    -moz-appearance: none !important;
    color: #FEEDFC !important;
    font-weight: bold !important;
    background: -moz-linear-gradient(hsl(276,75%,38%), hsl(276,75%,38%) 95%) !important;
    border: 1px solid #000000 !important;
}

User avatar
Antonius32
Add-ons Team
Add-ons Team
Posts: 695
Joined: 2014-05-25, 11:18
Location: Netherlands

Re: How to adjust (colour of) appmenu button dropmarker

Unread post by Antonius32 » 2014-05-26, 10:41

Anyone? Any hint, that might get me heading in the right direction, is appreciated!

access2godzilla

Re: How to adjust (colour of) appmenu button dropmarker

Unread post by access2godzilla » 2014-05-26, 14:21

I guess this reply isn't too helpful, but you could look at https://github.com/MoonchildProductions ... emes/linux (especially browser.css) to get an idea.

User avatar
Antonius32
Add-ons Team
Add-ons Team
Posts: 695
Joined: 2014-05-25, 11:18
Location: Netherlands

Re: How to adjust (colour of) appmenu button dropmarker

Unread post by Antonius32 » 2014-05-26, 17:29

Thanks for the tip. I will look into it, and if I find a solution, I will post it here.

User avatar
Antonius32
Add-ons Team
Add-ons Team
Posts: 695
Joined: 2014-05-25, 11:18
Location: Netherlands

Re: How to adjust (colour of) appmenu button dropmarker

Unread post by Antonius32 » 2014-05-27, 12:08

I've realised that adjusting the dropmarker with css code is not so easy, and actually, it's too much trouble for such a small detail. I have decided to just use the custom 'Home' button that comes with the add-on "Hide Caption Titlebar Plus", which works just fine − and it looks better than the userChrome solution I was using before.

Locked