X
Tap here to go to the mobile version of the site.

Support Forum

userstyle interference

Posted

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 ?

Additional System Details

Installed Plug-ins

  • NPRuntime Script Plug-in Library for Java(TM) Deploy
  • Shockwave Flash 21.0 d0
  • Next Generation Java Plug-in 11.66.2 for Mozilla browsers
  • 5.1.40728.0

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.2; rv:38.9) Gecko/20100101 Goanna/2.0 Firefox/38.9 PaleMoon/26.1.1

More Information

jscher2000
  • Top 10 Contributor
8637 solutions 70651 answers

Helpful Reply

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

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

Helpful Reply

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

  1. historyTree treechildren:-moz-tree-row { background: #0080FF !important; }
It doesn't work, i tried it on the line that affects adblock plus unsuccessfully: #historyTree treechildren:-moz-tree-row { background: #0080FF !important; }

Question owner

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

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

Question owner

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..

this seemed to work: #bookmarks-view, #historyTree treechildren:-moz-tree-cell-text { color: #020944 !important; } #bookmarks-view, #historyTree treechildren:-moz-tree-cell-text(selected) { color: #FFFFFF !important; } #bookmarks-view, #historyTree treechildren:-moz-tree-row(selected) { background: #0080FF !important; } #bookmarks-view, #historyTree treechildren:-moz-tree-row(focus, selected, current), #bookmarks-view, #historyTree treechildren:-moz-tree-row(focus, selected, odd), #bookmarks-view, #historyTree treechildren:-moz-tree-row(focus, selected, even) #bookmarks-view, #historyTree treechildren:-moz-tree-row { background: #0080FF !important; } #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..
jscher2000
  • Top 10 Contributor
8637 solutions 70651 answers

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.

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 -- <blockquote> this seemed to work: <br><br> #bookmarks-view, #historyTree treechildren:-moz-tree-cell-text { color: #020944 !important; } </blockquote> -- 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.
cor-el
  • Top 10 Contributor
  • Moderator
17416 solutions 157356 answers

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.

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. *https://developer.mozilla.org/Mozilla/Tech/XUL/Tutorial/Styling_a_Tree

Question owner

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.

Now i have this for the library window: #contentView .tree-bodybox { background-color: #FFFFFF !important; } #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

jscher2000
  • Top 10 Contributor
8637 solutions 70651 answers

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

Question owner

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 ?

Yes, it worked with "important", i used the second version: #contentView .tree-bodybox { background-color: #FFFFFF !important; } #contentView treechildren::-moz-tree-cell-text(selected) { color: #ffffff !important; } #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

jscher2000
  • Top 10 Contributor
8637 solutions 70651 answers
You really have no solution to add the same style to the left ?

Other things to do. Can you research it?

<blockquote> You really have no solution to add the same style to the left ? </blockquote> Other things to do. Can you research it?
jscher2000
  • Top 10 Contributor
8637 solutions 70651 answers

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

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

Question owner

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..

Strangely, this leaves the left panel background entirely blue.. #placesList, #contentView .tree-bodybox { background-color: #FFFFFF !important; } #placesList, #contentView treechildren::-moz-tree-cell-text(selected) { color: #ffffff !important; } #placesList, #contentView treechildren::-moz-tree-row(selected) { background-color: #2673c1 !important; } when it should be white..

Question owner

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

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] #bookmarks-view, #historyTree treechildren::-moz-tree-cell-text { color: #020944 !important; } #bookmarks-view, #historyTree treechildren::-moz-tree-cell-text(selected) { color: #FFFFFF !important; } #bookmarks-view, #historyTree treechildren::-moz-tree-row(selected) { background: #0080FF !important; } #bookmarks-view, #historyTree treechildren::-moz-tree-row(focus, selected, current), #bookmarks-view, #historyTree treechildren::-moz-tree-row(focus, selected, odd), #bookmarks-view, #historyTree treechildren::-moz-tree-row(focus, selected, even) #bookmarks-view, #historyTree treechildren::-moz-tree-row { background: #0080FF !important; } #bookmarks-view, #historyTree treechildren::-moz-tree-image { width: 0 !important; } #placesList, #contentView .tree-bodybox { background-color: #FFFFFF !important; } #placesList, #contentView treechildren::-moz-tree-cell-text(selected) { color: #ffffff !important; } #placesList, #contentView treechildren::-moz-tree-row(selected) { background-color: #2673c1 !important; } [/code]
jscher2000
  • Top 10 Contributor
8637 solutions 70651 answers

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.

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: <blockquote> <pre>#placesList, #contentView treechildren::-moz-tree-row(selected) { background-color: #2673c1 !important; }</pre> </blockquote> 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: <pre>#placesList '''treechildren::-moz-tree-row(selected)''', #contentView treechildren::-moz-tree-row(selected) { background-color: #2673c1 !important; }</pre> Et cetera.

Question owner

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; }
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 .. . #placesList, .tree-bodybox, #contentView .tree-bodybox { background-color: #FFFFFF !important; } #placesList, treechildren::-moz-tree-cell-text(selected), #contentView treechildren::-moz-tree-cell-text(selected) { color: #ffffff !important; } #placesList, treechildren::-moz-tree-cell-text, #contentView treechildren::-moz-tree-cell-text { color: #020944 !important; } #placesList treechildren::-moz-tree-row(selected), #contentView treechildren::-moz-tree-row(selected) { background-color: #2673c1 !important; }
jscher2000
  • Top 10 Contributor
8637 solutions 70651 answers

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

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

Question owner

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

& everything's perfect :)

thanks a lot

I removed the commas, added current & removed (important) for blue & everything's perfect :) thanks a lot
jscher2000
  • Top 10 Contributor
8637 solutions 70651 answers

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>

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><nowiki> #a #b #c </nowiki></nowiki>

Question owner

_____

_____

Modified by delicacy

Question owner

There is still an issue..

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

my blue code: #020944

There is still an issue.. the blue text isn't considered, when not selected, it's black actually.. my blue code: <nowiki> #020944</nowiki>

Modified by delicacy