Triad Skin-Comments? << | Index | >>

Features:

• Three column layout with full-width header and footer.
• Customisable page sections through wiki pages: header, footer, left sidebar, rightbar, topmenu, footmenu.
• Page sections can be turned on and off with markup.
• Right and left side bars can be hidden instantly with javascript, to make the content page wider. Now persistent.
• Instant text sizing with java script.
• One click switch to "Big View" to aid visually impaired users.
• Integrated direct printing.
• Option to switch styles for different color and font schemes, or to create a layout with fixed or resizable width, with or without outer border. Integrated color support for commentboxplus and forumstyled. Try switching styles with links here on the right bar!
• Popup preview in edit mode, no more downscrolling!

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

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

(: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.

• 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.

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

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

New for version 3: 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!

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.

Browser Compatibility

Seen working on the following browsers:

• On Windows: Firefox 2, Firefox 1, IE7, IE6, Netscape 7.0, Opera 8.5
• On Linux: Firefox 1.5
• On Mac: Safari, Firefox, Netscape 6.2, IE5.2, Camino, OmniWeb, iCab

Installation

• Download Attach:triad.zip Δ and unpack into your skin directory.
• Set in config.php $Skin = 'triad';

Update History

• 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 Cookbook: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 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

• ~HansB?

Comments

• Please go to Triad Skin-Comments?

<< | TestPages | >>