Custom CSS & JavaScript
What's in this article
- Designing Directly With CSS
- Overriding the Site Theme's CSS
- Basic CSS Samples
- Adding Custom 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:
- 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 Stylesheet section.
- Add/Update the CSS settings as required.
- Click on "Save" to save your changes.
- Refresh your site in a separate browser tab to view the changes.
Warning
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:
Warning
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.