kherzog Posted June 29, 2020 Share Posted June 29, 2020 Site URL: https://www.lynnemeade.com Hi, I've turned on "Underline Body Links" option in site styles to go with the website's minimalist design aesthetic. A double underline of these links has arisen when adding code blocks to display a colored background, text and links. In order for the links in these code blocks to have an underline, I've used the code: p a {text-decoration: underline!important}. Without that code, the links aren't displaying according the link site styles setting. To view the double underline display issue on a page that has a code block with a link underlined: https://www.lynnemeade.com/contact To view the single underline display on a page that has a code block without any links: https://www.lynnemeade.com/teaching-workshops I've tried various ways to resolve the link problem and am stumped at this point. I would be most appreciative for a way to resolve the double underline display issue. Thank you in advance, Karen Link to comment
tuanphan Posted June 30, 2020 Share Posted June 30, 2020 Add to Page Settings > Advanced > Header (or use Code Block) <style> a { border-bottom: none !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kherzog Posted June 30, 2020 Author Share Posted June 30, 2020 7 hours ago, tuanphan said: Add to Page Settings > Advanced > Header (or use Code Block) <style> a { border-bottom: none !important; } </style> Thank you for the code @tuanphan. I wished it had resolved the link display issue. When I inserted the code above in the Page Settings > Advance > Header, the code removed the light grey underline in all links of the Contact page. I've since removed that code and the code to style links in the code block, that is "p a {text-decoration: underline!important;}", so that the black double underline in all links on the page disappears and the site styled gray link underlines remain. Let's try another approach: My goals for pages with code blocks with links and light gray backgrounds are to: 1) not affect the light gray paragraph and footer links that are styled by the "Underline Body Links" option in site styles 2) style links in code blocks with gray backgrounds with a black underline How can these two goals be achieved with custom CSS? I would so much appreciate any guidance. Thank you in advance! Link to comment
tuanphan Posted July 1, 2020 Share Posted July 1, 2020 12 hours ago, kherzog said: Thank you for the code @tuanphan. I wished it had resolved the link display issue. When I inserted the code above in the Page Settings > Advance > Header, the code removed the light grey underline in all links of the Contact page. I've since removed that code and the code to style links in the code block, that is "p a {text-decoration: underline!important;}", so that the black double underline in all links on the page disappears and the site styled gray link underlines remain. Let's try another approach: My goals for pages with code blocks with links and light gray backgrounds are to: 1) not affect the light gray paragraph and footer links that are styled by the "Underline Body Links" option in site styles 2) style links in code blocks with gray backgrounds with a black underline How can these two goals be achieved with custom CSS? I would so much appreciate any guidance. Thank you in advance! Try this <style> .code-block a { border-bottom: none !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kherzog Posted July 2, 2020 Author Share Posted July 2, 2020 15 hours ago, tuanphan said: Try this <style> .code-block a { border-bottom: none !important; } </style> @tuanphan Thank you for updated code. I modified it to display an underline in links in the code block (see below). Adding the modified code to Page Settings > Advanced > Header worked. Hurrah!! <style> .code-block a { text-decoration: underline!important;} } </style> I so much appreciate your assistance! Link to comment
Jana-Aregger Posted March 12, 2021 Share Posted March 12, 2021 Hello I think I've got nearly the same problem. After I inserted some code this week, the heading links are double underlined. I didn't find out how to get back to just one line. Does someone know how to solve this? Link to the page: https://centrum-niederwangen.squarespace.com Thanks a lot in advance! Link to comment
Jana-Aregger Posted March 12, 2021 Share Posted March 12, 2021 <style> .code-block a { border-bottom: none !important; } </style> unfortunately did not work Link to comment
Jiyalogueonline Posted March 12, 2021 Share Posted March 12, 2021 6 hours ago, Jana-Aregger said: Hello I think I've got nearly the same problem. After I inserted some code this week, the heading links are double underlined. I didn't find out how to get back to just one line. Does someone know how to solve this? Link to the page: https://centrum-niederwangen.squarespace.com Thanks a lot in advance! Hi! I had gotten rid of underlined links for my website with this code: a {background-image:none !important;} But, I just noticed that heading links were suddenly single underlined again on my site. I thought it was quite random so started looking for how to get rid of it. When i removed the above code, mine were double underlined too. I managed to get rid of the extra random underline by using the code shared by user kherzog like this: a {text-decoration: none!important;} Hope this helps you too! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment