Note: This article refers to the legacy version of the Website Builder. If you signed up to the HostPapa Website Builder after March 11 2020, you’re on the new version of the Website Builder. For help, go here.
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 change your site’s CSS codes so that you have the perfect look for your site.
Here are some general steps on how this works:
-
- In the website builder, go to Site > Content > Site CSS.
- 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).
- 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 colour, 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, colour and size used.———————————–
- Copy that section of code and paste into the Site CSS Overrides on the left-hand side.
- 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.
- At the bottom left corner of the dialog box, uncheck the Disable Site CSS Overrides.
- Click on the Preview tab to see the changes.
- Once you’ve finished making all the changes, click on OK.
Please note:
- Each style has its own set of codes – so what works with one style may not necessarily work with another.
- The Site CSS feature is only available with the Premium and Enterprise packages. This feature is best for advanced users who are comfortable with using HTML codes. Here are a couple of helpful CSS resources: W3C schools and A List Apart.
