• Site.GlossyHue-SiteNav
• Page 1?
• Page 2?

<< Gemini | Skins | Grayness >> (test page)

This skin provides a 2-column interface, with a right-side navigation bar, and top navigation tabs, and a 3-section footer area.

I'd love to know if you use this skin, or even if you like or hate it -- leave a comment below!

Δ

Click to enlarge

Feature Summary

• Customizable: Main sections (headers and footers) of the page are stored as wiki pages, so you don't need to know HTML.
• Edit icons: Provides edit icons for commonly used wiki markup -- no more forgetting which markup to use!
• Supports removal of header/title/right/footer elements using directives on specific pages or site wide.
• Fully CSS driven, is valid XHTML, for those that care about such things. All files are fully commented, and the design has been made easy to modify. The CSS used for layout and coloring are in separate files allowing easy customization of colors, without having to wander throughout the layout styles.

Download and Installation

1. Download the skin package (GlossyHue.zipΔ) and unzip it into your skins directory (usually pmwiki/pub/skins).
2. Add the following to your local configuration file:

$Skin = 'glossyhue';

Page Layout

Changing the Content of the Skin Sections

Header

The wiki file Site.GlossyHue-SiteHeader contains divs for a site logo, site heading, and site description. The Site level page can be overridden with a Group level page.

Simply change the (:if false:) sections to (:if true:), and alter the text to suit you site.

(:if false:)
(:div class="sitelogo":)URL-TO-YOUR-ICON.gif
(:divend:)
(:ifend:)

(:div class="sitetitle":)[[Main/HomePage | My Site Header]]
(:divend:)

(:if true:)
(:div class="description":)Edit [[{$SiteGroup}.{$SkinName}-SiteFooter | {$SiteGroup}.{$SkinName}-SiteFooter]] to change the header.
(:divend:)
(:ifend:)

Top Navigation bar

The other likely change you'll want to make is to add links to the top navigation bar. In this case edit Site.GlossyHue-SiteNav, and use a list format as below:

* [[Grp/MyPage | Page 1]]
* [[Grp/MyPage | Page 2]]
* [[Grp/MyPage | Page 3]]

Footer

The footer consists of three sections. The first two sections were designed for lists (recent changes, new pages, etc), and the last section was intended to be a brief "About" page. Feel free to use them as intended, or for any other purpose! The lists can be styled using one of the special list formats.

(:div class="footer-section":)
!!!!Footer 1
Edit [[{$SiteGroup}.{$SkinName}-SiteFooter | {$SiteGroup}.{$SkinName}-SiteFooter]] to change the footer sections.
(:divend:)

(:div class="footer-section":)
!!!! Footer 2
(:divend:)

(:div class="footer-about":)
!!!! About
Something about yourself...
(:divend:)

Removing Page Sections

GlossyHue consists of a header and footer, and a fixed-width right column. Sections can be removed from the page or the site with special markup.

• Turn off sections on a page with markup (:noXXX:). Where XXX is Header,Action,Right,Title,Footer.
• Turn off sections for the whole site in config.php by setting:

SetTmplDisplay('PageXXXFmt', 0);   #XXX: Header,Action,Right,Title,Footer,Search

Styles

Lists

GlossyHue comes with a number of styled list formats, which provide icons in place of bullets. You style a list using the normal PmWiki markup, list STYLE_NAME:

* %list STYLE_NAME% point 1
* point 2
* point 3

Available styles are: list-blogroll, list-cat, list-archives, list-page, list-comments (note, that the style name includes the word "list-").

• list-blogroll style

• list-cat style

• list-archives style

• list-page style

• list-comments style

FAQ

Browser Compatibility

This is an incomplete listing of the browsers which have been seen working with this skin.

• Works under Windows with: Firefox 1.5; Firefox 2; IE7; IE6; Safari 3; Opera 9.

Known Issues

Also refer to the Planned Releases for known issues that have a planned fix date.

• bug: The 'Search' button is not affected by i18. (reported by Jens)
• bug: Edit icons not included in package!

Planned Releases

• v1.1: Provide the ability to switch the nav bar either left or right.

Change Log

1.0.1 (27-Nov-2007)

Contributors: DaveG

• bug: Corrected header page which referred to the footer!
• Initial release.

1.0.0 (25-Nov-2007)

Contributors: DaveG

• Initial release.

Credit

• The main layout and the CSS is based on the Glossy Blue theme for Wordpress, created by Nick La.

Comments

I'd love to know if you use this skin, or even if you like or hate it -- edit this page and leave a comment below!

• swestrup, 2007-Nov-24: This looks very good. I have long wanted a skin with a simple two-column look and page tabs. I'm thinking of using this for a corporate site I'm going to be working on. As much as I like the look though, I think it likely that I'll be making some changes to how the skin works. In case you're interested here are the changes I'll probably make (if you like, I'll send you copies of the changed files when I'm done.):
  • Create a uniform interface for controlling the skin inside config.php. This would probably be done via a $GlossyHue array. Rather than have an admin enter SetTmplDisplay('PageXXXFmt', 0);, instead they'd say $GlossyHue['enable']['XXX'] = 0;. This gives the skin much more flexibility if in the future it turns out that turning off a section has processing implications in the skin.
  • Allow the page to be the full width of the screen. I absolutely hate unused browser real-estate.
  • Allow the sidebar to be on either the right or left side.
  • Possibly allow the sidebar to have its width specified in config.php or on a config page (depending on how hard that is to support in the CSS).
  • Have all of the skin sections try to include page-specific, group-specific and then site-specific versions of themselves. I'd probably drop the GlossyHue part of the names, as that can make it a real pain if one day one wants to switch to a different skin that has a different name. One would rather just edit the sections in place, rather than have to move them to new names as well.
• DaveG, 24-Nov-2007: Glad you like it. I'd love to see the changes you make.
  • Create a uniform interface: Note that I'm using PmWiki's standard markup here, not something skin specific. For page specific processing refer to removing sections. I'm not sure though how the array idea has any more flexibility than the built-in PmWiki functionality.
  • Full width: I know what you mean, and believe it or not I already increased the width from the original. The problem with *full* width is that it can make things hard to read on 1028 width screen resolutions. Also, the skin relies on an image for the coloring of the right nav bar, so you'll need to replace that somehow.
  • Left/right: This would be useful, but again would require refactoring the way the right nav bar is currently colored, with an image.
  • Skin sections: All skin sections are currently group/site specific. I include the skin name on all site level pages to avoid conflicts with the ways that other skins make use of those pages -- there are currently no standards, so things tend to look odd across skins. Of course, if you won't be switching skins, renaming is not an issue.
• DaveG, 25-Nov-2007: I've decided that I'm going to update the skin to add the ability to select left/right nav positions. I should have that done in a few weeks.

• Steve W, 3-Dec-2007: Good skin, however unable to get GUI buttons to show when page editing. Set GUI to 1 in config file and made sure Javascript works in Browser to no avail. The buttons show when editing a page on the main pmwiki site so I am guessing maybe a problem/setting/bug on skin ?
• DaveG, 5-Dec-2007: I'd first check that the button images were uploaded correctly. They should be in skindir/images/guiedit. Second, the button directory $GUIButtonDirUrlFmt] is derived from [@$SkinDirUrl, so check that $SlinDirUrl is pointing to the guiedit directory correctly. Easiest way to do that is to simply check the HTML source of the page and see where the icon paths are pointing.
• Steve W, 8-Dec-2007 Dave, Sorry if this all a bit basic. Viewed the html source for the GUI buttons on the Edit page however they seem to be pointing to png files which I dont have. The standard pmwiki fies are gif's. I have examined the complete installation files as downloaded and all files seem to be gifs as well.
• Steve W. 9-Dec-2007 Seem to have solved the missing png's. Downloaded one of your other skins and used the guiedit image files (which were png) from that one. Not entirely sure why they were gifs in GlossyHue as would have thought other people would have complained if the original downloaded zip file was the problem. Thanks for the help
• DaveG, 9-Dec-2007: Well wouldn't you know it... it looks like I did not include the edit icons in the zip file! That would explain why you couldn't find them :) Sorry for the problems this caused you, and glad you managed to resolve it on your own!

• Andrew D, 6-Dec-2007: Have to agree with the good skin comment. Very slick. I have an issue when trying to edit header and footers. I was asked for a password which I had not set either through attr or config.php. I had to edit the wikilib.d files directly. Is this the correct way to edit these areas ?
• DaveG, 7-Dec-2007: Glad you like the skin! Across PmWiki in general you should never have to edit files inside wikilib.d (and even if you had to edit, you should copy the file to wiki.d, and edit those).

• Arunn, 31-Mar-2008: Thanks for the good skin. I am using it now. Stumbled a bit about the GUI edit buttons, but resolved as suggested above and copied folders from blix skin. Also, added jsMath cookbook and needed to modify the template a bit, but works fine. Shall look out for the skin updates.