Editing the Site 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. Here are some general steps on how this works:

  1. In the SiteBuilder, go to Site > Content > Site 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).
  3. 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 that section of code and paste into the Site CSS Overrides on the left-hand side.
  2. Make your adjustments as needed. 
    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; 
} 
 
In the Site CSS, paste in the following: 
#sys_banner { 
width: 800px; 
height: 200px; 
}
    This should alter your banner area size.
  3. At the bottom left corner of the dialog box, uncheck the "Disable Site CSS Overrides".
  4. Click on the "Preview" tab to see the changes.

  5. Once you've finished making all the tweaks, click on "OK".

  6. You will now see your changes applied to all pages in your SiteBuilder.

    Each style has its own set of codes. So what works with one style may not necessarily work with another.

    The CSS feature is best for advanced users who are comfortable with using HTML/CSS code. Here are a couple of helpful CSS resources: W3C schools and A List Apart.

 

Related articles