Those webmasters with the skills to work with HTML and CSS and the tools to edit and create their own images will appreciate our Advanced CSS Options. These tools are available during the Design Setup process.
The Advanced CSS Options will appear in step one of the setup process after selecting a design template.
The advanced tools give you a high level of control over many elements of the design. With these tools you can create a totally unique and custom design. A small example of what you can accomplish appears below.
Custom Design Example
To achieve a custom look over the defaults of the template illustrated at the bottom right of the page, we'll swap out the header background image by using the settings found on the General Page Design Elements section of the Advanced CSS Tools.
Header Background Image
To create a custom header image complete with the school name and mascot:
1. Download a copy of the background image.
2. Create an image to substitute in place of this default graphic.
3. Add your mascot and school name to this image.
4. Upload your custom image and preview the results.
(Default template on the right for comparison)
Notes and Tips
All changes made in Advanced CSS are immediate once you click Submit. If your site is live the changes will show on the Live website.
Before making any changes jot down the default values or take screenshots. The only way to get back to the default settings is to reset the design. CSS changes are not saved in the page history.
Use the live View on the top right side of any Advanced CSS page to see your changes.
Margin – Clears an area around the border. The margin does not have a background color, it is completely transparent
Padding - Clears an area around the content. The padding is affected by the background color of the container
Positioning – sets the position of the image relative to it’s default positioning. Repeat will repeat the image to fill the container. Repeat Y repeats the image vertically. Repeat X repeats the image horizontally.
Colors - must be in hex format (# symbol followed by six alphanumeric characters). There are many online tools that provide Hex color codes. For Chrome or Firefox users try an add-on called Colorzilla (http://www.colorzilla.com). It has a color picker and an eyedropper tool to capture the hex code of a color from any web page.
