I'd like web editors to be able to choose the background colour of their respective website.
I'd like them to be able to set this colour in the top document type.
I know a little bit about recursive xslt but there are two things I still need help with in order to be able to solve this problem.
1: Which data type do I use so that the editor can make a colour selection from a full colour palette?
2: What is the best way to implement the colour on each page? Should I use a style sheet within the page template itself, rather than external css? And if so, how do I create an inline style that draws data from the top document type. I have already know how to print recursive data (Thanks to Tom Fulton) but don't know how to use it within a style.
First: Make sure the client knows what kind of havoc they're able to unleash when you give them a "full colour palette" :-) I'd fight *very* hard not to give them that ...
I actually don't know of a data type that has a full palette - (Warren Buckley made one for Umbraco 5, I think? So if you're on V5 do a search for that).
I'd have used the "Approved Color" data type, but unfortunately it doesn't seem to work in clients' browsers - sad :(
What I've done on quite a few sites though, is to create a simple "Colors" section, where any number of custom Colors could be created (simple "Color" document type just using the node name for referencing), e.g.:
Colors
- Royal Blue
- Red Hair
- LogoStarYellow
etc.
I've then created a simple dropdown data type to select from that list, and where ever the "color" was needed, I'd insert a class attribute using a prefix (e.g.: "col-") and the @urlName built-in property of the selected value's node (the @urlName is "safe" for a URL and thus also a valid CSS class name, e.g. "royal-blue" or "red-hair"). That way I'd still have control over the exact CSS values and choices to make sure everything was tolerable to llok at :-)
That said, you could easily create a hexValue property on the Color document type and allow them to type a value there and use that instead of the safer class method.
...and if you are really brave and want to give them the full palette, you can use the True Color Picker datatype to give them a full color picker. To use this though you would then need to use an inline stylesheet or style tag.
@Chriztian, does the Approved Color still not work? I remember a browser bug a few versions ago but thought it was fixed...could be wrong though as I haven't tried it.
One way you could get similar behavior us to use the Image Dropdown from uComponents and just take screenshots of each color :)
On a side note, I recently was forced to make a site "fully" customizable where the client could change the site background color, text/link color, header background color/images, etc etc. I wrote some code that takes document type properties and dumps them into CSS files. In this case we were using Bootstrap and .LESS, so we were able to update an @variable in one place and have it take effect everywhere with minimal cutomizations to the CSS framework required. Been thinking about packaging it up if others had a use, perhaps it might be useful in this case?
Changing website background colour
I'd like web editors to be able to choose the background colour of their respective website.
I'd like them to be able to set this colour in the top document type.
I know a little bit about recursive xslt but there are two things I still need help with in order to be able to solve this problem.
1: Which data type do I use so that the editor can make a colour selection from a full colour palette?
2: What is the best way to implement the colour on each page? Should I use a style sheet within the page template itself, rather than external css? And if so, how do I create an inline style that draws data from the top document type. I have already know how to print recursive data (Thanks to Tom Fulton) but don't know how to use it within a style.
I hope somone can help.
Thanks
Hi Stephen,
First: Make sure the client knows what kind of havoc they're able to unleash when you give them a "full colour palette" :-) I'd fight *very* hard not to give them that ...
I actually don't know of a data type that has a full palette - (Warren Buckley made one for Umbraco 5, I think? So if you're on V5 do a search for that).
I'd have used the "Approved Color" data type, but unfortunately it doesn't seem to work in clients' browsers - sad :(
What I've done on quite a few sites though, is to create a simple "Colors" section, where any number of custom Colors could be created (simple "Color" document type just using the node name for referencing), e.g.:
I've then created a simple dropdown data type to select from that list, and where ever the "color" was needed, I'd insert a class attribute using a prefix (e.g.: "col-") and the @urlName built-in property of the selected value's node (the @urlName is "safe" for a URL and thus also a valid CSS class name, e.g. "royal-blue" or "red-hair"). That way I'd still have control over the exact CSS values and choices to make sure everything was tolerable to llok at :-)
That said, you could easily create a hexValue property on the Color document type and allow them to type a value there and use that instead of the safer class method.
/Chriztian
...and if you are really brave and want to give them the full palette, you can use the True Color Picker datatype to give them a full color picker. To use this though you would then need to use an inline stylesheet or style tag.
@Chriztian, does the Approved Color still not work? I remember a browser bug a few versions ago but thought it was fixed...could be wrong though as I haven't tried it.
One way you could get similar behavior us to use the Image Dropdown from uComponents and just take screenshots of each color :)
On a side note, I recently was forced to make a site "fully" customizable where the client could change the site background color, text/link color, header background color/images, etc etc. I wrote some code that takes document type properties and dumps them into CSS files. In this case we were using Bootstrap and .LESS, so we were able to update an @variable in one place and have it take effect everywhere with minimal cutomizations to the CSS framework required. Been thinking about packaging it up if others had a use, perhaps it might be useful in this case?
-Tom
Thanks Chriztian and Tom,
I know that giving people complete control can be a nightmare but in this instance it's key.
As I'm very new to the subject of xslt I still don't know how to place the date into an inline style.
I know how to print recursive data and Tom has already helped me with displaying a resursive image. I just don't know how to use data within a style.
An example would be really useful.
I must say that I find the Umbraco community very helpful indeed and am impressed that my questions always seem to get excellent replies.
Steve
Hey Guys, I think I've worked it out.
I'm not sure if it's the most elegant solution but here's what I did.
I used the 'mcolour' package to select the colour as I found that the true colour picker didn't work (The reset button caused it to fail).
Then I was able to use the following recursive function within the master page template.
<p style="color:<umbraco:item id="bodytext" runat="server" field="mcolour" recursive="true"></umbraco:item>;">This is text.</p>
The result was that the text colour on each page changed according to the colour set in the top document in the hierarchy.
Cheers Chriztian and Tom.
Steve
is working on a reply...