Dashed underline in hyperlinks

Dick,

You can use it snippet.

.u-text a {
text-decoration: none;
}
.u-text a:link {
border-bottom: 1px dashed;
}
.u-text a:visited {
border-bottom: 1px dashed;
}
.u-text a:active {
border-bottom: 1px dashed;
}

...................................................
Sincerely,
Alex O.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Sorry, Alex, what do you mean by 'Snippet'? English is not my native language.
I tried to change my CSS code lines into yours, but that doesn't change anything.
Also I tried to remove my lines out of the CSS block in the footer and moved yours into the site CSS, but no change here either.
Could you be more specific?

Hi,

Simply add the provided code to the Site Settings >> CSS instead of the CSS for a elements you used.
Please note that you will see the result in the browser preview only.
You added dashed underline to ALL page links. The corrected code adds dashed underline to the text links only.
Please let us know if you need our further assistance.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi, I assumed that a CSS code once added to a footer that this automatically would be effective on all pages. This assumption was wrong, the footer code obviously needs to be repeated on eacht page. I now cleared the text styling part from the footer CSS and added the provided code in he website CSS part. It now works fine, thnx.

Hi, strange things happen with hyperlinks on my website... (www.vandebraamhoeve.nl)
As described earlier, I want a dashed underline under each hyperlink, everywhere but the header and footer.
Therefor I pasted the given code as you explained in Site settings > CSS.

On all pages created with earlier versions of NP, this works fine, except that the mail address in the footer also is underlined which I'd rather not want. With later versions of NP (mine is 3.5.3) every hyperlink I now create turns into a button which as a result doesn't get the dashed underline. Why do I get a button for every hyperlink I make?

Is there no other way to set the way hyperlinks should be showed? In earlier versions of NP this really was possible by changing the theme setting of hyperlinks, but at some time this setting was removed from NP. Really don't know why...

Regards

Dick,

Many our users ask to add button in text.
So we combined button and link in one element and allow to switch between them.
But when you add a link in the Text, it looks like a link, not a button.
it will also use styles from Theme / Typography / Hyperlink.
So you can continue change settings of hyperlinks in theme, this option is not removed.

Can you please make some screenshot or video to demonstrate your issue, or what do you want to do.

...................................................
Sincerely,
Eugene
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Eugene, I simply want that the settings I make in the back are visible in the front.
As stated, I would like to set hyperlinks with a dashed underscore. NP has no setting for this anymore to my regrets (see screenshot 1), so I appearently have to solve this with additional CSS code.
Also, when I make changes to the hypelink setting (e.g. from normal to italic), these changes do not affect newly made hypelinks (buttons) (see screenshot 2) while they do affect the old text hyperlinks (not buttons) on my website made with 2019-version of NP (see screenshot 3).
So if I can't set a dashed underscore in the NP settings anymore, where do I put the CSS-code so that only hyperlinks in body text have the dashed underscore?

Regards

Last edited 08 February 2021 by DixQue

Hi Dick,

Sorry for the late reply.

Please allow me step-by-step instructions you how to get your dashed underscore hyperlinks.

Insert the element Grid with two columns into your Block, add the image for one column and the second one, add an HTML element on your right-side panel

Enter the required text (description) in the Code area on Property Panel.

Set for the hyperlinks you wish a separate class, let's call it "underline" for example.
Lorem ipsum

Then highlight the HTML block and assign the CSS class name "underline">>Edit CSS

Paste this code to the Page Properties CSS.

underline {
text-decoration: none;
border-bottom: 1px dashed #444;
color:#444;
}

As a result, in the end, you should have something similar to these blocks.

Please note: If you wish to apply dashed underscore for all your hyperlinks, adjust the previous code snippet and add it to the Site Settings >> CSS:

.u-text a {
text-decoration: none; }
.u-text a:link {
border-bottom: 1px dashed!important; }
.u-text a:visited {
border-bottom: 1px dashed!important; }
.u-text a:active {
border-bottom: 1px dashed!important; }

If you have any other questions, please feel free to contact us.
...................................................
Sincerely,
Ahmad M.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1.
Follow us on Facebook: http://facebook.com/nicepageapp.

Last edited 18 February 2021 by Support Team

Hi Ahmad, your solution seems to work (as a result of the '!important' addition in the class code?).
Is there a way to not underline hyperlinks in the footer, as they are also not visible in the menu in the header?
Regards, Dick

Hi Dick,

In case dashed underline applies for other hyperlinks, you need to set for it a separate CSS class with the code
e.g.

/*yellow Hyperlink*/
.footermenu {
text-decoration: none; }
.footermenu {
color: #FFD201;
letter-spacing: 1px;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent; }

Please feel free to contact us if you have any other questions.
...................................................
Sincerely,
Ahmad M.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1.
Follow us on Facebook: http://facebook.com/nicepageapp.