Aviator: how to override the text color of one heading style?

Hi. I am using the Aviator template, and it allows for styling all three headings (h1, h2, h3) as different fonts and sizes, however, it will only allow for all three to be the same color. Does anyone know how to override this, so that I can have one heading be a different color than the other heading styles?

Thanks!! :)

Sure, if you add this CSS to your custom CSS section, it should do the trick:

h2 { color: red !important; }

oh so simple! thanks so very much. it's the little things that I get hung up on.

Hi! So this worked for me, but I would like to make it page specific. For instance have my home page and about page have green h1 text, and then make my work page h1 white text. However when I input the CSS it obviously changes all h1 headers to white. Any quick fix to be page specific?

Hi! So this worked for me, but I would like to make it page specific. For instance have my home page and about page have green h1 text, and then make my work page h1 white text. However when I input the CSS it obviously changes all h1 headers to white. Any quick fix to be page specific?

@mhossey

Yeah, instead of adding the CSS to your custom CSS section, add it to your 'Page Settings' > 'Advanced' > 'Page Header Code Injection' area (of the page you want the CSS to apply to)

But, you have to wrap the CSS in a style tag, like this:

<style>
 h2 { color: red !important; }
</style>

Do that on the page(s) where you want a different h2 color and change the color to whatever you want on each page.

@kale I tried that and the text color doesn't change. I have my page setup as an index page - not sure if that makes a difference?

I clicked on the gear icon on my work page > advanced > code injection, and then placed it in the header

Hmm, try adding it to the actual specific pages that you want it to affect, and see if they change when in the index page. Think of an index page as just showing multiple pages in a list, so I think the style(s) of each page are probably retained.

So, if you want the 3rd section of your index to have red h2, go to that page, go into the 'advanced' > 'page header' and put the style tags and css on that page, then see if it applies when viewing on the index.

Thanks for the advice, I tried that too and no dice

Thanks for the advice, I tried that too and no dice