Styling merge code hyperlinks with CSS

Max Classic
1

We are building an email template using custom HTML.

The enclosed attachment shows the code block and also how it’s appeared following a test email send from our Infusionsoft system.

Any tips or advice on how to get the link to preview properly?

styling-issue
styling-issue2086×1144 365 KB

Any help really appreciated.

SK

2

The more I research the above, it seems it’s down to the system automatically creating a CSS class (e.g. class=“inf-track-55”), which makes sense, but even following these guidelines:

If you are copying / pasting code form an outside email editor (e.g. Dreamweaver), navigate away from the email, and then double-click on it to return and copy the updated code (with the updated CSS). Paste the revised code into Dreamweaver.

I still can’t get it to style properly.

Any tips or advice out there would be most welcome.

Thank you.

3

Hi Stephen,

You could try: style=“color:#408888!important; text-decoration:underline;”

It could also be possible Infusion does not want the links styled because if someone was to make it white, than they are hiding the opt-out link.

4

Thanks for taking out the time to look at it, Mike. I got the same result.

Makes sense on the white styling.

Hopefully, there is a workaround, not trying to be shifty. I just want nicely designed emails.

5

Have you tried embedding the css in a style attribute directly in the link tag or overriding behavior with !important in the css block?

6

Thanks for the reply John.

Have you tried embedding the css in a style attribute directly in the link tag

I have tried the enclosed, if this what what the above means?

Napkin%206
Napkin%2061819×1292 228 KB

7

Hmm. I see. Did you try adding: !important do the CSS for the color ?

8

@zerotwozero,

Could you post a link to an example of the page? That might be easier for us to deduce what will work for you.

1 Like
9

Thanks John. Here is a hosted Infusionsoft version: https://ff328.infusionsoft.com/app/hostedEmail/231/802c88137eaeecde

Here I just ran with the ~merge~ and not styling so links are in stand blue with a underline.

10

I did Mark, I get this result when I do…

As I understand it, Infusionsoft needs to add in the class="inf-track for automation, so the repondants response can be recorded against their CRM record.

57

11

Hi, @zerotwozero,

So I took the code from the hosted version and pasted that into the code builder for email templates in IS. Then, I assigned the class (called it “testing”) and added that to the css section of the email and used it to change the color to red, to which it yielded the following result:

image
image989×539 29.9 KB

12

Amazing, thanks so much for digging into that.

Would you mind posting a screen shot of the code please?

Thanks once again John!

PS: found a way to get Unicode inside email yet?

13

I’ve had a good dig around following your success John, but can’t seem to get it right.

It would be really helpful if you post images of the code and relevent IS screens please?

Thank you.

14

Hey, Stephen,

I try to explain a bit more in this vid :wink:

https://www.useloom.com/share/242ea1deea9f4148aba409e0e119bcb1

15

Thanks for doing that John. Really clear and I understand your process. Thank you.

The only problem as far as I can see it (which may well be wrong!), is that that the ~merge-code~ generates the HTML code after the email has been sent, so we need to find a way to alter the ~merge-code~ styling before sending not afterwards if that makes sense.