[Trevor MParticipant]

Hello!

I’m in need of using Custom Headlines, in two different colors. I’ve used the Customizer to make the base color white, I’ve even managed to use some custom CSS to add a shadow. However, I have other areas on my site, where I want it to be a different style; a darker grey. How can I accomplish this?

I’m looking at my Content Band (which includes a Custom Headline) in the visual composer, from my edit page, and I see you can put in a Class, and Style. Would this be where I add in come CSS? If so, what would I put here? Please help ASAP.

Thanks!

[KoryKeymaster]

Hey Trevor,

The best thing to do if you’re making changes across multiple headlines throughout your site would be to assign a class to these headlines via the class attribute on the shortcode itself, and then target it with CSS. For example, let’s say this is your alternate heading style, so you might give it a class of alt. You could then use something like the following to target all of these headlines:

.h-custom-headline.alt {
  color: #aaa;
}

You will want to make sure that you’ve added this extra class to the [custom_headline] shortcode itself, and not the [content_band] for the above CSS to work.

Thanks!

[John BParticipant]

Hi Support!

About that last comment you made is that to be applied to each individual page/post or can it be done globally with ‘Customizer’ etc?

If so, how?

As I’m a bit confused when you wrote:
“…
The best thing to do if you’re making changes across multiple headlines throughout your site would be to assign a class to these headlines via the class attribute on the shortcode itself
…”

As I can’t find any shortcode option in ‘Customizer’ (which is where I have been told all global changes are made).

Also the last line was a bit confusing for me, can you clarify a little?

Where and how exactly is the class tag ‘.alt’ applied to an element and also where the class rules for ‘.alt’ are entered/stored?

Very grateful for all your help! 🙂

[KoryKeymaster]

Hey John,

Your particular situation is different from Trevor’s above. We have emailed you a response back on your particular issue and are awaiting your reply. Once you get back with us via email we will be happy to clarify any questions you have regarding your setup.

Thanks!

[Ying-FuParticipant]

Hi Trevor,

Can you send me the CSS you used for the headline text shadow? Been looking for that but can’t really find it 😉

Thanks in advance!

[SupportMember]

Hi there!

Thank you for using the theme!

Please follow the suggestion on the second post above about adding a custom css class for the headings then using it to modify the style of the elements. You can add a shadow with this on Customizer > Custom > CSS:

.h-custom-headline.alt {
  color: #aaa;
  text-shadow: 2px 2px #000000; 
}

I hope that helps.

[Author]

Posts