Project Style

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.

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

footer-background-color

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

---

A CSS color can be specified as

• 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;
}