new social icon bluesky - Support | Kriesi.at

Tagged: bluesky, social icons, svg

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

Author

Posts
September 1, 2025 at 3:44 pm #1488823

felix_frank
Participant

Dear Support, I followed the instructions on this thread https://kriesi.at/support/topic/i-wish-to-use-the-new-svg-features-of-enfold-7-x-to-add-two-new-social-profiles/ and allmost everything worked, just that the Icon is not visible. Please check the Link below in PC. The Icon should appear right after the Instagram in the top right and the bottom right corners.
I created the SVG File through Figma and there I exported it as SVG.
What can I do to fix this?
Thank you in advance!

September 1, 2025 at 6:19 pm #1488834

felix_frank
Participant

Meanwhile I changed some export settings and got the icon visible. But it does not adopt the grey color in the footer and in the header it is missing a colored background, like the others have one. Is there a possibility to fix this?

September 2, 2025 at 5:55 am #1488842
Ismael
Moderator
Hi,

Thank you for the inquiry.

You can add this css code to adjust the hover state of the social icon:
```
#top #wrap_all .av-social-link-bluesky:hover a, #top #wrap_all .av-social-link-bluesky a:focus {
    color: #fff;
    background-color: #a67658;
}

#top .socket_color .social_bookmarks a, #top .socket_color .social_bookmarks a svg {
    filter: grayscale(1);
}

#top .socket_color .social_bookmarks .social_bookmarks_bluesky  svg {
    opacity: 0.5;
}
```
Best regards,
Ismael
September 2, 2025 at 10:46 am #1488857

felix_frank
Participant

Hi Ismael,

thank you so much, it worked perfectly until i removed the background of the SVG because it had a white square arround the butterfly.
I beleave I did everything like before but it seems that the CSS does not grap anymore.
So now the Icon at the top has no brackground anymore and the icon in the footer is not grey.
Could you please let me know how I can fix this?

Thank you and have a great day!

September 3, 2025 at 5:16 am #1488881

Ismael
Moderator

Hi,

Did you remove the css code? We didn’t see it when we checked. Please make sure all css code is valid —- try checking for any unclosed css rules.

Best regards,
Ismael

September 3, 2025 at 10:22 am #1488892
Guenni007
Participant
by the way – big advantage here of svg – you can change the fill colors.
```
#top #wrap_all .av-social-link-bluesky:hover a {
    color: #fff;
    background-color: #1185fe;
}
#top #wrap_all .av-social-link-bluesky a svg * {
    fill: var(--enfold-header-color-meta);
}
#top #wrap_all .av-social-link-bluesky a:hover svg * {
    fill: #FFF
}
```
September 5, 2025 at 11:38 am #1488990

felix_frank
Participant

Hi Ismael,

Thank you for the hint. The CSS disapeared somhow and I have put it back, so it works noch. Thanks a lot.

@Guenni007, Thank you too. The

#top #wrap_all .av-social-link-bluesky a:hover svg * {
fill: #FFF
}

made it perfekt.

September 5, 2025 at 11:31 pm #1489021

Mike
Moderator

Hi,
Glad Ismael & Guenni007 could help, thank you Guenni007, 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

September 5, 2025 at 11:31 pm #1489022

Mike
Moderator

Hi,
Glad Ismael & Guenni007 could help, thank you Guenni007, 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 9 posts - 1 through 9 (of 9 total)

The topic ‘new social icon bluesky’ is closed to new replies.