Jump to content

A Couple CSS questions for my site

Go to solution Solved by inside_the_square,

Recommended Posts

Posted

Hello!

I am a new Designer in the process of swapping over from Showit 🙂 I know some CSS, excited to learn more, and wondering if someone could assist me? 

I am trying to get the underline out of the navigation links? I don't want them to have the underline while on the current page, but can have when hovered over. 

Also trying to get a border around a couple images on the site. Is there a CSS snippet for this?

Thank you in advance!

site is URL above, password is: sparrowagent

Becky 

Posted

@Bexxx welcome! Please can you share your page URL, unfortunately even if you've shared it in your post, that is not shown to the forum for some reason.

Re removing underline, it will depend on which underlines.

But most should be able to be removed with the below CSS. Add this to your Website > Website Tools > Custom CSS. This will be applied to all text link that has text-decoration set.

a {
  text-decoration: none!important;
}

Let me know how it goes.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Web Designer & Developer | All things Squarespace
When I have time, I like to help on the Forum, but if you need my full attention, please send your request here.

Tools I use: (affiliate links)
📅Blog Date Format plugin (Free by BeyondSpace)
Lazy Load Summary Block plugin (by Squareswebsites
)
📜Privacy Policy & Cookie Consent plugin (10% off by Termageddon
)
📈SEO plugin for Squarespace (by SEOSpace
)

 Did I help? I like coffee (Thank you)

Posted

oh sorry! yes I did it in the title... URL is:

https://sparrowagent.squarespace.com and password is sparrowagent

hopefully it's ok that it isn't live yet! 

thank you so much for answering! that didn't work for the underline but i thought something weird might be going on since that was how I thought you did it! Thank you for answering!

Posted

I used this code but it changes all the color in the nav even if you hover only the home.. is there a way that only to change color for each one you hover?

 

  • Solution
Posted

Hey @Bexxx - welcome to Squarespace! 👋 
A lot of the coding you used in Showit will work for common HTML things, like the a that you'll use to target an active link. But you've already discovered that Squarespace has its own unique selectors for some important things. 😉

The active link in your website header has a background image you can hide with a version @tuanphan 's code. This code below will hide the underline from pages you are actively on, and leave a border hover effect that will be the same color as your nav color, even if you change it in the site style menu: 

.header-nav-item--active a{background:transparent!important}
.header-nav-item a:hover{border-bottom:1px solid var(--solidHeaderNavigationColor)!important}

If there are other things you want to change, you'll find a ton of free codes on my tutorial blog at insidethesquare.co/squarespace-tutorials

 

I hope all that info helps, and best of luck with your Squarespace project!

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

Posted

I also forgot about your second question - borders! Those can be tricky for images. If you have one set to "fill" instead of fit, or a shape, you can use a basic border code. All content blocks get a unique block id that you can find with a free Chrome extension that a lot of us use ( https://insidethesquare.co/chromeext )

Here is a tutorial about creating code for specific blocks: https://insidethesquare.co/squarespace-tutorials/css-targeting-tricks

and here is an article about borders: https://insidethesquare.co/borders

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

Posted
On 3/12/2024 at 7:39 PM, inside_the_square said:

I also forgot about your second question - borders! Those can be tricky for images. If you have one set to "fill" instead of fit, or a shape, you can use a basic border code. All content blocks get a unique block id that you can find with a free Chrome extension that a lot of us use ( https://insidethesquare.co/chromeext )

Here is a tutorial about creating code for specific blocks: https://insidethesquare.co/squarespace-tutorials/css-targeting-tricks

and here is an article about borders: https://insidethesquare.co/borders

Thank you so much! I got that Chrome extension and it helps a lot. Also got the borders figure out. Thanks again for all your help!!

Posted

I'm just starting to understand how this forum works so thank you for all the replies! I didn't get a notification or anything so I didn't know anyone had replied 🙂 I think I'm understanding how it works better! Which is great because I always have a lot of questions 🙂 

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.