unexpected behaviour fro entry in userChrome.css
I inserted a modified stretch of css code into userChrome.css.
The initial code came from an example found somewhere here.
It is intended to customise the Tag colours, inverting them so that the backgrounds are solid and the foreground text either black or white.
It appeared to work until I discovered that only for alternate rows.
However, the default untagged rows are coloured alternately albeit faintly. I am guessing that the bits of code are interacting.
Unfortunately I know virtually nothing as how css code works and cannot find a source specifically detailing the code components for thunderbird.
Can anyone recommend a source of info?
TIA
All Replies (7)
It will help if you post the code from userControl.css. Please also be specific in what you want to achieve. For example, are you wanting each tag to have a different background color and associate font color? Or are you wanting just alternating colors for rows?
The screenshot shows how tagged non-adjacent rows appear. If adjacent rows are tagged the text of the second is unreadable.
The code for the labels is as follows: /****************************************************************
* Experimental label 1 code RED ***************************************************************/
treechildren::-moz-tree-row(T_24label1) {
border-bottom: 1px solid #FFFFFF !important; background-color: #FF0033 !important; /* Crimson */
}
treechildren::-moz-tree-cell-text(T_24label1) {
color: #FFFFFF !important; /* White */
}
treechildren::-moz-tree-row(T_24label1, selected) {
background-color: #b71c1c !important; /* Also crimson */
}
treechildren::-moz-tree-cell-text(T_24label1, selected) {
color: #00FF00 !important; /* Green */
}
/****************************************************************
* Experimental label 2 code AMBER ***************************************************************/
treechildren::-moz-tree-row(T_24label2) {
border-bottom: 1px solid #FFFFFF !important; background-color: #FFC125 !important; /* Golden Rod 1 */
}
treechildren::-moz-tree-cell-text(T_24label2) {
color: #000000 !important; /* Black */
}
treechildren::-moz-tree-row(T_24label2, selected) {
background-color: #FFEC8B !important; /* Also amber */
}
treechildren::-moz-tree-cell-text(T_24label2, selected) {
color: #FF0033 !important; /* Crimson */
}
/****************************************************************
* Experimental label 3 code GREEN ***************************************************************/
treechildren::-moz-tree-row(T_24label3) {
border-bottom: 1px solid #FFFFFF !important; background-color: #008B00 !important; /* Green */
}
treechildren::-moz-tree-cell-text(T_24label3) {
color: #000000 !important; /* Black */
treechildren::-moz-tree-row (T_24label3, selected) {
background-color: #98FB98 !important; /* Also green */
}
treechildren::-moz-tree-cell-text(T_24label3, selected) {
color: #FF0033 !important; /* Crimson */
}
/****************************************************************
* Experimental label 4 code BLUE ***************************************************************/
treechildren::-moz-tree-row(T_24label4) {
border-bottom: 1px solid #FFFFFF !important; background-color: #00008B !important; /* Blue */ #00008B
}
treechildren::-moz-tree-cell-text(T_24label4) {
color: #000000 !important; /* Black */
}
treechildren::-moz-tree-row(T_24label4, selected) {
background-color: #3A5FCD !important; /* Royal blue 3 */
}
treechildren::-moz-tree-cell-text(T_24label4, selected) {
color: #00008B !important; /* Blue */
}
/****************************************************************
* Experimental label 5 code (Later) INDIGO ***************************************************************/
treechildren::-moz-tree-row (T_24label5) {
border-bottom: 1px solid #FFFFFF !important; background-color: #DA70D6 !important; /* Indigo */
}
treechildren::-moz-tree-cell-text(T_24label5) {
color: #000000 !important; /* Black */
}
treechildren::-moz-tree-row(T_24label5, selected) {
background-color: #EED2C3 !important; /* Also Indigo */
}
treechildren::-moz-tree-cell-text(T_24label5, selected) {
color: #FF0033 !important; /* Crimson */
}
/****************************************************************
* Experimental label 6 code (Fun) MAGENTA ***************************************************************/
treechildren::-moz-tree-row (T_24label6) {
border-bottom: 1px solid #FFFFFF !important; background-color: #D8B008B !important; /* MAGENTA */
}
treechildren::-moz-tree-cell-text(T_24label6) {
color: #FFFFFF !important; /* White */
}
treechildren::-moz-tree-row(T_24label6, selected) {
background-color: #FFE4E1 !important; /* Pale Mauve */
}
treechildren::-moz-tree-cell-text(T_24label6, selected) {
color: #FF0033 !important; /* Crimson */
}
/****************************************************************
* End of experimental label code ***************************************************************/
Thank you for helping me.
I don't see any problems. Untagged, the rows alternate, and when I tag adjacent rows, they are still readable. What am I missing?
Sorry for the delay, your message did show up on my cellphone but not on my computer. It took me a while to trace back.
I suspect (guessing) that the reason that you cannot reproduce the problem is to do with other code in the userChrome.css file that interacts with the section that I posted. I was hesitant to post the contents of the complete file!
Is there a way to do this without clogging up these posts?
I suggest you consider closing this thread and opening a new one with more info and example of the code you think may be in conflict. I am not knowledgeable on CSS to any degree and there are some experts on the forum. I encourage referencing userchrome.css in the title. Good luck and I hope I was of some help in at least confirming that what you posted works very well.
O.K. Thank you.
Thanks. Please mark this closed so it can be removed from open topics.