How would it be possible to change the color for a url that is a Custom Variable inserted in a transactional e-mail?

Question

Here is the custom variable: <a href="https://customer-support-page">CUSTOMER SUPPORT</a>

It gets a default color: #aaa; and I cannot manage to find where is that color set from in order to change it. I managed to override the text color by adding code in the "Template Styles" section of the e-mail template, and it looks fine in the Preview, but when I test it with gmail.com and hotmail.com, it displays with the default color.

Unfortunately, it is not an option to add an inline style directly to the variable and neither is it an option to have an inline style directly in the email template.

I am not sure what to do, I've been working with Magento2.3 for a couple of months now and my CSS and HTML knowledge and google only got me so far.

Could anyone please suggest where might I find a way to edit the color either of the links in e-mail templates or of the links in custom variables?

Answer 1

You should create a .less file for styling the email templates. Here are the steps:

1. On your custom variable, add a class for the anchor tag. Ex:

<a class="anchor-style" href="https://customer-support-page">CUSTOMER SUPPORT</a>

2. In your frontend theme, create a _email-extend.less file. Example path:

app/design/frontend/Doina/CustomTheme/web/css/source/_email-extend.less

3. In that .less file, add your CSS style for the anchor tag. Ex:

.anchor-style {
    color: #ccc;
}

4. Exec the bin/magento setup:upgrade command and see if it works.

Hope it can help you.