Footer Questions – Background Color & Social Media Icons

Support Forums for LiveMesh Themes & Plugins Forums Invent Theme Support Footer Questions – Background Color & Social Media Icons

This topic is: not resolved

This topic contains 14 replies, has 2 voices, and was last updated by Micah Kleid Micah Kleid 5 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #31626
    Micah Kleid
    Micah Kleid
    Participant
    Post count: 56

    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!

    Attachments:
    #31638
    Veena
    Veena
    Moderator
    Post count: 8167

    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.

    #31641
    Micah Kleid
    Micah Kleid
    Participant
    Post count: 56

    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.

    #31649
    Veena
    Veena
    Moderator
    Post count: 8167
    This reply has been marked as private.
    #31655
    Micah Kleid
    Micah Kleid
    Participant
    Post count: 56
    This reply has been marked as private.
    #31660
    Veena
    Veena
    Moderator
    Post count: 8167

    Pls use the below custom CSS –

    .social-list.clearfix li {
        float: none;
    }
    
    #31664
    Micah Kleid
    Micah Kleid
    Participant
    Post count: 56

    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?

    #31668
    Veena
    Veena
    Moderator
    Post count: 8167

    Pls have the below custom CSS –

    ul.social-list a i {
        font-size: 30px;
    }
    ul.social-list a {
        color: #942626;
    }
    
    #31682
    Micah Kleid
    Micah Kleid
    Participant
    Post count: 56

    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?

    #31685
    Micah Kleid
    Micah Kleid
    Participant
    Post count: 56

    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)?

    #31696
    Veena
    Veena
    Moderator
    Post count: 8167

    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/

    #31704
    Micah Kleid
    Micah Kleid
    Participant
    Post count: 56

    Thank you!

    #31712
    Micah Kleid
    Micah Kleid
    Participant
    Post count: 56

    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!

    Attachments:
    #31714
    Veena
    Veena
    Moderator
    Post count: 8167

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

    
    ul.social-list {
        margin-top: 5px !important;
        padding: 5px 0;
    }
    #31716
    Micah Kleid
    Micah Kleid
    Participant
    Post count: 56

    Thank you so much, this was all extremely helpful!

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Footer Questions – Background Color & Social Media Icons’ is closed to new replies.