Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Can you add text-shadow to the Sidebar text?

more options

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!

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)

more options

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)?

more options

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/

more options

(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

more options

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?

more options

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

more options

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;
}