How to change footer content background

Getting Started

Introduction

Welcome to DivTag Customization Guides. Your theme allow you to change the footer content area background. Changing the background is a simple 3 step process and this tutorial will show you how.

Open W Theme Editor

Click here to log into your Weebly account and to open up the W Theme Editor.

Click to Enlarge

Click to enlarge image for more detail

Prepare Image File

The footer content area background is an image. By changing the image you can change the background.  First you want to know what image format your theme supports. The theme support JPEG images. So the first time you want to do is to check the image you want to use to see if it is in .jpg format.

To determine of your image is in the correct format, right click on your image file and select “properties“. There will tell you what format your image. If your image is NOT in the correct format, you can re-format your image using any image editing tool like Photoshop. Here is some FREE online image editor that can help you quickly reformat your images:

  • http://www.photoshop.com/tools
  • http://pixlr.com/editor/

GOAL: Check what image format your theme is using and what image format the image you want to replace with is. If needed, reformat your image to match the theme.

Select Image Size

The image will automatically repeat to cover the entire content area. So there is NO image size restriction. We do recommend to use small images to optimize site loading time. The best image to use for the content area is solid color or repeating patterns.

Name your image

Once you have the image format correct, you can rename your image to footerbg. It is important the name is in lower case. If the name is wrong, the background will not show up.

Upload Image into Weebly

Once you have the image format and name correct, you can upload your image into Weebly. If you haven’t logged into your Weebly account, please refer to the “getting started” to open the code editor.

  1. Click into “design” and into “Edit html/css”
  2. Once the code editor is open, find and click on “Add New File(s)” located in the left-hand column
  3. Wait till the BLUE progress bar disappear before saving and editing the editor
  4. Re-publish your site for the change to take effect

upload-files

Common Troubleshoot

If your image does’t show up, here are the common mistake and solution you can try

  1. Clear your browser cache. For PC, click CTRL + F5 to clear cache. For MAC, click COMMAND + OPTION + E
  2. Check if your image file name is correct. The file name is case sensitive, if it is not all in lower case or the name was misspelled, the image file will not load properly. So check to see if the file name is footerbg
  3. Check the file format. If the format is wrong, the image will also not load. Check to see if the ending of the file is capitalized. If it is, you will need to reformat the image with Photoshop to make sure everything is lower case