Summary: Talk page of Triad
Please leave latest comment or question at the top of this section:

Wim? March 6, 2020, at 01:22 GMT+1: Using triad version 2017-08-23 gave white page, suspect typo in triad.php on line 374: NoGroupTitle should be TriadNoGroupTitle.

Micha August 22, 2017, at 23:14 GMT+1: Love this skin! But after a wiki (and skin) update I noticed that the current version has a syntax error - the "showhide.php" has a missing ')' on line 20.

Thanks for spotting this! Now corrected. - HansB August 23, 2017, at 01:01 AM

mfwolff June 15, 2016, at 02:26 PM: In the page 'Site.PageFootMenu' you could replace the two lines with links for 'Backlinks' and 'List Group' with these :

*%rel=nofollow%[[{$FullName}?action=search&q=link={*$FullName} | $[Backlinks] ]]
*%rel=nofollow%[[{$FullName}?action=search&q={*$Group}/ | $[List Group] ]]

The benefit is, that in wikis in other languages the users soft-land on the SearchPage that is listed in the XLPage under 'Page locations' which includes the instructions translated in the appropriate language.

Frank February 20, 2016, at 11:37 AM: I'm writing this comment just to support the request of Peter Bowers (see below). Triad is already the best of the skins, but using it even in mobile devices ... would be the icing on the cake. When you'll have a bit of time, I hope you could do this upgrade. Let us know if we can hope. - Thanks in advance.

HansB: Triad has a quite primitive table-based three column structure, which I think is not suited for adaptation to mobile devices. I am sorry but I have no plans to develop an adaptive skin based on Triad.

Jean-Pierre Chrétien February 2nd, 2016, at 3:15 PM: I found Triad very easy to tune in line, I use it since August 2015 to replace another recipe which was not php 5.5 compliant. Small problem remaining, I can't have apostrophes in buttons, e.g. 'Close Help' translates in French as 'Fermer l'aperçu': either I get a truncated "Fermer l" if I protect the apostrophe with a backslash, or an error about a missing ) if I leave it as is. I get also "Fermer l" if I encapsulate the phrase between double quotes without protecting the apostrophe.
mfwolff:Try 'Fermer l´aperçu'. I know, it is uggly, but not as uggly as the truncated one.

Peter Bowers December 20, 2015, at 05:57 AM: Kudos on triad skin - I've been using it for years on several (dozens?) of different sites and it has been a champ! Now I'm getting google complaining about my sites not being optimized for mobile devices. Any possibility Triad could be updated to fulfill those requirements? It would sure be nice to just update Triad rather than trying to figure out some way of choosing one skin for desktops and another for mobile or else switching to a different skin altogether...

Frank – July 09, 2015, at 04:22 PM: (First, thank you for this skin, it is the best one from my point of view.) - I have got a problem with the summaries (for a while, but now I can no longer postpone) that it doesn't occur with the standard PmWiki skin. When I write a Summary on the input field of the edit form and I save the page, nothing appear with the PTVTalk page of Triad (or similars). If I reopen with the ?action=edit, the Summary input field is empty. I've already tried with a brand new wiki installation without any cookbooks except (a new downloaded) Triad, but the problem remains. Any idea? - Thanks.

Testing Edit Summary of page edit... Edit Summary is shown on RecentChanges page. Not sure what your problem is. Please note that the Summary PTV as used on these Cookbook and Skins pages is not modified when using the Summary Input field ona page edit! We are talking about two different kinds of Summary! HansB July 09, 2015, at 09:43 AM

Frank – July 09, 2015, at 05:28 PM: Thanks for the quick response and because now I know what to do. Actually I considered it a problem because I had not realized that they are two different kinds of Summaries - Sorry, my mistake, problem non-existent - Thanks again.

RDJones, January 17, 2012: Hans, or anyone, after a recent update my popup edit is not working as it used to (or should). Specifically, the "Show Help" button is non-functioning and the edit-quick-reference loads below the edit window. The edit-quick-reference used to be a popup controlled by the "Show Help" button. Any advice about what I should do to restore this functionality? Thanks -- RDJones

Peter Bowers December 27, 2010, at 07:50 AM: I believe that some strings specific to the Triad skin need to be added to the PmWiki.XLPageCookbookTemplate page. Specifically I'm missing "Page History" and "Attach File" in the buttons at the bottom. I would just add themselves, but I'm not 100% sure that this is a Triad thing and not a generic PmWiki string and I don't want to put it in the wrong place...

Hmmm... Maybe the "Page last modified on March 06, 2020, at 12:25 AM" isn't getting translated? I'm pretty sure I've got it typed in exactly, but it's not getting translated on my site...

SteP 2010-12-08: A corner case prevents loading pages with jQuery.load(). When you disable the fontsizer with $EnableFontSizer=0 the skin template still refers to js object fontSize. This eventually sends jQuery.load() into the ozone. I considered changing triad-skin.tmpl, but I found that adding one line to skin.php works more reliably. So add the third line below:

if($EnableFontSizer==1) { include_once("$SkinDir/fontsizer.php");
      $HTMLStylesFmt['fontsizer'] = "";}
else $HTMLHeaderFmt['fontsizer'] = '<script type="text/javascript">var fontSize=false;</script>'; //SteP+ 20101208 fix js error & stop taking jQuery.load() down

Hi everyone,

  • 2010-11-25: How do I keep the left sidebar to a fixed width? THX Christian

>I reinstated the #left-box and #right-box width in skin.php, as it was before 2010-05-11, and all is well again.

>$HTMLStylesFmt[] = "
>  #left-box { width: $LeftWidth; }  
>  #right-box { width: $RightWidth; }\n";

as described below it worked for me,too. I don´t know what I have done but the problems with changing sidebar widths seems to be gone.

Hi Hans,

  • 2010-10-04: How do I limit the center box to a specific width? It´s to large for easy reading with higher resolutions. There is also the issue that it changes it´s width upon showing and hiding the left side bar ( or the side bar changes its size, depends how you look at it ) THX Christian

The left and right columns are set, the centre width changes with browser window width in the liquid layout. Opt for a fixed width layout, for instance $DefaultPageWidth = 1000;. - HansB November 13, 2010, at 05:03 AM

Hi Hans, you wrote in update history:

  • 2010-05-11: Changed setting style width for SideBar and RightBar width from #left-box and #right-box cells to #sidebar and #rightbar divs.

When I updated I noticed that in my liquid layout, where the rightbar is enabled but hidden by default, there is now a large gap between the sidebar and the center box. If I click the 'hide left bar' top js button to hide the sidebar, and click it again to show the sidebar, the gap goes away, that is the left edge of the center bar extends to the left right against the right edge of the sidebar.

I reinstated the #left-box and #right-box width in skin.php, as it was before 2010-05-11, and all is well again.

$HTMLStylesFmt[] = "
  #left-box { width: $LeftWidth; }  
  #right-box { width: $RightWidth; }\n";

Hi Hans, I agree with this one. Unfortunately, I was making tons of changes and it took me a while to track down why the sidebar started to behave oddly. That is certainly a regression for me, but keep up the excellent work.

Hi Hans, you wrote in update history:

  • 2010-04-20: updated pmwiki-core.css (now wrapping pre and code)

It does not work in my PMWIKI installation. I also tried it in a clean 2.2.15 installation. But there is no wrap of long preformated text lines (with space character at beginning of line). Could you give me a short HOWTO, please ?

Regards, Jens

Thanks for the alert! I did get it wrong. The latest update should fix this. I removed the change to pm-core.css, and added styles for getting pre text wrapping via skin.php, and added a var $EnablePreWrap, so putting $EnablePreWrap = 0; into config can disable preformatted text wrap. I tested with the latest Firefox, Opera and IE7. - HansB May 08, 2010, at 07:55 AM

Hi Hans, thanks a lot for this fix ! It works now perfectly. Just an other suggestion. I tried some weeks ago to add horizontal overflow scrollbar to preformatted text in TRIAD skin as described in WordWrapPreformattedText. But due to very flexible configuration of TRIAD skin (page wide and show-hide right-left bar) I didn't get this working properly. I think it would be a nice feature to implement in skin.php for next release.

Kind regards, Jens

I personally do not like horizontal scroll bars, and don't wish to add that as an option in Triad. But if you want to scroll bars for 'pre' tags, you need both overflow: scroll; and a definite width, like width:600px; as pre style attributes. - HansB May 09, 2010, at 02:14 PM

SteP April 22, 2010, at 02:16 AM: Hans, is layout-main.css line 421 really meant to read

  	font-weight:900; font-family:"new courier" courier;

shouldn't it be

  	font-weight:900; font-family: "courier new", monospaced;

Also, there seems to be an extra closing brace on line 111 of c-transparent.css.

Thanks! Now corrected. - HansB April 22, 2010, at 04:00 AM

Just installed the newest updated version on April 20, 2010, and when I use skinchange from monobook to triad I get a parse error on line 13 of triad/skin.php.

Reverted to last published version from start of this month, and this still works perfectly, and I can switch between the two skins. Des April 20, 2010, at 08:23 AM

Sorry, I messed up the $RecipeInfo line in skin.php. Now corrected. Please try again, and thanks for the alert! - HansB April 20, 2010, at 09:12 AM

Thanks. All fine, I knew it would only take a moment to fix. Des April 20, 2010, at 09:58 AM

Hi Hans, was wondering if you can help me out, I have been dying to use your transparent theme with a background picture that I have for our site here is a link to image: [(approve links) edit diff] as you can see its a dark image and I am kind of stumped as how to change the font color for the content to white for display but for black for editing, do I need to do this in the skin.php file or the css files? I did take a copy of the transparent css file to practice on but got a bit lost, not very confident at using css but willing to have a go.

thanks, Kerry Santo

Have a look at the night blue color scheme, and possibly transfer color values from it to the transparent css, or the other way round: getting a background image to show with the night blue scheme. Basically merging the two css files. - HansB March 29, 2010, at 05:57 AM

Thanks Hans, will have a go at that and post the results but it may take me a wee while to get the hang of it. Appreciate your response so quickly - Kerry

PS: Try to modify c-night-blue.css. You see it uses ../images/night-blue2.jpg and ../images/night-blue1.jpg (in the skin's images/ folder) for the backgrounds. Replace this with your own image reference. Best to remove the background from the #contentbox div, so only the #outer-box div gets your custom background image. - HansB March 29, 2010, at 09:29 AM

How can I alter the content box css etc so that I can get use a css overflow:scroll rather than having a long page

thanks, Dan Raymond

add to pub/css/local.css something like

#contentbox { height:500px; overflow-y:auto; }


#content { height:500px; overflow-y:auto; }

#contenbox div includes the title, #content div just the main page content. You need to set a height attribute to get a scrollbar. overflow-y is just a vertical scroll bar, overflow:scroll; will give you always vertical and horizontal bars, auto will only give you scrollbars if needed. - HansB March 19, 2010, at 03:04 AM

Vertical scrollbar moves up in IE8 in edit window

This problem doesn't happen on IE7 or Firefox

The vertical scroll bar inside the edit window moves up when moving the mouse outside the edit form. Wherever the mouse goes, especially towards the guiedit buttons or the other buttons, it insists on going up.

I tried to use the suggestion given below related to the div

(:input e_textarea:)

and the problem disappeared. However, the edit form is reduced to its half. I tried the css tweaking suggested as well, but it didn't work. (I may have done something wrong!)

I couldn't undestand what you mean by changing the size "on Site.Triad-Configuration 'e_cols' => '90', to 'e_cols' => '120'". Please, give more details.

P.S The same problem happens on our two websites.

Thanks in advance, HansB. Burialmound on 02/24/10

You mean the scrollbar resets with the content being displayed at the top again, each time you click a guibutton for instance? I have not tested IE8, so don't really know about problems which might be related to it. My suggestions you quoted were these: Edit page Site.Popup-EditForm to add a division around the textarea. If you call it 'editarea', then you can use class .editarea in css to tweak its properties. Maybe give it { width:100% } ? Edit page Site.TriadConfiguration and change the last row, ie. '90' to '120' for instance, to specify more column width (characters) for the edit textarea. - HansB February 24, 2010, at 06:19 AM

HansB, sorry to bother you again. I did the following:

  • Edit page Site.Popup-EditForm to add a division around the textarea;
(:input e_textarea:)
  • Edit page Site.TriadConfiguration and changed the value from '90' to '120';
  • Added the line .editarea { width: 100%; } to the layout-main.css file; (I'm not sure if this line should be on this file or somewhere else.)
Conclusion: the edit form is still reduced to half. - Burialmound on February 24, 2010, at 11:18

HansB, the problem has been solved. I changed 'e_cols' => '120' not only on Site.TriadConfiguration page but also on PmWikiPtBr/XLPage page (on which was 'e_cols' => '60';) because our wiki is on Brazilian Portuguese language. - Burialmound on February 24, 2010, at 17:27 PM

Howdy! I'm a big fan of the TriadSkin. A curious thing has popped up on my site though, if you visit the page [(approve links) edit diff] on the upper left is a {';} - I cannot figure out how to get rid of it! Any help is greatly appreciated. -Mitch

The '; appears after the favicon links in the page head. Check for this in the skin tmpl file, or in a $HTMLHeaderFmt[] addition in config to include a favicon link. I guess you added it by accident. - HansB February 16, 2010, at 02:13 AM

-Ah Ha! You are right I did add that by accident! That's hilarious - thanks I never would have guessed that did it. Cheers! Mitch? February 16, 2010, at 11:04 PM

Trouble with (:theme :) markup (Again) - resolved

Hi, I'm placing (:theme seagreen:) into, for example, a <Group>.PageHeader page, but unless I'm actually on the .PageHeader page, the default colour theme is used for all pages in <Group>. According to the discusion notes further down, I should be able to place the directive anywhere?

If I misunderstood, what is the correct way to change the colour theme for a <Group> of pages? I don't really want to add the suggested group.php files if I don't have to.

Apart from this, it's a great looking skin which will probably be running our wiki soon.

 - Micha.

The theme markup in a GroupHeader will affect all pages in the group. At least it does for me. If you look at the HTML page source you should find the associated colour css file, like c-gold.css for the 'gold' theme. HansB

Hi Hans, The HTML markup references the default skin (c-lighblue.css) rather than the c-seagreen.css which I'm trying to set as the default for this group of pages. I've verified that the .PageHeader contains the (:theme seagreen:) markup.

You can take a look at the page ([(approve links) edit diff]) and the PageHeader ([(approve links) edit diff]).

Thanks, - Micha.

There seems to be some misunderstanding. For a theme to work for all pages in group, add the markup to the group's GroupHeader page, not PageHeader. I am not sure if it should also work on PageHeader, but apparently it does not, so create a GroupHeader with (:theme seagreen:) - HansB

Hi Hans, Oops, misread your earlier response and didn't notice the .GroupHeader instead of .PageHeader. Fantastic, that does the trick!

Awesome support for your skin! Thanks, - Micha.


I'm getting 404 errors for a file called xpngfix.js. There's a reference to it in skin-triad.tmpl:

 <script defer type="text/javascript" src="$FarmPubDirUrl/js/xpngfix.js"></script>

I don't seem to have that file anywhere in my installation. Is it supposed to be there? What's it supposed to do?

--Peter Kay

I don't know how this slipped into the distribution, and the reference in skin-triad.tmpl should probably be removed. It seems to me i tried testing 'pngfix.js', then putting an x before to not load it (for tests). The script is for fixing alpha-transparency in png images for the IE browser versions 5.5 and 6. See this site for info (and the script): - HansB

Triad and UTF8

I just included "include_once("$FarmD/scripts/xlpage-utf-8.php");" to have an utf8 compatible PmWiki (all my servers are utf8) and now the Triad french text is no more correct. Is there a "standard" way to do this (other than modifying manually the css) thanks jdd

I am not sure. Perhaps edit the French XL page (XLCookbook page). Or edit Site.PageTopMenu and Site.PageFootMenu and Site.PageHeader? But I would think not any css file. - HansB May 23, 2008, at 11:08 AM

To make my site validate on I had to change /pub/skins/triad/skin-triad.tmpl: charset=UTF-8 from 8859-1. Is there a way to change this in local/config.php ? Roger 2009-04-21

No. I will fix the template in the next release. Meanwhile remove the charset=.... from the meta tag in the skin-triad.tmpl file, so the tag just reads:

<meta http-equiv="Content-Type" content="text/html" />

The inclusion of scripts/xlpage-utf-8.php has the effect that another content-type meta tag is added to the head which contains the correct "charset=UTF-8". - HansB

Only half page footer is seen

When I use Triad in wide page layout the whole page is visible but if I switch to 'wide and border', '1024px wide', '1280px wide' then part of or the whole of the footer disappears. '800px' doesn't have this problem. It's not something very important (this is a personal wiki) but is there some simple way of fixing it? j 2008-03-03

If you use Triad here on can you replicate the problem? HansB

Unfortunately the right index column is too tall so I can't find a page that is shorter than my screen ... so I can't test it.

I'm back at work where I have a second screen and can view the whole page. The result is the same, about half of the footer is visible in 1024 mode. Tested using OmniWeb and FireFox. j, 2008-03-04

Try set Triad skin and visit WikiSandbox

Same thing, if I make the page larger it moves the footer so I can see the top half of "skin config ...".

Thanks for pointing this out! Fixed now in latest release. HansB March 04, 2008, at 06:32 AM

Yep, now it works just fine. Thanks.

I haven't been using Triad for quite some time but when I now try it the same problem appears, I'm using the latest version (downloaded today 2009-03-30). j 2009-03-30

Missing xgold-foot.jpg

I am using the Triad "chocolate" skin, and this is appearing in my apache logs with every request: .../triad/images/xgold-foot.jpg, referer: .../triad/css/c-choc.css

Is this a file that somehow fell out of the release?

HansB: thanks for spotting that! When i develop with css, i often put an x before something, to temporarily disable it. But the whole code line should have been removed, there is no footer image for choc. Please remove in triad/css/c-choc.css from the background atribute of #footer-box:

url(../images/xgold-foot.jpg) repeat-x so you still got background:#ffd980; to set the color.

Support for Cluster/Hg recipes

Hey Hans! I'm in the midst of trying to get the breadcrumbs working and have found some text that was added in the Triadskin information piece:

"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). "

So, I went to this page ( and found that according to the directions if I put (:breadcrumb:) at the top of my page, that automatically it would create a breadcrumb list. So, I tried to place that markup in the Site.TitleBar section of the Triad skin config only to see (:breadcrumb:) throughout my entire site (not displaying any crumbs). Obviously I'm doing something wrong. Up until now I've tried to read into most comments made on PMWiki, but I found that many times things are as simple as copy and paste, so I've tried to not decipher things anymore. In this case, what am I doing wrong to display breadcrumbs?

Thanks, Chris June 22, 2024, at 05:21 AM

I am not familiar with the Hg recipe. does the (:breadcrumb:) markup display correct when inserted in a normal page, but does not display when inserted in a PageName-TitleBar page? - HansB October 15, 2008, at 09:44 AM

PS: if you use {(ftime)} with your name, it will always show the current time. Use four ~ characters instead, which saves as your name and the date and time of posting.

I've tried putting it in various pages (headers, footers, regular pages, etc.) and it will always display the words (:breadcrumb:). I guess the reason I'm confused is because in the Triad skin tips section it says that Triad has included in it both the HG and Cluster recipes. So, one of the markups is (:breadcrumb:) which automatically should create a breadcrumb (unless I've misunderstood it somehow.

Should I just try to install the recipe and go from there? Thanks, Real Chris October 15, 2008, at 10:54 AM

Yes, you need to install the recipe. Triad does not incorporate the recipe, it does not provide any markup for group clustering, but it has built-in page variable definitions which may be used with the recipe. See the chapter "Functions" in Cluster:

For skin writers, there is a function ClusterPageName which can be used to make general page variables to find suitable "clustered" pages in the same way that $ClusterSideBar does.

With Cluster (or Hg) and Triad installed you can use such page variables as {$SideBar}, {$RightBar}, {$TitleBar}, {$PageHeader}, {$PageFooter}, {$PageTopMenu}, {$PageFootMenu} to find suitable clustered pages, looking for a group cluster page and pointing to it, if it exists. - HansB October 16, 2008, at 04:00 PM

Hans, I installed the recipe and it worked like a charm (just as you said). ;-) Also, I'm using the {$RightBar} markup.

Thanks, Real Chris October 17, 2008, at 03:24 AM

Need a logout link

I am pretty sure that after the installation I was given a chance to login as admin an set up plugins and such. Now, I could not find a way to log out. In particular, I can't now verify the security aspects of the pmwiki setup. Could you please help me with that.

Thank you, Alex B.

you could put the following somewhere, on Site.SideBar, or Site.PageTopMenu, Site.PageFootMenu etc. :

(:if auth edit:)

- HansB September 28, 2008, at 10:09 AM

Many thanks

- Alex

Hiding markup from another skin

My site works like Wikipedia and therefore uses the monobook skin for its user-oriented tabs, however experienced users really like the Triad skin (as they don't need the sidebars), which I have installed as an option. I have fixed most of the compatibility issues using local.css so the two can co-exist happily, but have one publicly visible issue remaining, and wonder if there is an (easy) fix for it.

monobook uses a small number of markups, such as (:notabs:) for example, to control the display of certain page sections. When we switch to Triad, then these are no longer valid, and are simply displayed as orphaned text on the page.

Is there anything I could do to catch these markups, and prevent them from being displayed when using Triad? Des May 25, 2008, at 11:31 AM

I think the best for compatibility would be to avoid using (:notabs:) and use (:noaction:) instead, they are the same for monobook, and triad has a 'noaction' markup. also avoid (:nosidebar:) and use (:noleft:) instead. Again they are the same for monobook, and triad knows 'noleft'. Any others are I think compatible. - HansB May 26, 2008, at 05:53 PM

Thanks, I think you've shown me the best way to go. Having looked again, all the relevant markups are compatible so can be forgotten. The only one left seems to be (:notabs:) and I can redefine that for (:noaction:) (which monobook currently ignores), meaning only one change to remember in monobook source, which I can probably remember if it is ever revised. Many thanks for the assistance. Des May 28, 2008, at 08:32 AM

Sidebars covering the center of the page

I use firefox and sometimes the main text is covered by the two sidebars. It happens sometimes even after erasing temporary internet files. I can't reproduce it intentionnally, so I really don't know why it happens. Here are screens with and without the problem :

So is there a solution for that ? For now I wrote to reload the page on the top of the page, but if there is an other solution pleas tell me. Thank you.

I cannot reproduce this error. I cannot offer any solution. Small consolation: Your site looks fine to me when I browse it with Firefox. HansB March 03, 2008, at 04:55 AM

Ok, thank you anyway. I wrote a message telling to refresh the page if there is a problem. If I find why there is this problem I'll write it right here.

Unrequested line break in sidebar

I have the following defined in the sidebar:

%sidehead%[[Wiki Hilfe]]
* %newwin%[[PmWikiDe/Dokumentationsindex | Dokumentation [-(de)-]]] 
%newwin%[[PmWiki/DocumentationIndex | [-(en)-]]]

In the sidebar is shown:

Wiki Hilfe
  Dokumentation (de) 

instead of

Wiki Hilfe
  Dokumentation (de) (en)  

Any ideas how to prevent this? In the standard PmWiki skin it works. Thanks a lot in advance.
Christian Harraeus February 20, 2008, at 03:33 PM

In order to get a sidebar wide "hover" effect the css for the SideBar sets list items as block elements, meaning each link will occupy a whole row. To get two or more links sitting side-by-side you have to avoid the list markup (*) at the line start. You will loose the hover effect, and the left margin or padding may also not be the same as for the standard sidebar list menu items. Perhaps this can be compensated with a custom wiki style. I hope this helps a little! HansB February 20, 2008, at 03:59 PM

Placement of Logo in PageHeader

I really like the triad skin, nice work; currently I'm trying to apply it to our club's website. Unfortunately for my taste, between the PageLogo and the border of the screen a gap of a few pixels exist to the left and to the top where the background shines through. I'd like to have the logo appear on the upper left corner of the browser window without any gaps. Is there any way to achieve this?

I've been looking through the appropriate css file and the skin.php without any success.

IvB, 26 February 2008

Setting the #header padding to 0 should do it. It is in triad/css/layout-triad.css. But you can set #header { padding:0; } in pub/css/local.css. HansB

Thanks Hans, that did the trick. I just looked in the wrong places. I guess the latter is more update proof wrt. an upgrade of the TriadSkin?

Is there any way to add a discussion tab at the page top menu, like in wikipedia, which will create a discussion page for comments unique for every page?

Triad has no topmenu tabs built in. It could be added though, using a special css class. Then the PageTopMenu could be turned into a tabbed menu. The link logic for opening a discussion page is a different matter, and can always be add to PageTopMenu. See CommentPageLink. HansB

When I choose "white" as style for the skin, the change works on my home computer where I do the development. Then when I copy the entire folder to the remote web-host online, the setting for the white style is not registered. The site always opens with the default blue style. How do I fix my choice of skin style so that it gets copied over to the web host that publishes my site? Iannis Z.

I imagine that you choose 'white' as a style option, and your machine remembers this, as a color cookie is set. So it opens in 'white' color style. What you need to do is set in config.php: $DefaultColor = 'white'; This will make the skin open in that color scheme. And if you do not wish to give your site vsitors choice to change styles, you need to set also EnableStyleOptions = false; . There are a lot of customisation options listed in skin.php. Looking at Triad Tips may also help for further customisations. HansB December 09, 2007, at 11:13 AM

Thanks Hans, it's a really nice skin, and looks very professional. I hope to use it on the Seal Sanctuary Site, if I can handle it. Could you give an example of an image with wrap-around text,. This would help give me a good start, as I'm not to familiar with the the scripts. Patrick

Just use a float style for the image, like %lfloat%Attach:MyImage.jpg]], followed with the text to wrap around the image in a new paragraph. See also PmWiki.Images. HansB September 23, 2007, at 06:25 AM

How do I enable printing in color from my pages printed using the Triad skin? All my headers print in black and white even though they have color when viewing them from the wiki. Michael Davis Sept. 09 2007

Solution Found! Just added the color codes desired to /pub/skins/triad/css/layout-print.css. If there is a 'better' solution, please share.

I have a problem with Opera 9.22 and earlier versions. FF and IE work fine. The page text is filled with extra spaces between words and punctuation characters when $EnableLeftBarToggle = 0; in local/config.php. It happens the first time I click on a link in the sidebar. This is my configuration - SteP August 24, 2007, at 04:31 AM

$DefaultColor = 'choc';
$DefaultPageWidth = 'wide';
$DefaultFont = 'georgia';
$EnableRightBarToggle = 0;
$EnableLeftBarToggle = 0;
$EnableStyleOptions = 0;

I change the css and make a new file but no matter how often I do a shift-refresh, or clear cookies it doesn't change on the wiki, even on another machine. Is there a cache that needs refreshing?

Dan Raymond

In the font-verdana.css file, I believe the definition of


should be


Ben Stallings June 12, 2007, at 05:22 PM

Triad translation

Hello :-). Good skin, really ! What is the prefered way to translate the triad skin? (my site Of course I mean to every user (I'm a translator of the PmWikiFr french site)) jdd thanks

You need to add translations for some Triad terms to the XLPage. Here are some from XLPageCookbookTemplate added french (works:
You can also add: 'Home' => 'Page de garde',

  ### Strings for FixFlow, Gemini or Triad skins
  'Source' => '',
  'Backlinks' => 'Références',
  'List Group' => 'Liste des groupes',
  'Attach File' => 'Attacher un fichier',
  'Group Attributes' => 'Attributs du groupe',
  'Editing' => 'Édition',
  'Search Site' => 'Rechercher dans le site',
  'Go' => 'Allons-y',
  'Big View' => 'Vue grossie',
  'Normal View' => 'Vue normale',
  'Text Size' => 'Taille du texte',
  'bigger' => 'plus gros',
  'default' => 'par défaut',
  'smaller' => 'plus petit'
  'Hide' => 'Cacher',
  'Show' => 'Montrer',

Problem with IE6 and 7: Additional space between content and header-menu

I think this will solve the problem with IE6 and 7 displaying incorrectly. Fix is courtesy of

I modified and added to layout-triad.css--
#content { padding:1em; min-height: 25em; height:auto; }
/* for IE */
* html #content {
height: 25em;

it work to make content larger but it seam to me that the content is centered verticaly in content-area Vincent 24sep07

How to I set a default color to be the same on this Skin?

I am using sea-green but when a new user visit the web page would be blue and not green as it was configured.

Add to config.php: $DefaultColor = 'seagreen'; Any new visitor will have seagreen as default. HansB

Printing reduced-view pages

I like the "Text Size - 0 +" options a lot (Opera-ish). Can a reduced view be printed reduced as well? Printing alway prints the original size view. Printing tables is especially bad and I'm having to copy/paste the page (from IE) into a Word document and manually changing font sizes so everything fits "pretty" inside page margins. Thanks.

I kept screen display separate from print display, using layout-print.css for the print display. In particular this sets a fixed font size of 12pt for the content. If you replace the fixed point sizes with em sizes (replace font-size:12pt with font-size:1em for #content for instance), you get proportional sizing in the print display, and this is depended on the text size choosen via the font sizer buttons (as a cookie value). If you don't wish to change layout-print.css you can add the new css attributes to pub/css/local.css. Looking at layout-print.css I see that it needs a general overhaul and check, so this will come in a next Triad release. HansB May 11, 2007, at 03:50 AM

How do I set the page width to 800 px as default in config skin?

$DefaultPageWidth = '800';


How can I disable showing the left site bar when the login form is displayed?

I want to show just the page background and the contents of Site.AuthForm but nothing else. How? SteP

Perhaps use conditional markup to display the form and alternatively the sidebar. (:if enabled SomeVarInLoginScript:)... (:noleft:). Sorry I have not tested this, just ideas. HansB

Install AllGroupHeader and put on Site.AllGroupHeader? (:if ! auth edit:)(:noleft:)(:ifend:). This will hide(disable) the sidebar for all pages when visitors have not logged in. Not just when the auth form is shown. Probably more than what you want! HansB

Or add to config.php if ($action == 'login') SetTmplDisplay('PageLeftFmt', 0); SteP

See also: Cookbook:CustomAuthForm which details how to achieve exactly this, or even less (= -- Feral April 18, 2007, at 09:50 PM

Minor point

In skin.php I noticed that you declare global $PageBorderWidth then use $PageBorder. Is this what you meant? SteP

No, its a mistake! thanks for spotting it! will be updated in the next release. HansB

Problem with IE7: Additional space between content and header-menu

First, many thanks for that cool skin! I use a triad style for our open-source project wiki. In Firefox, everything works fine. In IE7, on some pages, the content is moved down. Here are two pix, the first from firefox, the second from IE7. Does anyone knows a solution or has an idea where to start searching? Thanks...



The pictures are taken with my adaptions to the skin and are resampled by a factor two. I omitted the page header. However, with an unmodified triad skin, I observe the same effects.

You say "on some pages the content is moved down". Do these pages have very little content, i.e. the content section is relatively short? Do you use a large browser window on a fairly large screen? What happens if you add more page content, even empty lines, or try >>v-space height=200px<<? There is a problem with IE regards table sizing, and it tries to compensate for a short middle row by making the other rows taller. HansB
PS:Hmm, what I wrote has possibly not much relevance to the problem you describe. Maybe IE7 needs some css to get the content sizing right: try adding #content { height:1%; } to triad/css/triad-layout.css. I have no IE7 to test on, so please tell me what you find out. Thanks! HansB

Thank you for the fast response. I tested both suggestions. Your first consideration was correct: With additional space in the content box, the margin gets smaller until it vanishes completely. So, adding >>v-space height=600px<< on each page helped as a quick workaround. If you need a tester for any fixes, I will lend a hand.

Best wishes, Stephan

PS: The #content directive had no effect.

How can I control the width and spacing of links in the topmenu?

How can I get rid of the empty space above the outer-box?

How do I automatically show the page's $Description?

In the latest Triad you can add to Site.TitleBar:


Use class .pagedescription for any css styling. - HansB March 19, 2007, at 06:28 AM

How do I get a GroupName/PageTitle layout?

The latest Triad release enables easy titlebar configuration on page Site.TitleBar. The following will also give a Cluster breadcrumb trail if Cluster is installed (pending on an imminent function update in Cluster).If you use Hg use (:breadcrumb:) markup instead:

>>pagegroup lfloat padding-top=0.3em<<
(:if !eq {*$BreadCrumb} "":){*$BreadCrumb}
(:if eq {*$BreadCrumb} "":)[[{*$Group}/|{*$Group} /]]

If you want to remove the titlebar top double line, add to pub/css/local.css:

#titlebar { border-top:none; }

Then you may not need the added padding-top in the above TitleBar. - HansB March 19, 2007, at 06:28 AM

Feral's custom titlebar with group clustering

I use the following Site.TitleBar:

 (:div3 class=mytitlebar-outer:)
 (:div2 class=mytitlebar-groupcontainer:)
 (:if equal {*$BreadCrumbsDepth} 1:)
 (:div1 class=mytitlebar-group:)
 (:div1 class=mytitlebar-groupcrumb:)
 (:breadcrumbs title=0 name=0 right=-1:)
 (:div1 class=mytitlebar-group:)
 (:clustergrouptitle space=true link=true title=false:)
 (:div1 class=mytitlebar-slash:)
 (:div1 class=mytitlebar-title:)
 (:if !equal {*$Description} '':)

With the following style definitions:

 $HTMLStylesFmt['feralcss'] = '
 .mytitlebar-outer {
   /*border:5px ridge SteelBlue;*/
 .mytitlebar-groupcontainer  {
   /*border:1px solid lime;*/
 .mytitlebar-groupcrumb {
   color: LightSteelBlue; /* aka color:#b0c4de; */
   font-variant: small-caps;
   font-size: 0.8em;
   /*border:1px solid purple;*/
 .mytitlebar-group {
   color: LightSteelBlue; /* aka color:#b0c4de; */
   font-variant: small-caps;
   font-size: 1.2em;
   /*border:1px solid red;*/
 .mytitlebar-slash {
   color: #888;
   font-size: 2em;
   /*border:1px solid blue;*/
 .mytitlebar-title {
   color: LightSteelBlue; /* aka color:#b0c4de; */
   font-variant: small-caps;
   font-size: 2em;
   /*border:1px solid lime;*/
 .mytitlebar-description {
   background-color: darkslateblue;
   border: 1px inset blue;
   color: LightSteelBlue; /* aka color:#b0c4de; */
   text-align: center;
   font-variant: small-caps;
   font-style: italic;
   font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
   font-size: 1em;
 .mytitlebar-bottombar {
   border-bottom: 3px double lightsteelblue;

With $DefaultColor='night'; (c-night-blue.css), still my favorite (= (Thank you Hans!)

I REALLY like the new Site.TitleBar method (=

Best wishes and happiness to you,

Feral March 20, 2007, at 03:39 AM
I have replaced the table style with a div style, The results are the same. -- Feral

A customised fancy style for $HTMLTitleFmt

For a HTML Title like: "PmWiki | Skins / Triad-Talk | browse, GET", place this in your local/config.php

 $mytitle = PageVar($pagename, '$Titlespaced');
 $mygroup = PageVar($pagename, '$Groupspaced');
 $HTMLTitleFmt = "$WikiTitle | $mygroup / $mytitle | $action, {$_SERVER['REQUEST_METHOD']}";

Hopefully this will be of value to someone, enjoy (=

Feral March 20, 2007, at 03:39 AM Reworded (reformatted by HansB)

Trouble with (:theme :) markup - fixed

I am having trouble trying to use the (:theme ''colorscheme'':) markup. Are there any limitations on it's use (such as only in a PageHeader)?

Thanks for pointing this out! The theme markup was broken since introducing a new load order for the css files. Now fixed. You can use the markup anywhere in the page. - HansB March 05, 2007, at 03:48 AM

Customizing Printing

Hi, what's the easiest way to add material only to the printed version of a page, either at the top or bottom? For comparison, action=print uses Site.PagePrintFooter and Header. The purpose is to include identifying material that is in the header on the online version.

More generally, it would be quite useful to have every aspect of printing customizable, from font size to running headers to margins etc etc. The goal is to be able to make the hardcopy fit some specification, say for a technical paper.

Using css declare in your pmwiki.css a class that used display, say .printonly {display:none;} Add the content you only want printed in one of the following ways

some content here
%printonly%some content here%%

then also add the following to pmwiki.css

@media print {
  .printonly {display:inline;}
Triad has a layout-print.css file for declaring any specific styles to be used when @media=print, i.e. printing the page directly via the browser's print function. In it the display of sidebar, rightbar, header, top and foot menu as well as footer are suppressed. You would need to edit this and remove the #header, or set in pub/css/local.css: #header {display:inline}. It also defines a class "noprint" which you can use in wiki pages, like %noprint% or >>noprint<<. I will add the "printonly" class for use as %printonly or >>printonly<< as suggested above (thanks Simon!) to layout-main.css (meanwhile add it to pub/css/local.css):
.printonly {display:none;}
@media print {
  .printonly {display:inline;}
After these changes to the style sheets you need to edit your Pageheader page and use >>printonly<< and >>noprint<< sections for what you want to see in print and what not. - HansB March 02, 2007, at 02:35 PM

CSS validation error?

Using Firefox and it CSS-validator button I got an error about "new courier", it should be "courier new" (by PKHG)

Thanks! fixed now. HansB

Port Gemini themes?

I love Gemini, however I am loving Triad's three column design as that is exactly how I prefer the rightbar, however I am very fond of Gemini's sand and night themes. As such I would ask if there any plans to port Gemini's sand and night themes (in particular) to triad perchance?

Thank you kindly,

Feral February 20, 2007, at 04:50 PM
Thanks to your initiative I have added now a night-blue colour scheme.
Not sure if "sand" is going to follow though. -HansB February 22, 2007, at 04:00 PM
Thank you Hans! -- Feral February 23, 2007, at 08:04 PM
To answer myself ;) ...
  • Version:2007-02-21
  • File:Feral-v2007-02-21-c-sand.cssΔ -- WIP -- Sand color scheme based on Gemini's c-sand and using image files from Gemini. Place in pub/skins/triad/css.
  • File:Feral-v2007-02-21-c-night.cssΔ -- WIP -- Sand color scheme based on Gemini's c-night-blue and using image files from Gemini. Place in pub/skins/triad/css.
  • File:Feral-v2007-02-21-skin-triad.tmplΔ -- slightly tweaked to add support for finding right bar via Cluster(v2007-02-21+) -- NOT needed if you only want the colors.
  • File:Feral-v2007-02-21-skin.phpΔ -- slightly tweaked to add support for finding right bar via Cluster(v2007-02-21+) and support for 'sand' and 'night' color schemes. -- NOT needed if you only want the colors and follow the Triad Tips directions on how to add new colors (=
  • NOTE: These files will need the "Feral-v2007-02-21-" stripped from them before usage.
  • NOTE: These file's names have been prepended with "Feral-v2007-02-21-" to differentiate them on this page and once downloaded; This string should be removed before usage.

Adjusting font-size for page title

I am using the Triad skin (the best of all in my opinion) with the latest version of PmWiki. In earlier versions I was able to adjust down the title font size from the local config file but I am no longer able to do this. As I am using a fairly small font size for normal text, this is resulting in the title text being out of proportion to the rest of the page. How do I reduce the title text size? Thanks - Allan.

Can you say what you used to do exactly? I like to understand the change. - Triad sets font sizes in its font css files. You can override any css setting in your pub/css/local.css file (create one if there is none). you can set fontsize for both group title and page title with #titlebar { font-size:75% } for instance for a smaller size, or you can set for instance just the page title, which uses HTML <h1>, with #pagetitle h1 { font-size: 1.7em; } for instance for a smaller size. Note the more general setting of titlebar uses percent, whereas the others use em units.

Thanks for the quick reply, your suggestion of adding the above code to pub/css/local.css worked fine. Origionally I could do this in the wiki local config file which was:
$HTMLStylesFmt[]=" #titlebar {font-size:65%} \n";
(I'm using 65%) but this no longer seems to work. I am not a programmer, but I can get these things to work with a bit of trial & error. Thanks Again.

The skin css is loading later now than $HTMLStylesFmt. But css/local.css is loading last of all, so any admin settings there can override any css set by pmwiki core (coming first), any recipe via HTMLStylesFmt, loading next, and skin css, loading after that. Having css set via css/local.css will also load faster, since the file will be cached by the browser, instead of the css being in each page's HTML head. -HansB
- Since I have got many requests to change something with regards to the title or the grouplink in the title, I wonder if it would be useful to port the titlebar content into a wiki configuration page, like PageHeader and PageTopMenu? Then people can configure what should appear in the titlebar, where, how big etc, using wiki markup. - HansB

Is there something between title (!!) and normal text... something like subtitle(maybe bold and 120%). thx, mam

As part of the titlebar? No. But below the titlebar you can use headers (!! !!! !!!! etc). The titlebar title uses HTML header 1. HansB

Bug: IE7 renders header incorrectly - fixed

This is a follow up to my previous question about outer-box element not displaying the background image ../images/brd-left3.jpg. I've since dug deeper into the skin and now I believe that it is ../images/silver-100-top.jpg that is actually not loading. Forgive my error!

Did you get it loading? - HansB
No I didn't, but here's a link that will allow you to see what I see and maybe steer me in the right direction ... - RF
It looks as if the #header section does not get a background colour and image. #Any changes to #header? Anything in site.PageHeader setting a colour? -HansB
I didn't change any thing in those files manually. I also downloaded the latest version of the skin today and placed it on the site. However, the UI wasn't corrected. In looking at the file site.PageHeader, I noticed that the version is pmwiki-2.1.beta25 but I know that I downloaded the latest 2.1.27 version. Finally, I noticed site.PageHeader references softglow.gif but I don't have that image in the images dir for triad.
#header { background:#eee url(../images/silver-100-top.jpg) repeat-x; border-bottom:1px solid #aca899; }
If you upgrade the skin, page files in wiki.d will be used if present in preference to the files in the skin's wikilib.d folder (i.e. the skin does not overwrite your customisations of Site.PageHeader, Site.PageTopMenu etc.). I suggest to rename the skin related files in wiki.d, so the files in triad/wikilib.d will be used and you may see any difference, for comparison. Then edit the page for your customisation, or undo your rename, and edit out any mistakes. - HansB
I did a brand new install of the latest (non-beta) PMWiki and the latest version of the Triad skin. There are no modifications to any file and in IE7 the c-silverblue skin is still missing the silver-100-top.jpg. In FireFox the silver-100-top.jpg image displays properly. The same missing header image occurs for all colors of the skin in IE7. In IE6 the head image displays properly.

I altered this line of code similar to the one that you posted for me previously without an improvement.

However, I have noticed when using the Triad silverblue skin on the site, the background image shows as expected. Do you know how the CSS was modified for the site?

No, the css is not modified. But the skin version on is not the newest. - HansB
The problem is fixed now. I added to css/layout-triad.css: #header {min-height:1%} - HansB February 05, 2007, at 04:42 PM

Change Font-size Default for one page

  • Can we overwrite the default font size for one page only... like defalut=70 and the font for that page will be smaller, for all the other pages default will be 90
You can try and set $FontSizeDefault = '70'; for a specific page in its local/GroupName.PageName.php file, as local customisation. HansB

Title problem

First, thanks for a great skin! I've used it for an internal site (I'm using MS IE 6, PmWiki 2.1.26) and want to continue to do so, but have hit two problems with which I need help [and I did read through this entire page]:

  • As of the December release of Triad, (:title:) markup seems not to be honored. I just get the page titles (respaced). This also happens with the 2007-01-27 release.
Check if you got some other recipe changing anything about $title, like markup extensions. - Or a pmwiki upgrade to 2.2.0beta may help? - HansB

Thanks for the reply. I'm behind a firewall, so can't provide an example of the title problem. I'll have to see if I managed to change any skin-related files somewhere.

Vertical scrollbar disappears in IE6 in edit window

  • the vertical scroll bar inside the edit window stopped appearing after making an edit.

I just clicked on the Triad link here, and then edited the target page. As soon as I type a single character on any line, the scroll bar vanishes. Thanks. - ClaytonCurtis

Thanks for pointing this out! I thought I had fixed that problem long ago, but here it is again! Try this: Edit Site.Popup-EditForm and change (:input e_textarea :)\\ to
(:input e_textarea:)
By enclosing the textarea in a div IE may be more graceful. The classname "editarea" is not important, but could be used for further css tweaking if necessary.
Also change on Site.Triad-Configuration 'e_cols' => '90', to 'e_cols' => '120', (depending how wide a teaxtarea you want). HansB

Font sizes display irregular - fixed

  • The option of getting big text/normal text if fine... but when you toggle from big to normal... the normal is bigger that 0 (in the center of -0+... I like the 0 as defaul.. and like to normal and 0 be the same... So the simple question how to make normal view (from big/small) be the same size as clicking on zero (0)
I think what is needed here is to set in Site.PageHeader changes to setview=big&setfontsize=110 and to setview=normal&setfontsize=90, since SDV($FontSizeDefault, '90'); (the normal, 0, font size). I should change this for the next update, but you can change the figures in PageHeader.

Changing bullet image

  • I like to change the color of the bullet, but cannot find a bullet picture info the skin/image folder... so where it is?
The bullet image is images/bullet7.gif, and defined in css in each colour css file under #content ul. This latter needs changing, as from comment by Avi below, but I need to work this out yet. HansB

Boxed content in right bar

  • Here is a little question that rise when browsing all the comment here... At the end of the page there is a screenShot that show right hand menu that have little white box for each text block... me, when i have the righthand text, the text is on gradient background.. no white box... tell me how to make, let said two white box of two different new, what is the syntax?
On the RightBar page put each news text clip into a div >>clip<<. See for instance RightBar here. The "clip" class is defined in the relevant colour css file. - HansB

Problems with IE7 on IIS5.1 XP box

When running IE7, from a IIS5.1 XP box, the outer-box element does not display the background image ../images/brd-left3.jpg. However, when running from the same box, in a FireFox browser the background is visiable.

When viewing the same skin with IE7 from the site, the background image is visiable. Is my issue due to an IIS 5.1 setting or something else?

If I remove the #004A94 color code from the CSS file, the background loads properly but of course the left sidebar is not appear with the blue background needed for the skin.

Could you try the following instead in c-silverblue.css:
#outer-box { background-color:#004A94; background-image: url(../images/brd-left3.jpg);
background-repeat: repeat-y; }
I guess IE7 for XP box is simpler in its css implementation. But I don't know really. - HansB January 24, 2007, at 03:25 PM

Thanks for the skin and any help you can provide.

RF -- 24 Jan 2007

Bug: Incorrect display of ordered list as part of unordered list - fixed

Hi, For some reason nested unordered/ordered lists are not rendered correctly on triad skin. When I try the example from TextFormattingRules?skin=triad#BulletedLists All levels of list are rendered as unordered which is wrong. Compare to TextFormattingRules?skin=pmwiki#BulletedLists

Ha, Reason found - when adding to CSS

#content ol { list-style-image: none; }

Things become right...

Avi 24-Jan-2007
Thanks Avi! I will add that to layout-main.css - HansB

Hi, first I really love the way TriadSkin look, professionnal and techky..I am pretty new to wiki, but cannot find anywhere a definition of all the option to format text AND image AND other with Trid so here is the question

  • 1) How to make a picture pretty small (150 px) with a kind of border and a caption (like the original wiki)
As described on PmWiki.Images
  • 2) How to add emoticons like the smiley and other. I try {cool}{eek} but it dont work...
You need to install the smiley recipe Cookbook.WikiSmileys
  • 3) Where is the rules to format color and other option of >>bquote<<
In skins/triad/css/layout-main.css - HansB
  • 4) I like the caption text to be the size of the picture width, now if the caption is long.. it just make a huge line, when i force break... it break the cation formatting... what to do?
Perhaps don't use caption, but normal text, underneath the image, all wrapped up in a div with a width=...set, for instance >>width=250<< etc.
  • 5) I cannot make my logo appear, it just show up the name (logo.jpg) instead of a picture... why, what to write ?
On Site.PageHeader: Attach:Site/logo.jpg, then upload image to Site group.
  • 6) I cannot make the text wrap at the right of the the othe image without long caption done as explain. I even try with a table... no luck... no text at the righ... i am sure it just a little something.. but cannot figure it out.. after 2 hours trying, i give up.
Try float the div and put the img inside:
>>lfloat width=260px ...etc... << %lframe bgcolor=#bbbbbb border='3px %  Img:tutu.jpg
image text...

OK it work... Here is the complete syntax just in case I forget

>>lfloat width=280px << %lframe bgcolor=#bbbbbb border='3px %  Img:tutu.jpg
%lframe width=256px bgcolor=#eeeeee% '-Here is some text to make it longer...'
  • 7) I really like your skin, but I don't like the edit, page history, list group button at the bottom of the page... so I like to take those functions and get it to the to the top right menu with edit history and change... what modification should I do, witch files should I edit ?
Edit Site.Popup-EditForm and change at the top (:notopmenu:) to (:nofootmenu:), this removes the foot menu and adds the top menu for the edif form. Then edit Site.PageTopMenu and add to div >>rnav<<(:if action edit:) followed by any of the list items from PageFootMenu you like to see in edit mode at the top.
  • 8) I see at the top the group in little, and the page name huge center in red... i like to remove the page name, and add at the group name something like main>home (like a path to where you are )

Try this: set in config.php:

$grouptitle = PageVar($pagename, '$Groupspaced');
$title = PageVar($pagename, '$Titlespaced');
$GroupTitleFmt = "<div id='pagegroup'><a href='\$ScriptUrl/\$Group/'>$grouptitle</a> 
                  <a href='PageUrl?action=browse'>$title</a></div>";
$TitleFmt = "";
The title formatting is done in the colour css files. To get rid of one double line: put in pub/css/local.css: #pagetitle { border-bottom:none; } There is no such file as pub/css/local.css...You need to create pub/css/local.css. Any css you set there overrules any set by the skin or other recipes. Otherwise tweak the color css file, but then you may lose your changes when you update the skin in future. - HansB
  • 9) How to force the default color setting to c-silverblue.css... what to add into cofig.php
Set in config.php: $DefaultColor = 'silverblue'; And if you want to prevent users opting for a different colour scheme, set $EnableColorOptions = 0; -HansB

Your help is really appreciate, thanks in advance, MAM

Access keys

Hi! I am very comfortable and impressed by triad. I was just wondering if it could be possible to implement access keys in order to edit the pages, as I used to do in some other skin where the Alt-E was to edit the main content and Alt-B the Sidebar. Thank you for your time and effort Fernando (Argentina)

Put in PageTopMenu and/or PageFootMenu access key definitions like these (they are part of the distributed pages as well, or should be). See also Site.Preferences. --HansB

* %rel=nofollow accesskey=$[ak_edit]%[[{*$Name}?action=edit | $[Edit] ]]
* %rel=nofollow accesskey=$[ak_history]%[[{*$Name}?action=diff | $[History] ]]
* %accesskey=$[ak_recentchanges]%[[{*$Group}.RecentChanges| $[Recent Changes] ]]

Bug with preview footer in Popup-EditForm - fixed

Great skin! I just installed version 2006-11-25 on pmwiki 2.1.26 and I do notice a strange behaviour on the edit form. When the edit form initially opens, it shows the preview footer underneath, which disappears once I open and close the "preview". You can see it yourself at

Help appreciated. Thanks in advance, Larsen.-

It is caused by a bug in the conditionals I used on Site.Popup-EditForm. Will be fixed in the next release. Or you could copy the page from -- HansB December 06, 2006, at 12:12 PM

Bug with italics text for IE7 - fixed

Italics are causing neighboring divs to go blank beneath where the italic text begins. I am using IE7 final. Is this a bug in triad or pmwiki? Firefox displays normally.

It may be a IE bug. Ie had problems before with italic text stretching over the boundary, i.e. appearing wider than it should be. Can you give an url to look at, or send me one by emil? See also here: Perhaps you can add some padding to the container? -- HansB

  • bug fixed by adding #content {height:1%} to the local.css. Thanks Hans

Dropdown menu intgration?

Hot diggity this is one great skin! I tried out the dropdown skin and like those menus. I'm a PHP programmer myself but a n00b at wikis. How hard would you figure it would be to integrate the dropdown menus into triad?

Thanks! I personally don't like drop-down menus, I find them hard to navigate (I prefer Expanding Menus). That's why I never developed any. But I just had a look at HorizontalVerticalMenu, and it was not too difficult to get it function in the sidebar. But it comes with its own styling, small fonts, grey boxes etc, so it will take quite a bit of work to integrate the styling. Since Triad has several colour schemes it will be even more work. but basically you can tweak everything, functioning and colours etc, from its style sheet. I guess the same will be true it you want it integrated with the top menu. But I am not planning to do this, so it is up to you! ~HansB

Thanks :) I didn't know about those two. Depending on what I end up doing, I may give the integration a go, but don't count on it heheh.

Very nice design. I'm going to give it a try. Thank you, fos....

How do I disable the RightBar sitewide without using "noright" on every page?

Set in local/config.php:

$EnableRightBar = 0;
$EnableRightBarToggle = 0;

How do I hide the edit buttons from users not logged in ?

Try in Site.PageTopMenu and Site.PageFootMenu:

(:if !authid:)
*[[.........|edit]] etc
etc hidden links....


Bug with togglebar cookie - fixed

Can't seem to get the skin to remember the show hide state for the sidebars? pmwiki 2.1.26, cookies set ok but sidebar pops up again when navigating to a new page (or refreshing) - Chris

Fixed now in latest update. togglebars.php has a better cookie naming now. HansB

Brilliant. Can't thank you enough for the speedy response to this. An author with a smaller screen didnt like the sidebar taking up so much room and therefore deleted it (thinking they were removing it for themselves only). Using triad and removing the 'edit sidebar' link so its less easily edittable (till they know what they are doing) is a BIG help. :@) - Chris

Bug in togglebar script - fixed

MSIE 6.0 anounces error "Done but with errors on page" while Firefox not at a page

The details say 'toggleLeft is undefined' and 'toggleRight is undefined'.
Jiri October 30, 2006, at 10:36 AM

There is an error in the skin's togglebars.php script, trying to load togglebars2.js, which does not exist. It should read src='$SkinDirUrl/togglebars.js' on line 45. Now fixed in updated ~HansB

Question: New to wikis. I want to have a dynamic link at the menu showing when the user is navigating on the site. Right now it keeps on pointing to the main group. For example





So when a user goes to Level1 and then navigates to Level2 I want to show Level1\Level2 up top on that page Thanks Uday

Question: I want to give option on Rightbar to set the color scheme, like on this site. I thought I should do a link with cookbook: but that does not give right syntax, I do not know php so not sure how it gets to the page/function to set the color.

How would I replicate the >>clip<< box with the sets in?

Just use part of the source code from the RightBar page. Use it on Site.RightBar or GroupName.RightBar. See RightBar source code. I do not understand your last question. Just use markup >>clip<< to get styled boxes on the rightbar.

Bug with latest pmwiki 2.2.0 betas not showing menu action links - fixed

Question: Completely new to Wikis, set up pmwiki on my PC and on server at work, wanted to try your skin, looks the nicest on list.

However, when I show my pages, there is no Edit button for the page? Just edit buttons for the PageFootMenu and PageTopMenu Looked through your info page but did not see anything about this. Also clicking the Edit for the Top or Foot does not show the current button contents? I will continue reading up, maybe I got the wrong end of the stick and just doing something silly. Thanks for your time.

Triad (and other skins) were broken by changes introduced in PmWiki 2.2.0-betas. See "relative urls" at Release Notes). A new version of Triad is now available that solves the problem with the new beta versions, while providing backward compatibility with prior versions of PmWiki. Pico October 04, 2006, at 10:14 PM

(Original answer) Hi, I think Hans may be pretty busy right now, so I am taking the liberty of trying to answer your question until he is available. Are you using one of the new beta versions of PmWiki (as in 2.2.0 beta#)? If so, then the problem is the result in of a change in the way that PmWiki interprets certain types of links and, specifically, edit links that are located outside of the main body of the page. See Release Notes. Hans will be able to take care of the issue easily by updating his skin and if you can wait for that then perhaps you should. Otherwise, at this point if you want to get Triad working right away, your options are: (1) to disable the new "$EnableRelativePageVars" setting in your config.php file, or (2) make some simple changes to several pages to add an asterisk to certain "page variables" e.g. change {$Name} to {*$Name} to ensure that the edit (and other links) will be interpreted correctly. For now, the first option may be simplest, and most appropriate if you are new to PmWiki (and, later on, you can download an updated version of Triad Skin that will save you from the trouble of having to make the changes yourself). Also, since this issue may affect other skins, you will save yourself some trouble by just leaving this off for right now. (Since this option is turned off by default, presumably you enabled it in your config.php and you can undo that by deleting your entry, or commenting it out with a #, or by changing the setting from 1 to 0)

If you want to make the changes yourself, however, here are the files that you will have to change:

  • Site.PageTopMenu
  • Site.PageFootMenu
  • Site.PageFooter
  • Site.PageHeader
  • Site.Triad-EditForm

To edit these pages, you may have to manually enter the edit action into the address bar after the page name, like this:

When you edit these files, you will look for instances of {$Name} and change them to {*$Name} and do the same for instances of {$FullName} and {$Group}, if any, that appear in those pages.

Pico September 28, 2006, at 07:25 PM

A2. Thanks, the latest beta has the relativepagevar enabled by default, commented out and now fine. THanks :)

Question: Why am I getting 8 w3c validation errors? I have not modified the code in any way.

Suggestion: I would like to be able to hide the show/hide button when the right bar is turned off. Note that is how the SideBar behaves. As it is now, if I set noright the showhide button on the right displays "hide". Note that I am turning off the right bar using a conditional within the rightbar itself, like this:
(:if !auth edit:)
(:if auth edit:)
(:pagelist list=normal fmt=#sidebar group={$Group}:)
Pico September 01, 2006, at 08:13 AM
Never mind. There was no reason to locate that conditional there, when it can be located elsewhere and avoid the issue. Note, however, that it can only be placed in certain divisions: PageTopMenu won't do it, but PageHeader will. Pico September 01, 2006, at 08:58 AM

Bug with popup editform preview - fixed

Hans, I decided to try this skin after reading your post about divisions vs tables. It is another great skin. Thanks. One issue: the popup edit preview behaves differently on Triad than on FixFlow. Specifically, the popup preview appears below the editing screen, requiring a scroll down, not much different from the default skin behavior (except that the preview has you popup styling). When I switch to FixFlow using the same site, the preview pops up and covers the edit screen, as intended. Something else I just noticed that seems odd: when I try a different browser the style of the edit buttons changes (OS X, Firfox shows rectangular buttons and Safari shows oval buttons). What should I check to troubleshoot this?Pico August 31, 2006, at 11:46 PM

Thanks for the alert! A bug slipped in from my last development efforts. Now fixed in latest update. Plus better Popup-EditForm load logic, and access keys for fontsizer. Re: Safari and buttons: I think Safari has a problem displaying styled buttons, i.e. not using the css inputbutton class. Maybe other Mac users can confirm this? --HansB September 01, 2006, at 05:24 AM

Just to clarify, Safari is displaying the oval showhide buttons, as does Camino and iCab, while the browsers that display rectangular buttons are Firefox 1.5 and IE 5,2 .Pico September 01, 2006, at 05:45 AM

Bug with IE6 and upload form - fixed

I have no problem uploading using IE6 when the skin is in the "border" width. But when I switch it to my preferred "800" width, it will let you enter the password, but it will hang trying to present the upload screen. PM tried it in Firefox and it worked, but he too experienced the same issue using IE6. Is there a fix for this? Maybe the "File to upload:" box is too large...? Steve

The problem was with the alternate upload form for IE. I reworked the form (it is in skin.php) and uploaded a new triad.zipΔ ~HansB

Thanks Hans - it worked! The Upload window was still cramped with both sidebars in 800 mode, so I found this in skin.php:

global $action; if ($action=='diff' || $action=='upload') {

            SetTmplDisplay('PageHeaderFmt', 0);
            SetTmplDisplay('PageTitleFmt', 0);

and changed it to this:

global $action; if ($action=='diff' || $action=='upload') {

            SetTmplDisplay('PageHeaderFmt', 0);
            SetTmplDisplay('PageTitleFmt', 0);

in order to give it more room (e.g. "File to Upload:" is to the left of the box instead of above it.) Steve

Bug with cursor disappearing in text edit box - fixed

After update to ver.3 always happens when editing and closing the preview the cursor disappears from the editbox. Is it a matter of the skin or PmWiki 2.1.5 ? (Using WinXPP SP2, MSIE 6.0.2900 and Firefox Jiri.

This problem appears as far as I know only with Firefox, with the popup preview pane. There seems to be a bug in firefox handling of absolute positioned divs and input forms. I have no fix for this, but if it is too annoying you can switch to a different edit form, for instance put in config.php: $PageEditForm = 'Site.Triad-EditForm';, or comment out in skin.php the lines which load the popup-preview scripts (ca. lines 68 and 69). ~HansB

Thanks for the fast response to the question below! I was wondering if you could answer another question?

If I have a page that is a list of items and therefore doesn't have text that runs the width of the page, both the left and the right sidebars get much wider and squeezes the page. I think I understand why this happens, because they are not a fixed width. But is there a hidden character or something I can put on my page that will keep it wide? In html, I would sometimes need to use the transparent pixel gif to force tables to display properly...

Thanks again. Great skin!

In the triad skin both left and right bar are of a fixed width size of 170px (set in layout-triad.css). If you need a narrower default you need to change the setting in this file. If the page contains long lines of preformatted text for instance, the width of the content may force the sidebar and rightbar to become narrower, but normal wrapping text should leave them at their default width of 170px. ~HansB

I probably didn't describe it properly. I'm experiencing the exact opposite. When the main page (center column) doesn't contain a line of text that spans across the entire width of the column, then then the two sidebars get wider and the center column gets narrower.

You described it alright, but it should not happen that way. What browser are you using? Have you checked layout-triad.css if it has fixed width for #left-box and #right-box? Any page we can look at? See for instance on my site Test Pages. ~HansB

1. IE6

2. Lines from layout.triad.css:

/*set left sidebar width. Adjustments also needed in showhide.js */ 
#left-box {width: 170px; }
/*set rightbar width. Adjustments also needed in showhide.js */  
#right-box { width: 170px; } 

3. Sample pages can be found here:

Both pages look good to me in IE6. See this screenshot (reduced to half size):

I think it has to do with the PageFootMenu. When I commented out those buttons, then the center column gets squeezed if there's not a lot of text on that page. As luck would have it, you must have looked at my site when I was experimenting with putting them back in. If you visit now, I think you'll see what I mean. I wanted to hide the "edit, history..." buttons from everybody, but I guess I could replace them with other links like sitemap, etc. By the way, I hid "edit" in the blue bar at the top. Thanks again.

Thanks, now I can see your problem. I recommend not to remove the pagefootmenu, and not to set it to display:none (commenting it), but instead edit it and add to the top (:if auth edit:), which will display the menu buttons when you are logged in with edit authorisation, but will not show them when just reading the pages as casual visitor. that should cure the problem of sidebar stretching in IE6. I will investigate the reasons why IE6 stretches the sidebar in the absence of a pagefootmenu further, but meanwhile you can try the above conditional display of buttons. ~HansB

Direct printing

I don't see how to use the Direct Printing mentioned in the Triad description page. Any help would be appreciated. mkline

Direct printing means printing without need to load first a special "print view" page. Use your browser's print facility directly, i.e Ctrl-P or File-Print or File-PrintPreview to see the page displayed as it would be printed. The page layout and styles for printing is controlled by the layout-print.css file, in case you wish to change some print styles. ~HansB

Background colour for sidebar

I can't seem to find where to change the background color of the sidebars, or any background color at all: What would the appropiate css file be? Thank you in advance [Ferpont]

Look at c-lightblue.css at the top of the file. Lines are annotated. ~HansB


I can't seem to use $PageLogoUrl in site.pageheader. If I do, it will only display the resolved file name, not the image contained in it. If I put the explicit file name in the pageheader text, then it renders fine. [TerryM]

I put {$PageLogoUrl} as a custom pagevariable into the default Site.PageHeader in case someone had $PageLogoUrl defined in config.php. But a logo image can be included in the Header the same way images are included in pages. So you can write Attach:Site/mylogo.jpg, save the page and upload mylogo.jpg. ~HansB

Sorry but there really seems to be a bug here. Even if {$PageLogoUrl} is defined, the script prints the full link (e.g. {}) which links to . Apart from that, your skin is great! -- Dan

{$PageLogoUrl} is a page variable, and page variables were introduced with pmwiki version 2.1.beta15. Any version prior to this will not be able to use {$PageLogoUrl} in a wiki page. Are you using a version prior to 2.1.beta15? Then you need to use the full url address of the logo image instead of {$PageLogoUrl}. ~HansB

New Triad version 2

I abandoned the pure css based 3 column layout, because it was just too fickle to integrate with a header which could change in size, and the text sizing option. The new basic layout employs a 3 column table with column spanning header and footer. This proves much more stable and easier to use various markup to disable the various sections of the page. I got tired of having to use trick divisions and just too many browser specific tweaks. Maybe one day css will grow up and make it fun to create such layouts, but right now it is just too painful. - HansB

Question: When there is no RightBar, shall the right column space stay empty by default, or shall it be removed so the page content stretches over to the far right? I just wonder how to set the default, and give the option to switch to either way. ~HansB

Hans, I was thinking about this as well. I think the best possible arrangement might be where the space stays empty by default, but if you use (:noright:) or disable the right bar entirely, it stretches the center content to the right. If that's possible! - JonHaupt (edit : oops, I forgot the prevent formatting markup and my sentence didn't make sense)
It is already implemented in the latest update. Skin.php sets the default to $EnableEmptyRightBar = 0; Set it to 1 to display empty space. I may reconsider this. ~HansB

Footer placement when window height is large

Hans, I think this is a great new skin. It flows very nicely and makes a great use of the rightbar. One problem is that if you have a short page and short sidebar, such that the whole page easily fits at the top, the footer appears just above the bottom, so there's a bit of space there below it. I can even see it on this page. I happen to be using Firefox 1.0.7, screen resolution is 1280x1024. - JonHaupt

Jon, the footer should appear always at the bottom of the window, and no space below it. Both left and right column as well as the centre column will push it down. If they are all short then the footer should still be at the bottom of the window. That's what I see on my site. - HansB
Below is what I see, using IE and firefox both. I wonder why?
Jon, your screen is very big. And the method to push the footer down when the columns are too short involves a percentage minimum height. I increased it slighly, is it better now? I may adapt a different more precise way of placing the footer in future. - HansB
That seemed to fix it on my end. Sorry to be a pain! I really do like the skin. Probably most people use 1024x768 resolution, but I find about 15% of visitors on my sites actually use 1280x1024, so there are certainly some people out there with big screens! - Thanks, JonHaupt
I uploaded with the changes. I set the #outer height and min-height to 90% in layout-triad.css. HansB
*sigh* for whatever reason, this fixed things when I display your pages, but they still don't look right on mine. My site has a smaller header line, same size as the PmWiki logo (32), so maybe there's something about the height of the header? Anyway, I fiddled with it, and if I tweak it just so much more (91.2%) it looks okay in Firefox, but the space is still there in IE. So I tried changing the bottom margin from 42px to 32px, and that fixed it...?- JonHaupt

The latest update (1.1) is using javascript to correct the footer positioning. The window rebuilds when there is no vertical scrollbar needed, and sets the footer at the bottom. The percentage minimum height for #outer is still needed for browsers not running java. A smaller value will trigger the resetting by javascript earlier, but then browsers not running javascript will show the footer a bit above the bottom. This is a bit of a tricky compromise, but then it affects only pages with small content or sidebar heights, so maybe we can live with this.

The original blueprint for this layout had the header positioned absolutely, and used a "clearheader" division to make space for it. The minimum heght for #outer was set to 100% and it worked well, aslong as th eheader was set to the correct size. But since we use a wiki page to customise the header, and the size can change, and since I wanted to integrate the fontsizer, which again results in various sizes for the header (in IE), I abandoned the absolute header positioning, which works great for the header, but causes some problems for the footer, since the #outer div can't be set to 100% minimum height anymore if you want to see the footer when the content is small. ~HansB

I just got your cool beans running. Awesome work, I love it!

All of the pages say in the footer that they were last updated in Dec 2005, though. Do you think something is wrong with the latest beta, or is there something in my configuration that needs to be tweaked? From Jon's screenshot above, it looks like he has the same problem.

I can't see this from the screenshot, and i am not sure what you are referring to: is it the Page last modified variable? Make sure it reads {*$LastModified} for pmwiki 2.2.0-betas. Hans

On a side note, yes, 1280x1024 seems to be increasing in popularity, and 800x600 is slowly going the way of the 640x480. I use 1280, and a guy in the office next to me uses a resolution of 1920x1200 (or 1200x1920, depending on whether he rotates his monitor). Apple's got some cool stuff! Their larger one is 2560x1600. Bottom line: kudos to Hans for the easy access to text sizing, and setting a cookie for that.

Thanks ~ :b

Leave new questions and comments at the page top please!

Talk page for Triad (users).