Link styling and odd behaviour in repeater/layout tags

I'm developing for a design where the user has the option to enter multiple links at the end of the content.  The links are white text on a red-backgrounded box but there's a secondary style which has a grey background instead.

However i'm having some trouble getting that style to apply. In one situation it's fine, in another it totally fails to apply.

The following examples of my HTML are pre-inlining. The HTML i'm actually uploaded has styles inlined.

In the following code, the link displays as expected. Even in the email editor, the box colour, size, etc all works and the links can be changed without it affecting the style of the  link text itself.

<repeater>
    <layout label="Red link">
        <a href="#" class="button"><singleline label="Link text">View the report</singleline></a>
    </layout>
    <layout label="Grey link">
        <a href="#" class="button-secondary"><singleline label="Link text">View the report</singleline></a>
    </layout>
</repeater>

If I view the source of the buttons in the page editing interface, they looks like this i.e correct:

<span class="cs-el-wrap"><a href="http://test.com" class="button cs-inserted" style="font-family: Futura-Medium, Futura, Arial, sans-serif;font-size: 19px;padding: 6px 12px;margin: 12px 0 0 0;font-weight: normal;-webkit-font-smoothing: antialiased;letter-spacing: -1px;text-decoration: none;color: #fff;text-align: center;background-color: #af021b">View the report</a></span>

However in the following code, which with the exception of the Campaign Monitor tags is little different, the red colour isn't rendered at all. The links appear as black text on the white page background, as if none of the styles have been applied.

<a href="#" class="button"><singleline label="Red link">Link</singleline></a>
<a href="#" class="button-secondary"><singleline label="Grey link">Link</singleline></a>

Note there are no repeater or layout tags used nearby (the repeater tag is this time far higher up the DOM but there are no layouts at all).

If I view the source for this page however, it appears my A tag has been completely replaced by a SPAN!:

<span class="cs-el-wrap">Link</span>

In both cases I can confirm that the A tag in my template code definitely has all the styles inlined.

Something is clearly treating the button with inconsistent logic that doesn't seem to be explained in the docs.

Any help appreciated

xcession, 4 years ago

On a related note, not allowing repeaters within repeaters is an unfortunate limit. Any chance this is going to be supported soon?

roshodgekiss roshodgekiss, 4 years ago

Hi xcession, the issue here is that <singleline> tags aren't meant to be wrapped in <a> tags - you can add a link to the text from within the email editor and we'll add the link code behind the scenes for you.

My advice in this situation is to use code similar to the following:

CSS:

h2.button a { color: #FF0000; text-underline: none; }
h3.button-secondary a { color: #2F4F4F; text-underline: none; }

HTML:

<repeater>
    <layout label="Red link">
        <h2 class="button"><singleline label="Link text">View the report</singleline></h2>
    </layout>
    <layout label="Grey link">
        <h3 class="button-secondary"><singleline label="Link text">View the report</singleline></h3>
    </layout>
</repeater>

I'm sorry we didn't make this clearer in the documentation - this is something we'll certainly look at clarifying.

On a related note, not allowing repeaters within repeaters is an unfortunate limit. Any chance this is going to be supported soon?

Thanks for showing your interest in this - while we don't have adding nested repeaters in our immediate plans, I'm more than happy to keep you updated if this is something we add at a later date. Mind, we're more than happy to suggest workarounds - if there's a particular layout you're hoping to achieve, feel free to post details here and we'll do our best to make recommendations.

Cheers, xcession - if there's anything we can help with, be sure to let us know :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
xcession, 4 years ago

Hi Ros, thanks for getting back to me.

I can certainly see where your solution is heading, however i'm a little unclear on the implementation. My HTML templates have all my CSS inlined in style attributes rather than in a style tags or linked files (apart from a style tag at the top which is to remain not-inlined, as per htmlemailboilerplate.com).

If I choose to keep my CSS pre-inlined when I upload my templates, I'm not sure how or where I'm supposed to put the CSS you're suggesting would solve my problem.

Indeed this is a problem in general with your documentation's recommendations to pre-inline CSS. Once the CSS has been inlined, any sense of natural cascade is lost. So if your page editor system creates new HTML on the fly (such as if the user chooses to add a link to a piece of text) the link created has no way of inheriting the correct link styles.

This is in a nutshell the problem I'm facing here. I'd *like* to be able to tell my editors to use the "add link to text" option, but I know it will create completely unstyled links that use the default blue colour.

roshodgekiss roshodgekiss, 4 years ago

Hi again xcession, happy to clarify things here for you. :)

If I choose to keep my CSS pre-inlined when I upload my templates, I'm not sure how or where I'm supposed to put the CSS you're suggesting would solve my problem.

Ah, I can understand your confusion here - you do not need to pre-inline your styles when creating a campaign in Campaign Monitor. We automatically inline for you at send time if you select 'Copy my CSS styles inline...' on campaign import, or by default for templates. So my recommendation was based on the assumption that the above CSS was to be simply added to <style> tags in the <head> of your HTML document. By doing this, you can ensure that all new content added in the editor will be styled as desired, too.

Working with inlined CSS is a pain, absolutely. I hardly ever do this.

Out of interest, which of our docs mentioned that you should pre-inline all CSS, prior to import into Campaign Monitor? I'll look at getting this updated to make it clear that we  automatically do this for you, so others don't fall into the same trap.

On a related note, if you're using the boilerplate, please make sure you remove img { line-height: 100%; } - this has been known to cause issues in Outlook 2000.

Thanks, xcession - I hope this helps, but please let me know if you have any questions :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
xcession, 4 years ago

Hi Ros,

Great, I follow you now :) The automatic inlining of CSS works a treat.

As far as the docs that suggest you inline, I got this from: http://www.campaignmonitor.com/resources/will-it-work/guidelines/ (the heading "Always move your CSS inline").

In retrospect I now realise this guide was written from a generalised perspective and isn't about how to use Campaign Monitor per se. I've used your CSS guides for years and I think I slightly muddled the advice in my mind, sorry about that.

Cheers for the help!

roshodgekiss roshodgekiss, 4 years ago

That's all okay xcession - definitely something for us to keep in mind in regards to our docs. Glad though that you're using the automatic inlining, I'm sure you're going to be on a roll from here on in :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098