How do I change the colour and style of my links?

Links are usually displayed to stand out and be distinguishable from regular text. Often they will be a different colour and underlined, perhaps bold – and your template will have particular styles already set for this.

Within the content editor, there are extra settings in the Insert/Edit Link mceclip1.png pop-up window which allow you to customise how each link is displayed. Once you have created the link, you are able to change its style.

To change the colour of your link:

mceclip0.png

1. Highlight the entire link you wish to change.

2. Select the Insert/Edit Link mceclip1.png button in the editor menu.

mceclip3.png

3. In the pop-up window, go to the Advanced tab.

4. In the Style field, type in, color: # followed by the hexadecimal value of the colour you’d like to use. For example: color: #5EB6F9;

Adding text decorations

You can add more customisation to your link using the text-decoration property. You’ll go through the same steps above with different tags as the difference.

To add decoration to your link:

  1. Follow the steps mentioned above.
  2. In the Style field, you can add one or more of the following tags:
  • Text-decoration: none; (plain text)
  • Text-decoration: underline; (text with underline)
  • Text-decoration: line-through; (text with line through)
  • Text-decoration: overline; (text with overline)
  • Font-weight: bold; (bold text
  • Font-weight: normal; (not bold text)
  1. To add more than one decoration on your link, you must separate these values via semi-colon (;) and a space. For example, color:#123456; text-decoration:underline;

mceclip2.png

This will ensure both the text and line of your link will have the styling you prefer.

Have more questions? Submit a request

0 Comments

Article is closed for comments.