Jump to content

Custom highlight color for text, need text to change color when highlighted

Recommended Posts

I changed the highlight color to be more attune to my sites palette but the black font is now hard to see, I would like for it to change color when highlighted as shown in the picture. Can anyone help with custom CSS to achieve this? Thank you!

*Password to view site is 'private'

Screenshot 2023-01-16 at 4.53.30 PM.png

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

56 minutes ago, blakelyhi said:

I changed the highlight color to be more attune to my sites palette but the black font is now hard to see, I would like for it to change color when highlighted as shown in the picture. Can anyone help with custom CSS to achieve this? Thank you!

*Password to view site is 'private'

Screenshot 2023-01-16 at 4.53.30 PM.png

How can you set this highlight color? Text change + text effect?

Can you provide your URL so we can take a look?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
14 hours ago, blakelyhi said:

Custom css to alter the highlight color, need to change text color only when highlighted... 

url: https://caterpillar-ranunculus-pm6a.squarespace.com/

I can not find the text you mentioned before. Can you share the link to this page?

By the way, have you tried changing the individual text yet? This is the standard feature of squarespace

image.thumb.png.1ba3f505247e564fac9e0266df1a5489.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
2 minutes ago, blakelyhi said:

I don't want it highlighted always, just when you drag the mouse over text to highlight for the text to change colors so it's visible... like the photo in my initial post above. It's black text but when highlighted changes to white. 

You can try adding to Home > Design > Custom Css

::selection {
  color:#fff;
  background: #ccc; /*if you want custom the selected text*/
}

Support me by pressing 👍  or marking as solution if this useful for you

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

My testing

image.thumb.png.ade2c992ac85bd7bbb1e3475e442f690.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.