Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
Ok I changed the word to class still nothing changed. now I move the <xsl:attribute name="class"> line before which tag? Do I need to move the </xsl:attribute>line too?
Not sure if it helps but I have a document type "Activity" which has a property "Activity Extras" with an alias of "activityextras" which is a document type of "Unamed Checkbox Group" with a Property editor alias of "Umbraco.CheckBoxList"
Hi Donald
Oh my...this post is really looking messy now - It's a bug in the forum unfortunately.
However...you should place the attribute stuff after the beginning list tag your starting < li > tag.
Hope this helps.
/Jan
I did it like that but it still doesnt show anything. here is my code.
Hi Donald,
When Jan said that you should place the attribute stuff after the beginning list tag your starting < li > tag he mean that you just should added in the <li> from your code above you have an <li> tag inside a <li> tag. Try to see my code below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
<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"/>
<!-- Input the documenttype you want here -->
<xsl:variable name="level" select="2"/>
<xsl:variable name="startNode" select="$currentPage/ancestor-or-self::*[@level = $level]" />
<xsl:variable name="nodesToShow" select="$startNode/*[@isDoc][not(umbracoNaviHide = 1)]" />
<xsl:template match="/">
<!-- The fun starts here -->
<xsl:if test="$nodesToShow">
<img src="/media/1133/actheader2.png" alt="Activities in this Section" class="acttitle" />
</xsl:if>
<ul>
<xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [@isDoc and string(umbracoNaviHide) != '1']">
<li>
<xsl:attribute name="class">
<xsl:if test="yourproperty = 'V'">icon-v </xsl:if>
<xsl:if test="yourproperty = 'S'">icon-s </xsl:if>
<xsl:if test="yourproperty = 'PM'">icon-pm </xsl:if>
</xsl:attribute>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="@nodeName"/>
</a>
</li>
</xsl:for-each>
</ul>
</xsl:template>
</xsl:stylesheet>
Then your <li> should get the class depending on which of our if test conditions that are true
Hope this helps,
/Dennis
Still doesn't show the words Icon-v here is my code.
Hi Donald
Could you post a screendump showing an Umbraco document where you have chosen the tags? And is the value in activityextras in fact uppercase or lower case?
/Jan
Sure here you go. I will need to delete these images later though :P
Hi Donald
Sorry, I meant of the content document in the content section of Umbraco :)
Cheers, Jan
Yes sorry i had trouble uploading multiple images please refresh
Hi Donald
Ah ok :) Got it now...
What happens if you try to just write out the value using <xsl:value-of select="activityextras" /> - Does that return anything? Just do it inside your list element.
Unfortunately it's been a while since I've done some serious Umbraco development but I suspect that you might not be able to achieve the goal with the above code since the data is saved in a JSON like format in the umbraco.config file, which the xslt is trying to read...that might be the culprit if I'm not mistaken.
But let's see if you can get a value by doing the above line of code.
/Jan
A-HA I did that and it prints V,S so the value is stored as 1 value not two so its not V or S its V,S. so I guess I have to make them separate propertys?
Nope sorry I was wrong i removed the selected S so it just had a V and it didnt work if I asked it to show the selected value it shows a V
Hi Donald
Aaah of course! My bad! Do'h! It's returning the values comma-seperated if more than one is chosen.
When only V is chosen it's still writing out something - It's just being written out after the text in your second screendump. We can work with that!
All you need to do is to change the if statements like below.
<xsl:if test="contains(activityextras, 'V')">icon-v </xsl:if>
<xsl:if test="contains(activityextras, 'S')">icon-s </xsl:if>
Just try and replace your current if conditions using the above code. It should work.
Hope it makes sense.
Cheers, Jan
IT WORKS! Thank YOU! now I just put image tags in place in place of the icon-v etc?
Hi Donald
You're very welcome :)
Well, since the images are not content related but more iconic I would add them as background images in the CSS classes instead.
Does this make sense?
/Jan
It makes sense but im not sure how I would apply that. do i need to assign a class to each value or something
Hi Donald
Well, you have already added the class to the html that is being generated.
So all you need to do is add each class to the CSS file and write something like
.icon-v{
background: url(/path/to/your/v-icon.png) no-repeat;
}
.icon-s{
background: url(/path/to/your/s-icon.png) no-repeat;
}
Does this make sense?
/Jan
I dont think I have put the icon-s and icon-v in the html.. how would I do that?
Hi Donald
That's what we just done in the XSLT - In the rendered html output you should see the icons if you choose view source and then search for icon-v for instance.
So you really just need to make the declaration for it in the .css file.
Hope this makes sense.
/Jan
I added this CSS but its not working
Hi Donald
Could you please paste your current XSLT code?
From the screendump above it seems that you're using so the "tag" is written out as text instead of using the
Cheers, Jan
Hi Donald
Ok - You need to write the code like this in order to apply the class to the
<li>
<xsl:attribute name="class">
<xsl:if test="contains(activityextras,'V')">icon-v</xsl:if>
<xsl:if test="contains(activityextras,'S')">icon-s</xsl:if>
</xsl:attribute>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="@nodeName" />
</a>
</li>
Just copy/paste the above code overriding your own code in the for-each loop. Afterwards check you html source and see if the classes have been added to the
Hope this helps.
/Jan
Argh...the editor messed up the code. Trying again to see if it's formatted more nicely.
<li>
<xsl:attribute name="class">
<xsl:if test="contains(activityextras,'V')">icon-v</xsl:if>
<xsl:if test="contains(activityextras,'S')">icon-s</xsl:if>
</xsl:attribute>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="@nodeName" />
</a>
</li>
It works perfect thank you!
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.
How to apply class to individual result
I have the code below which lists pages. Next to pages that have had attributes in a check box list checked there are letters listed. i.e. if the check the V and S check boxes the result will be V, S
I want to apply a border/box style around each individual letter but right now when I put the span class="extras" in it puts the border around all the results i.e. "V,S" instead of just the "V" then a "," Then the "S"
Hi Donald
When you select some of the items do you then make a postback, which sets a querystring? Then you should be able to make a check on the querystring value and set the desired class based on that.
Another approach could be to set the class purely by using JavaScript when clicking.
But I think it might help a bit if you could somehow show the page where this should happen so it's easier to give you some better advice on how to achieve your goal :)
Cheers, Jan
Sure thing. Below is a picture of the left column as you can see it lists a page of nodes and any node that has a V or S box checked gets those letters added to the right. I would also settle for adding icons. basically we are trying to let the visitors know what type of content is on that page without having to click it. a V lets them know that page has a video.
Hi Donald
Ok, so I'm a bit confused now... Is the only objective to add an icon net to the list item in order to make it more clear what type of content the user can find by clicking one of the items?
Or does it also need to do something specific on click as well?
If it's a matter of setting the icons you could add a new property on the documents in Umbraco where it's possible to select the type of content. For instance you could create a dropdown datatype that could have the values "text", "image" and "video" and then put it on the document type where an editor can then select if the type should be one of the three. It could also be made like a checkbox if multiple icons are needed.
Then in your XSLT you could do a check on the property and see what value it contains and add a class attribute to the list item, which you can use to show the desired icon.
So in your XSLT it could look something like this
Since you probably need to check on more values you might end up doing your checking using a
<xsl:choose>check though, the above is just a simple example.I hope this makes any sense.
Cheers, Jan
Yes just showing an icon would be ideal. sometimes it will be 1 icon sometimes it will be 3 icons. Could you help me get a little more specifically with this?
Hi Donald
Ok - As I write above you'll need to be able to tag your content from the Umbraco backoffice to be able to do this.
If you have 3 categories for instance then you need a datatype as I described above where you add these values.
On each document that is displayed on your list you'll need to choose a "tag" in the Umbraco backoffice and then in your XSLT you need to add a class based on the value that has been chosen in Umbraco - On that class you can then define, which icon to show in your css.
I hope this helps at bit and makes sense.
Cheers, Jan
I think check box group would work best right now so that i dont have to worry about the users typing the tags wrong in the back end. if I want to make an image show up if they select any combination of the three boxes "V" "S" "PM" what would I put in the xslt?
Hi Donald
If it's possible for an aritcle to have more than one icon I would probably do a check like this
This will add a class for each of the icons on the
<li>element in this example. But you can add the class to any html element that you would like. You just need to know that you should use the xsl:attribute tag. Yourproperty should of course be the name of the alias you use to refer to your defined datatype (The checkbox list).Then in your css you can define each class and the icon they should show.
Hope this makes sense.
Cheers, Jan
Ok im sorry jan this looks helpful but the page looks the same as before.. shouldn't i see the words icon-v and icon-s since this has both of those? but i just see the normal link. Do I need to add CSS
Hi Donald
1: There is no offical attribute called "emptyclass". It should be named "class". This will be applied to the element in the rendered source.
2: You also need to add the attribute declaration right after the opening tag of where you want the class attribute to be applied. So change the name to class and move the declaration right after the opening
3: When you have done the above, view your html source and see if the class attribute is applied
Hope this helps.
/Jan