letting the editor add a class to dynamic list items

Joost Peeters 1 post 20 karma points

Oct 27, 2014 @ 13:18

Hello everyone,

I would like to make it possible for list items to display in different colors depending on the subject. The editer of the page should be able to choose out of radio buttons. I have classes and backgrounds set up in my CSS to give the items the styling. Now i want the editor to give a class to a new item.

I havo no experience with XSLT and this is my code whitch i just copied from someone else.

Thanks for the help!!

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>

<xsl:stylesheet

                version="1.0"

                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

                xmlns:msxml="urn:schemas-microsoft-com:xslt"

                xmlns:umbraco.library="urn:umbraco.library" xmlns:Examine="urn:Examine"

                exclude-result-prefixes="msxml umbraco.library Examine ">





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



<xsl:param name="currentPage"/>



<xsl:template match="/">



               <!-- Root Node -->

    <xsl:variable name="siteRoot" select="$currentPage/ancestor-or-self::*[@level = 1]" />



                <!-- Top -->

                <ul>

                               <xsl:for-each select="$siteRoot/* [@isDoc and @level = 2 and string(umbracoNaviHide) != '1']">

                                               <li>

                                                               <xsl:attribute name="class">

                                                                              <xsl:value-of select="$currentPage/data [@alias = 'Titel']" />

                </xsl:attribute>



                                                               <xsl:if test="HomePageNode/@id = $currentPage/@id">

                                                                              <xsl:attribute name="class">

                                                                                              <xsl:text>selected</xsl:text>

                                                                              </xsl:attribute>

                                                               </xsl:if>



                                                               <!--Create a link to the homepage -->

                                                               <xsl:value-of select="$currentPage/data[@alias='Titel']" />

                                                               <a href="{umbraco.library:NiceUrl(@id)}">

                                                                              <xsl:value-of select="@nodeName" />

                                                               </a>

                                               </li>

                               </xsl:for-each>

                </ul>

</xsl:template>

</xsl:stylesheet>

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Oct 27, 2014 @ 14:54

Hi Joost and welcome to our.

The code that you have postet is a mix of XSLT to new and old XML schema. The new XML schema was introduced in Umbraco 4.5 and heigher. There are some major difference between the old and new XML schema. You can read about the difference here:

http://our.umbraco.org/wiki/reference/xslt/45-xml-schema

http://our.umbraco.org/wiki/reference/xslt/45-xml-schema/xslt-examples-updated-to-new-schema

If you already were familar with the old XML schema you have the possiblity to switch to the old, a description on how this can be done is here: http://our.umbraco.org/wiki/reference/xslt/45-xml-schema/switching-between-old-and-new-schema

But with this code, you user should be able to choose a color from a radio buttion list on every page, and then your li tag would get the class of that e.g red.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet 
  version="1.0" 
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
  xmlns:msxml="urn:schemas-microsoft-com:xslt" 
  xmlns:umbraco.library="urn:umbraco.library"
  exclude-result-prefixes="msxml umbraco.library">
    
<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<xsl:template match="/">

<!-- Root Node -->

<xsl:variable name="siteRoot" select="$currentPage/ancestor-or-self::*[@level = 1]" />
    <ul>
        <xsl:for-each select="$siteRoot/* [@isDoc and @level = 2 and string(umbracoNaviHide) != '1']">    
            <li>
                <xsl:if test="./titel!=''">
                    <xsl:attribute name="class">
                        <xsl:value-of select="umbraco.library:GetPreValueAsString(./titel)" />
                    </xsl:attribute>
                </xsl:if>
                <a href="{umbraco.library:NiceUrl(@id)}">
                    <xsl:value-of select="@nodeName" />
                </a>
            </li>
        </xsl:for-each>
    </ul>
</xsl:template>
</xsl:stylesheet>

Hope this helps,

/Dennis

Copy Link

is working on a reply...

Flag this post as spam?

Letting the editor add a class to dynamic list items