Password page, adjust instagram icon

Store Design
1

Hi Everyone,

I want to change the color of the instagram Icon, it’s filled purple in mobile and I want it to have a transparent filling:

https://www.evesanthology.com/password

Any idea how to do that? Or is this a pre-set in the icon by instagram? If so; where can I change this icon? I am using prestige theme,

Thanks a lot!!

Eve's Anthology.jpeg
Eve's Anthology.jpeg1170×2532 101 KB

2

Hello @Eve25
Go to online store ----> themes ----> actions ----> edit code ----> theme.css
add this code at the end of the file and save.

@media not screen and (pointer: fine) {
.social-media--block .social-media__item {
background: transparent;
}
}

result

196.png
196.png336×705 66.1 KB

If this was helpful, hit the like button and accept the solution.
Thanks

3

Thanks for your quick reply. That looks already better! Will there always be a fine purple box line? Or can I make that line transparent as well?

4

Hi @Eve25

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
@media screen and (max-width: 768px){
.password__inner li.social-media__item.branding-colors–instagram {
outline: 1px solid white !important;
}
}
{% endstyle %}

DaisyVo_0-1738239122570.png
DaisyVo_0-1738239122570.png328×633 61 KB

5

hereby the code that worked with white lining: @media not screen and (pointer: fine) {
.social-media–block .social-media__item {
background: transparent;
border: 0.5px solid white;
outline: 0.5px solid white; /* Optional, adds an additional effect */
}

Thanks to both of you for helping as I made a combination of both solutions :slightly_smiling_face:

have a great day!!!