I'm building a website that's supposed to have the ability to change the layout.
The layout is based on 1 colorcode. This one is used in few places in the CSS.
What I'm trying to to is create a usercontrol for example, in which the admin inserts a new color code (e.g "Green" or "#FFFFFF") and this would replace the color code in the css on the set positions.
Is there any way to read/edit/save the css files in Umbraco?
One thing you can do is use ApplicationBase to hook into the save event of your doctype that contains the color field, and onsave write the changes to the CSS file. You can add some tokens in your CSS file and use regex to parse them. I've successfully done this in a previous site and am thinking of turning it into a package, not sure on ETA though.
Hi. It seems that a more straightforward and simpler way to achieve it would be to add a color property to your content and implement a macro that will render an internal stylesheet (i.e. a <stylesheet> element) in the page, and than to insert a macro inside a <head> section of the template.
Rodion's solution probably makes more sense in your case, didn't think of that :)
In my case I went that route because it was using a complicated .LESS system like bootstrap with variables, so I was able to have AppBase update the one variable and have the color/style applied everywhere else.
I would go with Tom's solution if there are a lot of elements you need to change the colour on, but if there's only one or two, such as a just the h1 elements or only certain paragraph elements, well then another solution could involve using jQuery, but the page would only change if the user had javascript turned on.
From your Razor or XSLT, you could output the custom colour as a javascript variable inside a script block, and then in your template you could have some jQuery code to check if the variable is not null, then use its value to change the colour of any specific elements on your page by explicitly stating them or giving the changable elements all the same class.
e.g. Output from Razor/XSLT script, if a custom colour is sepecified
var customColour = "#FF0000";
e.g. Output from Razor/XSLT script, if NO custom colour is sepecified
Modify stylesheets in runtime
Hello,
I'm building a website that's supposed to have the ability to change the layout.
The layout is based on 1 colorcode. This one is used in few places in the CSS.
What I'm trying to to is create a usercontrol for example, in which the admin inserts a new color code (e.g "Green" or "#FFFFFF") and this would replace the color code in the css on the set positions.
Is there any way to read/edit/save the css files in Umbraco?
Thanks, Christophe
Hi,
One thing you can do is use ApplicationBase to hook into the save event of your doctype that contains the color field, and onsave write the changes to the CSS file. You can add some tokens in your CSS file and use regex to parse them. I've successfully done this in a previous site and am thinking of turning it into a package, not sure on ETA though.
-Tom
Hi. It seems that a more straightforward and simpler way to achieve it would be to add a color property to your content and implement a macro that will render an internal stylesheet (i.e. a <stylesheet> element) in the page, and than to insert a macro inside a <head> section of the template.
Rodion's solution probably makes more sense in your case, didn't think of that :)
In my case I went that route because it was using a complicated .LESS system like bootstrap with variables, so I was able to have AppBase update the one variable and have the color/style applied everywhere else.
I would go with Tom's solution if there are a lot of elements you need to change the colour on, but if there's only one or two, such as a just the h1 elements or only certain paragraph elements, well then another solution could involve using jQuery, but the page would only change if the user had javascript turned on.
From your Razor or XSLT, you could output the custom colour as a javascript variable inside a script block, and then in your template you could have some jQuery code to check if the variable is not null, then use its value to change the colour of any specific elements on your page by explicitly stating them or giving the changable elements all the same class.
e.g. Output from Razor/XSLT script, if a custom colour is sepecified
e.g. Output from Razor/XSLT script, if NO custom colour is sepecified
e.g. jQuery inside your page template:
$(document).ready(function() { if (customColour != null) {$("h1").css("color", customColour);
$("p.customColour").css("color", customColour);
}
});
All great solutions guys! Thanks!
Sorry for the late response though. Tom's way seems kinda a bit too difficult as I'm pretty new at Umbraco.
Thanks anyway, I'm going with Ian's solution!
Love this community ^^
is working on a reply...