Design Customization with CSS

Follow

Overview

Clients who have PRO plans have the ability to fully customize their design via CSS.

 

PLEASE NOTE: At that time of this video, Firebug was the best tool to use. Now, All browsers have developer tools built in. So, you can use any browser you want. For example:

  • In Chrome, go to the menu above and select View > Developer > Developer Tools. 
  • In Firefox, you go to Tools > Web Developer > Web Console.
  • In Safari, you go to Develop > Show Web Inspector*

 

This is the file where you can manage your design:

  • screen.css

Getting Started

  1. Start by choosing a theme from the Theme Gallery 
    - pick colors, background image, and fonts
    - click Preview to review your choices
    - click Copy to establish your theme selection
  2. This will be the base for your design and should save you time lots of time.
 

Adding your CSS

  1. Start adding your own CSS to 'screen.css" to customize (or override) the page elements you wish to customize. Keep in mind, your 'screen.css' is only meant to contain your CSS, so it will be empty when you first view it. 
  2. You can also view your last 100 saves under "History". This view also allows you to Revert to a previous version as well as Compare two versions.

Images

You can add images that you reference in your CSS in the 'Images" area. Images are in the same "folder" as screen.css so you can just put the file name in the url path when using an image. You can also add font files that you reference with @font-face here.

background-image: url(sample-image.png) no-repeat;

Useful Tools

The hardest part of customizing a theme is knowing what classes or ID's to edit. Here are a few tools available through the browser that make this task much easier for you.

  • In Firefox you can navigate to Tools > Web Developer > Web Console or highlight the area you are interested in and use the right-click > Inspect Element function.
  • In Chrome you can use "Developer Tools" which works in a similar way.
  • In Safari under the "Develop" menu you can select "Show Web Inspector".

 

Preview & Publish

To keep track of your progress, click Preview which will launch another tab. Here is a more detailed explanation of how to use the Preview.

In the Preview window you can click "Publish this Design"  which would update the public site with your latest image, header/footer, and CSS changes.

 

* The Develop menu is hidden by default in Safari, but can be shown by checking the "Show Develop menu in menu bar" in Safari Preferences.

Have more questions? Submit a request

Comments

Powered by Zendesk