Manipulation of xslt menu through CSS

sugumar

New Member
Okay; using the Umbraco CMS I have a xslt menu being generated in the following manner:\[code\] <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="http://stackoverflow.com/">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="http://stackoverflow.com/questions/11080576/{umbraco.library:NiceUrl(@id)}"> <span><xsl:value-of select="@nodeName"/></span> </a> </li></xsl:for-each></ul> </xsl:template>\[/code\]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\[code\]<p><a href="http://umbraco.org/get-started"title="Get Started with Umbraco">Get more information</a> about theumbraco 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>\[/code\]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:\[code\]#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 {}\[/code\]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!
 
Back
Top