Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • May 3, 2018 at 3:46 am #950419
    Lara

    Hi team,

    I’m trying to replicate my footer into a colour section throughout my website, so I can have an easy slider as one of my footer colums. I’ve placed all widgets into columns in a colour section.

    I’m wondering if I can get the fonts to be the same as they are in the footer and if I could get my social icons to be spaced too.

    Lara

    May 3, 2018 at 4:34 am #950427
    Mike

    Hey Lara,
    When I compare your color section and footer I see the font is correct, and I assume you don’t want the same colors as the background of the color section would make white text hard to read, so I believe you want the font-size to match. So I added a ID to the color section, and this to your quick css:

    #color-footer a,#color-footer p {font-size: 12px;}

    For the icons I added this code:

    #color-footer #text-7 .avia-icon-pos-left {
    margin-right: 20px; 
}

    Please clear your browser cache and check.

    Best regards,
    Mike

    May 3, 2018 at 4:42 am #950428
    Lara

    Hi Mike,

    thank you so much for your help! It looks really good.

    I want the font to be white and the colour section to be dark like the footer. I just had the colour section light grey so I could see the font while working. Also, is it possible to get Latest News, Links and Contact us font to be regular and not bold and to get the widgets spaced evenly? There seems to be quite a large gap between Links and Contact Us.

    Lara

    May 3, 2018 at 5:15 am #950440
    Mike

    Hi,
    For the background color #2C353D, I choose it in the color section background settings.
    For the font color I updated the above css:

    #color-footer a,#color-footer p,#color-footer strong.news-headline {
font-size: 12px;
color: #fff;
}

    For the headlines I added:

    #color-footer h3.widgettitle {
font-weight: normal !important; 
}

    To add some padding to the “links” widget I added a ID and this quick css:

    #color-footer .color-links {
padding-left: 70px;
}

    Please adjust to suit.

    Best regards,
    Mike

    May 3, 2018 at 5:28 am #950451
    Lara

    Hi Mike,

    Thank you so much, amazing work!

    One last thing, I was wondering if its possible to have a hover colour on the social icons, like in the footer?

    This is the CSS I have for the colours –

    #footer .twitter a:hover {
    color: #a3d1f9;
    }

    #footer .youtube a:hover {
    color: #d2463a;
    }

    #footer .linkedin a:hover {
    color: #3472a4;
    }

    #footer .vimeo a:hover {
    color: #808080;
    }

    May 3, 2018 at 11:43 am #950688
    Mike

    Hi,
    I added:

    #color-footer .twitter a:hover {
color: #a3d1f9;
}

#color-footer .youtube a:hover {
color: #d2463a;
}

#color-footer .linkedin a:hover {
color: #3472a4;
}

#color-footer .vimeo a:hover {
color: #808080;
}

    Please clear your cache and check.

    Best regards,
    Mike

    May 4, 2018 at 1:01 am #951175
    Lara

    Hi Mike,

    Thank you so much for your help.

    Everything looks perfect!

    Lara

    May 4, 2018 at 1:13 am #951178
    Lara

    Oh one more thing Mike,

    Do you know how to hide the footer so I can display this duplicate throughout?

    Lara

    May 4, 2018 at 1:21 am #951180
    Mike

    Hi,
    You can set this in Enfold Theme Options > Footer > Default Footer & Socket Settings
    2018-05-03_191929

    Best regards,
    Mike

    July 16, 2018 at 3:11 am #985808
    Lara

    Hi Mike,

    I’ve tried adding a colour hover for the Facebook icon i’ve added to the site, in general styling

    #color-footer .facebook a:hover {
    color: #3a559f;
    }

    However, it’s not working :(

    Wondering if you have a solution.

    Lara

    July 17, 2018 at 2:50 am #986181
    Mike

    Hi,
    Thanks for the login, I added the custom class so your css rule will work.
    Please clear your browser cache and check.

    Best regards,
    Mike

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.