Help with text color in footer and padding

[justingirves]

Hi, Could you please help me with the css selectors for the black and gray text in my footer? I would like to change all of the text to white. In addition, I would like to reduce the padding between the top and bottom footers. Is it possible to accomplish this using the editor, or do I need custom css to remove the unnecessary padding? Thank you for your help

[tristup]

Hi Justin,

Thanks for reaching out.
Sometimes the only screenshot doesn’t help us to recognize the issue you are having. Can you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Editor username/password to check the editor’s view

To create a secure note, click the key icon underneath any of your posts.

NOTE: It seems that the text and the headline are coming from the widget. Please check Appearance > Widget, if that helps.

Thanks

[justingirves]

Hello Tristup,

You are correct, the text from the screenshot come from the footer widget. Can you please instruct me how to change the color of those text elements?

Thanks!

[prakash_s]

Hello Justin,

To change the text widget colour you can use this custom CSS code under X—>Theme Option —>CSS.

footer .widget.widget_text {
color: #373737;
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[justingirves]

Hi Prakash,

Thanks for your help! I implemented the custom css you provided, which successfully selected the phone number but not the h4 heading, “contact us.” It’s been a while since I’ve worked with css, but I will work on this myself and see if I can target that element as well. Take care and have a nice day.

[ruenel]

Hello Justin,

The headings in the widget areas will follow the color from global settings, X > Theme Options > Typography > Headings. If you want to override the settings, you need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use. You can then add CSS code into X > Theme Options > CSS.

Based on the screenshot, you can have something like this:

footer .widget .h-widget{
  color: #373737;
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
CSS Media Queries - https://goo.gl/L3ZHNg