15
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!







Rank: #5569

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.

Rank: #383

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

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

Rank: #692

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

Rank: #90

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