On styling links

On styling links

  

Hi forum,

I am currently working on a web application where I want to use breadcrumbs from Silk UI. In the breadcrumbs template I can add my links and I want the first link to look static, but the problem is that I can't seem to understand how to style my link at all. Right now when I add the link it is invisible. 

The answer could be that I am too bad at CSS so I was hoping someone could help me understand how to style a link to look like a static text or a button. Maybe a link is not the smartest widget to use.

Thanks in advance!

Hi Jack,

This is an example of what you can do:

SyntaxEditor Code Snippet

a:link, a:visited {
    color: black;
    text-decoration: none;
}

Also you can check this link https://www.w3schools.com/css/css_link.asp with a lot more ways of do it.

Regards,

Marcelo

Marcelo Ferreira wrote:

Hi Jack,

This is an example of what you can do:

SyntaxEditor Code Snippet

a:link, a:visited {
    color: black;
    text-decoration: none;
}

Also you can check this link https://www.w3schools.com/css/css_link.asp with a lot more ways of do it.

Regards,

Marcelo

Thank you for your answer Marcelo, so the smartest way the style links is by using the 'a'-tag?

The problem that I cannot see what I am styling still stands though, how do I set the link text that is displayed in Outsystems?

thanks for your time!


Hi Jack,

If your using the SILK UI breadcrumbs, and in the first one you dont want to have it working as a link, you can just put a text inside the breadcrumb(level1) instead of a link.

If you want to customize your links, you can follow Marcelo's suggestion. If you dont know how to find the correct tags to change the CSS, you should use the browser developer tools, and then click on the object you want to change and you should be able to see what needs to be changed. 


Best regards,

Bruno Guedes

Solution

Hi Jack,

You only can use classes if you want to change only a specific link. Depends on the requirements.

Inside the link you just need to add text. You can find it on the left near expression.

Regards,

Marcelo

Solution

Thank you guys, I understand now, I have to put widgets inside my link like a container :)

Until next time!

Best regards