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

Five: How to underline body text links?

Question

I want to underline two names that are part of the body text that are linked to content that isn’t on the navigation.

Here’s the site: http://mathias-ivanissevich-edpd.squarespace.com/contact/

The idea is to have ‘Jorge di Bendetto’ and ‘Lucía Iturbe’ underlined so its clear that they are links.The Style Editor only allows me to change link colors and hover colors.

Edited by Mathi
Tidy

Share this post


Link to post

9 answers to this question

Recommended Posts

  • 0

Mathias, I like very much the image that headlines your website. That's a nice photo.

Are you familiar with adding CSS rules to the Custom CSS Editor? You get there by clicking the paintbrush icon, scrolling to the bottom of the Style Editor, and clicking the Custom CSS button.

I can offer two ideas for underlining the links. One idea is to add a simple underline to the font:


#canvas-wrapper a {text-decoration: underline;}

I did not so much like the look of the result, so I also offer this alternative approach:


#canvas-wrapper a {border-bottom: black solid 1px;}

Add one of these rules to your Custom CSS Editor. You should see results. Then you can decide which result you prefer. If you like, you can change 1px to 2px (or any other number) and get a thicker line.

The use of #canvas-wrapper in the rules above targets the html DIV element containing the main body content of your page. Links in the footer and the header will not be affected.

Jonathan Gennick, Author: Learn CSS for Squarespace

Share this post


Link to post
  • 0

I appreciate the answer, however the problem with the CSS rules that you provided is that it applies to every link on the site, including the Navigation buttons. I'm trying to only underline the links in the Body of the contacts page.

Share this post


Link to post
  • 0

I'm sorry. I don't know how I missed seeing that. Target the page body instead:


#page-body-wrapper {border-bottom: white solid 1px;}

It looks like you've instead solved the problem by changing the link color to white. That might be a better approach. I like it better than to have the underlines.

The rule I give here will cause some trouble if you ever place a Call to Action button in your page body. That's another reason to go with your current approach of making the links white.

Share this post


Link to post
  • 0

I like this, but I want the underline to not cross text, to be spaced from text, you know, too close to text looks clumsy, even as it crosses the leg of g...

Share this post


Link to post
  • 0

I like this, but I want the underline to not cross text, to be spaced from text, you know, too close to text looks clumsy, even as it crosses the leg of g...

Share this post


Link to post
  • 0

Hi there - I've applied the following custom CSS:


#page-body-wrapper a {border-bottom: #ED7002 dotted 1px;}

as I want the luiks within the body text to be underlined. However when I view my blog all the links within that are all underlined now too and I don't want this - I only want to target links within the page text - is there a way to do that?

Edited by Milomade
Initial Revision

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