Welcome to the tips page for creating a professional looking HTML signature with SIGnify. Working with HTML can be daunting at the best of times but after a little practice can become second nature. We will cover the basics here so you can create a basic signature like the one below and start using it right away.

 

Nazaroth Admin, Blogger, Thinker & Nerd
web: mygreatiphone.com
Email: nazaroth@mygreatiphone.com
Enquiries: enquiries@mygreatiphone.com
Support: support@mygreatiphone.com

Which looks like this;
<style> #sig a:link{color: #690;} #sig a:visited{color: #690;} #sig a:hover{color: #690;} </style> <div id="sig" style="-webkit-text-size-adjust:none;line-height: 14px; margin: 6px 0; padding: 8px; border-top: 1px #999 solid; border-bottom: 1px #999 solid; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 10px; color: #555;" >
<img src="http://www.mygreatiphone.com/wp-content/themes/mygreatiphone_2011/images/mygreatiphone_large.png" alt="mygreatiphone" height="40px" width="192px" /><br>
<strong style="color: #690;">Nazaroth</strong> Admin, Blogger, Thinker & Nerd web: <a href="http://www.mygreatiphone.com" style="color: #690; text-decoration: none; border-bottom: 1px #999999 dotted;">mygreatiphone.com</a>
Email: <a href="mailto:nazaroth@mygreatiphone.com" style="color: #690; text-decoration: none; border-bottom: 1px #999 dotted;">nazaroth@mygreatiphone.com</a>
Enquiries: <a href="mailto:enquiries@mygreatiphone.com" style="color: #690; text-decoration: none; border-bottom: 1px #999 dotted;">enquiries@mygreatiphone.com</a>
Support: <a href="mailto:support@mygreatiphone.com" style="color: #690; text-decoration: none; border-bottom: 1px #999 dotted;">support@mygreatiphone.com</a></div>

So what content do you want in your signature?

The most obvious will be your name, email address, twitter account and maybe an image. So lets get started. Lets say you want your name to be bold and in a color other than black, like this;

Nazaroth Admin, Blogger, Thinker and Nerd

The above would be achieved by typing the following;

<strong style="color: #dda52b;">Nazaroth</strong> Admin, Blogger, Thinker and Nerd

Notice the numbers? This is called the hex code for the color you see above. Obviously you wont know the hex code you want so you can find it using the color picker below;

You can choose your favorite color from the picker and then copy and paste the code generated in the “Hex” box including the #.

The second element to note is the <strong> tags, these make the text located inside them display in bold type.

The next element may be your email address;

Email: nazaroth@mygreatiphone.com

This would be written like this;

Email: <a style="color: #dda52b;" href="mailto:nazaroth@mygreatiphone.com">nazaroth@mygreatiphone.com</a>

Note again we have the color style for the email link. Unlike a URL that would need http://, a link to an email address does not, instead it uses the mailto: prefix which when pressed, will open up the default email client of the person pressing it. Clever huh? The <a href=""><a/> tags display a link with the URL going between the “” and the displayed text going between the >HERE</a>

If you find that the different lines in your signature do not look right and you want the email to be on a different line to your name then simply add <br> to the end of the first line, this creates a line break, but note that a linebreak does not need any closing tag.

To add an image, first you should upload your image somewhere that you know is not going to be deleted etc. Copy a link to the image and add a line like this;

<img src="http://www.mygreatiphone.com/wp-content/themes/mygreatiphone_2011/images/mygreatiphone_large.png" alt="mygreatiphone" height="40px" width="192px" />

This will produce your image like this;

So you now have the basics to create a simple signature, but what if you dont want basic? Your probably saying “but there is so much more in the code to your signature up top there?”

Ok, fair enough I’ll go through it. Some of the code that i have used in my signature is actually not really needed, but i left it in there anyway. I’m referring to this bit;

<style> #sig a:link{color: #dda52b;} #sig a:visited{color: #dda52b;} #sig a:hover{color: #dda52b;} </style>

In fact, there are two ways you can do it, you can either just use the line above which will make all links the same color, or you can use the method I touched on before to assign each link it’s own individual color, this would be down to personal preference.

One special piece to note about the example code above is the usage of -webkit-text-size-adjust: none; which overrides the iPhone’s default attempts to re-scale the signature. This was essential in making my signature look best on the iPhone. Again, with the amount of content you have in your signature, you may need to play around with the CSS to get something that displays the way you want when you view your sent or received messages on the iPhone.

The rest of the code after this is basically controlling the line height, the borders that you see above and below the signature, the color of these borders and the font type, the first in the list being the preferred one, but depending on what is being used to view the signature, this font may vary to the next one in the list and so on.

For each link you can also add a dotted or solid line underneath the text, I have since opted out of this for my personal signature but you can play around with this if you like.

border-bottom: 1px #999 dotted;

border-bottom: 1px #999 solid;

You get the idea, the possibilities are endless! Feel free to use my example signature and play with it, mix it up, go MAD!! I would love to see what you manage to create using SIGnify.