Can you add text-shadow to the Sidebar text?
Hi,
I use a couple of add-ons that allow me to float a transparent sidebar over browser content. This results in the sidebar text being hard to read based on the content background behind it.
I would like to resolve this by making the sidebar font color white and giving it a black text-shadow surrounding it. However, I have been unable to find a way to do this through css.
Thanks in advance for any support!
All Replies (6)
How far did you get in the process of styling that text...
(1) Were you able to get the CSS selectors for the relevant elements in the sidebar? The right-click Inspect Element feature could be useful for that.
(2) Were you able to find some rules that should work? The Inspector's Rules pane is a good place to experiment.
(3) Is there an issue creating/editing userContent.css (or using the Stylish extension)?
By the way, your Adobe Acrobat (PDF ) plugin is ancient and may be a security risk.
Do you have a newer version of Adobe Reader or Adobe Acrobat on your system? It should create a registry entry pointing Firefox to a current plugin.
If needed: http://get.adobe.com/reader/
(1) There is no "Inspect Element" item in the sidebar context menu. Are chrome/GUI elements able to be inspected?
(2) In userchrome.css, the following 'color' call-out changes the font color in the sidebar, but the 'text-shadow' call-out in the same place does not show up the sidebar:
#bookmarksPanel, #history-panel{ color: #fff !important; text-shadow: 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000 !important; }
(3) No, the rest of my userchrome.css document works just fine.
As for Adobe, I am on a work computer and do not have the required admin access in order to download/update plug-ins.
Modified by spideymouse
Okay, I'm confused. I assumed the floating sidebars were new elements injected by the add-on(s) into the document and did not use Firefox's regular sidebar pane. Do they actually float Firefox's sidebar pane?
Sorry if I was unclear. I am in fact talking about Firefox's actual browser sidebar. I use the "OmniSidebar" and "GlassMyFox" add-ons which allow the sidebar to be transparent and to float above my browser content.
Modified by spideymouse
Got it. I can't find a way to do it. I'm not sure it is supported in a "tree". This page is not very thorough about what CSS properties are supported: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Styling_a_Tree
Until you find something better, what about adding a background color on hover?
#bookmarksPanel treechildren:hover,
#history-panel treechildren:hover {
background: rgba(0,0,0,0.2) !important;
}