Design Customization with CSS

Follow

Overview

Clients who have PRO plans have the ability to fully customize their design via CSS. This requires at least a medium level of skill with HTML and CSS.

 


1. Select Base Theme 

To get started, you should follow the normal work flow using the Design Builder.

 

  1. First, pick a base theme. 
  2. Use the Design Builder's editing tools to upload logos, set fonts, define the color palette, and configure various design elements and mobile behaviors. This process should save you time lots of time by minimizing the amount of CSS you'll have to write in order .

 


2. Add Custom CSS 

Then, add specific CSS to the screen.css file to create new styles or to "override" existing ones.

NOTE: Theme Editor featured in this video has been replaced with a new Design Builder. The process for editing the CSS is unchanged by this change.

Adding Your CSS

  1. Start adding your own CSS to 'screen.css' to 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