nechonecho Posted December 27, 2021 Share Posted December 27, 2021 Site URL: https://cube-sawfish-32eb.squarespace.com/config/pages Hello I have a product page where the background theme is white. The issue I have is my links colours are also white. I would like to change the font colour for this one page (as well as the social media icons and cart icon too). This is the store main page: This is the store page (after you select an item to buy). I have a code but it changes for the store page, I only want to change for the products: <style> nav#mainNavigation * { color: blue !important; } </style> Hope this makes sense. Thanks Robin Link to comment
creedon Posted December 27, 2021 Share Posted December 27, 2021 Please post the URL for a page on your site where we can see your issue. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works. Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
nechonecho Posted December 27, 2021 Author Share Posted December 27, 2021 Apologies, I have added password now: Welcome2021Test Site: https://cube-sawfish-32eb.squarespace.com/store When you click into 'STORE' and choose a product, you will see the header menu links, social icons and cart icon are white which clashes with the white background. I would like to change the colour here only so that it is black. Hope this makes sense. Thanks, Robin Link to comment
creedon Posted December 27, 2021 Share Posted December 27, 2021 (edited) Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection. <style> /* begin product detail header color invert */ .view-item #header { --color : black; } /* do not change anything below, there be the borg here */ .view-item .header-title-logo { -webkit-filter : invert( 100% ); filter : invert( 100% ); } body.view-item:not( .header--menu-open ) [data-header-style="solid"].header .header-nav-wrapper a, body.view-item:not( .header--menu-open ) [data-header-style="solid"].header .header-nav-wrapper .header-nav-item--active a { color : var( --color ); } body.view-item:not( .header--menu-open ) [data-header-style="solid"].header .header-actions .icon--fill svg { fill : var( --color ); } body.view-item:not( .header--menu-open ) [data-header-style="solid"].header .header-actions .icon--stroke svg { stroke : var( --color ); } /* end product detail header color invert */ </style> This is for v7.1. Let us know how it goes. Edited December 28, 2021 by creedon version 2 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
nechonecho Posted December 28, 2021 Author Share Posted December 28, 2021 Thanks for the code, it has worked! Do you think we could also colour the social media icons and the 'Cart' icon to black to, so that it's consistent? Really appreciate your help here. Thanks Robin Link to comment
creedon Posted December 28, 2021 Share Posted December 28, 2021 I have updated my code post. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
nechonecho Posted January 2, 2022 Author Share Posted January 2, 2022 Apologies for the delay in responding, this new code has worked perfectly Appreciate your help, thanks again. Best, Rob creedon 1 Link to comment
AliceC Posted January 31, 2023 Share Posted January 31, 2023 I have a similar issue. I have one page of my site to which I've added an html table and links to each email address, one for each row. However, the link doesn't show up in colour to prompt people to click and I'd like to add the colour. Cannot find exactly how to do this as don't want to change it for any other pages. Any help gratefully received - here's some html; <head> <style> table, th, td { border: 1px solid black; border-collapse:collapse; } </style> </head> <body><table> <tr> <th>Country</th> <th>Registry name</th> <th>Contact</th> </tr> <tr> <td>Australia and worldwide</td> <td>LOVD COL4A5 COL4A3 and COL4A4</td> <td><a href = "mailto: jasavige@unimelb.edu.au">Judy Savige</a></td> </tr> Link to comment
tuanphan Posted February 3, 2023 Share Posted February 3, 2023 On 1/31/2023 at 7:32 PM, AliceC said: I have a similar issue. I have one page of my site to which I've added an html table and links to each email address, one for each row. However, the link doesn't show up in colour to prompt people to click and I'd like to add the colour. Cannot find exactly how to do this as don't want to change it for any other pages. Any help gratefully received - here's some html; <head> <style> table, th, td { border: 1px solid black; border-collapse:collapse; } </style> </head> <body><table> <tr> <th>Country</th> <th>Registry name</th> <th>Contact</th> </tr> <tr> <td>Australia and worldwide</td> <td>LOVD COL4A5 COL4A3 and COL4A4</td> <td><a href = "mailto: jasavige@unimelb.edu.au">Judy Savige</a></td> </tr> Need no space here Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
javierospina Posted July 17, 2023 Share Posted July 17, 2023 I have similar problem and my store page but specificity when you clin on an item take a look: https://www.javierospina.com/store/ibiza-es-vedr-gsxye I want to add and image or solid color on the top. since my logo is white Link to comment
tuanphan Posted July 19, 2023 Share Posted July 19, 2023 On 7/18/2023 at 1:23 AM, javierospina said: I have similar problem and my store page but specificity when you clin on an item take a look: https://www.javierospina.com/store/ibiza-es-vedr-gsxye I want to add and image or solid color on the top. since my logo is white See this answer Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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