@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!
They look just as good with 20.2 too!
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;
