I have inherited an Umbraco system (with little Umbraco knowledge on my part) and I am currently looking at performance of the site
The branding/styling is currently controlled through a "Brand" document type which allows the site admin to specify background colour, fonts etc
As a general question, how are people implementing this type of styling without the website having to make lookups all the time to get the value of the various document type properties?
ie: if the site admin changes the background colour of the "Brand" document from red to blue and then republishes the site/publishes the page, how are the changes passed through to the CSS file(s) the site is using?
The site appears to be using LESS to almost do a "real time lookup" against Umbraco, which is not very performant
I'm not sure I follow. Could you paste some code or maybe some screenshots to help me understand better?
Is there a single content node of type "Brand" that contains all of the information necessary for the entire site (e.g., the background color), or are there may content nodes of type "Brand" that are used in some other way?
I'm not sure what you mean when you say that Less CSS is doing a real time lookup. Less CSS is just a CSS preprocessor that compiles to CSS. So you are essentially saying CSS is doing a real time lookup, and I have no idea what that means.
However, regardless of that, if an operation is slow, my first option is usually to cache the operation. If I can better understand your situation, I may be able to provide some specific guidance for caching.
I have actually done the same thing the day before yesterday.
I have my colour options on a node.
Then I use a macro partial inside my <head> tags on my master page Template.
It looks up the node and uses the colours selected inside a <style> tag manually. This way you merely override the colours you want to in pre-existing styles. It will override the styles each time, but if you have css files in your master template it looks them up every time anyway.
@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{
var RootPage = Umbraco.Content(Model.MacroParameters["RootID"].ToString());//get root node of menu
}
<style>
@*FEATURE COLOUR*@
.section_header.skininverted small
{
background: #@RootPage.featureColour;
color: #ffffff;
}
</style>
As an aside you could use this kind of choice to select a css file, that way they would get cached with other files as well. But that is a bit more rigid in approach (or you need tons of css files).
If you wanted css files themselves but with complete flexibility then I would go with the recompile on save option that Ian posted about before. The only issue would be if the css file had been cached it may take a bit longer for anyone viewing the page to see the changes.
Sorry I could not find ''Mark as solution' button, might be I am not the person who posted the question?
I am now trying to implement your solution but got stuck in beginning as I am new to Umbraco and it's my company's brand new Umbraco project. so my question is
I have my colour options on a node. -- do you mean 'document type' or 'content' as I did not find much docs about node.
Then ow did you hook up the colour option(on a node) with your macro?
Sorry man, I didn't see that you were a different poster.
I call the document types, nodes. I do this because they are nodes on the tree of my content section.
I typically create a root document type & template for the homepage of my website and all my navigation document types are underneath this node. So for example I might have root underneath which is About Us and Contacts.
This way in my macro I can just look for the Model.Content.AncestorOrSelf(1) to get the Doctype that has my data.
Once I have that model all I have to do is have it populate the <style></style> from data on that 'root' doctype (from a colour picker for example)
I place the macro in my MASTER.chtml file in the correct area so the styles are applied after my permanent css files.
I am more than happy to mark it as solution if I could:), Google got me here so I guess your answer is helpful for others even it's not marked as solution yet.
appreciate your quick reply and I am going to give it a go now. might bother you again in the future. have a nice day:)
@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{
var RootPage = Umbraco.Content(Model.MacroParameters["RootID"].ToString());//get root node of menu
}
where do you put this block of code, in master template header section as I checking above code with this Model.Content.AncestorOrSelf(1)
Currently I am trying to get colour value from document type I created based on this part -- I have my colour options on a node.
That should not be necessary as the @Model.Content is whatever the current page is, so you can use that to get the AncestorOrSelf with 1 in the bracket to get the 'top' node.
This will give a model of type IPublishedContent if you have used the Live DLL option in your web.config ModelsMode you can use the following method to get a strongly typed model then pass it in to a partial.
Please note that this one uses level two of the tree. You would probably use 1.
var SiteRoot = Model.Content.AncestorOrSelf<Root>(2);
@Html.Partial("_renderColours", SiteRoot)
At the top of my partial I would have @model Root to tell it that the model coming in is of type Root so whenever I am accessing @Model it is using that object passed in. Here is the first part of this partial file.
still try to understand Umbraco's classes and properties etc, try to get my head around after read quite a few documentations. I created macro then could not figure out the purpose of using it in this case so I took the short cut way and combine your earlier approach to make it working -- it's not good practice but at least took me somewhere this morning. now i am going to try your code and partial view.
the shortcut codes I uses are
@get css editor value from Content node@
var darkThemeContent = umbraco.TypedContent(1137);
var backGroundColour = darkThemeContent.GetPropertyValue("backgroundColouRLabel").ToString();
it's funny that when I chose colour and click 'save & publish' in 'Content' and darkThemeContent.GetPropertyValue("") always returned null in master template .cshtml this morning, I was quite frustrated then went for lunch. Now GetPropertyValue can always return correct latest colour value instantly after I choose colour each time. might be somewhere it's cached.
Really appreciate Damien, glad to meet people like you who kindly shared your knowledge and experience.
your ealier comment -- As an aside you could use this kind of choice to select a css file
ye this is what I am going to do next, and need to find nice 'Colour Picker' package, the default Umbraco colour picker just can not be shipped to customer as they will definitely complain.
No worries, I downloaded a colour picker package ages ago that was pretty good.
The documentation for Umbraco is a joke, so I understand exactly what you mean about trying to understand it, be aware that occasionally you will find a bit of doc that will only work for v6. I have been doing this for around 3 years now, so there is hope yet!
On your 2nd last post, I would avoid using getproperty or content numbers at all. Try to strongly type your objects then get the property directly. If you are doing stuff in VS then go to web.config and change these lines to the following:
This will allow you to do stuff like the following
var root = ((Root)Model.Content.AncestorOrSelf(1));
var bgColour = root.backgroundColouRLabel;
For switching between different CSS files I would use a switch or radio button list on the document type then in my <head> have the following (assuming switch as bool):
I do this on my current website and on http://SBTS.une.edu.au and http://TBTS.une.edu.au, they are one website with colour choices on the root node and it loads different css files depending on which page you are on, just to limit the amount of data processed at any given time.
Dynamic CSS using document types
I have inherited an Umbraco system (with little Umbraco knowledge on my part) and I am currently looking at performance of the site
The branding/styling is currently controlled through a "Brand" document type which allows the site admin to specify background colour, fonts etc
As a general question, how are people implementing this type of styling without the website having to make lookups all the time to get the value of the various document type properties?
ie: if the site admin changes the background colour of the "Brand" document from red to blue and then republishes the site/publishes the page, how are the changes passed through to the CSS file(s) the site is using?
The site appears to be using LESS to almost do a "real time lookup" against Umbraco, which is not very performant
A colleague of mine opted to use the document save events to compile the property field values to css acheiving more performant results.
I'm not sure I follow. Could you paste some code or maybe some screenshots to help me understand better?
Is there a single content node of type "Brand" that contains all of the information necessary for the entire site (e.g., the background color), or are there may content nodes of type "Brand" that are used in some other way?
I'm not sure what you mean when you say that Less CSS is doing a real time lookup. Less CSS is just a CSS preprocessor that compiles to CSS. So you are essentially saying CSS is doing a real time lookup, and I have no idea what that means.
However, regardless of that, if an operation is slow, my first option is usually to cache the operation. If I can better understand your situation, I may be able to provide some specific guidance for caching.
I have actually done the same thing the day before yesterday.
I have my colour options on a node.
Then I use a macro partial inside my
<head>tags on my master page Template.It looks up the node and uses the colours selected inside a
<style>tag manually. This way you merely override the colours you want to in pre-existing styles. It will override the styles each time, but if you have css files in your master template it looks them up every time anyway.I hope this helps,
Regards Slipoch
As an aside you could use this kind of choice to select a css file, that way they would get cached with other files as well. But that is a bit more rigid in approach (or you need tons of css files).
If you wanted css files themselves but with complete flexibility then I would go with the recompile on save option that Ian posted about before. The only issue would be if the css file had been cached it may take a bit longer for anyone viewing the page to see the changes.
Any reason you cannot use my method (above)?
31 of Dec in 2018 and I find this answer might help me. thank you Damien.
no worries, If you could click on the one you found most helpful as the answer please, that way others can find it.
Hi Damien
Sorry I could not find ''Mark as solution' button, might be I am not the person who posted the question?
I am now trying to implement your solution but got stuck in beginning as I am new to Umbraco and it's my company's brand new Umbraco project. so my question is
I have my colour options on a node. -- do you mean 'document type' or 'content' as I did not find much docs about node.
Then ow did you hook up the colour option(on a node) with your macro?
Thanks Jimmy
Sorry man, I didn't see that you were a different poster.
I call the document types, nodes. I do this because they are nodes on the tree of my content section.
I typically create a root document type & template for the homepage of my website and all my navigation document types are underneath this node. So for example I might have
rootunderneath which isAbout UsandContacts.This way in my macro I can just look for the
Model.Content.AncestorOrSelf(1)to get the Doctype that has my data.Once I have that model all I have to do is have it populate the
<style></style>from data on that 'root' doctype (from a colour picker for example)I place the macro in my MASTER.chtml file in the correct area so the styles are applied after my permanent css files.
Thanks Damien
I am more than happy to mark it as solution if I could:), Google got me here so I guess your answer is helpful for others even it's not marked as solution yet.
appreciate your quick reply and I am going to give it a go now. might bother you again in the future. have a nice day:)
Kind Regards Jimmy
No worries, if ever you need to contact me directly just shoot me an email at [email protected]
Hi Damien
@inherits Umbraco.Web.Macros.PartialViewMacroPage @{ var RootPage = Umbraco.Content(Model.MacroParameters["RootID"].ToString());//get root node of menu }
where do you put this block of code, in master template header section as I checking above code with this Model.Content.AncestorOrSelf(1) Currently I am trying to get colour value from document type I created based on this part -- I have my colour options on a node.
Thanks
Did you add a rootid onto the macro?
That should not be necessary as the
@Model.Contentis whatever the current page is, so you can use that to get theAncestorOrSelfwith 1 in the bracket to get the 'top' node.This will give a model of type
IPublishedContentif you have used the Live DLL option in your web.config ModelsMode you can use the following method to get a strongly typed model then pass it in to a partial.Please note that this one uses level two of the tree. You would probably use 1.
At the top of my partial I would have
@model Rootto tell it that the model coming in is of type Root so whenever I am accessing @Model it is using that object passed in. Here is the first part of this partial file.Sorry I just noticed I used the term macro earlier, I meant partial
Thanks Damien
still try to understand Umbraco's classes and properties etc, try to get my head around after read quite a few documentations. I created macro then could not figure out the purpose of using it in this case so I took the short cut way and combine your earlier approach to make it working -- it's not good practice but at least took me somewhere this morning. now i am going to try your code and partial view.
the shortcut codes I uses are
@get css editor value from Content node@ var darkThemeContent = umbraco.TypedContent(1137); var backGroundColour = darkThemeContent.GetPropertyValue("backgroundColouRLabel").ToString();
it's funny that when I chose colour and click 'save & publish' in 'Content' and darkThemeContent.GetPropertyValue("") always returned null in master template .cshtml this morning, I was quite frustrated then went for lunch. Now GetPropertyValue can always return correct latest colour value instantly after I choose colour each time. might be somewhere it's cached.
Really appreciate Damien, glad to meet people like you who kindly shared your knowledge and experience.
Regards Jimmy
your ealier comment -- As an aside you could use this kind of choice to select a css file
ye this is what I am going to do next, and need to find nice 'Colour Picker' package, the default Umbraco colour picker just can not be shipped to customer as they will definitely complain.
No worries, I downloaded a colour picker package ages ago that was pretty good. The documentation for Umbraco is a joke, so I understand exactly what you mean about trying to understand it, be aware that occasionally you will find a bit of doc that will only work for v6. I have been doing this for around 3 years now, so there is hope yet!
On your 2nd last post, I would avoid using getproperty or content numbers at all. Try to strongly type your objects then get the property directly. If you are doing stuff in VS then go to web.config and change these lines to the following:
This will allow you to do stuff like the following
For switching between different CSS files I would use a switch or radio button list on the document type then in my
<head>have the following (assuming switch as bool):I do this on my current website and on http://SBTS.une.edu.au and http://TBTS.une.edu.au, they are one website with colour choices on the root node and it loads different css files depending on which page you are on, just to limit the amount of data processed at any given time.
is working on a reply...