Edit title and quote style

Hello everyone,

I’m using London theme and I can successfully change the font with code injection, but somehow I can’t change the color no matter what I type. My code is:

h1 { font-family: ‘Metropolis’;
font-weight: bold;
font-style: normal;
color: #2D3730;
}

If the font is in fact changing I assume my code is right. Am I missing something related to color? Are there some things in CSS that prevent to change the style via code injection? Because I’ve noticed this behavior with other themes (liebling) changing other styles (like quotes).

Thank you.

Hi, the easiest solution for this to use !important which will override the associate style

EG

h1 { font-family: ‘Metropolis’;
font-weight: bold;
font-style: normal;
color: #2D3730 !important;
}
1 Like

That’s because of CSS Specificity. Color is already set to the element using the .post-content-title class. So, when you try to change the color using h1 which has a less degree in Specificity compared to the class, no effects will happen. Therefore, .post-content-title will win. Like the following screenshot.

To solve this, use the .post-content-title instead of h1.

.post-content-title {
  font-family: ‘Metropolis’;
  font-weight: bold;
  font-style: normal;
  color: #2D3730;
}
2 Likes

That was exactly the problem, and thanks to your screenshot I knew what to look for when changing also the h2 and the menu color.

Thank you!

3 Likes

I forgot about the !important value. This also solves the problem.

Thank you.

1 Like