Well yes, but I also want there to be many variant of them, all driven via the content pages.
Each page, as part of it's content will have an ICON image.
References to this image should be inserted into the CSS, so that for each menu item there is a new class and a new CSS entry and background image associated with it.
So you want dynamic CSS that's not inline, right? There are two options I think...
Firstly, you could write an XSLT macro which outputs your CSS dynamically as plain text, then include it at the top of your page in <style type="text/css"></style> tags. i.e. An embedded style sheet. This should be simple to do but it does mean that the CSS is on the page (embedded), albeit separate from the mark-up. You just need to make sure the class names generated for the CSS tie up with the class names in your HTML (they could be based on page URL or node id or position, as per Fuji's post above - so long as they're unique to the node and valid syntax it doesn't matter).
Secondly, if you want to go a step further and use a linked style sheet, you should be able to do this by changing the content type in your XSLT macro to serve the content as text/css, like this
So you'd create a content node which calls a template which contains nothing but a call to the macro (not even any white space in the template, just a macro call) which outputs the CSS content with the correct content type. You could use an alternative template to call this from any content node.
I've not got time right now to drum up a full example, but post back here if you get stuck and I'll try to have a look later today. Hopefully this points you in the right direction in the meantime though.
How can I make a CSS content dynamic.
Hi all,
have been scratching the head over this for a while and have come up blank.
The content my user creates (generated via XSLT) looks like this....
This is obviously for styling the "investments" menu item.
As you can see, there is a background image used which is specific to each item.
What I need to be able to do is generate this output for the style sheet dynamically.
The customer wants:
How can I achieve this?
I cannot see any way to obviously create a CSS file from XSLT (or other ways).
All help appreciated!
Thanks,
Cam
Hi Cam,
One possible way to achieve this would be by making some chances to your xslt and css stylesheet.
Instead of calling your class="home" or class="investments" you could simply name it item-1, item-2.
Then in your xslt have something like this which will add the count 1,2,3 etc to your class since the navigation is dynamic.
You can give this a try.
//Fuji
I do not understand how this would enable me to dynamically create CSS at all. It's just the HTML content which I have no issue with.
What I need is to have the page content image used in CSS ....
.nav li.investments a:link,.nav li.investments a:visited {background-image:url(../img/nav-investments-img-sprite.png);
background-repeat:no-repeat;
background-position:25px0px;
This way when someone comes up with the next great new nav item and image that is to be used, it is only a matter of changing content, not the CSS.
We don't let anyone near the CSS....
.nav li.next_new_idea a:link,.nav li.next_new_idea a:visited {background-image:url(../img/nav-next_new_idea-img-sprite.png);
background-repeat:no-repeat;
background-position:25px0px;
Hi Cam,
Sorry i miss understood you there. So you want to be able to change the css class of <li> at anytime right?
Well yes, but I also want there to be many variant of them, all driven via the content pages.
Each page, as part of it's content will have an ICON image.
References to this image should be inserted into the CSS, so that for each menu item there is a new class and a new CSS entry and background image associated with it.
Hi Cameron,
So you want dynamic CSS that's not inline, right? There are two options I think...
Firstly, you could write an XSLT macro which outputs your CSS dynamically as plain text, then include it at the top of your page in <style type="text/css"></style> tags. i.e. An embedded style sheet. This should be simple to do but it does mean that the CSS is on the page (embedded), albeit separate from the mark-up. You just need to make sure the class names generated for the CSS tie up with the class names in your HTML (they could be based on page URL or node id or position, as per Fuji's post above - so long as they're unique to the node and valid syntax it doesn't matter).
Secondly, if you want to go a step further and use a linked style sheet, you should be able to do this by changing the content type in your XSLT macro to serve the content as text/css, like this
<xsl:value-of select="umbraco.library:ChangeContentType('text/css')"/>So you'd create a content node which calls a template which contains nothing but a call to the macro (not even any white space in the template, just a macro call) which outputs the CSS content with the correct content type. You could use an alternative template to call this from any content node.
I've not got time right now to drum up a full example, but post back here if you get stuck and I'll try to have a look later today. Hopefully this points you in the right direction in the meantime though.
Hi Dan.
I think the second option is what I was after
An obvious solution when you think about it.
Excellent. I'll give it a go when I get back in on Thursday.
Cheers.
So I manage to get this working using the second method as outlined above - thanks Dan.
The only "issue" as such is that my style sheet file is named as an ASPX file rather than a CSS file.
Any ideas as to how to fix this? Would rather it be a CSS file if possible. Tried playing around with URL rewriting but with no success.
Cheers,
Cam
is working on a reply...