Note: this guide has been created to assist designers in customizing Advisor Websites’ themes, and the terminology used will assume that the reader is familiar with CSS and website design. The purpose of the guide is to define most of the commonly-used selectors that you will be modifying when theming a new site.
When creating your custom CSS, start from this file and add custom rules using the structure provided. Additionally, please follow the Drupal CSS coding standards.
Advisor Websites uses a CSS framework called 960 Grid System. This allows us to create detailed column-based layouts that are 100% cross-browser compatible.
It is crucial to understand the Box Model before you begin as our framework defines how you it can be applied. Block-level elements which use container or grid classes (eg. container_12, grid_6, etc) define specific widths and margins. The essential rule to follow is to not put any width, border, padding, or margin properties on any element between a container_x and the innermost grid_x (including the grid_x element itself). The entire purpose of using this framework is to rely on the classes it provides, and to avoid applying width/margin/padding ourselves and the frequent resulting x-browser challenges.
Update your CSS in the user dashboard's "Design" tab or upload your stylesheet using "File Browser". When choosing the upload method, your stylesheet will need to be renamed to custom.css and uploaded into the root folder.