BRINE TEMPLATE: Add custom logos to social links

Site URL: https://stingray-cylinder-zztm.squarespace.com/

Hey!

- How can we add custom logos to the social links in the BRINE template? We want to add Patreon, WhatsApp, and email.
- Is there a way to add a phone number to the WhatsApp icon so that when you click it a pop up shows up with our number?
- Is there a way to add the email so when you click it, it either pops up with email or takes user for their default email app with our email in the 'to' section?
 

https://stingray-cylinder-zztm.squarespace.com

Pass: temp123

Kind regards!

- How can we add custom logos to the social links in the BRINE template? We want to add Patreon, WhatsApp, and email.

You can add other icons & (patreon, whatsapp, email link) first, then we can give code to change them to patreon, what...icons
- Is there a way to add a phone number to the WhatsApp icon so that when you click it a pop up shows up with our number?

use link: tel:0123456789
- Is there a way to add the email so when you click it, it either pops up with email or takes user for their default email app with our email in the 'to' section?

use link: mailto:youremail@gmail.com

Thanks for the reply!

Sorry, how/where do I add the other icons to social links (whatsapp, patreon, email icon)

Kind regards

How did you add icons under header?

Those icons under the header are from the 'Social Links' feature that is part of the BRINE template. 
I go into the social links settings and can add various preset icons and put in the links.

But it doesn't have WhatsApp, Patreon, or Email, so was hoping these could be added manually via code?

14 hours ago, Rafida said:

Those icons under the header are from the 'Social Links' feature that is part of the BRINE template. 
I go into the social links settings and can add various preset icons and put in the links.

But it doesn't have WhatsApp, Patreon, or Email, so was hoping these could be added manually via code?

I mean you can add those links first, if it does not display the icons you want, I can send the code to change those icons to the right icons.

Ok, I've added the 3 links to social links in the following order:

Patreon, WhatsApp, and Mail

Would would the code that's required to be added be?

Saved your question. Will check soon.

Try finding 3 icons, but no matching sizes found

What size/dimensions should the icons need to be? I can get our graphic designer to custom make them

@tuanphan

Just a reminder for this. What dimensions would the Icons need? I can make them.

I believe you can provide the code once I provide the icons?

@tuanphan

Any help with this?

@rwp do you have an idea?

I'm overloading.

I think we can use js to replace links icon with svg icon.

An example with tiktok: https://codepen.io/ryandejaegher/pen/xxGjzqr

Yes for sure this can be done. I am overloaded here too.

@Rafida Do you have a business account?

If so, can you make the icons into svg's and send me the code? https://picsvg.com/

You will need to create a social link for each one on your page, I looked quick, it seems like you have some in the footer. Is that where you want them?

@rwp

Hey! Thanks for your help

Do you mean business account with Sqaurespace. If so, yes we have the 'Commerce Advanced' plan.

To answer your question, yes it would be the social links in the footer, but more importantly the social links in the header. In the social links you will find 3 'link' icons. The order is: Patreon, WhatsApp, Email

Regarding the SGV's. Are you able to create them? As I tried but not sure I done it correctly.

I have created 1080x1080 Transparent PNG files for these 3 social links which you can download here: 
https://drive.google.com/drive/folders/1MxpbGOaV0fQ33TnZ2a_ep-_iXz3_z5lO?usp=sharing

 

@rwp

UDPATE: I've tried to make the .sgv files which I've uploaded here:

https://drive.google.com/drive/folders/1MxpbGOaV0fQ33TnZ2a_ep-_iXz3_z5lO?usp=sharing
 

You will have to make the svg's white to match. Then you will need to do this for each link. It locates the link by finding part of the href and replaces the html with the svg code. If you open the svg file in a text editor, you can copy and paste the code.

var patreon = document.querySelectorAll('a[href*="patreon"]')

patreon.forEach(item => {
    item.innerHTML = `<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="300.000000pt" height="300.000000pt" viewBox="0 0 300.000000 300.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.10, written by Peter Selinger 2001-2011
</metadata>
<g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M60 1500 l0 -1300 290 0 290 0 0 1300 0 1300 -290 0 -290 0 0 -1300z
m556 2 c1 -694 -3 -1265 -7 -1268 -11 -7 -508 -6 -519 1 -5 3 -8 514 -7 1268
l2 1262 205 5 c112 3 231 3 265 0 l60 -5 1 -1263z"/>
<path d="M1805 2789 c-335 -45 -626 -254 -775 -553 -189 -380 -123 -827 167
-1136 132 -140 277 -229 468 -286 82 -25 105 -28 260 -28 148 -1 181 2 255 22
172 47 314 129 448 257 138 131 232 291 284 483 31 113 31 352 1 472 -86 338
-333 611 -653 722 -131 45 -322 65 -455 47z m230 -25 c79 -6 101 -8 110 -13 6
-3 18 -7 27 -8 10 -2 46 -12 80 -24 240 -81 442 -259 559 -491 16 -31 29 -64
29 -73 0 -8 4 -15 9 -15 5 0 11 -10 14 -22 3 -13 12 -48 21 -78 48 -176 34
-462 -30 -596 -10 -21 -19 -41 -20 -44 -3 -29 -102 -198 -137 -236 -187 -202
-395 -321 -612 -349 -111 -15 -281 -9 -365 11 -14 3 -40 8 -58 11 -18 3 -35 9
-38 14 -3 5 -12 9 -21 9 -15 0 -178 76 -198 92 -5 5 -40 31 -76 58 -69 50
-196 185 -191 201 1 5 -2 9 -7 9 -18 0 -124 204 -135 261 -2 8 -8 26 -14 42
-44 107 -42 465 3 534 8 12 15 32 15 43 0 57 124 267 217 366 105 112 248 202
393 248 47 15 99 32 115 37 17 6 82 13 145 16 63 3 117 7 119 9 2 2 9 0 15 -3
6 -4 20 -8 31 -9z"/>
</g>
</svg>`
});

@rwp Apologies, I know nothing about coding.

- How do I make the sgv's white? Is it just changing the colour from black to white in the svg website you sent?

- The code you presented above, do I need to make any changes to it, or is it fine as it is to use?

- Where do I paste this code? I tried in the general code injection header section, and all that happens is the icon appears gigantic on top of the entire header (see screenshot). When I paste the code in the code injection when clicking settings in the banner itself, nothing happens at all.

Kind regards,
Malik

Wrap with <script> tag & Add to Home > Settings > Advanced > Code Injection > Footer

<script>
  var patreon = document.querySelectorAll('a[href*="patreon"]')

patreon.forEach(item => {
    item.innerHTML = '<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="300.000000pt" height="300.000000pt" viewBox="0 0 300.000000 300.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.10, written by Peter Selinger 2001-2011
</metadata>
<g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M60 1500 l0 -1300 290 0 290 0 0 1300 0 1300 -290 0 -290 0 0 -1300z
m556 2 c1 -694 -3 -1265 -7 -1268 -11 -7 -508 -6 -519 1 -5 3 -8 514 -7 1268
l2 1262 205 5 c112 3 231 3 265 0 l60 -5 1 -1263z"/>
<path d="M1805 2789 c-335 -45 -626 -254 -775 -553 -189 -380 -123 -827 167
-1136 132 -140 277 -229 468 -286 82 -25 105 -28 260 -28 148 -1 181 2 255 22
172 47 314 129 448 257 138 131 232 291 284 483 31 113 31 352 1 472 -86 338
-333 611 -653 722 -131 45 -322 65 -455 47z m230 -25 c79 -6 101 -8 110 -13 6
-3 18 -7 27 -8 10 -2 46 -12 80 -24 240 -81 442 -259 559 -491 16 -31 29 -64
29 -73 0 -8 4 -15 9 -15 5 0 11 -10 14 -22 3 -13 12 -48 21 -78 48 -176 34
-462 -30 -596 -10 -21 -19 -41 -20 -44 -3 -29 -102 -198 -137 -236 -187 -202
-395 -321 -612 -349 -111 -15 -281 -9 -365 11 -14 3 -40 8 -58 11 -18 3 -35 9
-38 14 -3 5 -12 9 -21 9 -15 0 -178 76 -198 92 -5 5 -40 31 -76 58 -69 50
-196 185 -191 201 1 5 -2 9 -7 9 -18 0 -124 204 -135 261 -2 8 -8 26 -14 42
-44 107 -42 465 3 534 8 12 15 32 15 43 0 57 124 267 217 366 105 112 248 202
393 248 47 15 99 32 115 37 17 6 82 13 145 16 63 3 117 7 119 9 2 2 9 0 15 -3
6 -4 20 -8 31 -9z"/>
</g>
</svg>'
});
</script>

That one is only for the patreon logo.

I think the svg's are going have too thin of a line to work well.

The color can be set with the fill="" part of the svg tag.

@tuanphan @rwp

I tried Tuaphans new code with the <script> although still doesn't work unfortunately.

Make sure that the little ` before and after the svg tags are ` not '

Also, in pink, is where you change the color.

@rwp

We've made some progress.

When I put the code in the footer injection now the following happens:

- The link icon for the Patreon social link in the header disappears and becomes blank (see screenshot 1)
- The link icon for the Patreon social link in the footer disappears and half the Patreon icon shows (see screenshot 2)
- The Patreon icon appears very huge in the right side page menu (see screenshot 2)

 

@rwp @tuanphan

Any ideas?

@rwp

Bump