Changing H2 color

[Sala]

Hi sudonix,
On our website, we have a class as shown in example:

<div class="bs-blog-post list-blog">
<article class="small col text-xs">
<h2 class="title"><a href="https://sopriza.com/eating-live-monkey-brain-meals/">Eating live monkey brain meals</a></h2>

We’re looking to change the color for h2 headings in bs-blog-post list-blog without affecting the h2 on widgets. What css should we use?

Blog list can be found on frontpage.

[phenomlab]

@Sala Just checked your site. This should work

.bs-blog-post .title, .bs-blog-post .title a {
    color: #ffffff;
}

It’s worth noting the existing CSS, which uses variables like the below

color: var(--head-color);

These come under the :root section as below

:root {
    --head-color: #212121;
    --stext-color: #000;
    --text-color: #718096;
    --wtext-color: #fff;
    --bg-color: #fff;
    --box-color: #fff;
    --border-color: #e2e8f0;
    --wrap-color: #eff2f7;
}

You can easily override these by using the CSS I provided at the top of this post, or you can change the underlying colours defined in the variables. However, taking this route may mean other objects are styled in the same way, which may not be the desired result.

[phenomlab]

@Sala you could probably use

.bs-blog-post h2

[Sala]

@phenomlab i tried to use

.bs-blog-post h2 {
color: #fff;
}

But not yet taking effect. Could i be missing something?

[phenomlab]

@Sala said in Changing H2 color:

.bs-blog-post h2 {
color: #fff;
}

Try

.bs-blog-post h2 {
color: #fff !important;
}

[phenomlab]

@Sala Just checked your site. This should work

.bs-blog-post .title, .bs-blog-post .title a {
    color: #ffffff;
}

It’s worth noting the existing CSS, which uses variables like the below

color: var(--head-color);

These come under the :root section as below

:root {
    --head-color: #212121;
    --stext-color: #000;
    --text-color: #718096;
    --wtext-color: #fff;
    --bg-color: #fff;
    --box-color: #fff;
    --border-color: #e2e8f0;
    --wrap-color: #eff2f7;
}

You can easily override these by using the CSS I provided at the top of this post, or you can change the underlying colours defined in the variables. However, taking this route may mean other objects are styled in the same way, which may not be the desired result.