Triad Tips for Admins Textpattern4 < Skins > Trish   (talk | users | test page | RWD? | set as default | unset | validate: HTML, CSS)

Summary: Highly configurable skin with 3-column layout with full-width header and footer
Version: 2014-11-30
Prerequisites: pmwiki-2.2.56
Compatible-with: PHP 5.5
Status: Stable
Maintainer: HansB
Categories: Skins PHP55
Download: triad.zipΔ
Discussion: Triad-Talk
Users: +13 (View / Edit)

See also: Triad Tips for Admins

Features:

Layout

The basic layout consists of a page-wide header and footer, with the main center section in-between, flanked on either side by a fixed-width side column. Top and foot menu bars provide page action and additional navigation functions. The page is structured into the following sections. Each section can be configured from an associated wiki page and also made to "disappear" with special markup. Custom markup (:fullpage:) will show the page content plus title bar but nothing else.

Header (Site|Group).PageHeader

Top Menu Bar (Site|Group).PageTopMenu

Side Bar
(Site|Group).SideBar

Title Bar (Site|Group).TitleBar

Right Bar
(Site|Group).RightBar


Page Content
 

Foot Menu Bar (Site|Group).PageFootMenu

Footer (Site|Group).PageFooter

Header

The pagewide header contains the site logo and title, plus searchbox and text sizing buttons in the top right corner.

  • Configuration on Site.PageHeader or any Group.PageHeader page.
  • Turn off on a page with markup (:noheader:).
Top Menu Bar

The top menu bar underneath the header can be used for action links and other links.

  • Configuration on Site.PageTopMenu or any Group.PageTopMenu page.
  • Float links left or right with >>lnav<< and >>rnav<< custom classes.
  • Turn off on a page with markup (:notopmenu:).
Side Bar

The left hand column of fixed width holds the side bar for the main site navigation links. The SideBar supports the use of second level list elements, which are indented from the first level. See Expanding Menus for details how this can be used.

  • Configuration on Site.SideBar or any Group.SideBar page.
  • Turn off on a page with markup (:noleft:).
Right Bar

The right hand column is of fixed width. Styled boxes for clips of text or links etc. can be created by using markup >>clip<<.

  • Configuration on Site.RightBar or any Group.RightBar page.
  • A RightBar for a page can be created with PageName-RightBar.
  • Turn off the right bar for the whole site in triad/skin.php.
  • Turn off on a page with markup (:noright:).
Hide & show right and left columns

Right and left columns can be instantly hidden or shown with javascript through action links in the top menu bar. This can be used to enlarge the viewed page instantly. In conjunction with the font sizer pages can be comfortably enlarged for easy reading for visually impaired people.
New: The Show/Hide state is remembered for viewing other pages. This can be turned off by setting $EnableToggleCookies = 0;

Title Bar

The title bar consists of a link to the current group and the page title.

  • New: Configuration on Site.TitleBar or any Group.TitleBar page.
  • Turn off the group link on the whole site by setting in triad/skin.php $EnableGroupTitle = 0;.
  • Turn off the group link on a page with markup (:nogroup:).
  • Titles with ornate fonts can be created by creating a page PageName-TitleBar and attach an image file of the ornate font title there.
  • Turn off the whole title bar on a page with markup (:notitle:).
Page Content

Full range of headings. Wide edit window with buttons above and below the text edit box.

This is a custom blockquote division.
Use with markup

   >>bquote<< 
   ... 
   ...
   >><< 

— Hans

Foot Menu Bar

A row of buttons with action links below the page content.

  • Configuration on Site.PageFootMenu or any Group.PageFootMenu page.
  • Turn off on a page with markup (:nofootmenu:).
Footer

A page wide footer at the bottom for copyright or other sitewide info.

  • Configuration on Site.PageFooter or any Group.PageFooter page.
  • Turn off on a page with markup (:nofooter:).

Text Sizing

The fontsizer included has action links in the header, which will enlarge or reduce the text size of all text on the page, in incremental steps. The preferred choice will be stored in a cookie, and carried forward for other pages and subsequent site visits. This is achieved with javascript.
New: Fontsizer has now access keys: Alt-Minus, Alt-Zero, Alt-Plus for faster font sizing.

Big View

Instantly switch to a "big view", which is a page view with extra large font sizing, plus hiding of the right bar (plus optional left bar). The preference view will be remembered for subsequent page/ site visits via a cookie setting. This feature can be customised or disabled in skin.php.

Direct Printing

You can print any page directly, without going to a special "print preview" page, since a special stylesheet for printing is included. The header, menu bars, left and right sidebars get stripped away for the printed page.

Other styles

Various color and font styles can be choosen, as well as a fixed width and centered layout, and a wide layout with border. Try switching styles with links here on the right bar! You can set these as defaults by adding to config.php for instance $DefaultColor = 'white'; or some other of the color keywords.

Popup Preview

In edit mode when previewing a window will popup over the textarea with the preview. No more downscrolling! Less chance that an author forgets to save the work. - The popup preview uses the ShowHide script, integrated as part of the skin.

Support for Cluster/Hg recipes

New: Support for Cluster and Hg recipes is built-in to enable easy "breadcrumb-trail" of clustered group links in the titlebar.

Browser Compatibility

Seen working on the following browsers:

  • On Windows: Google Chrome, Firefox 3, Firefox 2, Firefox 1.5, IE7, IE6, Netscape 7, Opera 9, Mozilla 1.7
  • On Linux: Firefox 2, Firefox 1.5, Opera 9, Konqueror 3.4
  • On Mac: Safari 2, Safari 1.3, Firefox 2, Firefox 1.5, Netscape 6.2, IE5.2, Camino, OmniWeb, iCab

Installation

  • Download triad.zipΔ and unpack into your skin directory (default pub/skins).
  • Set in config.php $Skin = 'triad';

Update History

  • 2014-11-30: Fixed small error in markup definition of NoGroupTitle.
  • 2014-02-20: Fixed markup definitions for PHP 5.5 compatibility (PmWiki 2.2.56 or above required).
  • 2010-05-13: Fixed fontsizer font-family css attribute.
  • 2010-05-11: Changed setting style width for SideBar and RightBar width from #left-box and #right-box cells to #sidebar and #rightbar divs.
  • 2010-05-08: Undone 2010-04-20 update. Changed css for preformatted text wrapping; added $EnablePreWrap, so $EnablePreWrap = 0; can disable preformattedf text wrap.
  • 2010-04-22: Fixed a few small css bugs, adjusted font size for textarea input.
  • 2010-04-20: updated pm-core.css (now wrapping pre and code)
  • 2010-04-02: updated pm-core.css; fixed html tag; fixed links in edit help page.
  • 2009-04-21: Removed charset=iso-8859-1 from content-type meta tag in skin template.
  • 2008-07-10: Various changes to make skin doctype XHTML1-strict compliant.
  • 2008-05-13: Fixed bug in (:nogroup:) markup.
  • 2008-03-10: Changed searchbox focus to put 'Search' back if box is empty.
  • 2008-03-04: Adjusted page margins and content font spacing.
  • 2007-12-02: Added option to (:theme:) markup to set background image and background color for transparent colour scheme, plus a width option for page width. Added $BackgroundImgUrlFmt and BackgroundColor to set these attributes for 'trans' color scheme. Fixed various variables.
  • 2007-11-03: Fixed some invalid css attributes in color css files.
  • 2007-10-26: Fixed a bug in Site.TitleBar page.
  • 2007-10-21: Added message box styles to colour css files for FoxForum support.
  • 2007-04-26: Fixed typo in Site.PageFootMenu
  • 2007-03-23: Fixed focus bug in searchbox. Fixed class attribute bug in titlebar.
  • 2007-03-22: Fixed bug in RightBar toggle.
  • 2007-03-21: Fixed bug in RightBar detection for cluster rightbars.
  • 2007-03-20: Fixed missing (:ifend:) in Site.TitleBar
  • 2007-03-19: Added two more fixed width settings for 1024 and 1280 wide screens.
  • 2007-03-19: Added TitleBar page for titlebar configuration, added support for Cluster and Hg recipes. Changes to most css files for the new TitleBar subpage support.
  • 2007-03-14: Fixed preview colours for night-blue scheme.
  • 2007-03-05: Fixed (:theme :) markup, broken since introducing new css load order (2006-11-03).
  • 2007-02-24: Added choc colour scheme (choc brown), set with setcolor=choc.
  • 2007-02-22: Added night-blue colour scheme, set with setcolor=night.
  • 2007-02-05: Fixed bug for IE7 rendering the header background wrongly. Adjusted Site.PageHeader
  • 2007-01-27: Fixed ordered list styling when part of an unordered list. Changed {$LastModified} in PageFootMenu to {*$LastModified} for pmwiki beta 2.2.0 compliance. Fixed fontsizing values in PageHeader. Removed spurious hidden field from searchbox
  • 2006-12-07: More improvements of Popup-EditForm and the way it is called. Plus improving preview colors.
  • 2006-12-06: Fixed small bug in conditional in Site.Popup-EditForm. Removed #content .inputbox {width:..}.
  • 2006-11-25: Added global variables $HTMLTitleFmt, $GroupTitleFmt, $TitleFmt. Fixed bug in searchbox, which prevented IE to clear searchbox when focussed. Removed show/hide preview button with no label in Popup-EditForm.
  • 2006-11-20: Added support for GroupTitle recipe, to display GroupTitle as link in titlebar.
  • 2006-11-11: Added transparent color scheme. Added variables to switch off user options individually for the different types of options (colors, fonts, page width) to give more admin control via config.php or other local configuration files.
  • 2006-11-03: New improved load order for css files. Support for pmwiki-core.css file. Reduced code in page head. Fixed bug in fontsizer script which did not display fontsizer buttons on first site visit, but only on subsequent page loads.
  • 2006-10-30: Fixed non-sticky cookie settings for togglebars due to bad cookie naming.
  • 2006-10-30: Fixed error in togglebars.php, which was introduced with last release.
  • 2006-10-28: Added $RecipeInfo
  • 2006-10-25: Added $RightWidth and $LeftWidth variables for optional changing width of rightbar and sidebar in local customisation files.
  • 2006-10-05: Updated version number and removed OS X hidden file from zip
  • 2006-10-04: Changed edit (and other) links to work with relative urls in PmWiki 2.2.0-betas, added backward compatibility for {*$Var} with prior versions
  • 2006-09-02: Added SideBarFooter page to replace skin version info. Added page variables SkinName, SkinVersionDate, SkinVersionNum, SkinVersion (SkinName and SkinDate), SkinRecipeName, SkinSourceUrl. Modified fontsizer.
  • 2006-09-01: Added access keys for fontsizer actions: Alt--,Alt-0,Alt-+. Fixed bug preventing popup-editform, slipped in with last update. Improved popup-editform load logic. Added $EnablePopupEditForm variable, default is 'true'.
  • 2006-08-28: Template now uses HTMLHeader and HTMLFooter, also added var $BodyAttrFmt to <body> tag.
  • 2006-08-21a: Added persistent toggle settings for side and rightbar via cookies.
  • 2006-08-21: Improved cookie settings.
  • 2006-08-19: Fixed bug so showhide will not load if alrady loaded from cookbook.
  • 2006-06-25: Fixed bug in layout-print.css to hide sidebar when printing etc.
  • 2006-06-01: Fixed alternate upload form, which had IE hang.
  • 2006-05-03: Added savedraft button to edit form.
  • 2006-04-28: Removed onkeypress event from fontsizer.js, which interfered with tab navigation.
  • 2006-04-20c: Added background colors to inputtext boxes.
  • 2006-04-20b: Added more TriadTips. Revised bquote, added qsource style. Added color styles for right floated "news" box.
  • 2006-04-20a: Added background colors for bquote (blockquote division).
  • 2006-04-20 (v.3.0): Added various color and font schemes, and the option to change styles. Added popup edit preview. Added (:theme:) markup. Added TriadTips help page. Enabled most default settings to be set in config.php.
  • Version 2.1.3, 20 Feb 06: Fixed some overlooked development settings in last release.
  • Version 2.1.2, 20 Feb 06: Internationalised skin terms for use with XLPage. Changed styling of pre and code fonts to make them more readable.
  • Version 2.1.1, 22 Jan 06: Fixed IE bug, which for short content displayed content border wrong.
  • Version 2.1, 14 Jan 06: Rewrote fontsizing code. Fixed fontsizing cookie bug. Cookies will use now any $CookiePrefix if set. Added 'Big View' style. Fixed bug which stopped topmenu bar from showing on a clean new installation. Some small changes to css styles.
  • Version 2.02, 10 Jan 06: Removed stray (:if:) from PageTopMenu.
  • Version 2.01, 3 Jan 05: Fixed style for upload form. Added markup for double line horizontal rule ====.
  • Version 2, 2 Jan 05: Substantial update. Replaced pure css based layout with a simple table, because the css was just too fickle. Added javascript to hide/show left and right columns instantly. Rewritten fontsizer links. Rewritten searchbox. Searchbox and fontsizer action links are now included in the header page Site.PageHeader.
  • Version 1.1, 16 Dec 05: Added javascript to set footer when window is large and left, right or center columns don't push it down. Fixed footmenu links. Enlarged code font. Removed header from default edit form. adjusted heading spacings.
  • Version 1.02, 14 Dec 05: Fixed markup (:noright:), added in skin.php $EnableRightBar switch. Set default to suppress empty RightBar column if no RightBar present. Fixed markup (:showright:) to work if $EnableRightBar is set to zero (sitewide no rightbar, but can be shown on individual pages).
  • Version 1.01, 14 Dec 05: Changed layout-triad.css [#outer height and min-height to 90%] to adjust footer for bigger screen sizes (bigger window sizes).
  • Version 1, 13 Dec 05.

Contributors

Comments

User notes +13: If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Skins listings and will help newcomers browsing through the wiki.

This page is part of the Gemini, FixFlow and Triad skin's setup. Category:Skin-AddOn

Close Rightbar

Triad-RightBar

RightBar

The RightBar is just another wiki page inserted to the right of the main content. In FixFlow and Gemini the text will flow around it. In Triad it occupies the right column.

Font Options