Hyperlinks: how to change their color and style, and add Active Directory attributes

Problem:

You would like to learn how to modify hyperlinks in email signatures created with CodeTwo software. For example, you want to create hyperlinks of any color and styling, remove the default blue color and underline, or insert attribute values from Entra ID (Azure AD) or Active Directory into these links.

Solution:

By making small changes in the source code of your email signature, you can create hyperlinks of any color, size and style. The signature editor in CodeTwo software also allows you to include Entra ID (Azure AD) or AD variables in your links. See the guidelines below for current versions of CodeTwo programs.

• How to change link color, remove default underline, etc.
• How to add Entra ID (Azure AD) or Active Directory attributes to links
• How to add links to images

Go to this section if you use an old version of CodeTwo software.

<span><a href=""></a></span>

Change link color and style

If you use CodeTwo Email Signatures 365 or CodeTwo Exchange Rules (Pro), you can change the link's color and styling in the built-in template editor by selecting your link with a mouse and using the formatting options in the Font group on the ribbon (Fig. 2.).

Fig. 2. The font formatting options in the template editor.

Regardless of the program you use, you can also modify the link’s style directly in the HTML source code view window. To access the window, click the HTML source (or Source) button on the ribbon (Fig. 3.).

Fig. 3. Accessing the source code view in both the editors.

Once the HTML source code view window opens, find the hyperlink (<a> tag) you want to modify (or insert a new hyperlink). In the example in Fig. 4., the link (highlighted in yellow) has the following source code:

<a href="https://link-address.example.com/">hyperlink</a>

Fig. 4. A link with the default CSS styling.

You can modify the link by adding the CSS style attribute and defining one or more style properties:

<a style=" text-decoration: none; color: #f00" href="https://link-address.example.com/">hyperlink</a>

where:

• text-decoration: [decoration]; is the font's decoration. If you set it to none, as in the examples above, then the default link underline is removed.
• color: [#f00]; stands for your link color. It can be defined in hex code, RGB, etc.
• hyperlink is the link's display text.

Click Apply & Close in the HTML source code view window to see your changes in the main window of the template editor. In our example, the link changes to red and the underline is removed (Fig. 5.).

Fig. 5. The same link with modified CSS styling.

Add Entra ID (Azure AD) or Active Directory attributes to links

If you want to include an Entra ID (Azure AD) or Active Directory variable in your hyperlink, you can add it directly in the source code of this link. Use the HTML source button (or the Source one in CodeTwo Exchange Rules) to enter the HTML source view of your signature template (see Fig. 3.). Then add a desired attribute placeholder to the link's source code by typing its name manually or via the Placeholder button on the ribbon. For example:

• You can create a link to a user's profile on your website by including the First name and Last name attributes in this link (note that the URL structure shown here is just an example):

  <A href="https://example.com/profile/{First name}.{Last name}">

• You can set your Web Page attribute as a link and as link's display text in this way:

  <a href="{Web page}">{Web page}</a>

• To change your link into an email (mailto) link filled with the E-mail attribute, modify it like this:

  <a href="mailto:{e-mail}">{e-mail}</a>

In the above examples, the user's name, web link and email link values will be automatically pulled from your Entra ID (Azure AD) or Active Directory when an email is sent, and they will be unique for each email sender. If you want to add a non-changing link, do not use any placeholders but use full addresses instead.

Learn more about using placeholders in:

• CodeTwo Email Signatures 365
• CodeTwo Exchange Rules (Pro)

Add links to images

You can also link an image instead of standard text, and this linked image can also include Entra ID (Azure AD) or Active Directory attribute placeholders. To learn how to do so, follow the steps below.

1. Use the Picture button on the editor's ribbon to add your image.

2. Select the image you added by clicking on it and click the Link button on the editor's ribbon (Fig. 7.) to link this image.

   
   Fig. 7. Adding a hyperlink to an image.

3. In the hyperlink configuration window, provide the desired URL (e.g. https://example.com/). Do not add any placeholders to this URL at this moment.
4. Open the HTML source code view window by clicking the HTML source (or Source) button on the ribbon and find the <a> tag that hyperlinks your image.

5. Add placeholders to the href attribute. You can do that manually or use a dedicated button on the ribbon (Fig. 8.).

   
   Fig. 8. Adding attribute placeholders to a link.

   For example, let us assume that the main address is https://example.com/profile/ and we have a user named Howard Wilford. If you set the href attribute to the following:

   <A href="https://example.com/profile/{First name}.{Last name}">

   when Howard sends an email and this email is processed by our software, the link will be changed into:

   <A href="https://example.com/profile/Howard.Wilford">

Guidelines for older versions of CodeTwo programs

The instructions below apply if you use older versions of software from the CodeTwo Exchange Rules family:

• CodeTwo Exchange Rules Pro 1.x
• CodeTwo Exchange Rules: 2013 1.x / 2010 2.x / 2007 3.x

In these programs, AD attribute values (placeholders) cannot be inserted directly into hyperlinks. Instead, you need to build them from multiple parts by using the Rotating text placeholder (If you are not familiar with the concept, see this article). Moreover, linked Active Directory attributes such as Email as link in the signature editor are blue by default. Users can change the link's font type, style and size, but the color remains blue, as shown in the example in Fig. 9. The workaround that uses the Rotating text placeholder helps you with the color issue as well.

Fig. 9. The Email as link AD attribute remains blue in the default state, despite defining its color.

For the purpose of this article, let's say we want to insert into our signature an email address that is red instead of blue, and is clickable. Normally, the signature would look like in the image in Fig. 10.

Fig. 10. Simple signature with the E-mail Dynamic field.

However, the dynamic field E-mail does not create a clickable link and the E-mail as link field is always blue. Also, the Editor in Exchange Rules does not recognize an HTML mailto link. We need to use Rotating text fields which are located in the Dynamic Content menu (Fig. 11.).

Fig. 11. Location of the Rotating Text field in the program's menu.

We need to build an HTML mailto link from parts of the code located in an external source - files on the hard drive and from the E-mail dynamic field (as dynamic fields work only when inserted directly in the editor).

An HTML mailto link can look similar to the one below:

<A style="COLOR: #ff0000;" href="mailto:{E-mail}">{E-mail}</A>

Everything in the code except the E-mail dynamic fields must be imported from external files. Let's create a proper structure of Dynamic Fields in the editor, as shown in Fig. 12.

Fig. 12. The structure of Dynamic Fields in a signature prepared for the mailto link building.

Next, we need to prepare appropriate folders and file structure, as shown in Fig. 13. If the CodeTwo software is installed on multiple Exchange servers, you need to create these folders in the same location (path) on each Exchange server.

Fig. 13. The structure of folders and source code files on a hard drive.

Click on the first Rotating text field and, using the menu on the right, point to a desired folder on your hard drive (Fig. 14.).

Fig. 14. Linking {Rotating Text} fields with the code source files on the hard drive.

Save and close your editor and save your settings in the Administration module. Let's test our rule by sending a test email. Before that, make sure you have applied appropriate Conditions. The result should look more or less like this - the link is red and clickable and works just like a typical HTML mailto: link (Fig. 15.).

Fig. 15. A signature with a red and clickable email link.

If you do not want the link to be underlined like hyperlinks usually are, your hyperlink code must include the "TEXT-DECORATION: none" attribute. So the full link code should look like this one:

<A style="COLOR: #ff0000; TEXT-DECORATION: none;" href="mailto:{E-mail}">{E-mail}</A>

Keep in mind that by default Outlook desktop apps automatically replace all email addresses and URLs identified in the email body with hyperlinks. If you don’t want Internet references to be displayed as hyperlinks (besides the ones specifically created by you), the automatic hyperlinks feature needs to be disabled in Outlook, as explained in this section.