Question

Okay; using the Umbraco CMS I have a xslt menu being generated in the following manner:

    <xsl:output method="xml" omit-xml-declaration="yes" />

    <xsl:param name="currentPage"/>

    <!-- Input the documenttype you want here -->
    <xsl:variable name="level" select="1"/>

    <xsl:template match="/">


 <ul id="topNavigation">
       <li class="home">
         <xsl:if test="$currentPage/@id = $currentPage/ancestor-or-self::* [@level=$level]/@id">
             <xsl:attribute name="class">home current</xsl:attribute>
         </xsl:if>
         <a href="/">Home</a>
       </li>
      <xsl:for-each select="$currentPage/ancestor-or-self::*
      [@level=$level]/*
      [@isDoc and string(umbracoNaviHide) != '1']">
  <li>
     <xsl:if test="@id = $currentPage/@id">
        <xsl:attribute name="class">current</xsl:attribute>
      </xsl:if>
    <a class="navigation" href="{umbraco.library:NiceUrl(@id)}">
      <span><xsl:value-of select="@nodeName"/></span>
    </a>
  </li>


</xsl:for-each>
</ul>

    </xsl:template>

It cycles through at least one xml sheet (I’m not terribly familiar with xslt) which generates the menu by appending pages onto the menu system. I believe this snippet of xml is of great significance in this process

<p><a href="http://umbraco.org/get-started"
title="Get Started with Umbraco">Get more information</a> about the
umbraco way.</p>
]]></bodyText>
        <umbracoNaviHide>0</umbracoNaviHide>
      </umbTextpage>
      <umbTextpage id="1071" parentID="1068" level="3" writerID="0" creatorID="0" nodeType="1059" template="1052" sortOrder="3" createDate="2010-09-07T13:19:40" updateDate="2012-06-04T21:47:02" nodeName="Getting started" urlName="getting-started" writerName="redacted" creatorName="redacted" path="-1,1061,1068,1071" isDoc="">

        <bodyText><![CDATA[
<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>
]]></bodyText>
        <umbracoNaviHide>0</umbracoNaviHide>
      </umbTextpage>
    </umbTextpage>
    <umbTextpage id="1177" parentID="1061" level="2" writerID="0" creatorID="0" nodeType="1059" template="1052" sortOrder="4" createDate="2012-06-05T11:28:36" updateDate="2012-06-05T11:33:13" nodeName="Our Clients" urlName="our-clients" writerName="redacted" creatorName="redacted" path="-1,1061,1177" isDoc="">
      <bodyText><![CDATA[
<h3>Our Clients</h3>

<p>etc. etc.</p>

<!-- endUmbMacro -->]]></bodyText>
      <umbracoNaviHide>0</umbracoNaviHide>
    </umbTextpage>
    <umbTextpage id="1072" parentID="1061" level="2" writerID="0" creatorID="0" nodeType="1059" template="1052" sortOrder="5" createDate="2010-09-07T13:20:06" updateDate="2012-06-08T11:23:26" nodeName="Contact us" urlName="contact-us" writerName="redacted" creatorName="redacted" path="-1,1061,1072" isDoc="">
      <bodyText><![CDATA[
<h3>Office address</h3>

For instance, nodeName is used as the strings for the contents of the tab (i.e. there are tabs labelled “Our Clients” and “Contact Us” from the xml code above, and they are ordered in the same manner as they are written above.

My question relates to the fact that I need to be able to change the background colours of the various tabs – not have them all the same colour. However, the only tab that has a unique ID seems to be the Home tab. In the relevant CSS data:

#naviWrap { background-color:#000; background-color:rgba(0,0,50,0.5); margin:15px 0 0 0; } /*menu */
#topNavigation { border-left:1px solid rgba(255,255,255,0.25); margin:0 auto; width:960px; }
#topNavigation li { border-left:1px solid rgba(0,0,0,0.25); border-right:1px solid rgba(255,255,225,0.25); display:inline-block; height:60px; line-height:60px; text-align:center; }
#topNavigation li a { color:#fff; display:block; font-size:11px; height:60px; padding:0 30px; text-decoration:none; text-transform:uppercase; font-style: italic; font-weight:bold;}
#topNavigation li a:hover { background-color:#000; background-color:rgba(0,0,0,0.2); text-decoration:none; }
#topNavigation li.current { background-color:#200; background-color:rgba(350,0,100,0.5); }
#topNavigation li.current a {}

li.current relates to the home tab (the first tab in the menu) while the rest of the tabs are controlled by naviWrap. ‘li a’ relates to the text color of the tabs.

So is there any way in which I can individually control the tabs in the CSS; I’m thinking that it must either be done at the xml level, (e.g. in relation to such things as umbTextpage id=”1177″), or alternatively in the xslt menu generation, where some point of reference be assigned to the menu tabs at this point.

Sorry about the overly long question – any help would be massively appreciated!

Answer 1

you could try this, in your xsl file, this is the bit that’s inside the for-each loop:

  <li>
     <xsl:attribute name="class">list-<xsl:value-of select="position()"/><xsl:if test="@id = $currentPage/@id"> current</xsl:if></xsl:attribute>
    <a class="navigation" href="{umbraco.library:NiceUrl(@id)}">
      <span><xsl:value-of select="@nodeName"/></span>
    </a>
  </li>

basically you add a class on each <li> based on the position() in your for-each loop, giving you the following type of output:

<li class="list-0">
<li class="list-1">
<li class="list-2 current"> //current will appear on the right li item as before, along with list-n class

and then it will be very easy to target each of the <li> with css:

#topNavigation li.list-0 {
   background-color: #f00;
}
#topNavigation li.list-1 {
   background-color: #0f0;
}
#topNavigation li.list-2 {
   background-color: #00f;
}

etc.

my xslt is very rusty though, so the syntax may be incorrect – but it’s should be good enough to point you to the right direction!