Jump to content

CSS - Not include footer in changes

Recommended Posts

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 by WACweb
Added url and password
Link to comment

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.

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

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 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
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

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; 
}

 

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.