[Solved] Toolbar icon colours in Pale Moon 20.2

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
Lunix
Fanatic
Fanatic
Posts: 144
Joined: 2013-07-01, 21:53

[Solved] Toolbar icon colours in Pale Moon 20.2

Unread post by Lunix » 2013-07-02, 00:39

Update of the navigation button icons (again). Users have clearly indicated that the inverted color icons on glass and dark themes were less desirable. I've listened, and changed the icons for glass back to the pre-20 style but with added contrast, and made a distinction for dark personas (themes) where the icons are now simply inverted white (like in Firefox).
I wish I'd seen the discussion where users were asking you to drop the inverted colour icons, because I would have added my dissenting opinion. The icons in 20.2 are nearly invisible to me with a dark (navy blue) glass theme on Windows 7, even with the added contrast. The previous build of Pale Moon, featuring the bright individually coloured icons, was just perfect. Since I can barely see the new icons, I've been forced to use the "Classic Toolbar Buttons" add-on which allows the changing of icons to plain white.

I'd rather not use yet another add-on if at all possible (I already have a bunch of extensions for other functions). Moonchild, might you consider adding back the brightly coloured icons as an optional choice in the next version of Pale Moon?
Last edited by Lunix on 2014-03-12, 19:29, edited 1 time in total.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 31056
Joined: 2011-08-28, 17:27
Location: Tranås, SE
Contact:

Re: Toolbar icon colours in Pale Moon 20.2

Unread post by Moonchild » 2013-07-02, 01:08

I've tested the icons with added contrast on a fairly wide range of darker glass settings, and there wasn't really an issue with them not being visible enough to discern. The contrast was an issue prior to v20, but I'm quite sure I've added enough of a bright edge to the icons to have them stand out sufficiently on the entire range of glass window settings (mind you: if your monitor is not properly set up you may also have the issue there; unfortunately not too uncommon with most TFTs being set to "marketing for bright environments" out of the box - often killing the luminance range).

When I have time, I'll attach the inverted colored icon file to this topic with instructions on how to plug them back into Pale Moon using userChrome.css

Or, if our resident CSS expert BlackLab beats me to it, there might be a solution from that side sooner ;)
"Remember, only you can prevent Earth's destruction by spelling Pale Moon with a space." -- Athenian200
Image

Blacklab
Keeps coming back
Keeps coming back
Posts: 787
Joined: 2012-06-08, 12:14
Location: Scotland UK (Maybe)

Re: Toolbar icon colours in Pale Moon 20.2

Unread post by Blacklab » 2013-07-02, 02:35

@Lunix: Welcome to the forum! :) Glad there's another fan of the 20.1 coloured icons out there - I'm on glass with dark blue/green hues behind the toolbar area and the pastel coloured icons show up well and IMHO look great too! 8-) They look just as good with 20.2 too! :D

No great CSS expertise required on my part - all I have done is re-use both Moonchild's CSS scripts from the "why such toxic colors" topic and added the inverted colored icons image file. Regret I haven't checked the script yet - just glad it works - so further improvements/refinements may be possible?

Copy the script below, either directly into your Pale Moon Profile "userChrome.css" file (@Lunix: probably your best option to avoid using yet another add-on if at all possible - if unfamiliar with CSS and userChrome.css more instructions here) or use the ChromEdit Plus Add-on. Then simply copy the attached "Toolbar-inverted.png" image file into your Profile "chrome" folder - the same one that the "userChrome.css" file is in.

Code: Select all

/* --- Revert to Pale Moon 20.1 Coloured Icons - based on Moonchild's script in "why such toxic colors?" topic --- */
/* ------------------------ (http://forum.palemoon.org/viewtopic.php?f=3&t=2396#p13672) ------------------------- */

.toolbarbutton-1:-moz-lwtheme-brighttext {
  list-style-image: url('Toolbar-inverted.png') !important;
}
#home-button.bookmark-item:-moz-lwtheme-brighttext {
  list-style-image: url('Toolbar-inverted.png') !important;
}
#bookmarks-menu-button.bookmark-item:-moz-lwtheme-brighttext {
  list-style-image: url('Toolbar-inverted.png') !important;
}
  :-moz-any(#toolbar-menubar, #nav-bar[tabsontop=false]) :-moz-any(#back-button, #forward-button, #reload-button, #stop-button, #home-button, #print-button, #downloads-button, #downloads-indicator, #history-button, #bookmarks-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-in-button, #sync-button, #feed-button, #alltabs-button, #tabview-button, #webrtc-status-button):not(:-moz-any(#alltabs-button,#tabview-button,#sync-button[status])) > .toolbarbutton-icon:not(:-moz-lwtheme),
  #TabsToolbar[tabsontop=true] :-moz-any(#back-button, #forward-button, #reload-button, #stop-button, #home-button, #print-button, #downloads-button, #downloads-indicator, #history-button, #bookmarks-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-in-button, #sync-button, #feed-button, #alltabs-button, #tabview-button, #webrtc-status-button):not(:-moz-any(#alltabs-button,#tabview-button,#new-tab-button,#sync-button[status])) > .toolbarbutton-icon:not(:-moz-lwtheme),
  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child :-moz-any(#back-button, #forward-button, #reload-button, #stop-button, #home-button, #print-button, #downloads-button, #downloads-indicator, #history-button, #bookmarks-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-in-button, #sync-button, #feed-button, #alltabs-button, #tabview-button, #webrtc-status-button):not(:-moz-any(#alltabs-button,#tabview-button,#new-tab-button,#sync-button[status])) > .toolbarbutton-icon:not(:-moz-lwtheme) {
  list-style-image: url('Toolbar-inverted.png') !important;
}
Adding this CSS script using the Stylish Add-on will allow you to toggle the coloured icons on/off from the Stylish toolbar button's drop-down menu - a "nice to have" toy - but not essential. However, if you do want to use Stylish then a small modification is needed because placing the "Toolbar-inverted.png" image file directly in the Profile "chrome" folder does not work with script loaded in Stylish - explanation gratefully received? Simple fix - make the image file's location "C:/Program Files/Pale Moon/Toolbar-inverted.png" then script does work! So just modify the "list-style-image: url ('Toolbar-inverted.png') !important;" location line throughout the script (4 times in all), to match the new image file location, as follows:

Code: Select all

list-style-image: url("file:///C:/Program Files/Pale Moon/Toolbar-inverted.png") !important;
Attachments
Toolbar-inverted.png
Toolbar-inverted.png (7.25 KiB) Viewed 2852 times

User avatar
Lunix
Fanatic
Fanatic
Posts: 144
Joined: 2013-07-01, 21:53

Re: Toolbar icon colours in Pale Moon 20.2

Unread post by Lunix » 2013-07-02, 02:54

This worked perfectly. Thank you very much. :)

Blacklab
Keeps coming back
Keeps coming back
Posts: 787
Joined: 2012-06-08, 12:14
Location: Scotland UK (Maybe)

Re: Toolbar icon colours in Pale Moon 20.2

Unread post by Blacklab » 2013-07-02, 11:18

Glad the coloured icons are working for you too! :)

NOTE: I found an error in the script this morning - had not altered all 4 occasions the "list-style-image: url ('Toolbar-inverted.png') !important;" term appears in the the main script or instructed Stylish users to change all 4 instances when moving the image file location! :problem:

Original script did work but better to have the corrected version - which is now the one shown in the main (large) CODE box above.

iGodNano

Re: Toolbar icon colours in Pale Moon 20.2

Unread post by iGodNano » 2013-09-14, 17:26

I really want to use this old icon set, but when I follow Blacklab's instructions copy the css script into my chrome folder along with the Toolbar-inverted.png, all of my add-on icons on my tool bar get changed to the full Toolbar-inverted.png image.

Like so:
Image
any fix for this?

Blacklab
Keeps coming back
Keeps coming back
Posts: 787
Joined: 2012-06-08, 12:14
Location: Scotland UK (Maybe)

Re: Toolbar icon colours in Pale Moon 20.2

Unread post by Blacklab » 2013-09-14, 20:44

@iGodNano: PM 20.1 coloured icon set working normally here - currently running script in Stylish for easy on/off toggle from Stylish's toolbar button.
PM 24.0 Small Icons + Coloured Icons set from PM 20.1
PM 24.0 Small Icons + Coloured Icons set from PM 20.1
Have also checked script works correctly when installed in Pale Moon Profile's "userChrome.css file - so the instructions should work for you too? :)

I note you say "when I follow Blacklab's instructions copy the css script into my chrome folder along with the Toolbar-inverted.png" - the CSS script should be in your Profile's "userChrome.css" file (leave any other .css files as is) and the Toolbar-inverted.png image file should be in the "chrome" folder as here:
Example PM 24.0 Profile "chrome" folder
Example PM 24.0 Profile "chrome" folder

iGodNano

Re: Toolbar icon colours in Pale Moon 20.2

Unread post by iGodNano » 2013-09-14, 21:57

Well, when I went into my Profile's "chrome" folder, there was absolutely nothing there. I basically just created the userChrome.css file since there wasn't one already and copied your script into it and the dropped the image into the same folder.

This is what the folder looks like in mine:
my PM 24.0 Profile "chrome" folder
my PM 24.0 Profile "chrome" folder

Blacklab
Keeps coming back
Keeps coming back
Posts: 787
Joined: 2012-06-08, 12:14
Location: Scotland UK (Maybe)

Re: Toolbar icon colours in Pale Moon 20.2

Unread post by Blacklab » 2013-09-14, 23:28

@iGodNano: Your chrome folder looks fine - just surprised there was no preexisting userChrome.css file! :)

Suspect there is a problem with script only on darker themes like yours - not sure if this is relates to PM 24.0 update changes? If you try the default theme I expect all coloured toolbar icons will display correctly? Will have to experiment and troubleshoot script - any bright ideas gratefully received! :roll:

iGodNano

Re: Toolbar icon colours in Pale Moon 20.2

Unread post by iGodNano » 2013-09-15, 01:09

Blacklab wrote:@iGodNano: Your chrome folder looks fine - just surprised there was no preexisting userChrome.css file! :)

Suspect there is a problem with script only on darker themes like yours - not sure if this is relates to PM 24.0 update changes? If you try the default theme I expect all coloured toolbar icons will display correctly? Will have to experiment and troubleshoot script - any bright ideas gratefully received! :roll:
When I switch over to the default theme, the icons all change just to the regular PM 24.0 icons. Maybe it is a theme issue? This is strange.

The theme I'm using is called "Woody-Fox", if that helps.
https://addons.mozilla.org/en-us/firefo ... woody-fox/

Locked