Difference between revisions of "Project Style"
| Line 2: | Line 2: | ||
It can be customized by specifying a [[Project#Style|project style]] or by adding a "custom.css" file to the project's directory. | It can be customized by specifying a [[Project#Style|project style]] or by adding a "custom.css" file to the project's directory. | ||
| + | == Project Style Attribute == | ||
The project style attribute requires a list of semicolon-separated attribute ids and values. | 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. | What follows is a list of all the possible ids and how they affect the skin's appearance. | ||
| − | == body-background-color == | + | === body-background-color === |
Defines the color of the overall background (outside the project's page area). | Defines the color of the overall background (outside the project's page area). | ||
Requires a css color as value. | Requires a css color as value. | ||
| Line 11: | Line 12: | ||
body-background-color=red | body-background-color=red | ||
| − | == pages-background-color == | + | === pages-background-color === |
Defines the color of the pages' background. | Defines the color of the pages' background. | ||
Requires a css color as value. | Requires a css color as value. | ||
| Line 17: | Line 18: | ||
pages-background-color=rgba(255,255,0) | pages-background-color=rgba(255,255,0) | ||
| − | == pages-shadow == | + | === pages-shadow == |
Defines the shadow of the project's pages area. | Defines the shadow of the project's pages area. | ||
Requires a css shadow as value. | Requires a css shadow as value. | ||
| Line 23: | Line 24: | ||
pages-shadow=0 0 0 3px yellow | pages-shadow=0 0 0 3px yellow | ||
| − | == header-background-color == | + | == header-background-color === |
Defines the color of the page header's background. | Defines the color of the page header's background. | ||
Requires a css color as value. | Requires a css color as value. | ||
| Line 29: | Line 30: | ||
header-background-color=#0000FF | header-background-color=#0000FF | ||
| − | == footer-background-color == | + | === footer-background-color === |
Defines the color of the page footer's background. | Defines the color of the page footer's background. | ||
E.g. | E.g. | ||
footer-background-color=rgba(0,0,255,0.5); | footer-background-color=rgba(0,0,255,0.5); | ||
| − | == popup-background-color == | + | === popup-background-color === |
Defines the color of the popup's background. | Defines the color of the popup's background. | ||
Requires a css color as value. | Requires a css color as value. | ||
| Line 40: | Line 41: | ||
popup-background-color=purple | popup-background-color=purple | ||
| − | == popup-shadow == | + | === popup-shadow === |
Defines the shadow of the project's pages area. | Defines the shadow of the project's pages area. | ||
Requires a css shadow as value. | Requires a css shadow as value. | ||
| Line 52: | Line 53: | ||
*as rgba: ''rgba(<r>,<g>,<b>,<alpha>)'' E.g. ''rgba(255,30,30,0.5)'' | *as rgba: ''rgba(<r>,<g>,<b>,<alpha>)'' E.g. ''rgba(255,30,30,0.5)'' | ||
}} | }} | ||
| + | |||
| + | == 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 css file: | ||
| + | .body { // body | ||
| + | background-color: mix(#6479c6, #572e8f); | ||
| + | } | ||
| + | |||
| + | .background { | ||
| + | background-color:blue; | ||
| + | } | ||
| + | |||
| + | .pagesContainer { | ||
| + | background-color:red; | ||
| + | } | ||
| + | |||
| + | #pageheader, #pagefooter { | ||
| + | background-color: #3a2e43; | ||
| + | } | ||
Revision as of 12:12, 10 January 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
- hex value: #<rr><gg><bb> E.g. #FF1010
- color name: red, blue, white...
- as rgb: rgb(<r>,<g>,<b>) E.g. rgb(255,30,30)
- as rgba: rgba(<r>,<g>,<b>,<alpha>) E.g. rgba(255,30,30,0.5)
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 css file:
.body { // body
background-color: mix(#6479c6, #572e8f);
}
.background {
background-color:blue;
}
.pagesContainer {
background-color:red;
}
#pageheader, #pagefooter {
background-color: #3a2e43;
}
