Search Tips
Account Management Apps Attendance Call Alerts Classroom Data Imports Data Security Directory Services Google Classroom Integration Grade Export Gradebook Groups Implementation
Lockers LoopMail Mobile School Loop Partner Gradebooks Portals Publishing Registration Sections School Settings Student Record Student Tracker Unification Webmaster Websites
Frequently Asked Questions Document Library Design Services Gallery of Sample Sites Help & Support
Free Webinars Website Accessibility Course Outlines On-Site Training Website Training
Account Management Grade Submission Gradebook LoopMail Trackers Miscellaneous
New Release Blog Replace Locker Files Teacher Usage Stats

Advanced CSS Options

advanced_css_design.pngThose 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 in the Design Setup process. The Advanced CSS Options will appear in step 1 of the setup process after selecting a design template.advanced_css_menu.png

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 Advance 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.

advcss4.png

2. Create an image to substitute in place of this default graphic.

advcss2.png

3. Add your mascot and school name to this image.

advcss1.png

4. Upload your custom image and preview the results.

(Default template on the right for comparison)
advcss11.png     advcss6.png

 

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.