Difference between revisions of "Project Style"
| (8 intermediate revisions by 2 users not shown) | |||
| Line 18: | 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 24: | 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 46: | Line 46: | ||
E.g. | E.g. | ||
popup-shadow=0 0 0 3px yellow | popup-shadow=0 0 0 3px yellow | ||
| + | |||
| + | === scrollbar-width === | ||
| + | Defines the width of the scrollbar’s cursor. | ||
| + | E.g. | ||
| + | scrollbar-width=8px | ||
| + | |||
| + | === scrollbar-thumb-color === | ||
| + | Defines the scrollbar’s cursor color. | ||
| + | E.g. | ||
| + | scrollbar-thumb-color=red | ||
| + | |||
---- | ---- | ||
| − | {{ | + | {{Note:CSS Color}} |
| − | |||
| − | |||
| − | |||
| − | |||
| − | }} | ||
== custom.css == | == 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. | + | 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. | Any css class specified in this file is applied on top of the skin's css. | ||
| − | Here's an example of a css file: | + | Here's an example of a ''custom.css'' file: |
| − | .body { / | + | .body { /* body's background */ |
| − | + | background-color: yellow; | |
| − | + | }<br> | |
| − | + | .pagesContainer { /* pages' background */ | |
| − | + | background-color: red; | |
| − | + | }<br> | |
| − | } | + | #pageheader, #pagefooter { /* header and footer's background */ |
| − | + | background-color: blue; | |
| − | .pagesContainer { | ||
| − | |||
| − | } | ||
| − | |||
| − | #pageheader, #pagefooter { | ||
| − | |||
} | } | ||
Latest revision as of 11:45, 27 April 2015
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
scrollbar-width
Defines the width of the scrollbar’s cursor. E.g.
scrollbar-width=8px
scrollbar-thumb-color
Defines the scrollbar’s cursor color. E.g.
scrollbar-thumb-color=red
- 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 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;
}
