205
Views
6
Comments
Can't override link expression design

I am creating an email template that display an external link. That link is in site properties (It is dynamic). However, I cannot override its default design.

I tried using this css in extended properties style but no luck at all:

"text-decoration: none !important;
font-family: 'Helvetica';
font-size: 11px;
color: #095fff !important"


Output:


Expected Output: Without underline, small font size, lighter blue color.

How can I be able to override it properly?

Thanks in advance! Cheers!







2019-10-12 16-00-12
Giovane

Arci Jeirico Malabanan wrote:

I am creating an email template that display an external link. However, I cannot override its default design.

I tried using this css in extended properties style but no luck at all:

"text-decoration: none !important;
font-family: 'Helvetica';
font-size: 11px;
color: #095fff !important"


Output:


Expected Output: Without underline, small font size, lighter blue color.

How can I be able to override it properly?

Thanks in advance! Cheers!







 That depends on where you put the css. Remember the hierarchy of CSS in OutSystems. Could be that the cause of CSS not apply correctly.

UserImage.jpg
Arci Jeirico Malabanan

Giovane wrote:

Arci Jeirico Malabanan wrote:

I am creating an email template that display an external link. However, I cannot override its default design.

I tried using this css in extended properties style but no luck at all:

"text-decoration: none !important;
font-family: 'Helvetica';
font-size: 11px;
color: #095fff !important"


Output:


Expected Output: Without underline, small font size, lighter blue color.

How can I be able to override it properly?

Thanks in advance! Cheers!







 That depends on where you put the css. Remember the hierarchy of CSS in OutSystems. Could be that the cause of CSS not apply correctly.

 

 hmmm. when I checked, there is no other CSS to be prioritized with except only this one in extended properties.



"text-decoration: none !important;
font-family: 'Helvetica';
font-size: 11px;
color: #095fff !important"


2026-01-26 10-25-31
Lennart Kraak
Champion

Hi Arci,

Just to be sure: Did you add that CSS part to the A-element (Link) and not accidentally to the expression/test part?

Another thing I noticed is that Outsystems adds styles defined in the CSS-file as inline styles to assure they're used by the mail client. Maybe this is the issue and are styles you added inline overwritten?

Regards,
Lennart

2021-02-02 11-55-27
Tushar Panpaliya

Did you try checking this in your browser dev tools(F12) to see if these properties show up anywhere even as strikethrough and if any other css is actually overriding it  ? 


Cheers,

Tushar

2023-03-09 07-10-59
Vipasha Sharma

Hi,

Inside the template you can directly use site property value in expression it will work for you when you trigger an email

or

Use the style property of you expression and put CSS as shown below

"text-decoration: none;

font-size: 15px;"

And change the color from the "style" property of expression as shown in last snapshot


Hope this will help you

Regards,

Vipasha

2026-02-26 06-29-24
Rahul
 
MVP

Hi Arci,

Create a class on page like-

.MyLink{

text-decoration: none;

  font-size: 14px;

  color: #5f5fdc;

 font-weight: 600;

}


Output - 

and apply this class on your link.


Hope this will help you.

Regards

Rahul

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.