How to Change Social Icon Bar Background Color?

With our DivTag Templates, you will be able to change the background color of the social icon bar for “most” of our templates.  Here’s how to find out whether you can make the change to the template if you are using a DivTag template.

Click image to enlarge

With our templates already installed:

1) Log in to your Weebly Editor

2) Click on on the Design Tab on the top of your screen

3) Click on the Edit HTML / CSS tab on the right hand side of the top menu bar

4) On the tall vertical menu bar on the left hand side, see if you can find a file named “barbg.jpgorbarbg.png“.  You will find the example image file name in your “read me” pdf. The image to the right we are displaying the “barbg.jpg” (just for this example)

If you can find either “barbg.jpg” or “barbg.png” file, then you can customize the color of the social icon bar background.  If the template that you are using does not have these bar image files, then unfortunately you will not be able to customize the social icon bar background color at the moment.

Click image to enlarge

The color for the footer area for the template is just an image file.  Click on “barbg.jpg” or “barbg.png” and you will see the exact image file for the particular template that you are using.

Simply use any image editing program such as Photoshop Express Editor (Free), modify the image file to the color that you want your social icon bar to display, and rename the file to exactly what your template’s current footer image is.

So for example, if the background image for the template that you are using is “barbg.jpg“, make sure that your new image file is also named “barbg” and is in a “jpg” image format.

Upload your new social icon bar image file into Weebly Editor by clicking on the “Add new file(s)” button on the tall vertical menu bar on the left hand side.  Your new bar image file will completely overwrite / replace the existing bar image file.

Publish your website to see the change take place.  If the change doesn’t show up even after you publish, try clearing your browser’s cache, then try again.



Tags: , ,