LOADING . . Please wait


| Geelongweb.COM.au - Website Design . Hosting . Programming

 

Edit CSS File

CSS (Cascading Style Sheet) is the layout/style system of the web and enables very interesting layouts and effects to be achieved.

Pagination/Geelong web will normally provide management of your site's CSS file, however if you understand CSS you can make additions and changes yourself via the left hand admin index "Edit CSS file" link.

The Edit CSS File page has 3 sections.

CSS_EDITING.PNG

(1) A colour sampler where you can find the correct hex colour code for various colours.

(2) Variables (optional) - You can define various variables to make it easy to later change multiple occurrences of the same item in the css. Eg you may have the definition 'color: #FF0000;' in many places. Creating a variable such as '$main-colour:#FF000' and then replacing the references in the css of "#FF0000' with '$main-colour' will mean that you only need to change the variable definition and the colour will be changed in all the instances in the css automatically.

Each variable/definition must be on a separate line. The varaible name can be anything that is unique (we recommend starting your variable name with the $ character to ensure it's uniqueness. The variable name and it's value must be separated by the colon : character. Each line can end with the ; character to be compatable with .SCSS files)

(3) The actual CSS file editing window - When you click inside the editing window it will automatically expand to accommodate the entire content. If you double click in the window it will close up so that the [Save CSS] button is easily visible.

We recommend that after saving the CSS file you use the "Validate at W3.org" link to check that your editing to the file has created a valid CSS file.

Any styles/classes created in the CSS file with then display and be available for use in the "Style" drop-down selector in the Content editor.