Difference between revisions of "Project Style"

From HSYCO
Jump to navigation Jump to search
Line 55: Line 55:
  
 
== 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's background */
 
  .body { /* body's background */
 
     background-color: yellow;
 
     background-color: yellow;

Revision as of 11:15, 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.

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

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