Details about this thread
  • State Not Answered
  • Replies 1 reply
  • Subscribers 113 subscribers
  • Views 35 views
  • Users 0 members are here

Calender dates are automatically a hyperlink on mobile

Jan-Frederic Buss

Hi everyone, 

Smartphones these days always mark dates and addresses as a hyperlink even if it is not a hyperlink. We have some design issues with this, as the links are not in the same color/style as our set-up "anchor" style in SugarMarket. 

Does anybody has the same issue and an idea what to do to get around this.

Here is an example. The style in our template for anchor links is yellow however as you can see below the mobile phone changes the link color for the date to blue, which is an issue since our background color is blue. Other links that we set up are fine.This is only an issue for dates and addresses where the mobile phone creates a hyperlink on its own.

 

  • 0 Sugar Employee Badge

    Hi  ,

    Thanks for posting this, it's an interesting use-case! I had some initial thoughts but decided to also search around and check with ChatGPT on some suggestions. I've posted some of their suggestions below. None of it will be 100% as devices might still choose to highlight certain calendar dates but either of these could help mitigate it.

    The option 1 of using CSS or simply updating the color of the hyperlink within the builder could be a way to at least attempt to use the color you'd prefer.

    Option 2 sounds like another option to consider where you write the date in some way that's less common where the system might not auto-detect it a calendar to highlight it. Here's more of the details that was mentioned:

    1. Use CSS to Override Styles

    You can try to force the style using CSS inline styles directly within your email HTML to override the automatic hyperlink styling applied by email clients on mobile devices. This might not always be fully effective due to the styling precedence and security settings of various email clients, but it’s worth attempting. For example:

    html
    Copy
    <style> a[x-apple-data-detectors] { color: yellow !important; text-decoration: none !important; } </style>

    Include this style tag in the <head> of your HTML email templates. This CSS specifically targets hyperlinks created automatically by iOS devices (x-apple-data-detectors).

    2. Alter the Date and Address Formats

    Adjusting how dates and addresses are formatted in your content can sometimes prevent them from being recognized as clickable links. For example, using a less conventional date format or breaking up the address components can help:

    • Dates: Instead of "March 15, 2025", you might write "the fifteenth of March, 2025" or use another less standard notation.

    • Addresses: Break the address across several lines or use non-standard separators.

    Hopefully this helps or maybe gives some other ideas that could mitigate what mobile (or other) devices do for auto hyperlinking.

    Regards,

    Michael North

    Sr. Manager, Technical Support