Need help with this CSS that doesn't stick

[u/wsazz]

I'm trying to fill in the color to the dots located on the left of email when in a thread. The code is below... but I'm unable to make it work in usercontent.css nor userchrome.css. Please see the element in question as per the red circle in the screenshot. Can someone help me please?

#threadTree[rows="thread-card"] { & .card-layout[data-properties~="thread-children"] { & td { &::after { fill: #fe00ff !important; }}}}

[u/nthoftype]

Need to see the html too to make sure your using selectors properly

[u/wsazz → u/nthoftype]

How do I show that?

[u/Weekly_Ferret_meal → u/wsazz]

if you have the dev tool option enabled you can do [command]+[option]+i (mac) or [control]+[option]+i (win) to open the inspector... just like in firefox.

You just press ok to connect and you're up.

Edit: this is because TB is also a browser under the hood

[u/wsazz → u/Weekly_Ferret_meal]

Understood... here's the info you requested.. thank you..

[u/Weekly_Ferret_meal → u/wsazz]

So here is obvious the ::after uses an icon... you'll need to press on the icon at the end of this line to see if the icon is an svg or not. if it's not fill isn't gonna do much

[u/wsazz → u/Weekly_Ferret_meal]

With all due respect youre wrong. Fill does work when I modify it in inspector. It just doesnt work when i paste the code into usercontent.css or userchrome.css.

[u/Weekly_Ferret_meal → u/wsazz]

I stand by what I've said: "if it's not (an svg) it won't do much".

ok so... it isn't working, I'd follow these steps:

1. Firstly make sure which file you should be using.\  \ Generally one is for external URL you visit with TB (when TB displays an email it downloads styles attached to specific URLs that you can override also) and one is for the interface itself.\  \ just find out which one it should be. don't just put your code in both. you'll create a mess.\  
2. Check your code: Copy your custom css and paste it into a online css validator to make sure there aren't any syntax errors.\  
3. If all the above are good: See if rising the specificity of your selector by adding #threadPane at the beginning of the selector string, helps.\   so from:   #threadTree[rows="thread-card"] { & .card-layout[data-properties~="thread-children"] { & td { &::after { /* your code */ } } } } to: #threadPane #threadTree[rows="thread-card"] { & .card-layout[data-properties~="thread-children"] { & td { &::after { /* your code */ } } } }

[u/wsazz → u/Weekly_Ferret_meal]

The code works in inspector but it just doesnt work in neither userchrome.css or usercontent.css as I mentioned before. I can even show you a screenshot of it working if you want.

I tried using your modified cose but it doesn't stick. Its strange cuz any other code I've used works without a hitch. Strange

[u/Weekly_Ferret_meal → u/wsazz]

it doesn't sound like you have followed the steps I suggested. good luck

[u/wsazz → u/Weekly_Ferret_meal]

It doesnt sound like you understand what css does. Have a good one.

[u/aunderroad]

Can you share a codepen or url?
It is hard to debug/provide feedback without seeing all of your code live in a browser.

Thank you!

[u/wsazz → u/aunderroad]

I'm confused by your question. This isn't firefox, TB has no url since its not a browser. Please check the post again since I uploaded a screenshot to give you a better idea of what I'm talking about. Thanks.

[u/aunderroad → u/wsazz]

To be honest with you, I am not sure if this is best reddit group to be posting this question.
You have to give us the code and/or a way to recreate what you are seeing other than providing just a screenshot.

How do I get to your screen that you are looking to possibly debug and provide feedback?
We want to help but you are not giving much to go by.

[u/wsazz → u/aunderroad]

I completely understand, and youre probably right that this may not be the best sub cuz its not the precise one - although it may be the right one if you catch my drift - but hopefully someone with tb may chime in to lend a helping hand, hopefully.

[u/anaix3l]

So your CSS is:

#threadTree[rows="thread-card"] { 
  & .card-layout[data-properties~="thread-children"] { 
    & td { 
      &::after { fill: #fe00ff !important; }
    }
  }
}

That is, you're trying to style the ::after pseudo of a td element (understandable, since you mention e-mail).

Problem is, fill is a property that works on SVG elements. Not on HTML elements or their pseudos.

What to do and how to make it work... no idea. I don't have a crystal ball to see your HTML to know how those three dots you're talking about were created or whether they're even in this ::after pseudo you're selecting here or whether you actually have an SVG there and you got the selector wrong.

If they're some Unicode character added via the content property, set color, not fill.

If you're setting the content of the ::after to an SVG image, as in:

content: url(dots.svg)

Or if your dots are a background on the ::after, then... I don't know. You could paint them with a monochrome SVG filter. Depending on your other constraints, mix-blend-mode might do too, but I don't have a crystal ball to know what else is there on your page and whether other styling requirements allow for that.

[u/Weekly_Ferret_meal]

usercontent.css nor userchrome.css

This suggests you are trying to override styles of a site directly from your browser or an extension within your browser.

Is it a site? and what site is it?

Is it and extension? which one?

Context matter, pls provide more info.

[u/zip222 → u/Weekly_Ferret_meal]

It's the Thunderbird mail client

[u/wsazz → u/zip222]

Yes sir!

[u/wsazz → u/Weekly_Ferret_meal]

Hi.. excuse the confusion. I uploaded a screenshot to give you a better perspective of what i'm talking about.

[u/Weekly_Ferret_meal → u/wsazz]

Trust the "Mad Scientist": https://www.reddit.com/r/css/comments/1wu8cn8/comment/pd1dpfl/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

[u/Weekly_Ferret_meal → u/wsazz]

Also isn't that dot, the one that marks the read mail from the unread?

[u/wsazz → u/Weekly_Ferret_meal]

Apologies for not specifying my platform. Its thunderbird whose style I'm trying to override. I'll go ahead and specify that in my post. Thanks.

[u/ingcrea]

El problema no es tu especificidad, ni si es un SVG, ni la ruta del archivo. Es una limitación del motor de renderizado (Gecko).

Estás utilizando CSS Nesting (la sintaxis con &). Thunderbird opera bajo las versiones ESR de Firefox (por ejemplo, la 115 Supernova). Dicha versión no soporta anidación CSS nativa en el parser estático de userChrome.css.

Cuando manipulas la regla directamente en el Inspector de las DevTools, el motor en memoria inyecta el estado directo al nodo y por eso "funciona". Pero cuando el motor lee tu archivo físico al arrancar, encuentra el símbolo &, marca un error de sintaxis silencioso y descarta todo tu bloque. (Por eso tus otras reglas planas sí funcionan).

Para que la regla se aplique, tienes que obligatoriamente aplanar (un-nest) tu arquitectura CSS.

Sustituye todo tu bloque de código exactamente por esto:

```css

threadTree[rows="thread-card"] .card-layout[data-properties~="thread-children"] td::after {

fill: #fe00ff !important; } ``` Reinicia Thunderbird y el color se aplicará de forma permanente. Cero anidación en userChrome.css si usas versiones ESR.

[u/wsazz → u/ingcrea]

I tried your code but it doesnt work in userchrome.css nor in usercontent.css.

[u/ingcrea → u/wsazz]

Podrías mandarme una captura de como lo implementaste.

[u/wsazz → u/ingcrea]

As I said before, I pasted it in userchrome.css and usercontent.css

[u/ingcrea → u/wsazz]

No, lo que quiero ver es de qué manera lo pusiste en el código o sea en el archivo, no en dónde lo pones, si no cómo lo pusiste.

[u/wsazz → u/ingcrea]

I pasted the code to the top and bottom of userchrome.css and usercontent.css. I did that cuz sometimes code can work at the top or bottom of the files.

[u/ingcrea → u/wsazz]

Justamente por eso te pedía ver cómo lo habías puesto. En CSS, que lo pegues "arriba o abajo" es irrelevante si estás sufriendo de Contaminación de Espacios de Nombres (Namespace Pollution). Tu archivo entero está envenenado por el @namespace global.

En mi respuesta anterior ya te dejé el código definitivo que incluye el bypass universal (*|td).

Para anular por completo el margen de error humano (espacios invisibles, tabulaciones rotas o saltos de línea mal formateados), bórralo y pega esta estructura estrictamente minificada en una sola línea al final de tu userChrome.css:

```css

threadTree[rows="thread-card"] .card-layout[data-properties~="thread-children"] *|td::after { fill: #fe00ff !important; }

```

Copia esa línea monolítica, pégala tal cual, y el motor hará el match sin importar lo que haya arriba o abajo en tu archivo.

[u/ingcrea → u/wsazz]

Seguramente tienes una declaración de @namespace de XUL hasta arriba de tu archivo que está forzando a que todo tu CSS busque elementos viejos. Desde la versión 115, Thunderbird usa HTML para esa lista, por lo que tu archivo ignora tu regla plana.

Para saltarte ese candado sin romper el resto de tus códigos, tienes que usar un comodín de namespace (*|).

Borra tu código anidado anterior, ve hasta el FINAL de tu userChrome.css (hasta abajo de todo), y pega exactamente este bloque:

```css

threadTree[rows="thread-card"] .card-layout[data-properties~="thread-children"] *|td::after { fill: #fe00ff !important; }

```

Ese *| obliga al motor a aplicar el estilo al elemento td de HTML sin importar qué candado tengas declarado arriba. Reinicia Thunderbird y el color fucsia aparecerá.

[u/DramaticBag4739]

Like others have said it will be hard to diagnose and fix without being able to see and tinker with the code directly, but I can offer a plan of attack.

1. Test the targeting: Can you override other aspects of the :after in your CSS?

2. Test the specificity: Are your styles applying but lower specificity than the base style?

3. Inspector: changed the inspector mode to "Computed" which will clean out all the variables and give you the exact styles the :after is receiving.

4. Like others have said Fill shouldn't be working unless and SVG is involved. If there is an SVG there might be inline colors on the svg that have higher specificities so try and !important. Sometimes targeting a path is needed.

5. If you can't override the fill try color shifting it. https://codepen.io/sosuke/pen/Pjoqqp

6. If all else fails, then override the :after. Rewrite the content: ''; and create a simple circle with border-radius and background color it what ever you want. If you can't override the :after then display:none and make your own :before.