Customization Guide – Upload and Link Logo

After uploading the DivTag template into your Weebly Editor (refer to the DivTag Template Installation Guide for instructions), you can now upload your own brand logo and hyperlink it to your homepage or which ever page of your website as you wish.

 

1) Edit Your Logo Image File

Here we will edit your custom logo image to ensure that it fits into the DivTag template. We will first re-size it to the right size, and save it in the correct image format and name.

 

Logo Image Size

 

This template supports an image logo with a size specified under the heading “Template Specs” in the “Read Me Before Installation” Guide. If your logo image is not this size, you will need to re-size it using image editors such as Photoshop or even Microsoft Paint.  You can check the size of your image file by looking at the “Properties” of your image file (right click on the image file, select “Properties”, then click the “Details” tab). Note that your logo image file can be smaller than the specified size in the “Read Me Before Installation” Guide, but no larger in order to fit well within this template.

Click to Enlarge

 

Logo Image Format

Your logo must be in the PNG image format.  You can tell which format your image file is in by looking at your image file’s file extension (for example, .png or .jpg).  If your image file is not in the PNG format (.png), you can simply re-save the file as a PNG format by using image editors such as Photoshop or even Microsoft Paint.

 

Logo Name

Rename your logo image file so it is exactly “logo.png”. This is important to have your logo image file named this way otherwise it will not show up in the template.

 

2) Edit Hyperlink and Link Title

This step will allow you to hyperlink your logo to which ever URL you wish and to edit the “Title” of your logo (“Title” is the text that appears when you place your mouse cursor over your logo on your webpage).  Most people link their logos to their website home page.

 

 

 

  1. In the HTML tab within the Weebly Editor*, find this line of code – “change logo.png and homepage url and title and alt text here”  Underneath this line you will see the following code:

<div class=”logo”><a href=”YOUR URL HERE” title=”#” alt=”#”></a></div>

 

Ÿa href=”YOUR URL HERE” is the code that tells the template which URL you want your logo to be linked to.  The # is here just as a placeholder.  Replace it with the URL that you want your logo to be linked to. For example, if we want to link the logo ot DivTag, here is how it will look like: a href= “http://www.divtagtemplates.com”

 

Ÿtitle=”#” dictates what text will appear when your mouse cursor hovers over the logo (for example, “Return to Home Page”). Again the # is just a placeholder.  Replace it with your own title in this format: title=“YourText”

 

Here is an example of what the code may potentially look like after you are done editing:

<div class=”logo”><a href=“http://www.divtagtemplates.com” title=”Return to Home Page” alt=”#”></a></div>

 

Click to Enlarge

3) Upload Your Logo Image File

In the Files tab of Weebly Editor, upload your logo image file created in Step 1 above. Since you have renamed it to exactly “logo.png”, your logo file will replace the default template logo file. Remember, you must name your logo image file to exactly “logo.png” for this to work correctly.

 

**If you have upload the logo file and it does not appear on your website, check if the size, format and name of the logo image file is correct.

 

4) Preview and Save

Preview your new logo and you are ready to Publish your new website layout!