Page History

...

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: 

   Code Block
   language css
   #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.

   Note
   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