Change h4 Color

Hello again.

I am trying to change the font color of the h4 text in one of my Home page text widgets. i am using the following CSS in the Widget Styles - Attributes - CSS Styles box:

h4 {
color: #a05a2c;
}

After updating the h4 text does not change, but the body text does. I’ve been messing around with this single change for over an hour. Please help.

My site: www.68meridians.com

doug

Hi,

That CSS box doesn’t work like that. You cannot add selectors, you just add the propriety and it applies it widget-wide. So it won’t help in your case. You need to use a custom CSS plugin to add your code.

I see. Is this something you could help me with or is it too big a job? I already have the Simple Custom CSS plugin with some CSS you provided already in it.

Help you with what exactly? I see you already have the code you need. If you want to target just one widget with your code, then go to Widget Styles - Attributes, add a class there for your widget and then change your code to .yourclass h4 {…}

Does it seem like I know what I’m doing with CSS? I really don’t, I’m just figuring it out as I go along, so please bear with me.

Ok, so in Widget Styles - Attributes I add a class. Does that just mean a name? Say “cat” for example? Or does it have to be something more specific?

Then in Simple Custom CSS I would add a line like this:

.widget-cat h4 {
color:#a05a2c;
}

Correct?

Yeap, you can add any name you want.

It’s not correct. If you add cat then the code would be:


.cat h4 {
   color:#a05a2c;
}

You need to add the exact same word and add a full stop . before it because you’re targeting a class. So cat becomes .cat, horse becomes .horse.

Well it’s not working, so I must be doing something wrong. Here’s what I did:

  • Opened text widget, went to Widget Styles - Attributes - Widget Class.
  • Added class “greybox1”
  • Closed widget and Updated.
  • Opened Simple Custom CSS.
  • Inserted the following into SCCSS:
    .greybox1 h4 {
    color:#a05a2c;
    }
  • Updated Custom CSS.

Any suggestions?

Ah, change it to this:


.greybox1 h4 {
     color:#a05a2c !important;
}

You already had a color: inherit; propriety for that specific widget which is added because you’ve selected a color from the page builder, so you need to overwrite that using !important.

Yes, I see what I did. So I cleared the color selection from page builder and added another line referencing the widget class as follows:

.greybox1 h4 {
color:#a05a2c;
}
.greybox1 p {
color: #ffffff;
}

This accomplished the same thing as what you suggested. I’m happy. Unless you have any further suggestions I will consider this issue resolved.

There’s nothing wrong with that.
One more thing you can do, if you want, is to expand your contact fields so they will look cooler:


.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"] {
    width: 100%;
}

Yes, that does look better. Thanks for the suggestion, and thank you for your help with my problem. Issue resolved.

Hello:) what’s going on dudes? I’ve found some nice funny images and going to share with you people! Look here! so long!


happy new year funny pictures

Funny cats images