Change the Social Icon Bar Background

Some themes have a social bar where the social icons and contact text are located. Themes like Cross, Linentree and Motion are some of the theme that have this feature. This tutorial show you how to change the background image to customize it.


It is relatively simple to change the social bar background color. The concept is the same as changing your template background.

Depending on which DivTag template you are using, the background color image file could be either:

  1. barbg.png
  2. barbg.jpg

The difference between the two image files listed above is the file format.  One is a png (PNG image format) and the other one is jpg (JPEG image format). PNG allow you to insert a transparent image as the background while JPEG allow only solid image.

To find out which image format you are using, refer to your “read me” template specs OR simply go into Weebly Editor, go to “Design” tab at the top, then click on “Edit HTML / CSS” on the far right hand side.

Look for either “barbg.png” or “barbg.jpg” on the left hand vertical column.  In the following image example, we have “barbg.png”

Click to enlarge image

In the image above, the social bar background is an image call “barbg” in the PNG format (depending on the DivTag template you are using, you my have a barbg.JPG image file).

Simply replace this image with another image with the SAME file name (barbg) and SAME format (PNG or JPG) to alter the color, pattern and even opacity.

So if you have a barbg.jpg file, make sure your new social bar background image file is also named barbg and is in the same image file format of JPG

The size of the image does not matter since the template is set to multiply the image to cover the entire social bar area. Nevertheless, we suggest to keep the image as small as possible to optimize loading speed.

You can create an image using image editor such as Photoshop Express Editor (Free). You will need to set the image to different opacity to have your background be transparent.

Once you have the desired effect, save the image as “barbg” in the PNG or JPG format (this depends on what you started with.  If you started off with a PNG image format, keep your new file in the same PNG format).

Upload the new “barbg.png” or “barbg.jpg” file into Weebly Editor by clicking on the “Add new file(s)” button on the left vertical menu bar in Weebly Editor – this will overwrite the existing “barbg.png” or “barbg.jpg” file.

Publish for the change to take place.

If you don’t see the changes immediately, try clearing your browser’s cache.



Tags: , ,