[osman.ryanParticipant]

Hello,

I’m wanting to adjust the style of my header / h1 to match the look of the site logo (I’d like the gray gradient look). I have no idea how to do this.

Note; I believe I have some custom code added (somewhere?) that is causing all of my h1s to look the same. This was added to make the text smaller on mobile / tablet but I feel like it’s limiting what I can do. If you run into this, please advise where it’s located and how it’s affecting me here.

woodtradeinternational.com

Looking forward to hearing back.

[Nabeel AModerator]

Hi there,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

h1 {
   background: -webkit-linear-gradient(#eee, #333) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

Let us know how this goes!

[osman.ryanParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

It’s because you have extra close bracket where you added it.

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-size: 29px;
}
}

h1 {
   background: -webkit-linear-gradient(#eee, #333) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

Should be like this,

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-size: 29px;
}

h1 {
   background: -webkit-linear-gradient(#eee, #333) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

Cheers!

[osman.ryanParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

This code:

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-size: 29px;
}

makes all the heading tags of the same font size. If you want to have them in different sizes, please use this instead:

h1, .h1 {
  font-size: 30px;
}

h2, .h2 {
  font-size: 28px;
}

h3, .h3 {
  font-size: 26px;
}

h4, .h4 {
  font-size: 22px;
}

h5, .h5 {
  font-size: 18px;
}

h6, .h6 {
  font-size: 14px;
}

Hope this helps.

[osman.ryanParticipant]

Hello,

I updated the CSS however the font sizes still did not change?

-Ryan

[NicoModerator]

Hi There,

Upon checking your setup, the font sizes is working well.

Would you mind sharing us a screenshot of what font sizes or what texts that is not working.

Thanks.

[osman.ryanParticipant]

Hello,

I see that the sizing does indeed work now. Thanks.

Another question: Is there a code I can place on certain pages where I don’t want the H1 tag to be shaded. For example, all of my WooCommerce pages. The code a previous support agent provided me is provided below which works great but applies to all pages currently.

h1 {
background: -webkit-linear-gradient(#eee, #333) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}

Thanks

[NicoModerator]

Hi There,

You could try adding the page class or id for example.

.page-id-1 h1{
background: -webkit-linear-gradient(#eee, #333) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}

To determine the page id you could try using broswer inspect then check the class of body. or check the link below.

How to Locate Post IDs

Hope it helps.

Thanks.

[osman.ryanParticipant]

Hello,

I’m sorry, but that’s a bit confusing to me.

Instead, can I simply remove the original tag [below] from the “Global CSS” and add it to pages individually? If so, how would I do this?

Thanks so much

h1 {
background: -webkit-linear-gradient(#eee, #333) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}

[osman.ryanParticipant]

Upon further investigation, I understand what you’re saying. That said, I’m not clear about how to find the “page ID”.

[osman.ryanParticipant]

I realize I am posting too many questions and I apologize for that. However, you can ignore the previous questions and answer this final questions:

Am I able to add the “gradient” css code to only certain elements. For example, I’m only wanting this to happen on the header text of certain pages. Since it’s applying to all H1 text currently it’s happening in places that I don’t want it.

Being able to control this feature at the element level would solve all of my problems here.

Thanks

[ChristopherModerator]

Hi there,

Please add a custom class to your headline, like my-headline and add following code :

.my-headline h1{
background: -webkit-linear-gradient(#eee, #333) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}

Hope it helps.

[osman.ryanParticipant]

Thank you so much!!!

[Author]

Posts