Change color and size of the header social icons - Support | Kriesi.at

Tagged: Header Social Icons

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

Author

Posts
March 4, 2023 at 3:10 am #1400075

blaisen
Participant

Hi. I’d like to change the color and size of the social icons placed in the header under Extra Elements. I tried using this code to just see if I could effect the size, but something appears to be overriding it:

#top .social_bookmarks li {
width: 40px!important;
font-size: 30px!important;
}

Is there a way to do this with CSS? Is there a way to reverse the hover state with the regular link state and enlarge slightly?

March 4, 2023 at 12:32 pm #1400094

Rikard
Keymaster

Hey Blaise,

I can’t access your site, there’s a message saying my IP is blocked. Please let us know which IPs can access your site.

Best regards,
Rikard

March 4, 2023 at 3:58 pm #1400104

blaisen
Participant

Sorry. I host with Bluehost and perhaps they have some IPs blocked. If you send, I can try and whitelist.

March 4, 2023 at 5:57 pm #1400112

Rikard
Keymaster

Hi,

Thanks for the update. Ninja firewall is returning a 403 error.

Best regards,
Rikard

March 4, 2023 at 7:19 pm #1400116

blaisen
Participant

Thanks. believe I have that fixed for you, please try again. If it doesn’t work, what country are you in?

March 5, 2023 at 10:39 am #1400144

Rikard
Keymaster

Hi,

Thanks for the update, I’m still seeing the same thing though. Please see private.

Best regards,
Rikard

March 5, 2023 at 8:27 pm #1400190

blaisen
Participant

See private

March 5, 2023 at 10:32 pm #1400206
Mike
Moderator
Hi,
Thank you for the link to your site, to reverse the color for the social icons with the hover state and make them larger please try this css:
```
#top #wrap_all #header_main .social_bookmarks li a {
    width: 40px;
    line-height: 40px;
}
#top #wrap_all #header_main .social_bookmarks {
    height: 40px;
}
#top #wrap_all #header_main .social_bookmarks li {
width: 40px;
font-size: 30px;
}
#top #wrap_all #header_main .av-social-link-facebook a {
    color: #fff;
    background-color: #37589b;
}
#top #wrap_all #header_main .av-social-link-facebook:hover a, 
#top #wrap_all #header_main .av-social-link-facebook a:focus {
    color: #808080;
    background-color: transparent;
}
#top #wrap_all #header_main .av-social-link-twitter a {
    color: #fff;
    background-color: #46d4fe;
}
#top #wrap_all #header_main .av-social-link-twitter:hover a, 
#top #wrap_all #header_main .av-social-link-twitter a:focus {
    color: #808080;
    background-color: transparent;
}
#top #wrap_all #header_main .av-social-link-instagram a {
    color: #fff;
    background-color: #a67658;
}
#top #wrap_all #header_main .av-social-link-instagram:hover a, 
#top #wrap_all #header_main .av-social-link-instagram a:focus {
    color: #808080;
    background-color: transparent;
}
#top #wrap_all #header_main .av-social-link-youtube a {
    color: #fff;
    background-color: #a72b1d;
}
#top #wrap_all #header_main .av-social-link-youtube:hover a, 
#top #wrap_all #header_main .av-social-link-youtube a:focus {
    color: #808080;
    background-color: transparent;
}
#top #wrap_all #header_main .av-social-link-linkedin a {
    color: #fff;
    background-color: #419cca;
}
#top #wrap_all #header_main .av-social-link-linkedin:hover a, 
#top #wrap_all #header_main .av-social-link-linkedin a:focus {
    color: #808080;
    background-color: transparent;
}
```
After applying the css, please clear your browser cache and check.
This is the expected results:

Best regards,
Mike
March 5, 2023 at 10:46 pm #1400208

blaisen
Participant

Thanks Mike…that worked! I added “margin-left: 10px;” to give the icons some separation.

March 5, 2023 at 10:59 pm #1400209

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

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

The topic ‘Change color and size of the header social icons’ is closed to new replies.