CODEWITHSUNDEEP
csslessumbracoumbraco7
Mike
Mike

Reputation: 2559

Dynamic CSS styling in Umbraco

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

Upvotes: 1

Views: 981

Answers (2)

bowserm
bowserm

Reputation: 1056

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?

If you want the content editors to have control over the styling through umbraco, you will definitely have to look up the values at some point. The question is how best to cache the data and how best to query it. I won't spend as much time on caching here. Depending on how things are set up, you might just be able to use Html.CachedPartial(...). As far as how you are querying from umbraco, I've seen a lot of code that looks like this:

var cs = ApplicationContext.Current.Services.ContentService;
var node = cs.GetById(nodeId);
var value = node.GetValue("backgroundColorHex");

Using the ContentService will hit the database. You don't want that. It will slow your site down a lot. You should only really be using the ContentService if you intend to programatically edit content. Here would be a better way to query umbraco for data:

var node = Umbraco.TypedContent(nodeId);
var value = node.GetPropertyValue<string>("backgroundColorHex");

The above code uses the UmbracoHelper to query umbraco. This is significantly faster because it leverages a lot of umbraco's built in caching.

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?

If you can pull it off, one option is to use razor to assign different classes to your html elements. Your LESS can just pick up on those classes and assign the appropriate styles. This is neat because you don't have to write any inline css. The trick is that if the content editors can enter ANY hex color they can imagine, it might be sort of gross to write logic that converts those hex values to classes.

@* Some logic here that gets the hex values from umbraco and converts the data to classes maybe? This depends on what the color data looks like *@
<div class="@bgColorClass @fontColorClass @borderClass">
    ...
</div>

Otherwise, you could write something like this

<div style="background-color:@bgColor;">
    ...
</div>

What do you think? Let me know if this hits the spot or if I was missing what you were really wondering or if I skipped something you are curious about.

Upvotes: 1

Peter Geerts
Peter Geerts

Reputation: 146

I did this on a project using LESS. The way I did is generating a css file from a less file using dotless. (http://www.dotlesscss.org/)

I generated the stylesheets after a publish event in umbraco https://our.umbraco.org/documentation/reference/events/ContentService-Events

After this you can load the css file as a normal static file.

Upvotes: 0

Related Questions