Weebly HTML - How to change your site title into Your own custom Logo

 
Changing your site title into your own custom logo is actually pretty simple by tweaking a few Weebly HTML codes.  If you want the illustrated version, visit DivTag Weebly Template's home page and sign up for their Free Weebly HTML Tutorials.  They have newsletters which will show you how the codes look like so it's EXTRA easy for everybody to follow.

---

Weebly HTML - Step 1

Go to the “design” page and select the Standard Weebly Template you like. Click “Edit HTML/CSS” tab to open the template edit page. In the HTML tab, replace <div >%%TITLE%%</div> with <div id="logo"></div>

---

Weebly HTML - Step 2

Click into the CSS Tab, insert the following CSS code for the new logo 

#logo{
    float: left;
    background: transparent url(samplelogo.png)no-repeat;
    width: 225px;
    height: 90px;
}

For the purpose of this Weebly HTML tutorial, we are using the logo file named "samplelogo.png" which is matched to the snippet of code just above.  You can substitute "samplelogo.png" with your own logo file's name.

---

Weebly HTML - Step 3

Upload your own PNG logo image file in the “Files” tab.  In our example, the PNG logo image file is named “samplelogo.png”.  You need to upload your own logo file here.  Your logo file’s dimension should ideally be 225px by 90px in order to fit properly. Click "Upload Files".

---

Weebly HTML - Step 4

Preview your Weebly website design.  Click "Save & Exit" and "Publish". 

That's it!  You should have your own customized logo on your Weebly site now!

---

See how to change Weebly HTML for background and layout width

To see some beautiful and creative Weebly templates, visit DivTag HERE