Summary: Tips for using the Triad
Maintainer: HansB
Categories: Skins

A collection of admin tips for the Triad

  1. Tweaking colour and font settings
  2. Setting defaults
  3. Disable options
  4. Adding options
  5. Setting group defaults
  6. Using theme markup
  7. Setting a background image(for 'trans' color scheme)
  8. Configuring RightBar display
  9. Using styled boxes
  10. Changing placement of searchbox
  11. Changing Hide/Show buttons
  12. Changing the header/logo
  13. Changing the TitleBar
  14. Support for Cluster/Hg recipes
  15. Using the popup editform
  16. Support for toggle buttons

Changing page content

The main page content is edited in the usual way. All other "surrounding" content including action links and buttons can be changed by editing the relevant subpage: See Site.Triad-Configuration?


Tweaking colour and font settings

If you want to tweak individual colours or font settings, you can do this by creating a file local.css in folder pub/css/ and add your custom css settings there. Triad uses a number of css stylesheets, which are in the skins/triad/css/ folder. Depending on the theme for colours and fonts choosen, triad uses one of the c-....css for colour settings, and one of the font-...css files for font, line height etc settings. Open the relevant file in a text editor, and figure out which of the settings you need to change. Then add your own custom setting to pub/css/local.css. That way a skin update will not overwrite your changes.


Setting defaults from config.php

All the default settings can be changed by setting them in config.php. This allows to have several wikis as part of a farm, using one farm-installed skin, but having different defaults, like color and font schemes.
Current defaults and possible other settings:

$DefaultColor = 'lightblue'; # lightblue, silverblue, seagreen, green, gold, choc, white, night, trans
$DefaultFont = 'verdana'; # verdana or georgia
$DefaultPageWidth = 'wide';  # wide, 800, 1000, 1300 or border

$RightWidth = '170px'; # right bar width, set in px or em
$LeftWidth = '170px'; # left (side) bar width, set in px or em
$PageBorder = '20px'; # border width, set in px 

Setting different defaults for colors and fonts

You can set a new default color or font scheme in config.php by setting $DefaultColor = ' keyword '; or $DefaultFont = ' keyword '; for instance $DefaultColor = 'gold'; which will load the gold color scheme from the c-gold.css file by default. If you wish that only the default scheme is used then you need to disable the switching of style options (see next section).


Switching off all style changing options (disabling cookie setting)

Set in config.php $EnableStyleOptions = 0; This disables the cookie setting routines which the style switching relies on by not loading stylechange.php, the script with the cookie setting routines.


Switching off selected style changing options

Set in config.php $EnableColorOptions = 0; to switch off color options, or $EnableFontOptions = 0; to switch off font options. Another way would be in skin.php to place comment #-symbols in front of all array items of the $Page...List arrays which are not required. But make sure that the default set with $DefaultColor, $DefaultFont etc is available.


Restricting style options

In skin.php place #-comment symbols at the beginning of each option in the $Page..List option array which should be disallowed. Leave only the options uncommented which are allowed.


Adding more color (or font) options

Best is to save a colour (font) css file under a new name, add a line to the $PageColorList ($PageFontList) array, like 'newcolor' => 'c-newcolor.css'; , add the new option as a link to a wiki page like TriadStyleOptions? to create a switch to set the new colour scheme, and then edit the css file, changing colours and background images etc till it is right.


Setting different default color schemes for different groups

This makes most sense if the colour changing option is disabled. See above the first two entries for this. If it is not disabled users will see the colours they have choosen last (unless they have not yet choosen a different colour scheme).
Declare a default colour in config.php as the site's default, like adding $DefaultColor = 'blue';, and declaring default colours for specific groups in a group.php file. If it does not exist create one in the local directory, like local/MyGroup.php with content for example like:

     <?php if (!defined('PmWiki')) exit();
     $DefaultColor = 'gold';

Likewise defaults for other style options like fonts and layout can be set in config.php or group.php files.


Using (:theme ...:) markup to display colour and font schemes

A custom markup (:theme colourscheme fontscheme:) can be used to show individual pages or groups with different colour and font schemes. For instance (:theme gold:) will show the current page in 'gold' colour scheme. (:theme gold georgia:) will show the current page in 'gold' colour scheme and 'georgia' font scheme. The first parameter after (:theme needs to be a valid colour scheme name, the second parameter is optional and needs to be a valid font scheme name (or be omitted).
To set a theme for all pages in a group, add the markup to the group's GroupHeader page.
Theme markup can be disabled by setting $EnableThemes = 0; in skin.php.

You can set a background image with (:theme background=IMAGEURL:). IMAGEURL is the url of your background image. This theme uses the transparent color scheme. Other parameters:

  • bgcolor= to set a body background color, useful for when the pagewidth is not 'wide', i.e. a body background is showing as a border or sideframe to the central page of fixed width.
  • width= - set the width option within the theme markup.


Setting a custom background image

You can set a background image in config.php with $BackgroundImgUrlFmt = 'urlpathtoimage';. urlpathtoimage should be your image url (not the file path). This will be applied for the transparent color scheme, so you need to choose the 'trans' option for color schemes as well. You can set a different body background color with $BackgroundColor = 'colorcode';, useful when the page width is set less than 'wide'.
You can also set background images in individual pages or groups with markup (:theme background=urlpathtoimage:).

If you want to get rid of dotted lines, add the following to a pub/css/local.css file (create the file if you have not got it):

#right-box, #left-box, #topnav, #footer-box { border:none; }


Showing a RightBar page on all pages as default

Create a RightBar page for the entire site as Site.RightBar, for individual groups as GroupName.RightBar, or for individual pages as GroupName.PageName-RightBar. Authors can disable it on pages with markup (:noright:). Likewise if the RightBar is not shown as default, then authors can show it on individual pages or groups using custom markup (:showright:) on the page or the GroupHeader page.

Set $EnableRightBar = 0; in skin.php or config.php to disable the RightBar for the whole site.


Disabling (:showright:) markup

Setting $EnableMarkupShowRight = 0; will disable the (:showright:) markup.

Showing an empty right column if no RightBar is present top

By default no empty column is shown and the content will stretch all the way to the right. But setting $EnableEmptyRightBar = 1; will show an empty column even if no RightBar is present.


Creating special RightBar content boxes

By creating division sections with >>clip<<] ...section text... >><< the text will appear in a specially styled box.

content box specially styled for `RightBar.

content box specially styled for RightBar.


Creating styled boxes for quotations

Enclose your quotation with >>bquote<< ...quotation... >><<]. Use %qsource% for the quote source reference. Leave an empty line before closing the div:

This is a  quotation....
%qsource%&mdash; anonymous


This is a quotation.... — anonymous


Creating styled right floated boxes

Enclose content to be right floated in a 200px wide box with >>news<< ...right floated content... >><<

right floated content
normal content

right floated content

normal content


Creating styled boxes for SideBar content

Enclose your special sidebar text content with >>sideclip<< ...sidebar text... >><<

Removing or relocating the searchbox and the fontsizer buttons top

By default the searchbox and fontsizer are included as markup in the Site.PageHeader page. Edit the page to change this. You can relocate them to other page configuration pages, like the SideBar. Setting $EnableFontSizer = 0; will disable the fontsizing option and remove the sizer buttons. Setting $EnableViewSwitcher = 0; will disable the switching of normal to big text view.

Disabling Hide/Show buttons for right and left side column

Set $EnableRightBarToggle = 0; and/or $EnableLeftBarToggle = 0; to disable the instant side column toggles.


Adding a logo and/or site title

A logo can be added to the Site.PageHeader page.


Changing the title display

Triad now (2007-03-19) has a separate page to configure the titlebar: Site.TitleBar. Editing the contents of that page can give you different titlebar layouts. GroupName.TitleBar is also supported for group-specific titlebar settings. A page specific titlebar can also be created (see below). - The default Site.TitleBar page uses pagegroup and pagetitle style classes for the grouplink and title, which are defined in layout-triad.css and further in the color css files. You could create your own style classes for further customisations.


Removing the group name from the titlebar

You can remove the group link in the titlebar on individual pages (or groups) with markup (:nogroup:). Changing $EnableGroupTitle = 1; to $EnableGroupTitle = 0; in skin.php removes the group name from the titlebar for the whole site. You can also edit Site.TitleBar and remove the grouplink markup there.

A nice alternative for showing the group name in the titlebar is showing it as a link in the PageTopMenu. Add *[[{*$Group}]] to the list will do the trick. Adding *[[{*$Name}]] will show the page name as well, which may be useful information, since the page title may be different from the actual page name.


Creating page titles with non-standard (fancy) fonts

The normal page titles can be replaced with images of non-standard (fancy) fonts, by creating a page with the string "-TitleBar" added to the name of the page, like "MyPage-TitleBar". Put the image as attachment on this page, without any lines before or after (for instance: Attach:myfancyfonttitle.gif). Best is to create a gif image of the title in special font, using a transparent background, in an image editor. A page named as described above will take the place of the normal page title, in the space of the titlebar. (from fixflow-v3e and gemini-v9e onwards)


Support for Cluster and Hg recipes

Triad now (2007-03-19) has built-in support for Cookbook:Cluster and Cookbook:Hg, for easy display of a "breadcrumb trail" of group links in the titlebar. You may need to edit Site.TitleBar to put in the relevant breadcrumb markup (Cluster's breadcrumb PV is provided in the default).


Using the Popup-EditForm

Popup-EditForm is the default edit form and provides popup preview and help panes, as well as a wide edit window and double rows of buttons both abopve and below the edit textbox. If it is not wanted it can be disabled by commenting out in skin.php the line include_once("$SkinDir/popup2edit.php");. If the use of toggle buttons is not needed the line include_once("$SkinDir/showhide.php"); can also be commented out, which prevents these scripts from loading. If any of these scripts are loaded as a cookbook script then the corresponding code lines should also be commented out.


Using Toggle Buttons

The included showhide.php script adds the popup preview and help functionality. The markup (:showhide div=divname ... :) can also be used on any other page to create toggle buttons to toggle whatever section or object. See ShowHide for details.