Difference between revisions of "Project Style"

From HSYCO
Jump to navigation Jump to search
 
(11 intermediate revisions by 2 users not shown)
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.
  
The project style attribute requires a list of semicolon separated attribute ids and values.
+
== 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.
 
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.
 
E.g.
 
E.g.
 
  popup-shadow=0 0 0 3px yellow
 
  popup-shadow=0 0 0 3px yellow
 +
----
 +
{{Note:CSS Color}}
  
{{note|A '''css color''' can be specified as
+
== custom.css ==
*hex value: #<rr><gg><bb>,
+
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.
*color name (red,blue,white...)
+
 
*rgb(&lt;r&gt;,&lt;g&gt;,&lt;b&gt;)
+
Any css class specified in this file is applied on top of the skin's css.
*rgba(&lt;r&gt;,&lt;g&gt;,&lt;b&gt;,&lt;alpha&gt;)
+
Here's an example of a ''custom.css'' file:
}}
+
.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;
 +
}

Latest revision as of 12:11, 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.

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