Change widget title to italics

Hi there,

I would like to make one of my widget titles to be italic. When I apply any codes (I’ve tried many!) to the widget attribute css, nothing changes.

URL: http://whothebook.wpengine.com/
Title: ‘Who: The A Method for Hiring’

Here are a couple of the options I’ve tried -
h3.widget-title {
style: italic !important;
}

#pgc-220-0-0. widget-title {
style: italic !important;
}

++ a bunch of other variations.

Don’t worry, I searched high and low on the forum for similar questions/answers, to no avail.

Your help is appreciated. Thanks.

Hi,

You can make the widget title italic only on that panel with this Custom CSS:

#panel-220-0-0-0 .widget-title {
    font-style: italic !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba,

Unfortunately, the CSS you suggested didn’t work. Any other ideas?

Thank you!
Jess

Hi,

The Custom CSS I gave you isn’t applied on your site, please add the Custom CSS to the first line of your Additional CSS field and clear your cache. If it still won’t work, please make sure to don’t remove the Custom CSS from the field where you applied, so I can check why it doesn’t work if it’s in the field correctly and the cache is cleared.

Kind Regards,
Csaba

Hi,

Sorry about that. After I tried your suggestion and saw that it didn’t work, I tried a few others CSS codes. I’ve put your Custom CSS back in the ‘Attributes’ > ‘CSS styles’ section of my page builder and cleared the cache.

FYI - I’ve left the ‘Widget ID’ and ‘Widget Class’ sections blank under Attributes.

Thank you!
Jess

Okay, never mind. I added the Custom CSS code to the Additional CSS section, and it worked well! Sorry, I didn’t realize that was a completely different section.

But just curious, what the heck is the ‘Attributes’ > ‘CSS styles’ section of my page builder used for then??

Hi,

The Attributes > CSS Styles is used to style elements inside that widget / row, but the Custom CSS you would get from Support will always be the one to put in Additional CSS, so if you would like to add the CSS to only affect that widget it will look like this:

.widget-title {
    font-style: italic !important;
}

so the ID have to be removed which makes it to apply to that widget, adding together with the ID it won’t work in CSS Styles.

Kind Regards,
Csaba

Awesome, thank you for clarifying and for all your help.

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Kind Regards,
Csaba