userstyle interference
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)
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
It doesn't work, i tried it on the line that affects adblock plus unsuccessfully:
- historyTree treechildren:-moz-tree-row { background: #0080FF !important; }
naturally, "mozilla.org" removed the sign before "historytree"
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..
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.
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.
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.
delicacy trɔe
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; }
jscher2000 - Support Volunteer trɔe
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 ?
delicacy trɔe
You really have no solution to add the same style to the left ?
Other things to do. Can you research it?
The right panel is #contentView, the left panel is #placesList so that should get you going.
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..
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; }
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 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; }
There should NOT be a comma immediately after #placesList in these rules: that creates THREE selectors.
I removed the commas, added current & removed (important) for blue
& everything's perfect :)
thanks a lot
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>
_____
delicacy trɔe
There is still an issue..
the blue text isn't considered, when not selected, it's black actually..
my blue code: #020944
delicacy trɔe