Editing CSS on your website

Editing the site's CSS is a fantastic way to really customize your website. CSS (Cascading Style Sheet) is a set of rules or coding language that dictate how your web page will appear. By having access to the Site CSS feature, you can tweak your site's CSS codes so that you have the perfect look for your site.

How to access Site CSS

Here is how to access your site's CSS:

1. In the Sitebuilder, go to Style> CSS.
2. The Site CSS dialog box will open up with the Site CSS Overrides on the left-hand side. On the right-hand side, you'll see a Preview tab (for viewing changes), Site CSS (to see the default CSS codes used) and the Site HTML (to see the default HTML codes used).

General rules for editing Site CSS

Navigate to the Site CSS tab and locate the code you wish to alter. As a general rule of thumb, you'll see things like: 

• body {code is in here}
  This controls the main content area - how it is set up and the default font color, size and type used.
• #sys_banner {code is here}
  This determines the size of the banner area used.
• #menu {code is in here}
  This targets your navigation menu, the font, color and size used. 

1. Copy the section of code you want to edit from the Site CSS section.
2. At the bottom left corner of the dialog box, uncheck "Disable Site CSS Overrides".
3. Paste the code into the Site CSS Overrides on the left-hand side.
4. Make your adjustments as needed.
5. Click the Preview tab to see the changes.
6. Once you've finished making all the tweaks, click OK.
7. Publish your site for the changes to go live.

Example

Let's use the banner code for example. We can alter the size of the banner so that it's a bit smaller in width and taller in height. The code we need to change is the following: 

#sys_banner { 

width: 954px; 

height: 183px; 

margin: 0 auto; 

position:relative; 

} 

#sys_banner { 

width: 800px; 

height: 200px; 

} 

Please note: each style has its own set of codes. So what works with one style may not necessarily work with another.