Portability Hub
Register
Advertisement

This wiki uses a JavaScript to automatically load themes. Here's how it works:

Loading CSS[]

Sub-pages of Themes , e.g. Themes/Chalkboard will automatically load a style sheet stored in Themes/Chalkboard/theme.css.

On demand loading[]

The JavaScript creates a button to enable loading the css. This is generated if the page contains the code below.

Syntax[]

To generate the button on any page write the following code:

{{Load theme|page with css}}

  • The theme page (with css) must contain the page name, e.g. "Infobox/theme.css"
  • The css class must be lower case

A button with the label "Load themes" will then appear.

Example[]

 

{{Infobox/Theme
|title = Chalkboard
|theme-source = chalkboard
|family = School
|authors = [[User:Robcamstone]]
|code = [[Themes/Chalkboard/theme.css|CSS]]
|type = nocat}}
{{load theme|Themes/Chalkboard/theme.css}}


Page and CSS naming[]

Page Structure[]

Infoboxes[]

  1. Create a page for the description (e.g. Chalkboard) as a sub-page of the Themes page, e.g Themes/Chalkboard
  2. Add the Template:Infobox/Theme template (see the template for syntax) to the created page along with theme information
  3. Store the CSS in the "themes.css" sub-page of the theme, e.g. "Themes/Chalkboard/theme.css"

Naming CSS classes[]

  • Make sure they are always lower case, e.g. ".pi-theme-chalkboard"
  • Avoid spaces
  • Reduce or avoid special characters e.g. "™, $"
Advertisement