Difference between revisions of "Project Style"
Line 47: | Line 47: | ||
popup-shadow=0 0 0 3px yellow | popup-shadow=0 0 0 3px yellow | ||
---- | ---- | ||
− | {{Note:CSS | + | {{Note:CSS Colorz}} |
== custom.css == | == custom.css == |
Revision as of 12:10, 24 February 2014
The appearance of a project is defined mainly by the selected skin. It can be customized by specifying a project style or by adding a "custom.css" file to the project's directory.
Contents
Project Style Attribute
The project style attribute requires a list of semicolon-separated attribute ids and values. What follows is a list of all the possible ids and how they affect the skin's appearance.
body-background-color
Defines the color of the overall background (outside the project's page area). Requires a css color as value. E.g.
body-background-color=red
pages-background-color
Defines the color of the pages' background. Requires a css color as value. E.g.
pages-background-color=rgba(255,255,0)
pages-shadow
Defines the shadow of the project's pages area. Requires a css shadow as value. E.g.
pages-shadow=0 0 0 3px yellow
header-background-color
Defines the color of the page header's background. Requires a css color as value. E.g.
header-background-color=#0000FF
Defines the color of the page footer's background. E.g.
footer-background-color=rgba(0,0,255,0.5);
popup-background-color
Defines the color of the popup's background. Requires a css color as value. E.g.
popup-background-color=purple
popup-shadow
Defines the shadow of the project's pages area. Requires a css shadow as value. E.g.
popup-shadow=0 0 0 3px yellow
custom.css
The custom.css file can be created inside the www/<skin's name> if it's to be applied to all projects with that skin, or inside the www/<project's name> if it should apply to a specific project.
Any css class specified in this file is applied on top of the skin's css. Here's an example of a custom.css file:
.body { /* body's background */ background-color: yellow; }
.pagesContainer { /* pages' background */ background-color: red; }
#pageheader, #pagefooter { /* header and footer's background */ background-color: blue; }