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

Support and discussions for the x86/x64 Linux version of Pale Moon.

Moderators: trava90, satrow

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

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

Unread postby Antonius32 » Sun, 25 May 2014, 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 Sun, 29 Jun 2014, 22:42, edited 15 times in total.
Image

dark_moon

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

Unread postby dark_moon » Sun, 25 May 2014, 13:50

You mean this?:
dropmarker.png
dropmarker.png (610 Bytes) Viewed 1629 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: Sun, 25 May 2014, 11:18
Location: Netherlands

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

Unread postby Antonius32 » Sun, 25 May 2014, 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
screenshot1.png
Appmenu button: blue background, bold white text, black dropmarker
screenshot1.png (15.67 KiB) Viewed 1615 times
Last edited by Antonius32 on Sun, 25 May 2014, 23:47, edited 8 times in total.
Image

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

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

Unread postby Antonius32 » Sun, 25 May 2014, 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;
}
Image

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

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

Unread postby Antonius32 » Mon, 26 May 2014, 10:41

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

access2godzilla

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

Unread postby access2godzilla » Mon, 26 May 2014, 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: Sun, 25 May 2014, 11:18
Location: Netherlands

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

Unread postby Antonius32 » Mon, 26 May 2014, 17:29

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

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

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

Unread postby Antonius32 » Tue, 27 May 2014, 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.
Image


Return to “Pale Moon for Linux”

Who is online

Users browsing this forum: adisib, AhrefsBot [Crawler] and 7 guests