I'm working on a site (4.7) where each 'section' requires a supplementary stylesheet in order to provide the correct styles. I've just spent some time creating templates for each section where the only difference between them is the css reference at the top:
<link href="/css/blue.css" />
Aside from this difference between templates, they're identical which means I have lots of duplicate templates where there only difference is the stylesheet reference. Is there a clever way to allow the editors to select which stylesheet gets added without having to create a page from a 'blue' template for example?
Ideally, I'd have a dropdown or similar that allowed them to select where they're creating the new page. then behind the scenes, that selection would map to a stylesheet that would then get added to the page, such as:
Section 1 = pink.css
Section 2 = green.css
The only way I can think of doing this is to add the following to the template:
and then creating a textstring property called 'section' on the template where they have to manually type the name of the stylesheet that needs loading to provide the right styles for that section. I dont link this idea becuase it means they need to always spell it correctly, they need to know what is available, and it just feels hacky. A pre-populated dropdown would be neater, but still feels wrong.
Is there anything that already does this in Umbraco? I'm using a clean install so no starter kits installed.
I had the same need and I just implemented the following within 4.7 and it appears to work great.
The uComponents package has a file picker data type that allows you to select a file from a directory. I created my own data type "Style Sheet Picker" and selected "uComponents: File Picker" as the Render control. I then browsed my folder structure and selected my css folder. I setup a document type with a "Style Sheet" property that uses my "Style Sheet Picker" data type which allows me to select a stylesheet for a content page. The control returns the file path "e.g. /css/DefaultSite.css". Add "<link rel="stylesheet" type="text/css" href="<umbraco:Item field="styleSheet" runat="server"></umbraco:Item>" />" to your template to pull in the slected stylesheet.
Allow users to choose stylesheets
Hi all,
I'm working on a site (4.7) where each 'section' requires a supplementary stylesheet in order to provide the correct styles. I've just spent some time creating templates for each section where the only difference between them is the css reference at the top:
<link href="/css/blue.css" />
Aside from this difference between templates, they're identical which means I have lots of duplicate templates where there only difference is the stylesheet reference. Is there a clever way to allow the editors to select which stylesheet gets added without having to create a page from a 'blue' template for example?
Ideally, I'd have a dropdown or similar that allowed them to select where they're creating the new page. then behind the scenes, that selection would map to a stylesheet that would then get added to the page, such as:
Section 1 = pink.css
Section 2 = green.css
The only way I can think of doing this is to add the following to the template:
<link rel="stylesheet" href="/css/<umbraco:Item runat="server" field="section" />.css?v=2">
and then creating a textstring property called 'section' on the template where they have to manually type the name of the stylesheet that needs loading to provide the right styles for that section. I dont link this idea becuase it means they need to always spell it correctly, they need to know what is available, and it just feels hacky. A pre-populated dropdown would be neater, but still feels wrong.
Is there anything that already does this in Umbraco? I'm using a clean install so no starter kits installed.
Thanks for any help, Phil
Phil,
I don't think a stylesheet chooser datatype exists in umbraco, but would be pretty straightforward to build one.
Just create a user control, add some code to list all available stylesheets and to retrieve/save selected stylesheet.
Create a datatype and use usercontrol wrapper as render control;
Add new property on your doc type where datatype is your newly created datatype
Cheers,
/Dirk.
I had the same need and I just implemented the following within 4.7 and it appears to work great.
The uComponents package has a file picker data type that allows you to select a file from a directory. I created my own data type "Style Sheet Picker" and selected "uComponents: File Picker" as the Render control. I then browsed my folder structure and selected my css folder. I setup a document type with a "Style Sheet" property that uses my "Style Sheet Picker" data type which allows me to select a stylesheet for a content page. The control returns the file path "e.g. /css/DefaultSite.css". Add "<link rel="stylesheet" type="text/css" href="<umbraco:Item field="styleSheet" runat="server"></umbraco:Item>" />" to your template to pull in the slected stylesheet.
File Picker Demo:
http://ucomponents.codeplex.com/wikipage?title=FilePicker&referringTitle=Documentation
uComponent Downloads:
http://ucomponents.codeplex.com/releases
I hope this helps!
Karl
Awesome Karl,
Didn't know about this. A big +1 for you! I should look more often into uComponents' functionality :D
Cheers,
/Dirk
Thank you guys, thats perfect.
is working on a reply...