Jump to content

A Couple CSS questions for my site

Go to solution Solved by inside_the_square,

Recommended Posts

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 

Link to comment

@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 | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (may contain affiliate links)


 

Link to comment
  • Solution

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

 

Link to comment

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

 

Link to comment
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!!

Link to comment

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 🙂 

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.