"Embracing the power of dynamic CSS customization within Umbraco

Question

"Embracing the power of dynamic CSS customization within Umbraco

I recently inherited an Umbraco system without much prior knowledge of the platform, and I am currently investigating the site's performance.

The branding and styling of the site is currently managed through a "Brand" document type, allowing the site administrator to specify background color, fonts, and other styling elements.

My main question is, how do people typically implement this type of styling without the website having to constantly make lookups for the values of various document type properties?

For example, if the site administrator changes the background color of the "Brand" document from red to blue and then republishes the site or a particular page, how are these changes reflected in the CSS files used by the site?

It seems that the site is utilizing LESS to essentially perform a "real-time lookup" against Umbraco, which is causing performance issues.

css less umbraco umbraco7

Answer 1

Answer №1

Is there a way to implement styling without constant lookups for document type properties?

To give content editors styling control through Umbraco, values will need to be looked up at some point. The key is finding the best way to cache and query the data. Using the UmbracoHelper for querying is faster and more efficient than using the ContentService, which hits the database and can slow down the site. Here's a better way to query Umbraco for data:

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

By leveraging Umbraco's built-in caching, this method speeds up the process significantly.

How can changes made by the site admin reflect in the CSS files?

One way to achieve this is by using razor to assign classes to HTML elements, which can then be picked up by LESS for styling. Another option is to directly style elements using inline CSS based on the values from Umbraco. The approach will depend on the color data structure and the flexibility needed for the content editors.

<div class="@bgColorClass @fontColorClass @borderClass">
    ...
</div>

or

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

Consider these options and let me know if it addresses your query or if there are any additional aspects you'd like to explore.

Answer 2

Is there a way to implement styling without constant lookups for document type properties?

To give content editors styling control through Umbraco, values will need to be looked up at some point. The key is finding the best way to cache and query the data. Using the UmbracoHelper for querying is faster and more efficient than using the ContentService, which hits the database and can slow down the site. Here's a better way to query Umbraco for data:

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

By leveraging Umbraco's built-in caching, this method speeds up the process significantly.

How can changes made by the site admin reflect in the CSS files?

One way to achieve this is by using razor to assign classes to HTML elements, which can then be picked up by LESS for styling. Another option is to directly style elements using inline CSS based on the values from Umbraco. The approach will depend on the color data structure and the flexibility needed for the content editors.

<div class="@bgColorClass @fontColorClass @borderClass">
    ...
</div>

or

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

Consider these options and let me know if it addresses your query or if there are any additional aspects you'd like to explore.

Answer 3

Answer №2

In one of my previous projects, I utilized LESS for styling. To convert the less file into a css file, I used dotless. ()

The stylesheets were generated automatically after a publish event in Umbraco.

After this process, the css file could be loaded just like any other static file.

Answer 4

In one of my previous projects, I utilized LESS for styling. To convert the less file into a css file, I used dotless. ()

The stylesheets were generated automatically after a publish event in Umbraco.

After this process, the css file could be loaded just like any other static file.

"Embracing the power of dynamic CSS customization within Umbraco

Answer №1

Answer №2

Similar questions

Utilizing media queries to tailor the pre-designed website and ensure adaptability

Unexpected behavior with HTML Bootstrap's dl-horizontal layout

Is there a way to adjust the height overflow using a percentage?

Concealing a Class on the Homepage in Joomla 3

Developing a custom mixin to alert a banner at the top of the webpage

Customize the drawer background in Vue Material

Update to the viewport meta tag in iOS 7

Alternative to using the disabled attribute in JavaScript to make a checkbox read-only option

Adjust the child content within a React component based on the element's width, rather than the overall window size, by implementing dynamic resizing without fixed breakpoints

Is there a way to position the text within an email body at the center using SendGrid?

CSS for a navigation menu with underlined links

Issue with Hiding Bootstrap Tabbed Content Correctly

Minimize the styling of the input placeholder CSS

Is it possible for an animation to complete even if it is stopped midway?

Broken CSS dropdown menu issue

Customizing CSS for a Single Container

The background refuses to cooperate, soaring upward only to be abruptly sliced in two

Tips for utilizing a variable within a variable containing HTML code

Tips for avoiding cropped images on mobile websites:

"Unfortunately, the JavaScript external function failed to function properly, but miraculously the inline function