Docs

[phortay]

Hello all, love the theme and support. Matter of fact just bought another license.

Here is the site: http://www.ashtonassociates.net

I am looking to customize the footer widget area. I would like help with changing CSS to:

1. Change background color(brown #a49376);
2. Change font color to white and reduce font size of titles and lines of text
3. Remove icons in the titles of the Pages and Recent Posts widgets.

I am currently using this code:
.x-colophon.top .widget_text .h-widget:before {
display:none;
}

But it did not effect these widgets.

4. Additionally, I would like to remove the outline stroke from the Pages and Recent Posts widgets (that produces the rounded corner box around each link) and replace with just a stroke on the bottom (underline).

your help is appreciated in advance.

phortay

[Rue Nel]

Hello There,

Thanks for writing in! Thank you for choosing X for your site projects.

1] To change the background color of the footer widget area, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-colophon.top {
    background-color: #a49376;
}

2] And to change the colors to white, please use this:

.x-colophon.top,
.x-colophon.top .widget,
.x-colophon.top .h-widget,
.x-colophon.top .widget_pages .h-widget:before,
.x-colophon.top ul li a{
    color: #fff;
    text-shadow: 0 0 0 transparent !important;
}

.x-colophon.top .h-widget {
    font-size: 24px;
}

.x-colophon.top .widget {
    font-size: 12px;
    line-height: 18px;
}

3] To remove the icons, please use this:

.x-colophon.top .h-widget:before{
    display: none;
}

4] To remove the outline border of the widgets, you can make use of this code:

.x-colophon.top .widget ul, 
.x-colophon.top .widget ol,
.x-colophon.top ul li, 
.x-colophon.top li a, 
.x-colophon.top li a {
    border: none;
    box-shadow: none;
}

Hope this helps. Please let us know how it goes.

[phortay]

Wow, thank you for the help.

Everything worked except for the last bit of code. It made no difference.

.x-colophon.top .widget ul,
.x-colophon.top .widget ol,
.x-colophon.top ul li,
.x-colophon.top li a,
.x-colophon.top li a {
border: none;
box-shadow: none;
}

Additionally, now I have to change the hover (mouse over) color of the lists. Its white which doesn’t work over white text. Please see attached reference image.

[phortay]

This reply has been marked as private.

[Rue Nel]

Hello There,

Please have the code updated and use this instead:

.x-colophon.top .widget ul,
.x-colophon.top .widget ol,
.x-colophon.top ul li,
.x-colophon.top li a,
.x-colophon.top li a {
  border: none;
  box-shadow: none;
}

.x-colophon.top ul li a,
.x-colophon.top li{
  padding: 0;
}

.x-colophon.top ul li a:hover,
.x-colophon.top ul li:hover a {
    background-color: #272727 !important;
}

Hope this helps.

[phortay]

Yes!

thanx…I can take it from here.

Really great support.

[Thai]

If you need anything else please let us know.

[Author]

Posts