Rafida Posted April 11, 2020 Share Posted April 11, 2020 (edited) 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! Edited April 11, 2020 by Rafida Link to comment
tuanphan Posted April 12, 2020 Share Posted April 12, 2020 - 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Rafida Posted April 12, 2020 Author Share Posted April 12, 2020 Thanks for the reply! Sorry, how/where do I add the other icons to social links (whatsapp, patreon, email icon) Kind regards Link to comment
tuanphan Posted April 13, 2020 Share Posted April 13, 2020 How did you add icons under header? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Rafida Posted April 13, 2020 Author Share Posted April 13, 2020 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? Link to comment
tuanphan Posted April 14, 2020 Share Posted April 14, 2020 (edited) 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. Edited April 14, 2020 by tuanphan Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Rafida Posted April 14, 2020 Author Share Posted April 14, 2020 (edited) 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? Edited April 14, 2020 by Rafida Link to comment
tuanphan Posted April 15, 2020 Share Posted April 15, 2020 Saved your question. Will check soon. Try finding 3 icons, but no matching sizes found CocosAtelier 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Rafida Posted April 17, 2020 Author Share Posted April 17, 2020 What size/dimensions should the icons need to be? I can get our graphic designer to custom make them Link to comment
Rafida Posted May 10, 2020 Author Share Posted May 10, 2020 @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? Link to comment
Rafida Posted July 12, 2020 Author Share Posted July 12, 2020 @tuanphan Any help with this? Link to comment
tuanphan Posted July 12, 2020 Share Posted July 12, 2020 @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 CocosAtelier 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
rwp Posted July 12, 2020 Share Posted July 12, 2020 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? Link to comment
Rafida Posted July 13, 2020 Author Share Posted July 13, 2020 (edited) @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 Edited July 13, 2020 by Rafida Link to comment
Rafida Posted July 14, 2020 Author Share Posted July 14, 2020 @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 Link to comment
rwp Posted July 14, 2020 Share Posted July 14, 2020 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>` }); Link to comment
Rafida Posted July 15, 2020 Author Share Posted July 15, 2020 (edited) @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 Edited July 15, 2020 by Rafida Link to comment
tuanphan Posted July 15, 2020 Share Posted July 15, 2020 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> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
rwp Posted July 15, 2020 Share Posted July 15, 2020 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. Link to comment
Rafida Posted July 15, 2020 Author Share Posted July 15, 2020 @tuanphan @rwp I tried Tuaphans new code with the <script> although still doesn't work unfortunately. Link to comment
rwp Posted July 15, 2020 Share Posted July 15, 2020 (edited) Make sure that the little ` before and after the svg tags are ` not ' Also, in pink, is where you change the color. Edited July 15, 2020 by rwp Link to comment
Rafida Posted July 15, 2020 Author Share Posted July 15, 2020 @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) Link to comment
Rafida Posted July 16, 2020 Author Share Posted July 16, 2020 @rwp @tuanphan Any ideas? Link to comment
Rafida Posted July 18, 2020 Author Share Posted July 18, 2020 (edited) @rwp Bump Edited July 18, 2020 by Rafida Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment