Styling links

Hi,

I have just started working with Campaign Monitor and would like to ask a few questions on how to set up a template that allows styles to be added to links.  The client will edit these links to provide the url in the Editor, but the styles should be set up in the template.

1)    I have wrapped some links in a <singleline>, but I also need to include a span to provide the formatting because Campaign Monitor overwrites the style if I try to include it in the singleline tab.  This forces the client to search through the included <span> tag to find the text to replace in the Editor.
E.g. 

<singleline label="Article Headline"><span style="color: #014671; font-weight: bold; text-decoration: none; font-family: Arial,Helvetica,sans-serif;">Enter Headline here</span></singleline>

Including the style in the singleline tag does not work.

2)    I have a "Read More" link, where the text does not need to be changed, but the client needs to put in their own url.  If I just put this as an ordinary <singleline> the "Read More" text picks up the style, but the underline does not pick up the style colour, it is always blue.  Technique 1) above will not work, it only works when the link should not be underlined (text-decoration:none).  Campaign Monitor automatically forces this underline to be blue, rather than taking the style applied to the text.  As a workaround I set this link to be an email link (<a href="mailto:"), since Campaign Monitor picks this up as an email link.  Then I tell the client to edit this link and change to a URL link.
E.g.

<singleline label="Read More"><a href="mailto:Change to URL" style="font-family: Arial,Helvetica,sans-serif; color: #398621;">Read More</a></singleline>

3)    Workaround 2) does not work if you click the "Edit" button on the repeater section that appears when first using the Editor.  This is because Campaign Monitor editor does not recognise these email links as links.  You need to click "Add new" and in the new repeater section the Editor now realises that these <singleline>s are links that the client can edit.  It is a bit awkward asking clients to "Add New" and then "Remove" the first repeater section.  BTW, while testing if I edit the Repeater that first shows up it was using code from a previous version that I had since updated, so I do not know if this is part of the problem.

Are there easier ways to achieve what I am trying to do here?

Is there any way for the editor to recognise ordinary <singleline><a href=""></a></singleline> tags as anchors?  This would avoid the whole - set link up as email link in template and then change from email to URL link in the editor?

Could the Editor also pick up the subject of an email link as well?  At the moment it only automatically picks up the mailto: address.
E.g. If I have

<singleline label="Edit link - Subject = Article Comment + Desc."><a style="font-family: Arial,Helvetica,sans-serif; color: #398621;" href="mailto:me@myCo.com?Subject=Article Comment - ">Send us your comments</a></singleline>

the Editor will pick up that the email address is me@myCo.com, but will not automatically put the "Article Comment - " text in the subject field when I edit this email link.

Many thanks for your help

roshodgekiss roshodgekiss, 5 years ago

Hi ESB, happy to help out here.

1)    I have wrapped some links in a <singleline>, but I also need to include a span to provide the formatting because Campaign Monitor overwrites the style

As per the code examples on our 'Create your own templates page', have you tried wrapping the <singleline> tags with a <span>, or similar? To style up links in this instance, I'd simply use a bit of CSS code. In your <style> tags you could use:

 span.header a { color: #FF0000; }

Then for the <singleline>:

<span class="header" style="color: #014671; font-weight: bold; text-decoration: none; font-family: Arial,Helvetica,sans-serif;"><singleline label="Article Headline">Enter Headline here</singleline></span>

2)    I have a "Read More" link, where the text does not need to be changed, but the client needs to put in their own url.  If I just put this as an ordinary <singleline> the "Read More" text picks up the style, but the underline does not pick up the style colour, it is always blue.

Again, try using CSS in the head of your document. Campaign Monitor moves all CSS stylesheets in <head> inline prior to sending the campaign. It should also work well in template previews, too.

3)    Workaround 2) does not work if you click the "Edit" button on the repeater section that appears when first using the Editor.  This is because Campaign Monitor editor does not recognise these email links as links.  You need to click "Add new" and in the new repeater section the Editor now realises that these <singleline>s are links that the client can edit.

Try using CSS in the head of your HTML email template instead - if this doesn't solve the issue, kindly get in touch with our support team with account & template details, as we'd be keen to see why links aren't displaying.

In this situation, I'd use <multiline> instead, then instruct the client in using the 'Insert' > 'Link' tool in the WYSIWYG editor to add links. It's much easier to follow the prompts re: adding an email address, subject and message than using a <singleline> to pull this together, mind me saying.

Remember that <multiline> provides a variety of editing tools in the editor, whereas <singleline> does not :)

Thanks, ESB! All the best with your campaigns :)


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

Hi Ros,

Thanks for your help.  Moving the styles into the <head> has greatly simplified my code and allowed me to style the url links correctly.

Unfortunately the email links still do not show up as links only on the initial repeater that is shown by default.

Thanks for your hint on using multiline to convert to an email address, however I think is actually more awkward for the client to perform, rather than selecting "Add New" instead of "Edit" for the first article and then removing the first one.

Here is the repeater code; if you can find any way for the initial repeater to pick up that '<a href="mailto:"></a>' is an email link that would be great.

<repeater>
        <tr>
            <td valign="top">
                <table cellspacing="0" cellpadding="0" border="0" align="center" width="636px" style="margin:0; margin-left: 12px; padding:0; font-size: 80%;">
                    <tbody>
                        <tr>
                        <td width="138" valign="middle" style="vertical-align:middle;">
                            <img width="140" height="140" alt="Enter Alt text here" align="left" style="margin: 0;" editable="true" label="Image for this article" />
                        </td>
                        <td width="497" style="padding-top:10px;">
                            <span class="headline"><singleline label="Article Headline">Enter Headline here</singleline></span>
                            <multiline label="Article">Enter article content here</multiline><br />
                            <span class="links"><singleline label="Read More">Read More</singleline>
                             | <forwardtoafriend>Send to a friend</forwardtoafriend> | 
                            <!-- <multiline label="Edit link - Subject = eZine Comment + Desc.">
                                Send us your comments<br />
                                1. Highlight "Send us your comments" above
                                2. Click on the "Insert" above<br />
                                3. Click "Link"<br />
                                4. Click "Email" on top right hand corner of dialogue box that appears.
                                5. Enter "ecars@esb.ie" as the email address
                                6. Enter "eZine comment - " + article description
                                7. Click "Insert"
                                8. Delete these instructions
                            </multiline> -->
                            <singleline label="Edit link - Subject = Article Comment + Desc."><a href="mailto:me@myco.com">Send us your comments</a></singleline>

                            </span>
                             <fblike />&nbsp;<tweet />
                        </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
                    <tr>
                        <td width="648px" style="padding-top: 0px; padding-bottom: 5px; padding-left: 0; padding-right: 0px; vertical-align:top;"><img src="images/article_end.gif" /></td>
                    </tr>
        </repeater>

Many thanks again

roshodgekiss roshodgekiss, 5 years ago

Hi ESB, this is very curious indeed - thanks to your code, I've been able to reproduce this issue successfully. As you described, it looks like the editor is not recognizing mailto links properly in the first default repeater, but when consequent repeaters are added, the links are fine. It certainly looks like this is a bug on our end - we're really sorry for dropping the ball on this one.

I've discussed this issue with the team and have been provided with a workaround:

1) Wrap the <singleline> tags with the mailto link, eg.

<a href="mailto:me@myco.com"><singleline label="Edit email link">Send us your comments</singleline></a>

2) Import the updated template as a new template
3) Start a new campaign and use that new template (changing templates within an existing campaign won't work)

This seems to do the trick, but let us know how you go.

I'll brought this bug to the attention of our team and will let you know when this is resolved. Many thanks for reporting this!


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

This seems to do the trick, but let us know how you go.
This is now working  perfectly for me.  Thanks so much.

    I'll brought this bug to the attention of our team and will let you know when this is resolved. Many thanks for reporting this!
No problem - breaking things seems to be my role in life!!!  ;-)

I do not know if it is related but the default repeater seemed to be picking up some code that had been updated a few versions previous when I was testing this code.  I do not know if this will be helpful in tracking down the bug or not, just thought I would let you know.

Thanks again

roshodgekiss roshodgekiss, 5 years ago

Thanks for that feedback - it is very helpful. We'll be in touch if our tech team have any questions about this behaviour. Glad it's working now - hopefully you won't have to use any more odd workarounds like this in the near future :)


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

Online Jobs  - Hello friends, wanna share this, if your trying to find Internet Job. The smartest choice definitely is Internet Employment .                                                 
Or,  Online Employment.

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