Outlook doesn't respect duplicated modules' link styles | Community
Skip to main content
S
sbrooks
New Participant
June 2, 2022
Question

Outlook doesn't respect duplicated modules' link styles

  • June 2, 2022
  • 2 replies
  • 3902 views

Developer here.  I created a custom email template.  In order for Outlook-on-Windows (OOW) to respect links styles, I target these links with ID selector in custom stylesheet.  It works great across multiple clients, until a user duplicates a module.  When a user decides they want to drag in a duplicate module of a particular type, the Marketo editor shows the link styling working great (of course), but OOW shows default blue/normal weight/underline link, and doesn't respect our custom link styling.  (If I use a class selector instead of ID selector, OOW doesn't read any of it).  Again, link styles on ancestral modules work great.  It's the duplicated modules posing an issue.  Thoughts here?  Not sure why Marketo isn't extending module-specific custom styles across duplicated modules, and I'm hoping it's something I can fix on my end.

 

As a side note, I understand adding inline styling to the links will solve the issue, but this isn't an easy task to ask of my users (who are marketers, not developers, and this opens up the door to user error).

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

Courtney_Grime1
Courtney_Grime1
New Participant
June 14, 2022

Since I use a similar technique to what you describe, I think I may know your core problem.

 

Whenever you create an editable area in Marketo—whether a module or a specific editable area—the platform requests that you assign an ID to the element.  Marketo (correctly, though frustratingly!) tries to apply a unique ID to the suffix of the element. Therefore, if you have something like

<td class="mktoText" id="putTextHere" mktoName="Put Text Here"> <p>Lorem ipsum</p> </td>

That putTextHere ID will have a UUID attached to the name in the final render, a la putTextHere076ea618e4-2ac5-47dc-aea0-fb9db3a04d20. To prevent this, you need to set the ID for the element at the parent level, then use the technique.

SanfordWhiteman
SanfordWhiteman
New Participant
June 2, 2022

Need more detail here. Are you referring to an inline stylesheet like so?

<style> #test { color: red; font-weight: bold; } </style>

 

And two links with the same id attribute?

<p><a id="test">Click here</a></p> <p><a id="test">Or here</a></p>

 

In Outlook 2016, such a style isn’t applied to either link (let alone both).

S
sbrooksAuthor
New Participant
June 8, 2022

Hi Sanford,


Thanks for your reply. I ended up solving this by going a slightly different route. Maybe this will help someone else struggling with the same issue.


Originally, I was targeting mktoModule IDs via an inline stylesheet to apply discrete module-specific link styles. Outlook-on-Windows (OOW) read these, and it worked great, until a user duplicated a module... and then those links would be styled with client defaults. In those cases, adding inline styles in the Marketo editor pop-up itself would make the duplicated modules have the correct link styles, but this is time-consuming and not within our workflow.

 

My new solution is to apply a new ID to the direct parent <td> of the particular div.mktoText that I'm targeting. But instead of just giving the td an ID directly, I made that ID a boolean variable, so user can choose the ID they want (each ID denoting a different set of link styles). Then, in an inline stylesheet, I use those IDs w/ element selectors to apply the link styles I want. This tests well in duplicated modules, in OOW and other clients.

 

So, as long as I don't apply this ID to the table.mktoModule or the inner div.mktoText elements directly, but rather the direct <td> parent of div.mktoText, it appears I am in the clear.

 

If you have any additional thoughts to add, I would appreciate hearing them.

 

Thank you!

SanfordWhiteman
SanfordWhiteman
New Participant
June 8, 2022

You didn’t respond to my point, though. Outlook doesn’t support the CSS id selector for links. So what styles were you using that worked? This is outside the question of modules/duplicate id attributes.

Terms & ConditionsAccessibility statement

Loading footer...