13 Replies Latest reply on May 16, 2017 12:06 AM by Sanford Whiteman

    Calendar File .ics Link Style

      This new functionality works great, but my only issue with it is that I can't style the 'Save the Date' link to match the other links in my templates (no underline, custom color, etc.). I tried putting a <span> around the token to style it appropriately, but that didn't work. Anyone have any tips?
        • Re: Calendar File .ics Link Style
          Colin Ryder
          I'd also be interested if someone has a solution for this.
          • Re: Calendar File .ics Link Style
            Jordan Lund
            I had a client with this exact problem today. When you're building the ICS token, there's a line for "Hyperlink Text", even though it SAYS "Text", you can add span tags right there. The caveat is, it only recognizes named colors, not hex code.

            <span style="color: white;">Add to Calendar</span>
            3 of 3 people found this helpful
              • Re: Calendar File .ics Link Style
                Navtej Singh

                What are you using for no underline?  Text-decoration:none;  gets rid of the font-color:white;

                 

                Thanks

                  • Re: Calendar File .ics Link Style
                    Boris Kiperas

                    The text-decoration property adds an underline, overline, line-through, or a combination of lines to selected text. It's got nothing to do with the colour. Please check your code, it is not "font-color:white;", you should use "color: #ffffff" instead.

                      • Re: Calendar File .ics Link Style
                        Sanford Whiteman

                        Well... just 'cuz I'm feeling picky, text-decoration does have a special relationship with color in that the the color of the element with t-d dictates the color of the decoration.

                         

                        Thus

                         

                        <div style="text-decoration:underline;color:green;"><span style="color:red;">This is red text w/green line</span></div>
                        

                         

                        displays as

                         

                        while

                         

                        <div style="color:green;"><span style="text-decoration:underline;color:red;">This is red text w/red line</span></div>
                        

                         

                        displays as

                         

                        so in some strange/necessary cases setting text-decoration can be used to get a desired display style.

                         

                        I agree that doesn't seem to be the case here.

                        1 of 1 people found this helpful
                  • Re: Calendar File .ics Link Style
                    Boris Kiperas
                    Thank you!!!! I tested this and it works great. In fact, the hex code for color works too...this is what i placed inside the Hyperlink text box:

                    <span style="color: #e05206;font-weight:bold;">Add this event to your diary</span>

                    There is still one problem though - the token does not work in Plain Text email version at all. Is there a way to cover that bit too?


                    • Re: Calendar File .ics Link Style
                      You can also use the above logic to create a button for your "Save the Date" or "Add to Calendar" token using the following span code in the hyperlink text box, when creating your token.

                      <span style="width: 200px; height: 50px; background-image: url('bg.jpg'); display:block" />

                      This works well for landing pages, but be careful using this in emails as background images don't always work.
                      • Re: Calendar File .ics Link Style
                        Does anyone have a solution to use a button in an email for the .ics calendar file? I tried above logic posted by PQS and it works fine in Apple mail, but not in outlook. is there no other solution to it? like normally you can hyperlink images using tokens, but this doesn't seem to work for the calendar file token.
                        • Re: Calendar File .ics Link Style
                          Yomi Tejumola

                               @ Paula E, I have a solution to that.

                          Step 1 - You have to get the URL of your calendar file:
                               a) In Marketo create the calendar file as a token, and make the "Hyperlink Text" a plain text value (e.g. Save the Date, or Click here)
                               b) Within your email, place the token anywhere
                               c) Approve and send a sample of your email to your inbox
                               d) Open the sample email and copy the link URL of the token. Save it in a text editor or somewhere accessible

                          Step 2 - Add the link of the calendar file to your button
                               a) Now that you have the URL of the calendar file, go back to your token settings in the marketo program
                               b) Replace the hyperlink text with the "span styling" of the button or the "a styling" of the text within the button as you have been advised to do by Jordan above. The only difference is that you add the hyperlink of the calendar file - for example:

                          <a href = "yourcalendarfileURL.com">buttonimage.png</a>

                               So for example, the html code that Boris K used above would be amended to be:

                          <span style="color: #e05206;font-weight:bold;"><a href="yourcalendarfileURL.com">Add this event to your diary</a></span>


                               My code looks like this:

                          <a href = "http://go.google-mkto.com/i05T0AP70fCxxxxxxxx" target="_blank" style="background-color: #4285f4; color: #ffffff; border-radius: 3px; height: 50px; line-height: 50px; display: inline-block; width: 180px; font-size: 15px; text-decoration: none;">Add to calendar</a>

                               Let me know if this worked for you.

                                

                          1 of 1 people found this helpful
                          • Re: Calendar File .ics Link Style
                            Does this only work to format the hyperlink text? Can I have an image be linked to the calendar file? We have a "Save the Date" image that I would like to make a link.

                            I have tried the code above and could not get it to work. I tired both versions of code below in the hyperlink text section of the ical but it shows my image location as a link and not the actual image.

                            <span style="font-weight:bold;"><a href ="Calendar Link">Image.png</a></span>

                            and

                            <a href ="Calendar LinK">Image.png</a>

                            Am I missing something? Do I need to add code to the email itself?

                            Thanks
                            Sean
                            • Re: Calendar File .ics Link Style
                              Diego Lineros
                              Insert in your Hiperlink Text Token field, change colors and fonts as requiered. Rounded corner wont work in Outlook. Enjoy 

                              <span style="background: #CC0000; color: white; display: inline-block; width: auto; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-radius: 10px; text-decoration: none; border: 10px solid #CC0000; display:block-inline; width: 200px;">Save to your Outlook Calendar</span>
                              1 of 1 people found this helpful