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

userstyle interference

  • 31 replies
  • 1 has this problem
  • 14 views
  • Paskiausią atsakymą parašė delicacy

more options

I have this simple dark blue on white history sidebar menu color scheme code:

  1. bookmarks-view, #historyTree { background-color: #FFFFFF !important; }

treechildren:-moz-tree-cell-text { color: #020944 !important; } treechildren:-moz-tree-cell-text(selected) { color: #FFFFFF !important; } treechildren:-moz-tree-row(selected) { background: #0080FF !important; } treechildren:-moz-tree-row(focus, selected, current), treechildren:-moz-tree-row(focus, selected, odd), treechildren:-moz-tree-row(focus, selected, even) treechildren:-moz-tree-row { background: #0080FF !important; } treechildren:-moz-tree-image { width: 0 !important; }


unfortunately, it hides the checked-unchecked squares in my adblock plus filters preferences window.

How could i reserve the style for the "history" sidebar menu, only ?

I have this simple dark blue on white history sidebar menu color scheme code: #bookmarks-view, #historyTree { background-color: #FFFFFF !important; } treechildren:-moz-tree-cell-text { color: #020944 !important; } treechildren:-moz-tree-cell-text(selected) { color: #FFFFFF !important; } treechildren:-moz-tree-row(selected) { background: #0080FF !important; } treechildren:-moz-tree-row(focus, selected, current), treechildren:-moz-tree-row(focus, selected, odd), treechildren:-moz-tree-row(focus, selected, even) treechildren:-moz-tree-row { background: #0080FF !important; } treechildren:-moz-tree-image { width: 0 !important; } unfortunately, it hides the checked-unchecked squares in my adblock plus filters preferences window. How could i reserve the style for the "history" sidebar menu, only ?

All Replies (20)

more options

To limit the treechildren to those occurring under #bookmarks-view and #historyTree you can require those parent id's for each rule. For example:

#bookmarks-view treechildren:-moz-tree-cell-text, 
#historyTree treechildren:-moz-tree-cell-text {
  background-color: #FFFFFF !important; 
}

More info: https://developer.mozilla.org/docs/Web/CSS/Descendant_selectors

more options

It doesn't work, i tried it on the line that affects adblock plus unsuccessfully:

  1. historyTree treechildren:-moz-tree-row { background: #0080FF !important; }
more options

naturally, "mozilla.org" removed the sign before "historytree"

more options

this seemed to work:

  1. bookmarks-view, #historyTree treechildren:-moz-tree-cell-text { color: #020944 !important; }
  2. bookmarks-view, #historyTree treechildren:-moz-tree-cell-text(selected) { color: #FFFFFF !important; }
  3. bookmarks-view, #historyTree treechildren:-moz-tree-row(selected) { background: #0080FF !important; }
  4. bookmarks-view, #historyTree treechildren:-moz-tree-row(focus, selected, current),
  5. bookmarks-view, #historyTree treechildren:-moz-tree-row(focus, selected, odd),
  6. bookmarks-view, #historyTree treechildren:-moz-tree-row(focus, selected, even)
  7. bookmarks-view, #historyTree treechildren:-moz-tree-row { background: #0080FF !important; }
  8. bookmarks-view, #historyTree treechildren:-moz-tree-image { width: 0 !important; }

But i found out that different sections of adblockplus preferences

"exception rules" "ad blocking rules" "element.."

showed different text colors, i hope i'm not responsible about it & it's how the addon's author coded it..

more options

This site is built on wiki software. The wiki software thinks you want to create a numbered list if the first character on a line is the # sign. Anyway, you know you meant and so do I.

I don't use Adblock Plus, so I can't advise on its normal colors. Do you want to post a screen shot? Or maybe check the help site for Adblock Plus for comparison.

Rules in this format --

this seemed to work:

#bookmarks-view, #historyTree treechildren:-moz-tree-cell-text { color: #020944 !important; }

-- may not be what you intended. If you break it down into a separate rule for each of the two selectors, they compute out to:

#bookmarks-view {
  color: #020944 !important; 
}
#historyTree treechildren:-moz-tree-cell-text {
  color: #020944 !important; 
}

So you wouldn't be getting all the custom colors on the bookmarks sidebar, if that matters to you.

more options

Note that those are pseudo elements and you should use a double colon (::-moz-tree-cell-text) See this article for what selectors to use if you want to style a specific element.

more options

Now i have this for the library window:

  1. contentView .tree-bodybox { background-color: #FFFFFF !important; }
  2. contentView treechildren::-moz-tree-row(selected) { background-color: #2673c1 !important; }

http://postimg.org/image/7i0910mep/

As you can see, if i click on "All Bookmarks", "Bookmarks Toolbar" text appears in black, So i have to select "Bookmarks Toolbar" to see it in white.

What i want is to click on "All Bookmarks" & already see "Bookmarks Toolbar" text in white without having to select it .. .

And .. . I want the same style (white & blue) in the left panel.

Modified by delicacy

more options

For the right side, try adding:

#contentView treechildren::-moz-tree-cell-text(current) {
  color: #ffffff !important; 
}

When something has a highlight bar but isn't selected and doesn't have focus, it seems to be marked "current". (Screen shot attached.)

Or maybe it's also selected since this seems to work the same:

#contentView treechildren::-moz-tree-cell-text(selected) { 
  color: #ffffff !important; 
}

Modified by jscher2000 - Support Volunteer

more options

Yes, it worked with "important", i used the second version:

  1. contentView .tree-bodybox { background-color: #FFFFFF !important; }
  2. contentView treechildren::-moz-tree-cell-text(selected) { color: #ffffff !important; }
  3. contentView treechildren::-moz-tree-row(selected) { background-color: #2673c1 !important; }

You really have no solution to add the same style to the left ?

Modified by delicacy

more options
You really have no solution to add the same style to the left ?

Other things to do. Can you research it?

more options

The right panel is #contentView, the left panel is #placesList so that should get you going.

more options

Strangely, this leaves the left panel background entirely blue..

  1. placesList, #contentView .tree-bodybox { background-color: #FFFFFF !important; }
  2. placesList, #contentView treechildren::-moz-tree-cell-text(selected) { color: #ffffff !important; }
  3. placesList, #contentView treechildren::-moz-tree-row(selected) { background-color: #2673c1 !important; }

when it should be white..

more options

The left part looks messed up:

ice blue background when only selected rows should be in ice blue & dark blue color for selected rows when they should be in ice blue & the background should be white .. .

http://postimg.org/image/3mp8lj8wd/

Here's my actual entire style

[code]

  1. bookmarks-view, #historyTree treechildren::-moz-tree-cell-text { color: #020944 !important; }
  2. bookmarks-view, #historyTree treechildren::-moz-tree-cell-text(selected) { color: #FFFFFF !important; }
  3. bookmarks-view, #historyTree treechildren::-moz-tree-row(selected) { background: #0080FF !important; }
  4. bookmarks-view, #historyTree treechildren::-moz-tree-row(focus, selected, current),
  5. bookmarks-view, #historyTree treechildren::-moz-tree-row(focus, selected, odd),
  6. bookmarks-view, #historyTree treechildren::-moz-tree-row(focus, selected, even)
  7. bookmarks-view, #historyTree treechildren::-moz-tree-row { background: #0080FF !important; }
  8. bookmarks-view, #historyTree treechildren::-moz-tree-image { width: 0 !important; }
  1. placesList, #contentView .tree-bodybox { background-color: #FFFFFF !important; }
  2. placesList, #contentView treechildren::-moz-tree-cell-text(selected) { color: #ffffff !important; }
  3. placesList, #contentView treechildren::-moz-tree-row(selected) { background-color: #2673c1 !important; }

/code

more options

I already explained the error in an earlier reply. If you make a line break after each comma in the selector list, I think you will see the problem:

#placesList, 
#contentView treechildren::-moz-tree-row(selected) { 
  background-color: #2673c1 !important; 
}

This rule applies to #placesList as a whole and not to specific descendant elements under #placesList. The second selector is set up correctly, but that is completely independent of the first selector.

So you need complete selectors for each element you want to style:

#placesList treechildren::-moz-tree-row(selected), 
#contentView treechildren::-moz-tree-row(selected) { 
  background-color: #2673c1 !important; 
}

Et cetera.

more options

I saw the issue with the line break but i prefer having them disposed line by line cause it makes the whole style look less long & allows me to clearly see xul commands line by line.. I have a last problem, as you know, in my style, my selected text should be white, but all unselected text should be blue (#020944), to get blue text in library, i lose the white text upon selection, actually .. .


  1. placesList, .tree-bodybox, #contentView .tree-bodybox { background-color: #FFFFFF !important; }
  2. placesList, treechildren::-moz-tree-cell-text(selected), #contentView treechildren::-moz-tree-cell-text(selected) { color: #ffffff !important; }
  3. placesList, treechildren::-moz-tree-cell-text, #contentView treechildren::-moz-tree-cell-text { color: #020944 !important; }
  4. placesList treechildren::-moz-tree-row(selected), #contentView treechildren::-moz-tree-row(selected) { background-color: #2673c1 !important; }
more options

There should NOT be a comma immediately after #placesList in these rules: that creates THREE selectors.

more options

I removed the commas, added current & removed (important) for blue

& everything's perfect :)

thanks a lot

more options

Okay, do you want to pick a post as the solution to close this thread? Or you could post the final version of the rule and mark that as the solution in case someone else is looking to achieve the same look.

To prevent the numbering effect on your rules, try using this formatting tag:

<nowiki> #a #b #c </nowiki>

more options

_____

Modified by delicacy

more options

There is still an issue..

the blue text isn't considered, when not selected, it's black actually..

my blue code: #020944

Modified by delicacy

  1. 1
  2. 2