Home Features Demos Download Installation User Manual Developer Manual Relation function Credits


Skin design

The SofaWiki uses a minimal design that can however be easily adapted.

The following Skins are installed. They are derived from installations of SofaWiki. Try them out.

All included skins are derived from the default skin. They all include the default.css and a common header and footer and add their own CSS.

You can design your own skin easily by copying and editing the wiki.php and wiki.css in the skins folder. Store your skins in the site/skins folder, so that you keep the over updates of the code. Enable the skin in the configuration file.

First you can do much editing already the CSS file. The page as constructed in the default.php file has the main divisions

  • div id='search' the search box
  • div id='menu' the menu bar at the top including the edit menu, the login menu, the language menu and the error message
  • div id='content' containing the main page and inside of that
    • div id='parsedContent' the body of the page
  • div id='info' containing info text of the footer.

The default skin keeps all menus together. If you do not like that, you can create separate divisions. You have the following globals you can use

  • $swParsedName
  • $swParsedContent
  • $swHomeMenu
  • $swEditMenus (array)
  • $swLoginMenus (array)
  • $swLangMenus (array)
  • $swHistoryMenus (array)
  • $swSearchMenu
  • $swFooter

The skins use also some elements you can define directly in the Wiki: System:SkinHeader System:SkinMenu and System:SkinFooter

You can use Colorcode in your skin if you want to add syntax highlighting.

Note: you can also design completely on your own from a blank sheet, but then you must to write also the code for the admin menus. The admin menu is now designed that it is a menu on top outside the page so it does influence the less possible on the page content. You will also need to style the dialog windows.