How can I add and adapt Horizontal Navigation buttons?

I would like to add the horizontal buttons which are displayed in this Foswiki installation into my own WebTopBar, just like this:

I've tried to use the settings from PatternSkin horizontal navigation example, and it somehow works, except for the color of the "active" buttons. Am I doing something wrong? Are there any CSS-Setttings that I'm missing?

Just checking my environment ettings:

• jQueryPlugin is installed, including superfish and chili "enabled" in configure.
• /pub/System/JQueryPlugin/plugins/superfish/jquery.superfish.css is installed and available.
• I added the relevant PatternTopBarButtons definitions to style.css and colors.css

It all works so far mostly, but I can't get the buttons to be "active" - even when I set the class for ALL of them to "active", they don't change. I think I have now reached the end of my knowledge and guessing-procedure, so where do I set the "active"-color setting?

It IS existing in my colors.css:

#patternTopBar{border-color:#dfdfdf;background:#eeedec}
#patternTopBarButtons,
#patternTopBarButtons ul,
#patternTopBarButtons ul li{background-color:#777;color:#fff}
#patternTopBarButtons a{color:#fff;text-decoration:none;border:0}
#patternTopBarButtons a{font-weight:bold}
#patternTopBarButtons>ul>li>a.active{
   background-color:#fff;
   color:#000
}
#patternTopBarButtons a:hover{background-color:#5f5f5f;color:#fff}
#patternTopBarButtons ul ul{border-style:none solid solid solid;border-width:1px;border-color:#ccc}
#patternTopBarButtons ul ul,
#patternTopBarButtons ul ul li{background-color:#f6f6f5;color:#333}
#patternTopBarButtons ul ul li a{color:#333;font-weight:normal}

I have added the INCLUDE of the topbarbuttons into my WebTopBar topic. Is it possible that maybe there is some kind of css code that is "stronger" than the settings of the #patternTopBarButtons setting?

edit: One more detail which may help: I have noticed that when I use the first line:

%STARTSECTION{"main"}%<div id="patternTopBarButtons" class="clear"><ul> 

Then I see NOTHING. Only when I remove the class="clear" part, then the buttons are visible. Could this be the reason why I see no active buttons??

Thanks for any kind of help.

-- LieVen - 01 Sep 2015

On Foswiki 1.1.x, the Horizontal Navigation buttons are part of the FatWilly skin theme that was developed specifically for Foswiki.org. Foswiki 2.0 implements the horizontal navigation differently.

The following settings will work on Foswiki 1.1.9 (Taken from Main.SitePreferences ... commented out for Foswiki 2.0

   * #Set SKIN = famfamfam,pattern
Skin styles:
   * #Set FOSWIKI_LAYOUT_URL = %PUBURLPATH%/%SYSTEMWEB%/PatternSkinThemeFatWilly/layout.css
   * #Set FOSWIKI_STYLE_URL = %PUBURLPATH%/%SYSTEMWEB%/PatternSkinThemeFatWilly/style.css
   * #Set FOSWIKI_COLORS_URL = %PUBURLPATH%/%SYSTEMWEB%/PatternSkinThemeFatWilly/colors.css
Theme variants:
   * #Set PATTERNSKIN_COLUMNS =
   * #Set PATTERNSKIN_THEME_VARIANT =
Navigation:
   * #Set PATTERNSKIN_NAVIGATION_TOPIC = %SYSTEMWEB%/PatternSkinThemeFatWillyNavigation
Top bar:
   * #Set WEBHEADERART =
   * #Set WEBHEADERBGCOLOR =

-- Main.GeorgeClark - 07 Sep 2015 - 18:35

Okay.... This helps me only a tiny bit, but maybe I need to try some more. When I display the buttons from theat Theme, it does work indeed. Now I just need to find out how "adapt" it to my website. In my case, the buttons do not show the active web (it's all one web) but they should be active depending on some data in the formfield. I thought I understood how it works, but it does not, so I ask: How can I put a macro in the class field? It works with %Destweb% and %Desttopic%, but when I tried to replace the class "blabla"= string with a %CLASS% string, it did not work - it's even gray in the fancy tml display, isntead of green.

What I'm trying to do is this (I'm not showing the surrounding lines):

%INCLUDE{"%TOPIC%" section="topbarbutton" ID="" DESTWEB="En" DESTTOPIC="Topic" LABEL="Topiclabel" SHOE="%IF{"$'FORMFIELD{Category1}'='Something'" then="active" else="inactive"}%"}%

in combination with the standard taken from the FatWilly theme:

%STARTSECTION{"topbarbutton"}%<li%IF{  
    "'$ID' and '%ID%'!=''"
    then=" id=\"%ID%\""
}%><a href="%SCRIPTURL{"view"}%/%DESTWEB%/%DESTTOPIC%" class="%SHOE%">%LABEL%</a></li>
%ENDSECTION{"topbarbutton"}%

The placeholder SHOE is even gray in this wiki - so what am I missing? It MUST be something very simple what I'm doing wrong.

---

I have now closed my question as answered, because my main problem has now shifted: After following the above insctructions, everything works fine. What I now need to find out is how I can make the "class" depending on what is inside the formfield. I even know the basic structure, but apparently, I need to change the order of the Macros by replacing % by $percent or similar, and that's an entirely different topic. [Nevermind - I solved it.]

Thanks.

-- Lieven - 08 Sep 2015