In HTML, hyperlinks are normally underlined by default. There are times when you want to get rid of these underlines as they may not look good for the way your template is designed, or for any other reasons. People with experience in coding with HTML should not have difficulties doing this. Luckily, this tutorial is intended for those without HTML knowledge.
Before we proceed, please familiarize yourself with the tools on top of your "Message Builder" and "Message Coder".
Message Builder:
01. The "Message Builder" will have five options on top that goes: "TEXT", "IMAGE", "BLOCK", "SECTION", "MESSAGE".
Message Coder:
01. On the other hand, the "Message Coder" will only have: "TEXT", "IMAGE", "MESSAGE".
Look Ma, No Underlines:
Now that you are quite familiar with how the toolbar looked like on "Message Builder" or "Message Coder", it's time to get rid of some unwanted underlines.
Let's choose our preferred message editor first (Message Builder or Message Coder). Please follow these steps:
01. Click on the "Email" tab.
02. Click on the "Messages" option. This should take you the "Create an Email Message" page where you can choose between "Message Builder" or "Message Coder".
Removing Underline(s) When Using the Message Builder:
Let's say we choose the "Message Builder", and then used the pre-built "One-Section" template.
01. We just checked on the "Basic" checkbox from the pre-built templates selection screen.
02. We choose the "One-Section" temlate for this example.
01. For this example, let's just type in the word Google, and highlight the whole "Google" word.
02. Click on the small icon that looks like a chain on the upper part toolbar. This should show "Insert link" when you hover your mouse on it.
03. This link popup box should appear after clicking on the icon mentioned in 02.
04. Type in the URL that you want to open when someone clicked on the word Google.
05. Click on the "ok" button.
So this is what we'll get. Three words that has their hyperlinks set to http://www.google.com. Not to mention, all of them are underlined by default. As you will notice, only the "MESSAGE" option from the toolbar is usable, the rest are grayed out.
01. Move your mouse cursor anywhere within the block. The light blue block indicator should appear.
01. Click anywhere on the said block, and other options from the toolbar should now be usable.
02. Click on the "BLOCK" option from the toolbar. This menu option should expand to show "BACKGROUND", "BORDERS", "SPACING", "ADVANCED".
03. Click on the "HTML" button that shows below the "ADVANCED" option, and a popup box should appear.
04. This popup box appears when you clicked on the "HTML" option below the "ADVANCED" toolbar.
05. Click on the "continue" button.
From here look for the <a href='http://www.google.com/'>Google</a>. You should spot three in this example.
01. Insert the CSS {style='text-decoration: none;'} (opening and closing brace symbols are not included) after the {<a href='http://www.google.com/'}. The complete code should be {<a href='http://www.google.com/' style='text-decoration: none;' >Google</a>}. There will be times wherein you will see other characters not shown in this example but there shouldn't be any issue as long as you follow the pattern.
02. Once all links are replaced, you can click on the "check code and preview" button.
01. After clicking on the "check code and preview" button mentioned above, your iContact software will check if the codes you typed in are valid. Just click on the "apply code" button if no errors are found. There will be time when this checker would recommend other codes. For now, let's just focus on what we're trying to accomplish. Notice how those three underlines disappeared.
Removing Underline(s) When Using the Message Coder:
Doing this using the "Message Coder" is a bit straightforward. To get a same exact copy of our work from "Message Builder" to "Message Coder", what you can do:
01. Click on the "MESSAGE" option. This should expand and show "BACKGROUND", "BORDERS", "SPACING", "CHECKS", "ADVANCED".
02. Click on the "SOURCE" button just below the "ADVANCED" option. A popup box containing all the HTML codes that comprises the newsletter we are working on.
03. Click on the "export to messagecoder" button.
This is what we'll most likely get. The screenshot below shows the "Design" portion of our "Message Coder".
To see the HTML codes:
01. Click on the "HTML" button just below the "EDITOR STYLE" option.
02. All the HTML codes will be display on the "Message Coder" editor as shown below.
01. From here, the solution would be really simple. Look for the <html> and <body> tags. From here you can just insert the "<style type="text/css">a {text-decoration: none}</style>" between the <html> and <body> tags. The complete code should look like this: "<html><style type="text/css">a {text-decoration: none}</style><body>".
You will see the results when you go back to the "Design" mode of your "Message Coder". Furthermore, the solution we used for the "Message Builder" part should also work for this. You'll just have to look for the respective <a>...</a> tags.
