Can I target a style with CSS?

[TheDarkWizard]

@awesomerobot

Yes, you can usually rely on specificity within CSS. If you’re unfamiliar with CSS it boils down to: If you have a bunch of styles targeting the same element, the more specific style will win.

<div class="custom-container"
  <a class="custom-link">link here</a>
</div>

So what you’ll want to look for is whether or not the element (or a parent element) in the component you’re trying to change has a unique class somewhere… something like:

From the example above either .custom-link or if there’s no direct class on the element, utilizing the parent like .custom-container a . If the component has the style originally defined as .custom-link you can ensure it’s overridden by more specifically targeting a.custom-link .

If there isn’t a unique class somewhere in the component, you should also be able to use the plugin outlet container. When a plugin outlet is used in a customization there’s a custom class added to the container. Using the example of styling a link again, that might look something like .above-site-header-outlet.brand-header a where “brand-header” is the name of the template added from the component.

Worst case, you can also ask the person that created the component to add a class if you can’t find an easy way to style what you need.

Thank you so much. That certainly helps.

@awesomerobot

specific example from the component you’re trying to style would help.

As an example, I have instances of Graceful installed. A graceful theme for Discourse which I now realize you published as a continuation of a previous style.

In my universal theme component, I’ve done things like upload background assets, change the like button and a few other things but I’ve realized that I want to change the background color in the one using the dark pallete with what ever I want without affecting the one using the light pallete.

To be exact this:

background-color: $primary-very-low;

Now, I want to do as much as possible in one theme component since its technically the same style, until little things like this started to come up, that were not universal changes. I don’t want to have to make a “Dark” component and a “Light” component if possible.

The goal here is to leave graceful alone apart from palete alterations and do everything from our own component, so that when you or someone else pushes an update to them, we don’t have to keep reapplying our edits.

I noticed that Discourse is big on variables which I love, reading through the theming guides has been a treat. I noticed things like [data-topic-id=“117”] exist, so maybe something like [data-theme-id] can be pitched?