Class in Widget Area

[tongassfcu]

I’m trying to add a class to a text widget and then use the Class Widget Element to add that widget to my homepage. I’ve tried a lot of things and am just not having luck getting the text right with the class.

I started by adding a class to the widget element with no luck, so now I have a Plugin installed “Widget CSS classes.” I’ve added rates as the class and then in my Global CSS, I’ve added:

.rates {
font-family: Proza Libre,sans-serif; !important;
font-size: 36px; !important;
font-style: normal; !important;
font-weight: 700; !important;
line-height: 1.4; !important;
letter-spacing: -0.05em; !important;
color: #ffffff; !important;
}

Can you tell me what I need to fix?

[nabeel]

Hi @marketinglaura,

Thank you for reaching out to us. The simplest way to give your Text widget a class is by wrapping your content in an HTML tag e.g <div></div> tag and give it a class instead. For example, first add the Text Widget, switch to the Text Editor and wrap your content with <div class="rates"></div>:

<div class="rates">
Your content goes here..!
</div>

An alternative approach you can use is to get the widget ID by inspecting your Text widget in Chrome’s Inspect element tool:

Now you can use the #text-3 selector to style your widget. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

Hope this helps!

[tongassfcu]

Thanks for the help. I had tried both of these but not together. And it’s working now but only if I do both of fixes, wrap the text in a div and apply a class and also use the id of each widget. I’m confused why it needed both of those to work though. Any insight would help, I’d love to understand that more. Thanks!

[friech]

Hi @marketinglaura,

Probably there is a syntax error somewhere on your custom CSS. You can use this tool to check your entire custom CSS and make sure there are no errors on it.

In fact, the custom CSS you posted above alone generated 7 errors, which are the semicolon that you added on the value, it should only one semicolon per property value (line).

More details here.

Cheers!