A Couple CSS questions for my site

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 

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

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!

With header nav links, use this CSS code

header#header a {
    background-image: none !important;
}

header#header a:after {
    visibility: hidden;
}

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?

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

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

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 🙂