Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 29, 2022 at 8:07 am #1363015
    aussiedropbear

    Hi.

    My client has sent over graphics of social icons that their graphics designer has come up with. See link in PC.

    I’m not sure if these social icons are already available but I will need to add these to the header and footer section of the site in PC. Just not sure how to go about this?

    Thanks
    John

    August 29, 2022 at 4:32 pm #1363065
    Rikard

    Hey John,

    Those profiles are available for you under Enfold->Social Profiles. If it’s styling you need help with to look like the design you linked to, then please let us know. If you want to add them manually, the you could do so in a widget in the header for example: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

    Best regards,
    Rikard

    August 31, 2022 at 1:50 am #1363308
    aussiedropbear

    Hi Rikard,

    Many thanks for the reply. Yes it more about the styling. I would prefer to get it as close to the example I had given using the icons that are already in theme rather than importing small image files.

    If you look in the Quick CSS I already have some code there but you may want to add or adjust ?

    I also need the icons in the footer page to be spaced out a little more.

    Thanks
    John

    August 31, 2022 at 1:18 pm #1363357
    Rikard

    Hi,

    Thanks for the update. Please try this in Quick CSS:

    ul.social_bookmarks li a {
    background: lightsteelblue;
    border-radius: 10px;
}

    Where exactly do you need social icons in the footer?

    Best regards,
    Rikard

    August 31, 2022 at 4:13 pm #1363376
    aussiedropbear

    Thanks Rikard.

    I have the social icons in the header area to the right of the logo and in a footer page to the right. If you view the site you will see them.

    August 31, 2022 at 7:09 pm #1363397
    Rikard

    Hi,

    Please try this CSS as well:

    #footer-page ul.av-share-box-list li a {
    border-radius: 15px;
    background: steelblue;
    margin-right: 15px;
}

    Best regards,
    Rikard

    September 1, 2022 at 1:16 am #1363416
    aussiedropbear

    Thanks Rikard.

    I can see the changes to the footer icons now.

    Is there a way in which we could have the icon letter / image to be white before mouse hover. I don’t mind the hover/rollover showing the original colours to the icon brand as it is presently showing.

    Also, the top social icons I see no change to their shape / colour like the ones in the footer.

    This is the background colour I am intending to use: #031926

    September 1, 2022 at 4:47 pm #1363499
    Rikard

    Hi,

    Try this CSS as well:

    #footer-page ul.av-share-box-list li a:before {
    color: #fff; 
}

    And this for the header:

    ul.social_bookmarks li a {
    background: #031926 !important;
    border-radius: 10px !important;
}

ul.social_bookmarks li a:before {
    color: #fff;
}

    Best regards,
    Rikard

    September 2, 2022 at 12:17 am #1363555
    aussiedropbear

    Thanks Rikard. Works a treat.

    The social icons in the footer on hover show the brand colour of the icon in question.

    Is there a way to have this happen for the social icons in the header?

    Also, can we enlarge the font for the icons in the footer to better match those represented in the header?

    Thanks
    John

    September 2, 2022 at 2:26 pm #1363645
    Yigit

    Hey John,

    1- I edited your custom CSS code and changed 

    
ul.social_bookmarks li a {
    background: #031926 !important;
    border-radius: 10px !important;
}

    into following 

    
#top #wrap_all .social_bookmarks li a {
    background: #031926;
    border-radius: 10px !important;
}

    2- I edited following code

    
#footer-page ul.av-share-box-list li a {
    border-radius: 10px;
    background: #031926;
    margin-right: 15px;
}

    and increased font size as following 

    
#footer-page ul.av-share-box-list li a {
    border-radius: 10px;
    background: #031926;
    margin-right: 15px;
    font-size: 20px;
}

    Please review your website :)

    Regards,
    Yigit

    September 2, 2022 at 10:31 pm #1363692
    aussiedropbear

    Hi Yigit.

    Many thanks. Just checked and it looks great.

    I think we can close this one off now :).

    Cheers
    john

    September 3, 2022 at 10:27 am #1363717
    Rikard

    Hi,

    Great, I’m glad that Yigit could help you out. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘social icons’ is closed to new replies.