WACweb Posted January 27, 2021 Share Posted January 27, 2021 (edited) Site URL: http://www.wilmingtonapparelco.com Hi, I used CSS on my page to remove underlines for links and change color to black upon hover, but I don't want those changes to affect my footer. What can I do to modify my code to make this happen? Site password: temppass Current code: a { background-image: none !important; } a { color: white !important; } a:hover { color: black !important; } Edited January 27, 2021 by WACweb Added url and password Link to comment
christyprice Posted January 27, 2021 Share Posted January 27, 2021 Hi @WACweb, the code may depend on what template you are using. Are you in Squarespace 7.1? Or 7.0? If 7.0, what template family? You can find this under Help when logged into your site. WACweb 1 christyprice.com 🇺🇸 Austin, TX US ✅ For Web Designers: Squarespace Client Process Checklist. Save time and bring consistency to your web design projects. Receive a Notion doc template with my 100+ item client process checklist. Link to comment
creedon Posted January 27, 2021 Share Posted January 27, 2021 Please post the URL for your site. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. We can then take a look at your issue. WACweb 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
WACweb Posted January 27, 2021 Author Share Posted January 27, 2021 (edited) @christypriceUsing 7.1 @creedon www.wilmingtonapparelco.com password: temppass Edited January 27, 2021 by WACweb Link to comment
creedon Posted January 27, 2021 Share Posted January 27, 2021 (edited) Please remove, make a copy somewhere, your original CSS. Replace with the following. /* hide underlines */ body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .header-nav-item--active a, .bright .sqs-block-html a, .sqs-block-html a { background-image : none; } /* black hover */ a:hover, body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .header-nav-wrapper a:hover, body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .header-nav-wrapper .header-nav-item--active a:hover { color : black; } /* footer light gray hover */ #footer-sections .bright .sqs-block-html a:hover { color : lightgray; } If there are any places where text or links are not being color properly. Let us know by posting a URL to the page effected and describing where things are not working. Let us know how it goes. Edited January 27, 2021 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
WACweb Posted January 27, 2021 Author Share Posted January 27, 2021 11 hours ago, creedon said: Please remove, make a copy somewhere, your original CSS. Replace with the following. a { background-image: none; color: #fff; } a:hover, body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .header-nav-wrapper a:hover, body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .header-nav-wrapper .header-nav-item--active a:hover { color: #000; } If there are any places where text or links are not being color properly. Let us know by posting a URL to the page effected and describing where things are not working. Let us know how it goes. @creedon So sorry - I don't believe I may have asked my question clearly. It appears that this code removed the original intended effects and added the underline back and removed the hover effect on all links. Instead, how might I keep the effects of the original code (no underline on links, hover color change to black) and only the footer hover color change to gray (also no underline). I'm essentially looking to change the color theme from Accent Dark to White Minimal in the footer. The url is the same www.wilmingtonapparelco.com - it's the homepage where the issue is. Link to comment
creedon Posted January 27, 2021 Share Posted January 27, 2021 @WACweb I've updated my code post. Let's see if it gets you closer. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
christyprice Posted January 28, 2021 Share Posted January 28, 2021 Hi @WACweb, here's how I'd solve it to have the code affect only the header and page: /* customization for header AND main page, not footer */ #page a, #header a { background-image: none !important; color: white !important; } #page a:hover, #header a:hover { color: black !important; } tuanphan 1 christyprice.com 🇺🇸 Austin, TX US ✅ For Web Designers: Squarespace Client Process Checklist. Save time and bring consistency to your web design projects. Receive a Notion doc template with my 100+ item client process checklist. 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