kkedwards87 Posted November 7, 2022 Share Posted November 7, 2022 Hi, Here's my code for an SVG icon on the home page of my site. I'm wanting to have #336699 on hover. Screenshot of my site attached. Would I apply this to each individual icon code block or in the Custom CSS block? Can anyone help please? Thanks <div style="text-align: center"> <svg style="fill: #99CC33" width="80" height="80" viewBox=" 0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M13 23h-6v-6.065c.626-.155 1.04-.496 1.319-1.046 2.152.773 3.647-2.303 1.819-3.556.949-1.116.245-2.727-1.207-2.522-.698-2.361-4.151-2.379-4.85 0-1.405-.227-2.186 1.199-1.385 2.289-1.648 1.404-.105 4.036 1.872 3.467.217.703.78 1.184 1.432 1.357v6.076h-2v-4.877c-.304-.239-.551-.515-.546-.51-2.001-.266-3.454-2.114-3.454-4.069 0-.583.129-1.173.41-1.735-.322-1.653.654-3.337 2.356-3.874l.018-.006c.827-1.162 2.152-1.823 3.517-1.893l5.682-5.036 12.017 10.647-1.33 1.491-10.687-9.469-3.284 2.908c.308.164.595.36.855.59l2.419-2.149c1.126.998 2.255 1.995 3.384 2.993l2.258 1.994 3.385 2.995v10h-6v-5h-2v5zm-2-5.585c-.713.445-1.259.529-2 .585v3h2v-3.585zm1.415-1.406l4.585-.009v5h2v-7.117l-7.027-6.196-.813.72c1.124.795 1.697 2.21 1.351 3.614.646 1.147.669 2.693-.096 3.988m-5.962-3.688c1.495-1.022 3.241.769 2.302 2.224.002-1.472-.852-2.279-2.302-2.224m-2.118 1.19c-1.247-1.865 1.004-4.164 2.904-2.894-1.892-.032-2.946 1.043-2.904 2.894"/></svg> </div> Link to comment
Beyondspace Posted November 7, 2022 Share Posted November 7, 2022 31 minutes ago, kkedwards87 said: Hi, Here's my code for an SVG icon on the home page of my site. I'm wanting to have #336699 on hover. Screenshot of my site attached. Would I apply this to each individual icon code block or in the Custom CSS block? Can anyone help please? Thanks <div style="text-align: center"> <svg style="fill: #99CC33" width="80" height="80" viewBox=" 0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M13 23h-6v-6.065c.626-.155 1.04-.496 1.319-1.046 2.152.773 3.647-2.303 1.819-3.556.949-1.116.245-2.727-1.207-2.522-.698-2.361-4.151-2.379-4.85 0-1.405-.227-2.186 1.199-1.385 2.289-1.648 1.404-.105 4.036 1.872 3.467.217.703.78 1.184 1.432 1.357v6.076h-2v-4.877c-.304-.239-.551-.515-.546-.51-2.001-.266-3.454-2.114-3.454-4.069 0-.583.129-1.173.41-1.735-.322-1.653.654-3.337 2.356-3.874l.018-.006c.827-1.162 2.152-1.823 3.517-1.893l5.682-5.036 12.017 10.647-1.33 1.491-10.687-9.469-3.284 2.908c.308.164.595.36.855.59l2.419-2.149c1.126.998 2.255 1.995 3.384 2.993l2.258 1.994 3.385 2.995v10h-6v-5h-2v5zm-2-5.585c-.713.445-1.259.529-2 .585v3h2v-3.585zm1.415-1.406l4.585-.009v5h2v-7.117l-7.027-6.196-.813.72c1.124.795 1.697 2.21 1.351 3.614.646 1.147.669 2.693-.096 3.988m-5.962-3.688c1.495-1.022 3.241.769 2.302 2.224.002-1.472-.852-2.279-2.302-2.224m-2.118 1.19c-1.247-1.865 1.004-4.164 2.904-2.894-1.892-.032-2.946 1.043-2.904 2.894"/></svg> </div> Have you changed this code to your desired color? If it doesn't work, you can share your site with the site-wide password so we can take a look kkedwards87 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword HighlighterIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
creedon Posted November 7, 2022 Share Posted November 7, 2022 I suggest something like the following. <style> .svg-icon { fill : #99CC33; } .svg-icon:hover { fill : #336699; } </style> <div style="text-align: center"> <svg class="svg-icon" width="80" height="80" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"> <path d="M13 23h-6v-6.065c.626-.155 1.04-.496 1.319-1.046 2.152.773 3.647-2.303 1.819-3.556.949-1.116.245-2.727-1.207-2.522-.698-2.361-4.151-2.379-4.85 0-1.405-.227-2.186 1.199-1.385 2.289-1.648 1.404-.105 4.036 1.872 3.467.217.703.78 1.184 1.432 1.357v6.076h-2v-4.877c-.304-.239-.551-.515-.546-.51-2.001-.266-3.454-2.114-3.454-4.069 0-.583.129-1.173.41-1.735-.322-1.653.654-3.337 2.356-3.874l.018-.006c.827-1.162 2.152-1.823 3.517-1.893l5.682-5.036 12.017 10.647-1.33 1.491-10.687-9.469-3.284 2.908c.308.164.595.36.855.59l2.419-2.149c1.126.998 2.255 1.995 3.384 2.993l2.258 1.994 3.385 2.995v10h-6v-5h-2v5zm-2-5.585c-.713.445-1.259.529-2 .585v3h2v-3.585zm1.415-1.406l4.585-.009v5h2v-7.117l-7.027-6.196-.813.72c1.124.795 1.697 2.21 1.351 3.614.646 1.147.669 2.693-.096 3.988m-5.962-3.688c1.495-1.022 3.241.769 2.302 2.224.002-1.472-.852-2.279-2.302-2.224m-2.118 1.19c-1.247-1.865 1.004-4.164 2.904-2.894-1.892-.032-2.946 1.043-2.904 2.894"/> </svg> </div> I encourage you to change the svg-icon class name to something more appropriate to your context. Since I don't know what your context is, I just picked a very generic name. Since you have multiple icons you could break the style tag into a code block on its own so you don't have to repeat it for each icon. Let us know how it goes. kkedwards87 and tuanphan 2 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
kkedwards87 Posted November 8, 2022 Author Share Posted November 8, 2022 Thanks so much for your responses. @creedon your code worked perfectly. Really appreciate it. creedon 1 Link to comment
kkedwards87 Posted December 8, 2022 Author Share Posted December 8, 2022 Hi @creedon Do you know how I would link these icons to another page on the website or an external website? As an example, the code I've got for the first icon is as follows. How would I link that? Thank you <style> .tenancy-icon { fill: #99CC33; transition: 0.3s; } .tenancy-icon:hover { fill: #336699; </style> <div style="text-align: center"> <svg class="tenancy-icon" width="60" height="80" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"> <path d="M13 23h-6v-6.065c.626-.155 1.04-.496 1.319-1.046 2.152.773 3.647-2.303 1.819-3.556.949-1.116.245-2.727-1.207-2.522-.698-2.361-4.151-2.379-4.85 0-1.405-.227-2.186 1.199-1.385 2.289-1.648 1.404-.105 4.036 1.872 3.467.217.703.78 1.184 1.432 1.357v6.076h-2v-4.877c-.304-.239-.551-.515-.546-.51-2.001-.266-3.454-2.114-3.454-4.069 0-.583.129-1.173.41-1.735-.322-1.653.654-3.337 2.356-3.874l.018-.006c.827-1.162 2.152-1.823 3.517-1.893l5.682-5.036 12.017 10.647-1.33 1.491-10.687-9.469-3.284 2.908c.308.164.595.36.855.59l2.419-2.149c1.126.998 2.255 1.995 3.384 2.993l2.258 1.994 3.385 2.995v10h-6v-5h-2v5zm-2-5.585c-.713.445-1.259.529-2 .585v3h2v-3.585zm1.415-1.406l4.585-.009v5h2v-7.117l-7.027-6.196-.813.72c1.124.795 1.697 2.21 1.351 3.614.646 1.147.669 2.693-.096 3.988m-5.962-3.688c1.495-1.022 3.241.769 2.302 2.224.002-1.472-.852-2.279-2.302-2.224m-2.118 1.19c-1.247-1.865 1.004-4.164 2.904-2.894-1.892-.032-2.946 1.043-2.904 2.894"/></svg> </div> Link to comment
creedon Posted December 8, 2022 Share Posted December 8, 2022 (edited) On 12/7/2022 at 5:14 PM, kkedwards87 said: Do you know how I would link these icons to another page on the website or an external website? Try the following. <style> .tenancy-icon { fill : #99CC33; transition : 0.3s; } .tenancy-icon:hover { fill : #336699; } </style> <div style="text-align : center;"> <a alt="Squarespace" href="https://www.squarespace.com/" title="Squarespace" xlink:href="https://www.squarespace.com/"> <svg class="tenancy-icon" width="60" height="80" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"> <path d="M13 23h-6v-6.065c.626-.155 1.04-.496 1.319-1.046 2.152.773 3.647-2.303 1.819-3.556.949-1.116.245-2.727-1.207-2.522-.698-2.361-4.151-2.379-4.85 0-1.405-.227-2.186 1.199-1.385 2.289-1.648 1.404-.105 4.036 1.872 3.467.217.703.78 1.184 1.432 1.357v6.076h-2v-4.877c-.304-.239-.551-.515-.546-.51-2.001-.266-3.454-2.114-3.454-4.069 0-.583.129-1.173.41-1.735-.322-1.653.654-3.337 2.356-3.874l.018-.006c.827-1.162 2.152-1.823 3.517-1.893l5.682-5.036 12.017 10.647-1.33 1.491-10.687-9.469-3.284 2.908c.308.164.595.36.855.59l2.419-2.149c1.126.998 2.255 1.995 3.384 2.993l2.258 1.994 3.385 2.995v10h-6v-5h-2v5zm-2-5.585c-.713.445-1.259.529-2 .585v3h2v-3.585zm1.415-1.406l4.585-.009v5h2v-7.117l-7.027-6.196-.813.72c1.124.795 1.697 2.21 1.351 3.614.646 1.147.669 2.693-.096 3.988m-5.962-3.688c1.495-1.022 3.241.769 2.302 2.224.002-1.472-.852-2.279-2.302-2.224m-2.118 1.19c-1.247-1.865 1.004-4.164 2.904-2.894-1.892-.032-2.946 1.043-2.904 2.894"/> </svg> </a> </div> Let us know how it goes. Edited December 13, 2022 by creedon version 2 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
kkedwards87 Posted December 11, 2022 Author Share Posted December 11, 2022 @creedonthanks so much. That has worked however there's one small problem in that the icon is black until I hover on it and then it turns green and the blue hover works. Happens on each refresh. Link to comment
creedon Posted December 12, 2022 Share Posted December 12, 2022 9 hours ago, kkedwards87 said: That has worked however there's one small problem in that the icon is black until I hover on it and then it turns green and the blue hover works. Please post the URL for a page on your site where we can see your issue. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. Please set up a site-wide password, if your site is not public and you've not already done so. Post the password here. Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the site-wide password and how to share a link documentation to understand how they work. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
kkedwards87 Posted December 13, 2022 Author Share Posted December 13, 2022 @creedon https://ocht.squarespace.com/?password=OCHT Thank you! Link to comment
creedon Posted December 13, 2022 Share Posted December 13, 2022 On 12/11/2022 at 12:24 PM, kkedwards87 said: there's one small problem in that the icon is black until I hover on it I have updated my code post. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
kkedwards87 Posted December 13, 2022 Author Share Posted December 13, 2022 @creedonyou are such a star, thanks creedon 1 Link to comment
kkedwards87 Posted Monday at 01:11 AM Author Share Posted Monday at 01:11 AM (edited) Hi @creedon What would you put to link to an internal page instead of an external page in this section: <a alt="Squarespace" href="https://www.squarespace.com/" title="Squarespace" xlink:href="https://www.squarespace.com/"> I'd like to link the first icon to the apply for housing page. I need to build pages for the other icons. Also how do you hide the underline that comes up when a hyperlink is added? https://ocht-org-nz.squarespace.com/ p/w: ocht Thank you Edited Monday at 01:38 AM by kkedwards87 Link to comment
creedon Posted Monday at 04:27 AM Share Posted Monday at 04:27 AM 3 hours ago, kkedwards87 said: What would you put to link to an internal page instead of an external page in this section: In general you can just copy the URL Slug for the SS page. It is basically the full url (https://www.squarespace.com/your-url-slug-here) minus the beginning of the URL (https://www.squarespace.com). <a alt="Squarespace" href="/your-url-slug-here" title="Squarespace" xlink:href="/your-url-slug-here"> Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
creedon Posted Monday at 04:32 AM Share Posted Monday at 04:32 AM 3 hours ago, kkedwards87 said: Also how do you hide the underline that comes up when a hyperlink is added? Site-wide or specifically in the code you posted? Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
kkedwards87 Posted Monday at 08:00 PM Author Share Posted Monday at 08:00 PM @creedonthank you - the link works! Regarding the hyperlink, I think knowing both wouldn't be a bad idea please. Link to comment
creedon Posted Monday at 08:14 PM Share Posted Monday at 08:14 PM 11 minutes ago, kkedwards87 said: Regarding the hyperlink, I think knowing both wouldn't be a bad idea please. Please post the URL for a page where you are using code similar to what you posted so I can come up with some examples. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
kkedwards87 Posted Monday at 08:33 PM Author Share Posted Monday at 08:33 PM Hi @creedon The home page under the icons is the offender. https://ocht-org-nz.squarespace.com/ p/w: ocht Then the page /apply-for-housing has a hyperlink underlined. I don't think that looks as bad but it'd be good to know how to remove it all the same. Thank you. Link to comment
creedon Posted Monday at 09:05 PM Share Posted Monday at 09:05 PM 55 minutes ago, kkedwards87 said: Regarding the hyperlink, I think knowing both wouldn't be a bad idea please. At the text block level, site wide. .sqs-block-html a { text-decoration : none; } You can restrict it to certain blocks. #block-yui_3_17_2_1_1674081479053_21537 { text-decoration : none; } Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
kkedwards87 Posted Monday at 09:38 PM Author Share Posted Monday at 09:38 PM @creedonyou are a true legend - thank you. creedon 1 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