Level 10

Solved

Changing the color of a Calendar Token

Forum|Forum|9 years ago
March 14, 2016
2 replies
9128 views

Hi All -

I have a Calendar Token in an email and I cannot get the color of it to change. It's always a bright blue which isn't inline with the color theme of the email. I know that I can just grab a copy of the link and hard code it in as an HREF but then what's the point of the calendar token?

I've tried editing the color, putting a SPAN around it but it doesn't work. It always defaults to a blue. Is there a trick to it or is this a limitation?

Marketo

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

Best answer by Frank_Breen2

You can change your default colour in using the style in the head, e.g.

a:link, a:visited, a:hover { color:#1971c4; text-decoration:none; }

</style>

This will be the default and works in everything that supports style in the head (everything except Gmail). I always add the <span style="color:#1971c4;">Add to Calendar</span> in the token too to to cover myself. text-decoration:none; in the <span> won't work as the <a style... will override it.

Frank_Breen2Accepted solution

Level 8

You can change your default colour in using the style in the head, e.g.

a:link, a:visited, a:hover { color:#1971c4; text-decoration:none; }

</style>

This will be the default and works in everything that supports style in the head (everything except Gmail). I always add the <span style="color:#1971c4;">Add to Calendar</span> in the token too to to cover myself. text-decoration:none; in the <span> won't work as the <a style... will override it.

Robb_BarrettAuthor

Level 10

Thanks, Frank, but this doesn't help me 100%.

Case in point, we have a user conference coming up and we color-code our product specific communications. With this logic, I'm not able to easily make links that will blend in with my other communications.

So I'm better off using the HREF to the ICS instead of the Token.

@Grégoire Michel - you might want to put this on your list.

Robb Barrett

Frank_Breen2

Level 8

Have you thought of putting a class on the <p> tag before the calendar:

<p class="calendar">{{my.calendar}}</p>

<p class="redcalendar">{{my.calendar}}</p>

Then write your CSS like this:

p.calendar a:link, p.calendar a:visited, p.calendar a:hover { color:#1971c4; text-decoration:none; }

p.redcalendar a:link, p.redcalendar a:visited, p.redcalendar a:hover { color:#ff0000; text-decoration:none; }

</style>

You could then list the different colours you are going to use and assign different classes, this will hopefully allow you to have multiple styles for your link.

Robb_BarrettAuthor

Level 10

Thanks, Frank. That's helpful. I actually just put the code on an "a" style on my emails instead of the Calendar File. Like you said, it won't work for Gmail but I'm B2B so that's not a big concern.

Robb Barrett

Frank_Breen2

Level 8

That's why you should also add <span style="color:#1971c4;">Add to Calendar</span> in the Hyperlink Text section of the calendar too, this will at least change the link colour to what you want but will still have the underline in Gmail. I'm B2B and we use Gmail as our client, surprising how many companies actually do this these days too.

Here's an interesting test to see how many people open an email on Gmail, create a smart list with this criteria:

It may surprise you.

I tend to stick with what Marketo gave me as sometimes we have other Marketers that have to use the system too and adding extra steps isn't always helpful. If you can do what Courtney says, then that may be a more solid solution.

A

Anonymous

Hi @Frank Breen, I added the color but it's still not rendering in my email. Aside from editing my email template's HTML, any advice?

@Grégoire Michel​ - you might want to put this on your list.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded

@Grégoire Michel - you might want to put this on your list.