md-mention2reply CSS Questions

[hollow wadi]

It looks like your selector is wrong as it is returning null.

I just installed SWADE real quick to help you out, and the only thing I can find for this selector is on the actor sheet here (see img). If that's the case, then you are hooking onto the wrong hook. You'll want to change the hook to Hooks.on("renderActorSheet").

@crude musk ^

[crude musk]

Hooks.on('renderActorSheet', function() {
  if (true) {
      console.log('========================')
      console.log('========================')
      console.log('========================')
      console.log('========================')
    const el = document.querySelector(".swade-official .branding img");
    el.classList.add(".brand-free")
  }
});

The is no error anymore

But, It's not working either

I tried ".swade-official .branding img" and ".swade-official .branding"

[hollow wadi]

Do you see the four lines of equals signs?

[crude musk]

Yes

[hollow wadi]

Interesting. If you put document.querySelector(".swade-official .branding img"); in the console, do you get anything back?

[hollow wadi]

Additionally, I'm assuming the definition of .brand-free is display: none, so inspect the element and see if you can still spot your rule. If you see your display: none but it's grayed out than your selector needs to be more specific. Check what rule(s) are applying, and see if you basically copy their selector.

In CSS the most specific rule will "win".

[crude musk]

.brand-free {
display: none;
}

[hollow wadi]

Yeah, I imagine it's specificity of the rules then.

[crude musk]

It's adding the brand-free, but it's not doing anything

[hollow wadi]

That's because their rule is more specific than yours. Try something like:
.swade-official.sheet.actor .branding img

[crude musk]

I tried it too.

The annoying part is that Custom CSS module works

.swade-official .branding {
display: none !important;
}

If I add this to it. Done

[hollow wadi]

Maybe that one isn't specific enough since it's still just 3 objects. Try
.swade-official.sheet.actor .window-content .main-grid .branding img.

Yeah, !important overrides the specificity requirement, but it doesn't play nice with other modules.

[crude musk]

No success

[limber harness]

I don't think that using a class is the right thing to do here. I would add it directly as an attribute and that will give it priority over the system:

Hooks.on("renderActorSheet", (app, html) => {
  html[0].querySelector(".branding img").style.display = "none";
});

If that still doesn't work, you could remove the element completely instead:

Hooks.on("renderActorSheet", (app, html) => {
  html[0].querySelector(".branding img").remove();
});

[crude musk]

worked