Thread: Adding classes to list items

Ok, I'm redesigning a site here: https://www.davidscottco.com/default.aspx?skinid=3 and I'm wonding if it's possible to add a class to every fourth list item on my homepage xml package. As you can see at the link, I'd like to assign a class of "first" to every fourth fourth item so it doesn't get hung up.

Here's my code:

Code:

<?xml version="1.0" standalone="yes" ?>
<!-- ###################################################################################################### -->
<!-- Copyright AspDotNetStorefront.com, 1995-2009.  All Rights Reserved.					                -->
<!-- http://www.aspdotnetstorefront.com														                -->
<!-- For details on this license please visit  the product homepage at the URL above.		                -->
<!-- THE ABOVE NOTICE MUST REMAIN INTACT.                                                                   -->
<!-- ###################################################################################################### -->
<package version="2.1" displayname="Categories" debug="false" includeentityhelper="true">
	<PackageTransform>
		<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:aspdnsf="urn:aspdnsf" exclude-result-prefixes="aspdnsf">
			<xsl:output method="html" omit-xml-declaration="yes"/>

			<xsl:param name="CategoryID">
				<xsl:choose>
					<xsl:when test="/root/System/PageName = 'showmanufacturer.aspx' or /root/System/PageName = 'showsection.aspx' or /root/System/PageName = 'showdistributor.aspx' or /root/System/PageName = 'showvector.aspx' or /root/System/PageName = 'showgenre.aspx'">0</xsl:when>
					<xsl:when test="/root/System/PageName = 'showcategory.aspx' and boolean(/root/QueryString/categoryid)">
						<xsl:value-of select="/root/QueryString/categoryid"/>
					</xsl:when>
					<xsl:when test="(/root/System/PageName = 'showcategory.aspx' or /root/System/PageName = 'showproduct.aspx') and boolean(/root/Cookies/lastviewedentityinstanceid) and /root/Cookies/lastviewedentityname = 'Category'">
						<xsl:value-of select="/root/Cookies/lastviewedentityinstanceid"/>
					</xsl:when>
					<xsl:otherwise>0</xsl:otherwise>
				</xsl:choose>
			</xsl:param>

			<xsl:param name="AncestorID">
				<xsl:for-each select="/root/EntityHelpers/Category//Entity[EntityID = $CategoryID and Name = 'Consumer']">
					<xsl:value-of select="ancestor::*/EntityID"/>
				</xsl:for-each>
			</xsl:param>

			<xsl:param name="ParentID">
				<xsl:for-each select="/root/EntityHelpers/Category//Entity[EntityID = $CategoryID]">
					<xsl:value-of select="parent::*/EntityID"/>
				</xsl:for-each>
			</xsl:param>

			<xsl:template match="/">
				<xsl:element name="ul">
					<xsl:attribute name="class">
						<![CDATA[tame2]]>
					</xsl:attribute>

					<xsl:apply-templates select="/root/EntityHelpers/Category/Entity">
						<xsl:with-param name="prefix" select="''"/>
						<xsl:with-param name="level" select="1"/>
					</xsl:apply-templates>

				</xsl:element>
			</xsl:template>
			
			<xsl:template match="Entity">
				<xsl:param name="prefix"></xsl:param>
				<xsl:param name="eName" select="aspdnsf:GetMLValue(Name)" />
				<xsl:param name="level"/>
	
				<xsl:choose>
					<!--On specific page show categories only the second level under every industry-->
					<!--Don't know how api work. so check the page name what will list only second level from every industry-->
					<xsl:when test="(/root/System/PageName = 'default.aspx') or 
									(/root/System/PageName = 'Default.aspx') or 
									 (/root/System/PageName = 'shoppingcart.aspx') or
									 (/root/System/PageName = 'ShoppingCart.aspx') or
									 (/root/System/PageName = 'checkoutshipping.aspx') or
									 (/root/System/PageName = 'checkoutpayment.aspx') or
									 (/root/System/PageName = 'checkoutreview.aspx') or
									 (/root/System/PageName = 'orderconfirmation.aspx') or
									 (/root/System/PageName = 'showproduct.aspx') or
									 (/root/System/PageName = 'account.aspx') or
									 (/root/System/PageName = 'wishlist.aspx') or
									 (/root/System/PageName = 'driver.aspx')">
								<xsl:for-each select="Entity">
									<li class="li_hpcat">
									<a href="{concat('c-',EntityID,'-',SEName,'.aspx')}">
									<xsl:value-of select="aspdnsf:LookupEntityImage(EntityID, 'Category', 'icon', 0, '')" disable-output-escaping="yes" /><br />
										<xsl:value-of select="Name"/>
									</a>
									</li>
								</xsl:for-each>
					</xsl:when>

					<!--Default: Show only specific category from Second level-->
					<xsl:otherwise>
						
						<!--for debug <xsl:value-of select="$level"/>-->
						<xsl:choose>
							<!--If first level(Industry), don't show-->
							<xsl:when test="number($level) = 1">
								<xsl:if test="count(child::Entity)&gt;0 and (EntityID = $CategoryID or descendant::Entity/EntityID = $CategoryID)">
									<ul class="tame2">
										<xsl:apply-templates select="Entity">
											<xsl:with-param name="prefix" select="concat($prefix, '')"/>
											<xsl:with-param name="level" select="number($level) + 1"/>
										</xsl:apply-templates>
									</ul>
								</xsl:if>
							</xsl:when>
							
							<!--If other level(Sub-category), show-->
							<xsl:otherwise>
								<li class="li_hpcat">
									<xsl:value-of select="$prefix" />
									<xsl:if test="number(ParentEntityID) != 0">
										<div id="mainImg">
                					
              							</div>
										<a href="{concat('c-',EntityID,'-',SEName,'.aspx')}">
										<xsl:value-of select="aspdnsf:LookupEntityImage(EntityID, 'Category', 'icon', 0, '')" disable-output-escaping="yes" /><br />
											<xsl:value-of select="$eName"/>
										</a>
									</xsl:if>

									<xsl:if test="count(child::Entity)&gt;0 and (EntityID = $CategoryID or descendant::Entity/EntityID = $CategoryID)">
										<ul class="tame2">
											<xsl:apply-templates select="Entity">
												<xsl:with-param name="prefix" select="concat($prefix, '')"/>
												<xsl:with-param name="level" select="number($level) + 1"/>
											</xsl:apply-templates>
										</ul>
									</xsl:if>
								</li>
							</xsl:otherwise>
						</xsl:choose>
						

					</xsl:otherwise>
				</xsl:choose>
				
			</xsl:template>

		</xsl:stylesheet>
	</PackageTransform>
</package>

Any advice / help would be appreciated.

Matt

I'm not sure what you are referring to by saying 'every fourth item'.

Something like this should work :-

Replace :-

HTML Code:

<xsl:for-each select="Entity">
	<li class="li_hpcat">
	<a href="{concat('c-',EntityID,'-',SEName,'.aspx')}">
	<xsl:value-of select="aspdnsf:LookupEntityImage(EntityID, 'Category', 'icon', 0, '')" disable-output-escaping="yes" /><br />
		<xsl:value-of select="Name"/>
	</a>
	</li>
</xsl:for-each>

With :-

HTML Code:

<xsl:for-each select="Entity">
	<li>

		<xsl:attribute name="class"> 
			<xsl:choose> 
				<xsl:when test="position() mod 4 = 0"> 
					<xsl:text>li_hpcat first</xsl:text> 
				</xsl:when> 
				<xsl:otherwise> 
					<xsl:text>li_hpcat</xsl:text> 
				</xsl:otherwise> 
		  </xsl:choose> 
		</xsl:attribute> 

		<a href="{concat('c-',EntityID,'-',SEName,'.aspx')}"> 
			<xsl:value-of select="aspdnsf:LookupEntityImage(EntityID, 'Category', 'icon', 0, '')" disable-output-escaping="yes" /><br /> 
			<xsl:value-of select="Name"/> 
		</a> 

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

TTFN

BFG

Thanks for the help!

Ok, that does add a class to the fourth list item, but I need to take into account the first list item as well. I just changed the list items to a 33% width and need the first list item and the first item on each row to have that class assigned.

<xsl:when test="position() mod 4 = 0" or position() = 1>

Seems like I was beaten to it by the incredibly handsome Robert from GoVedia.

Looks like his format was a little off though :-

HTML Code:

<xsl:when test="position() mod 4 = 0 or position() = 1">

TTFN

BFG

That worked!

Good catch BFG