edit the widgets in footer

Hi Sharon!

Changing color and format is quite simple. Could you please provide me your site URL so I assist you in more better and authentic way.

Thanks!

Here is the site with the widgets in the footer. I would love to edit the widget boxes to have some color in the top text area. https://reichrealty.com/ Thanks!

Hi,

Just an example.

In order to achieve the following look on your website.
Please see the screenshot https://prntscr.com/705kw5
I had used firebug, which is a firefox browser extension to make a mockup on my browser while viewing your site.

Since you are using only text widgets on your footer, I will provide you custom css for text widgets only, it will not affect other widgets on your sidebar.

Go to Your WordPress Admin Appearance -> Theme Options -> Custom CSS and enter the following codes.

.widget_text .widget-title-background{
background:#fc4903;
    border-radius: 3px 3px 0 0;
border: 1px solid #fc4903 !important;
    bottom: 0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 5px rgba(0, 0, 0, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.29);
    color: #fff;
    left: -16px;
    position: absolute;
    right: -16px;
    text-shadow: 0 1px 0 #000;
    top: -1px;
}

.widget_text .widget-title {
    color: #fff;
}

The above codes will give your footer widget titles a background color of #fc4903 and font color of #fff.

You can change the color codes to suit your needs. You can use this website https://www.w3schools.com/tags/ref_colorpicker.asp to assist you in picking a suitable color hex code.

Hope this is what your need.

Thanks!
Denzel

This worked perfect on the Reich Realty site! Thank you so much! I really like this theme and have downloaded it to another site I am working on which is not live yet and wanted to do the same thing but this code doesn’t work on it. Since the site isn’t live, it’s not possible to send you the link unless you can add it to your host file? Not sure if that is possible.

Any idea why it wouldn’t be working on a 2nd site?

Hi,

The code I provided is for text widget only and does not work for other widgets. I think you probably used other type of widget in the footer. If not, there may be a conflict with whatever plugin’s css code or custom css code that you entered. I really cannot be sure what happened.

Sorry, it’s not possible for me to view your site unless it’s online.
Therefore, we will tackle this new issue when your site is live.

By the way, since you like this theme, I hope you would consider purchasing the premium version.

Thanks!
Denzel

Hi Denzel,

My site is now live. Can you help me with the CSS code to give the text widgets in the footer a solid matching background title box? Thanks so much! https://hersheyvet.com/

Hi,

Please use the following codes.

.footer .widget-content {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
.footer .textwidget h3 {
    background: #66062f none repeat scroll 0 0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 5px rgba(0, 0, 0, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.29);
    color: #fff;
    margin-top: 0;
    padding: 10px;
}

This is a screenshot of how it looks in my browser.
https://prntscr.com/7bvq4v

Hope this helps!

Thanks!
Denzel

Perfect! Thanks so much for such a quick turnaround! I’m super impressed!