Change Colour Behind Footer Widgets

  • basesurf

    (@basesurf)


    4 years ago

    Hi I have managed to change the colour behind the social icons in the footer but I would also like to change the background colour behind the footer 1, footer 2 and footer 3 widgets.

    On the page I’ve linked, I would like it to be blue across the whole bottom of the page behind the instagram, menu and sponsors.

    Many thanks,

    Lou

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • fresatomica

    (@fresatomica)

    Hi Lou,

    You can use this piece of CSS to change that:

    .footer-widget-area {
    background-color: #4D5B6A;
    border-top: 1px solid ##4D5B6A;
}

    You may need to adjust the color of the font for the menu if you decide to stick to that background color.

    Thread Starter basesurf

    (@basesurf)

    Thanks very much this works although there is a thin white border on the left and right which looks a bit funny so I haven’t changed it. Also you are correct, I will need to change the menu font colour. Do you know how I would be able to change this to white? Same as the ‘search’ title.

    Many thanks,

    Lou

    jerrysarcastic

    (@jerrysarcastic)

    Hi there,

    In addition to the CSS that @fresatomica gave, you can try this code to remove the white borders and change the link color to something that shows up better against the darker background you are trying to use.

    .footer-widget-area .widget:not(.widget_text) ul > li, 
.footer-widget-area .widget:not(.widget_text) ol > li {
    border-top: 0;
}

.footer-widget-area a {
    color: #fff;
}

.footer-widget-area a:hover {
    color: #94a2af;
}

    Hope this helps!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change Colour Behind Footer Widgets’ is closed to new replies.