Footer Questions – Background Color & Social Media Icons

[Micah Kleid]

Hi, I have two questions about the footer of our website (https://dev.remodelersuniversity.com). Not the footer widgets, which we have removed, but the actual footer itself where the footer menu and copyright information appear (see attached).

1) First, how do I change the background color of that area so it matches the header?

2) Second, is there a way to add social media icons to that area? I know there is an option to add a social media menu to a widget area but, as I noted before, we have removed the widget areas and would prefer they not be there. Ideally, I’d like the social media icons to be above the footer menu, if possible.

Thank you!

[Veena]

1.You need to use the below custom CSS –

#footer-bottom {
    background-color: #3a222d;
}

Pls change the background color accordingly.

2. You need to modify the theme file footer.php for this .
You can copy the html generated codes of socialicons widget and use the the code in footer.php file inside this –

Which is at line no:57.

[Micah Kleid]

Changing the footer background colored worked, thank you! But how do I find the HTML generated codes for the social icons widget? Also, the gray text box after “inside this” is blank so I don’t know what you meant to put there.

[Veena]

This reply has been marked as private.

[Micah Kleid]

This reply has been marked as private.

[Veena]

Pls use the below custom CSS –

.social-list.clearfix li {
    float: none;
}

[Micah Kleid]

Thank you! On a related note, is there any way to:

1) Make the social icons much larger?
2) Have them be in color (the actual colors of the respective brands) instead of black and white?

[Veena]

Pls have the below custom CSS –

ul.social-list a i {
    font-size: 30px;
}
ul.social-list a {
    color: #942626;
}

[Micah Kleid]

That did make the icons larger and turned them red, but I was hoping the color for each social media icon would be the colored version of that respective social media site’s logo. Is that possible, rather than they all be one color?

[Micah Kleid]

Also, is there any way so the social media icons do not appear on any Lessons page (http://dev.remodelersuniversity.com/lessons/increase-production-profitability)?

[Veena]

You can use the below custom CSS to change the color of facebook icon –

a.facebook i {
color: #0e62a4;
}
Likewise you can change the color of other icons.

You can use chrome developer tools to adjust the styling.

– https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

[Micah Kleid]

Thank you!

[Micah Kleid]

Last question regarding the social media icons:

How do I make it so there is more space between the footer (the red box where my footer menu and copyright menu are) and the social media icons? As you can see in the attached screenshot, the icons are bumping up right to the box and I’d like some white space between them. Thank you!

[Veena]

Pls have the below custom CSS in themeoptions > custom CSS –

ul.social-list {
    margin-top: 5px !important;
    padding: 5px 0;
}

[Micah Kleid]

Thank you so much, this was all extremely helpful!

[Author]

Posts