Brandify Studio

Congratulations! You followed all the steps.

Back
Start Again


Now, it's time to customize your HTML Signature!


Go to your file explorer and look up the following location: Html Signatures/Lato/-16.html
Open that HTML file with Adobe Dreaweaver, Sublime Text or any HTML software editor.


Don't know how to customize it? Scroll down and read our FAQ section.



Setting up your Html Signature

Google Apps/Gmail

Make sure to host all the images in your webhosting service and replace the new images locations (URLs) in your html code. An example is given in the FAQ section of this webpage (second question).

  1. Open your email signature with your browser, such as Google Chrome.
  2. Press Control + A (to select all) and press Control + C (to copy the signature). IMPORTANT: You should copy the front view of your signature, not the source code.
  3. Open your Gmail Account.
  4. Click the gear icon and go to Settings.
  5. Go to General Settings > Signature.
  6. Press Control + V (to paste the signature template).
  7. Press Save changes.
  8. Now, click on Compose and your signature should be there.

Apple Mail

Make sure to change all images urls to absolute paths. An example is given in the FAQ section of this webpage (second question).

  1. Open your HTML file with your text editor and copy the source code.
  2. Go to Apple Mail and click Mail > Preferences.
  3. Click the Signatures tab.
  4. Click the + button and enter a name.
  5. Go to ~/Library/Mail/V2/MailData/Signatures/ and open the *.webarchive or *.mailsignature file with your text editor.
  6. Don't delete the first 5 lines of that code, paste the email signature replacing the code from <body> to </body>.
  7. Save and don't forget to lock the file.
  8. Go to Signatures tab again in Apple Mail and select the name of your signature in the Choose Signature select input.
  9. Now, click on the Write icon and your signature should be there.

Microsoft Outlook 2010 or previous versions

  1. Change the extension of your html file from *.html to *.htm (you just need delete the last letter of the extension).
  2. Cut and paste the htm file and the images folder in this location: C:\Users\YourUsername\AppData\Roaming\Microsoft\Signatures. AppDate folder may be hidden. Note: YourUsername means your Windows Username folder.
  3. Open Dreamweaver or other coding software and change all the images URLs with the new folder location. Example: the original template has this URL /img/icon-address-green-3.png and you have to add the absolute URL before file:///C:/Users/YourUsername/AppData/Roaming/Microsoft/Signatures/img/icon-address-green-3.png
  4. Open Outlook and click write new email.
  5. Go to Signature > Signatures.
  6. In the default signature area, select your account and your signature name from the list for new emails and replies.
  7. Click done and close the new email windows.
  8. Then, open to create a new email and your signature should be already there.

Microsoft Outlook 2013 or later versions

Make sure to host all the images in your webhosting service and replace the new images locations (URLs) in your html code. An example is given in the FAQ section of this webpage (second question).

  1. Change the extension of your html file from *.html to *.htm (you just need delete the last letter of the extension).
  2. Cut and paste the htm file and the images folder in this location: C:\Users\YourUsername\AppData\Roaming\Microsoft\Signatures. AppDate folder may be hidden. Note: YourUsername means your Windows Username folder.
  3. Open Outlook and click write new email.
  4. Go to Signature > Signatures.
  5. In the default signature area, select your account and your signature name from the list for new emails and replies.
  6. Click done and close the new email windows.
  7. Then, open to create a new email and your signature should be already there.

Mozilla Thunderbird

Make sure to change all images urls to absolute paths. An example is given in the FAQ section of this webpage (second question).

  1. Open Thunderbird.
  2. Click on your email account name and then on View settings for this account option under the Accounts section.
  3. In the Account settings window go to the Signature text section.
  4. Check Attach the signature from a file instead and click Choose…
  5. Find your html signature file in your device and press OK.
  6. Click OK in the Account Settings window.
  7. Now, click Write to create a new email message.
  8. Your new email signature should be already there.


FAQ

1) Why there’s no margin or padding between the signature and the window of my email software?

In order to see the default margin or padding of your email software window, please delete the following line in your html file.

body{margin:0;padding:0;width:100% !important;}

2) Why the images of my signature are missing?

If you are using Gmail or Outlook 2013/2016, remember you need to upload all the pictures in your server and change the image URLs.

Example of default image URL

<img src="img/icon-address-black.png" width="24" height="24" alt=""/>

Example of new image URL

<img src="http://www.yourwebsite.com/signature/img/icon-address-black.png" width="24" height="24" alt=""/>


In case you don't have a hosting plan, you can upload the images to this free image hosting websites: www.imgbb.com, www.freeimage.host, www.imgbox.com, www.imgur.com or any other image hosting website.


If you are using Apple Mail, Mozilla Thunderbird, Microsoft Outlook 2010 or previous versions, remember that you need to change relative URLs to absolute URLs.

Example of relative image URL

<img src="img/icon-address-black.png" width="24" height="24" alt=""/>

Example of absolute image URL

<img src="file:///C://Users/Brandify/Signature/img/icon-address-black.png" width="24" height="24" alt=""/>

3) How can I edit images with smart object?

  1. Open Adobe Photoshop.
  2. Copy your image.
  3. Double click on smart object layer.
  4. Paste your image and save.

4) How can I edit html files?

  1. Open with a simple HTML editor (eg. Adobe Dreamweaver).
  2. Click on "Design Panel".
  3. Change text, replace images, add links.
  4. Save file.

5) How do I change my picture?

  1. Copy the desired picture and paste it inside the img folder.
  2. If your using Adobe Dreamweaver, double click on the sample image and choose your new picture. If your using code view, please change the image url with the new one. Remember to upload the new image to the server or change the relative URL to absolute URL, depending your email account.
  3. Save file.

6) How do I link a social icon with my profile?

Type the full path of your social network replacing the hashtag symbol.

Example of default link

<a href="#" target="_blank"><img class="image" src="img/icon-facebook-grey.png" width="16" height="16" alt=""/></a>

Example of social link working

<a href="http://www.facebook.com/yourfanpage" target="_blank"><img class="image" src="img/icon-facebook-grey.png" width="16" height="16" alt=""/></a>

7) How do I scale down the size of my signature?

  1. Copy the following code and paste in your HTML file before the end of the style tag. .signature {
      -webkit-transform: scale(0.8);
      -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
      -o-transform: scale(0.8);
      transform: scale(0.8);
      transform-origin: left top;
    }
  2. Add the class "signature" to the main table. For example: <table width="640" border="0" cellspacing="0" cellpadding="0" class="signature">
  3. Save file and set up your signature in your email client.

8) How do I scale down the size of my signature?

  1. Copy the following code and paste in your HTML file before the end of the style tag. .signature {
      -webkit-transform: scale(0.8);
      -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
      -o-transform: scale(0.8);
      transform: scale(0.8);
      transform-origin: left top;
    }
  2. Add the class "signature" to the main table. For example: <table width="640" border="0" cellspacing="0" cellpadding="0" class="signature">
  3. Save file and set up your signature in your email client.

9) How do I add an email disclaimer?

  1. Open the desired disclaimer html file (there are three versions included) with your HTML editor.
  2. Select and copy the source code.
  3. Open the desired email signature with your HTML editor.
  4. Paste the disclaimer source code after </tbody> and before </table> (it is located in the last line of the email signature source code).
  5. Save file.