Change CSS and Image Classes - OnlyBusiness Help

Home > Change CSS / Imagery > Change CSS and Image Classes

Change CSS and Image Classes

This section of the Website Builder allows you to change CSS classes and images used in your website. Editing can be done online by selecting a desired CSS file, or you may download all resources (which includes the CSS files and images) on to your local computer and then edit it offline, using any custom software you use.

The process for using these tools are outlined below:

All the resource files are shown in a tree structure, in the left hand side of the screen, as per the below image.

Following are the details of all the files/folders displayed in the tree structure.
a. TestPage.html - This file is being provided to check which CSS Class is used in which area of the page. Please note that changing this file will not have any impact on your website.
b. CSS - This folder contains one CSS file, i.e. StyleSheet1 or StyleSheet2 or StyleSheet3, according to the color theme selected in the "Select Design" page. This file contains different classes for header, menu or footer area of your website.
c. Images - This folder contains different images used in your website, like buttons, background images etc.
d. WidgetCSS - This folder contains one CSS file, i.e. Selected template's Code plus WidgetCSS1 or WidgetCSS2 or WidgetCSS3, according to the color theme selected in "Select Design" page. This file contains different classes for different widgets and the body area of your website.

You can edit this CSS Classes using two different methods i.e. Online or Offline. Images can only be edited/replaced/added Offline.

- Editing Online – To Edit any CSS Class, click on the desired file from the tree structure in the left hand side navigation. It will open the file in a text area format on the right hand side. After this, you may add/edit any class/properties and click to save. Changes will have an impact on the Preview mode of your website. If you click on any image or TestPage.html it will open the file, but in read-only mode.

- Editing Offline - Editing Offline means downloading all of the resources, visible in a tree structure in your local computer. You can edit the files using any custom software.
To do this, Click on the "Download Resources" button in the top right corner of the screen. The system will prompt you to save a zip file to your local computer. After saving, unzip the file and start editing the image/css. To view the changes you may run the TestPage.html. Once you are done with the changes, Zip the resources folder, Select the zipped file using the "Browse" button and Click on "Upload Resources" button. It will upload and refresh the contents in a tree structure. You will then be able to check your website in "preview" mode to view the changes made.
Please note that you have to keep the file names the same in order to view the changes in "preview" mode.