What are some examples of CSS changes to an Academus skin?

Academus CSS Change Examples

Changing the main logo

Image references in CSS are done by pointing to the url location of the image via a url() reference of a background or background-image selector.

For example,

#mainlogo {
background: url('../images/brand/main_logo.gif') no-repeat 0 0;
}

This example specifies an image reference ('../images/brand/main_logo.gif') that does not repeat (no-repeat) starting at the top, left corner (0 0) of its container.

To change the header to have a different color, change the hexidecimal value of the background. If the background has an image reference, you'll likely need to update the image as well. Either replace the existing image that is referenced (in this example, main_logo.gif), or create a new image and change the reference to point to it.

Reference: How do I change an image of my skin in Academus?

Changing the main font used by the skin

Font specifications in CSS are done by referencing the font family-name or the font generic-family and commonly appear in font or font-family selectors.

For example, the BODY specification might be:

#BODY {
font-family: "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
}

To change the font, specify the fonts desired in order of the priority.

Changing the header background color

Color specifications in CSS are done primarily with hexadecimal values, and usually appear in background, background-color, color, or border selectors.

For example, the header specification might be:

#header {
background: #FFF url('../images/brand/header_tile.gif') repeat-x 0 0;
}

This example specifies a colored background (#FFF) with a background image reference ('../images/brand/header_tile.gif') that repeats horizontally (repeat-x) starting at the top, left corner (0 0) of its container.

To change the header to have a different color, change the hexidecimal value of the background. If the background has an image reference, you'll likely need to update the image as well. Either replace the existing image that is referenced (in this example, header_tile.gif), or create a new image and change the reference to point to it.

Note: Academus 2.x has several header states that can be specified for unique presentation using their corresponding ids (#header, #headerFocused, #headerPrefs, #headerLogin, #headerDetached).

In order to change colors globally, the best approach is to use an editor with a search and replace feature. Search for the hexadecimal value of the color to change, and replace that value with the desired new color hexadecimal value. For example, search for "#666" and replace with "#000".