Extra link styles for different text formats (underline strokewidth etc)

[dnz]

Hey Armin,

I came across a problem I couldn't fix myself.

So I have two separate text formats, one big one for an intro text (only a few lines) and a smaller one for longer copy texts. Both contain links. If I set the underline strokewidth to e.g. 4 in the customize menu it obviously applies the 4 px strokewidth to every text format there is. That looks odd in some cases (too large of a stroke for the small texts, too small of a stroke for the large texts).

So is there a way to style links in both these text formats separately? I tried writing a custom <a> css but the global settings seem to override everything I try. It would be enough if I could control the strokewidth for both text formats individually. Any chance to do this?

Thanks!

Best regards,
Dennis

[arminunruh]

Hey Dennis!
Try this CSS:

.lay-textformat-parent ._My_Headline a {
    border-bottom-width: 2px;
    color: #1dff00;
}

/*mouseover state*/
.lay-textformat-parent ._My_Headline a:hover {
    border-bottom-width: 22px;
    color: red;
}

"_My_Headline" is the html class of a textformat called "My_Headline". If you look at your textformats you will see that text "HTML Class: …". It's just your textformat name with an underscore.

[dnz]

Hey Armin,

Thanks, man! Works like a charm!

Best regards,
Dennis

[Hayo Gebauer]

I also have a problem with link format.

I have different text boxes with the same format text. One of them is black font the other is white, but same format...

the hover effect is only working on the black font

[arminunruh]

Hey Hayo, can you send me the link?

[peolold]

Following up on this thread:

Website:
https://peolold.de/portfolio/
-> referring to fifth project from the top called "porta"
-> referring to desktop version

Problem:
The linked textheadline "porta" is styled correctly by the settings I set in the "Customize" tab.
The linked part of the paragraph "jung von matt / spree" is styled correctly by the custom CSS via the new created texformat "plainlinks" when not hovered. When hovered, it seems to jump back to the hovered settings set in the "Customize" tab instead of listening to the custom CSS.

I used the custom CSS posted above:

.lay-textformat-parent ._plainlinks a {
    font-weight: normal;
}

.lay-textformat-parent ._plainlinks a:hover {
    font-weight: normal;
}

[arminunruh]

._plainlinks a:hover{
font-weight: 400!important:
}

using !important overwrites other css
does that work?

[peolold]

That did the trick. Thanks as always for the quick support! :)