Knowledge Base

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 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 AD variables in your links. See the guidelines below for current versions of CodeTwo programs.

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

Change link color and style

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

250-1
Fig. 1. The font formatting options in the signature template editor.

If you use current software from the CodeTwo Exchange Rules family (Exchange Rules Pro 2.x; Exchange Rules 2019 1.x / 2016 1.x / 2013 2.x / 2010 3.x / 2007 4.x), you can also modify hyperlinks (including the addition of AD attribute placeholders) directly in the signature editor, but you need to modify your link's source code.

To modify a link in an email signature, you first need to open (edit) this signature in the built-in editor of your CodeTwo software. Then click the </> Source button to switch to the HTML source code view (Fig. 2.).

HTML source code view
Fig. 2. Switching to the HTML source code view.

Find the hyperlink (<a> tag) you want to modify (or insert a new hyperlink). In the example in Fig. 2., the link (highlighted in yellow) has the following source code:

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

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

<a style=" text-decoration: none; color: #f00" href="http://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 Save in the HTML source code view to see your changes in the main window of the signature editor. In the example above, the link changes to red, and the underline is removed (Fig. 3.).

Editing source code and saving it
Fig. 3. Save your changes in the source code view (1) to see them in your signature template (2).

Add Active Directory attributes to links

If you want to include an Active Directory variable in your hyperlink, you can add it directly in the source code of this link. Use the </> Source button to enter the HTML source view of your signature template (Fig. 2.). Then add a desired AD attribute placeholder to the link's source code by typing its name manually or via the AD attributes button on the ribbon (see Fig. 3.). 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="http://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 AD 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 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 AD placeholders but use full addresses instead.

Add links to images

You can also link an image instead of standard text, and this linked image can also include AD 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. Open the HTML source code view by clicking the </> Source button on the ribbon.
  3. Select the image you added by clicking on it and click the Hyperlink button on the Editor's ribbon (Fig. 4.) to link this image.

    250-3
    Fig. 4. Adding a hyperlink to an image.

  4. 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.
  5. Open the HTML source code view again and find the <a> tag that hyperlinks your image.
  6. Add placeholders to the href attribute. You can do that manually or use a dedicated button on the ribbon (Fig. 5.).

    250-4
    Fig. 5. Adding AD 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="http://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="http://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. 6. The workaround that uses the Rotating text placeholder helps you with the color issue as well.

610
Fig. 6. 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. 7.

621
Fig. 7. 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. 8.).

622
Fig. 8. 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. 9.

623
Fig. 9. 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. 10. 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.

624
Fig. 10. 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. 11.).

625
Fig. 11. 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. 12.).

626
Fig. 12. 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>

Important

Be aware that the user Network Service must have appropriate permissions to the folder that stores your rotating text or rotating images folders and files. To do it, right-click on the desired folder, choose Properties > Security tab and add the Network Service user (Fig. 13.) to the list with the permission to Read & Execute (Fig. 14.).


Fig. 13. Adding the Network Service user to the list of permissions.


Fig. 14. Adding appropriate permissions for the Network Service user.