[Pic/update.png] __[ButtonMenu2 template|ButtonMenu2Template]__ is now available. It works with __version 2.3.72-alpha__ [Pic/update.png]

__Salient features: __
*Skins can be changed on the fly 
*All styling done through CSS 
*Same CSS for IE and Mozilla 
*XHTML compliant html 
*Tables have been used sparingly 

__Here are the steps to configure the skins:__
*JSPWiki is used to denote the location of your wiki 
*Unzip the contents of ~ButtonMenu.zip to a temporary location 
*Copy ~ButtonMenu dir to the JSPWiki/templates 
*Edit JSPWiki/WEB-INF/jspwiki.properties to set templateDir to ~ButtonMenu e.g. 'jspwiki.templateDir = ~ButtonMenu' 
*To change wiki skins modify JSPWiki/templates/~ButtonMenu/~WikiCSS.jsp 
**~WikiSkinBlue.css 
**~WikiSkinOrange.css 
**~WikiSkinGreen.css 
*Start your JSPWiki and add button menus on the left-hand-side TOC by clicking the 'Edit' button and adding wiki links inside a list. Here is sample code to do that.  
{{{*[Main]
*[AboutMe]
*[Resume]
*[JSP Wiki Skins|JSPWikiSkins]
*[Message Center|MessageCenter]}}}

The ButtonMenuTemplate skin overrides the style for unordered list (UL) tag inside the left-hand-side TOC so that all the list items appear as buttons.  Hence, you can easily create buttons by adding list items to your left-hand-side TOC as shown in the above example.

The ~ButtonMenu skins are CSS based and use a standard layout for all the skins. The layout for the wiki pages is defined in the JSP files under templates/~ButtonMenu directory. The JSP files have no styling information; all the styles are governed by the CSS files. All the pages in the wiki include the ~WikiCSS.jsp which embeds the link to the correct CSS file. There are 3 pre-packaged CSS files namely: ~WikiSkinBlue.css, ~WikiSkinOrange.css and ~WikiSkinGreen.css. The CSS files work fine both for IE and Mozilla and there is no need for separate CSS implementations for different browsers. Just make sure that whenever you modify the CSS files you test it for both IE and Mozilla. 

--[BaldeepHira] \\
[http://www.bhira.net|http://www.bhira.net]
----
!!Screenshots
[BlueSkin.jpg]
[GreenSkin.jpg]
[OrangeSkin.jpg]

----
!!Comments/Discussion

Baldeep, I have been experimenting with the JSPWiki for use within our organization.  I originally had the 2.0.52 version with your [ButtonMenuTemplate], simple nice and non-intrusive, thank you.  I wanted to test out some of the features that were in 2.1.x.  Your template now does not display the H1 ... H3 headers correctly.  I know it most be a simple sytle sheet problem but I don't know exactly what.  --[RichardStephan]


Richard, it's mainly to do with the new way jspwiki now does the anchoring stuff (for the TableOfContents plugin I think), all headers are generated as <h1><a name="some-auto-generated-name"></a></h1>.  This is what causes the display problem.  At the top of the css file you'll see a
{{{
/* Global styles applied to standard HTML tags */
body, div, span, br, p, a, pre, textarea, form, table, tr, td {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    margin:0px;
    padding:0px;
}
}}}

Get rid of the __a__ reference there, and you should see all the headings again, at the right size. Doing this does cause its own problems, you can problably fix those by cut/paste the font/size stuff into the appropriate sectinos -- [LewinChan]



----

I have updated this template to work on JSPWiki __version 2.3.72-alpha__ Since there are a lot of changes between the 2 versions am placing it as a separate release called [ButtonMenu2 Template|ButtonMenu2Template]. Please try it out and let me know if you run into any issues.

--[Baldeep Hira|BaldeepHira], 12-Feb-2006 \\
[http://www.bhira.net|http://www.bhira.net]