Footer widgets spacing + headline color

[KimAnn]

Hello-
with the new wordpress widget blocks it seems more difficult to find the CSS to edit widgets.

In our footer i would like to change the color of the Widget Header and also reduce the space between the header and the text.
https://elevate-well.com/yoga-teachers-schedule/

Please advise thank you

[ruenel]

Hello @KimAnn,

Thanks for writing in!

The headings including the one that you have in the footer widgets are getting the styling from Cornerstone > Theme Options > Globals > Typography > Headings. At the moment, the color is #c7c8ca. If you want to change the color of the widget headlines, you will need to use custom CSS.

Using your browser’s Development Tool, you can check the live HTML code and find which CSS selector you need to use or what CSS code has been used to style the page.

Check out this video demonstration:

https://www.youtube.com/watch?v=EY3CCMWD67o

Be advised that this is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

To make the needed color change, check out this old thread:

• Widget text color

And as for the spacing, you can check this out:

• Make footer more compact - Support - Themeco Forum

Best Regards.

[KimAnn]

Hello-

1. making the footer more compact- this thread predates the new wordpress widgets which is why there is an issue with vertical spacing. Footer padding and margin do not work for the space issue- the issue is between the header and text block in the new footer widgets

2. The issue is i can not find the proper html to build the CSS for the header color in footer.

Please advise

[ruenel]

Hey @KimAnn,

Please take a look at this first:

1.) You can reference the x-colophon container along with the x-column and use these two in your custom CSS to minimize the gap between the columns.

.container .column {
    /* your styling here */
}

2.) Again, use the x-colophon container and the h4 element in your custom CSS so you can style the headline color.

.container h4 {
    /* your styling here */
}

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Cheers.

[KimAnn]

Anyone who finds this thread, this was the answer:

Formatting headlines in Footer

Hi there, I’ve searched the forums and haven’t quite found the answer I need. I don’t know any CSS. When I put widgets in my footer, the font has shadows and sizes that I don’t want (see image). [image] I just want the font to show up without any extra formatting. Also, I’d like to lose the lines around the left-most widget (Contact Aveil, Resources, etc) and lose the arrows so it looks more like this (but still white font on a gray background). [image] Thanks, Jena

[ruenel]

Hi @KimAnn,

It is good to know that the issue has been resolved. Feel free to create another thread if you need any other assistance.

Cheers.