Custom CSS & JavaScript

Designing Directly With CSS

Directly modifying CSS is an alternative to using the Theme Designer. This option is provided for individuals who have a good understanding of cascading style sheets (CSS). Use the Theme Designer if you are not comfortable with directly defining and editing CSS settings.

Overriding the Site Theme's CSS

Custom CSS will automatically override styles defined by the site's theme. This can have unpredictable results if you do not understand CSS and tags used by the site. The good news is that the the default theme can be restored by deleting the custom CSS.

CSS definitions are accessed through the Pages Settings area of the Administration Console:

  1. Click on the "Settings" Icon on the top-right of the Administration Console.
  2. Click on "Custom CSS and JavaScript".
  3. Click on the "+" to open the Custom Stylesheet section.
  4. Add/Update the CSS settings as required.
  5. Click on "Save" to save your changes.
  6. Refresh your site in a separate browser tab to view the changes.

Most browsers provide HTML-analysis tools which can be used to view the HTML / CSS styling tags used on your site. Follow these links to learn more about the features in Chrome and Firefox.

Basic CSS Samples

The following CSS samples can be used to modify header and bold settings. As examples, they are intended to demonstrate how CSS tags can be modified. More information about overriding CSS tags is available from our Customer Care team.

Change max width of the site
.content-wrapper { max-width:1024px; width:100%; }

Change how "Header 1" text is displayed
h1 { color: #123456; font-size: 20px; text-decoration: underline; line-height: 30px; }

Attributes of multiple CSS tags (p, a, span, etc.) can be set through grouped Style declaration
p, a, span { font-weight: 700; }

Adding Custom JavaScript

JavaScript can be used to control web pages on the client side of the browser. Most often, it is used to modify page content after the page has loaded, or for exchanging data with other websites such as Google or Facebook. Custom JavaScript is defined through the Pages Settings area of the Administration Console:

Adding JavaScript can cause specific pages, features, or your entire site, to stop functioning. Even in the worst case scenario, the Administration Console should remain accessible and allow you to remove the code. Contact the Customer Care team if you require assistance adding JavaScript to your site.

  • Click on the "Settings" Icon on the top-right of the Administration Console.
  • Click on "Custom CSS and JavaScript".
  • Click on the "+" to open the Custom JavaScript section.
  • Add/Update the Javascript for the Head and/or Body sections as required.
  • Click on "Save" to save your changes.
  • Refresh your site in a separate browser tab to view the changes.