Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
RachelSwafford

Changing the active/hover color on Hawley portfolio from black to white

Question

Site URL: https://rachelswafford.com/

I've seen a few posts about this, but never the solution to my current issue - hoping someone can help.

I'm using Hawley, and I've selected the Hover:Background variant for my homepage. My site is white with black text by default, and when I hover over the  different projects, I want the text to ALL be white.

I can get the text to be black while on white OR white while over the image, but never at the same time. 

I've tried every variation of this code snippet I could think of:

[data-active="false"] span.portfolio-hover-item-content { color: #000000;}
[data-active="true"] span.portfolio-hover-item-content {color: #FFFFFF;}

I've tried switching the order. I've tried adding !important (on one, on the other, on both)... I cannot figure this out.

Desired inactive and active states below:

desired-inactive.png

desired-active.png

Share this post


Link to post

11 answers to this question

Recommended Posts

  • 0

Are the backgrounds not set up currently on your page?

Try this:

.portfolio-hover-items-list:hover span.portfolio-hover-item-content {
    color: #fff;
}

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
17 minutes ago, rwp said:

Are the backgrounds not set up currently on your page?

Try this:


.portfolio-hover-items-list:hover span.portfolio-hover-item-content {
    color: #fff;
}

 

It worked!!! thank you so much - this has been driving me insane.

It's possible the backgrounds weren't set up when you looked, I've been testing different code options for the last hour or so - it's all up now.

Share this post


Link to post
  • 0

The backgrounds still are not showing up for me.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
Posted (edited)
11 minutes ago, rwp said:

The backgrounds still are not showing up for me.

Are you in Safari? I just checked and apparently NONE of the images are showing up across my entire site. 

I've been testing in Chrome and it all works fine.

 

**Update: I cleared my cache in Safari and it all loaded fine. Should I be concerned about other potential Safari users not being able to view my site properly?

Edited by RachelSwafford
update

Share this post


Link to post
  • 0

I am on firefox.

Temporarily comment out all of your custom css to see if the issue is in there.

CSS can be commented out by putting /* in front of the css and */ at the end

/* This is my custom css

This is my custom css

This is my custom css

This is my custom css

This is my custom css */


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
1 minute ago, RachelSwafford said:

Done - do you see the images now?

I do not, and unfortunately I do not know enough about that theme to have any idea why they are not showing.

You can remove the comments from your CSS though, that's not the issue.

Are you using any other custom coding anywhere on your page?


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
Posted (edited)

So it kind of works on my phone, but not really.

It 100% works on my laptop while using the touch screen.

It does not work at all with the mouse.

Tested in both firefox and edge, same results.

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

I'm looking through my files and my images are all pretty massive - I'm optimizing them all for web now.

I just updated the homepage and the first project with images all under 500kb (some of them were over 7MB...)

 

Hoping that solves it. Would you mind checking one more time? 

Share this post


Link to post
  • 0
Posted (edited)

Same result here.

Not sure why, because it works if I long press the touch screen. Nothing with the mouse.

Edit, I have been checking in incognito/private windows too, so its a full refresh with no caching.

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...