Where are the reference codes for stylish in firefox?
In Stylish I have been ripping what I need out of other codes, but there are some things that I can't find a reference to ie. I want to change the bookmarks star to red. Where would I find the list of codes to modify this particular Icon? I tried google but this is way to specific, I tried looking in about:config, I know there are more menus I just dont know how to access them.
Here is what I have for the bookmarks icon so far,
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* Title: Red Star Bokmarks Icon */
- bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
color: #ff3333 !important;
}
I pieced that together out of some other codes, it isn't working and I have no clue.
I am not looking for someone to right code for me, I need to know how to do this so next time this comes up I can have the knowledge to solve it without bothering someone else. Thanks in advance!
Chosen solution
Note that the bookmarks icon is actually a combined icon where the star is the main icon and the clipboard icon next to it is the drop marker that opens the drop down menu. You would have to design your own icon or see if you can find one in a theme if you only want to color the drop marker.
Such an extensive reference doesn't exist and it would be impossible to maintain as things change all the time between versions and some items are created dynamically and only exist temporarily. You will have to find the selectors yourself using the DOM Inspector. Then you can check the currently existing rules and create modified rules that fulfill your needs.
The DOM Inspector (DOMi) has a menu item (Edit > Select Element By Click) and a toolbar button "Find a node to inspect by clicking on it" (left icon on the toolbar in the DOMi).
- open the browser window in the DOMi (File > Inspect Chrome Document) and choose the first entry from the drop-down list.
- click the "Find a node to inspect by clicking on it" button and use the keyboard (Alt Tab) or the Task bar to go back to the browser window (do not click in the browser window other than the title bar).
- click that element with the mouse and keep the button pressed until you see a red border to indicate that the DOMi has located that element in the DOM tree.
All Replies (6)
That sets the text color and thus doesn't have effect for the drop down marker. You may have more success with changing the background-color.
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); /* Title: Red Star Bookmarks Icon */ #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker { background-color: #ff3333 !important; }
Thanks for the quick response, I tried that code and it only works for the drop down menu on the right side of the icon, and then it only affects the backgound and not the icon itself.
Do you know how to access the menu that lists all of the reference codes? Is it one of the about: menus, or is it in the firefox installation files? If I could sift through the codes I know I could find what I am looking for. Also, do you know if there is a site where I could learn how to write code.
Thanks again.
Chosen Solution
Note that the bookmarks icon is actually a combined icon where the star is the main icon and the clipboard icon next to it is the drop marker that opens the drop down menu. You would have to design your own icon or see if you can find one in a theme if you only want to color the drop marker.
Such an extensive reference doesn't exist and it would be impossible to maintain as things change all the time between versions and some items are created dynamically and only exist temporarily. You will have to find the selectors yourself using the DOM Inspector. Then you can check the currently existing rules and create modified rules that fulfill your needs.
The DOM Inspector (DOMi) has a menu item (Edit > Select Element By Click) and a toolbar button "Find a node to inspect by clicking on it" (left icon on the toolbar in the DOMi).
- open the browser window in the DOMi (File > Inspect Chrome Document) and choose the first entry from the drop-down list.
- click the "Find a node to inspect by clicking on it" button and use the keyboard (Alt Tab) or the Task bar to go back to the browser window (do not click in the browser window other than the title bar).
- click that element with the mouse and keep the button pressed until you see a red border to indicate that the DOMi has located that element in the DOM tree.
That is exactly what I was looking for, now I can find the references needed to make my own code.
I have replaced the icon with another with the look I wanted.
Thanks for the fourth time!
Words mispelled: 2 1. right/write 2. backgound/background
The color property doesn't apply to images, I don't think.
Firefox 35 now supports the CSS filter property which allows for hue shifting of an image. See: https://developer.mozilla.org/docs/Web/CSS/filter
Unfortunately, it seems to have no effect on the star icon, probably because it's grayscale. (Using the sepia filter to make it yellowish and trying to shift it from there doesn't work, either.)
If you install the lavafox V2 theme you'll notice that if you are on a page you have bookmarked the star is red. I haven't broken down the code for that theme to see how it was done, but it is possible. When I figure it out I'll post it here.