Can I target a style with CSS?

support
1

Hi all,

I’m doing very minor usual edits to several styles in one master theme component for our site. This means we don’t have to fork or edit the remote styles without worrying that our edits get swept away on the next update. Thus far my edits have been universal, like changing the like button, etc.

I wanted to know if it was possible to target one exact style from the theme component without affecting the others? Possibly through some data variables?

I don’t want to have to make a separate theme component for something so minor. I like the idea of having one theme component for my universal edits…

2

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.

If this is hard to follow giving a specific example from the component you’re trying to style would help.

7 Likes
3

Thank you so much. That certainly helps.

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?

4

@awesomerobot Also just to remove any confusion, I’m still used to calling full themes, styles because we are still in the process of importing our big board over from another one, but in reference to style, I meant theme, sorry!