Implement dynamic CSS color selection based on server-side data

Introduction

At our company, we manage a large client website in Optimizely (ASP.NET MVC) that hosts multiple smaller sites for different regions and important customers.

Currently, our frontend team creates various themes using SASS to CSS conversion, with a dropdown menu in Optimizely allowing us to select the theme for each site. This selection is then reflected in the master layout, loading the corresponding style sheet for the page.

However, due to the time-consuming process of developing full themes for all sites, the client has requested the ability to set basic colors (primary, secondary, and tertiary) for newer sites individually within Optimizely.

For clients seeking a fully branded experience, they can opt for a custom theme with unique colors and structure, while others will utilize a generic theme with colors defined in Optimizely.

The Issue

The main query revolves around incorporating server-defined colors into transpiled CSS seamlessly. While injecting colors directly into the page is feasible if needed, integrating these colors into the CSS proves challenging (initial attempts with SASS variables in the master layout were unsuccessful).

Potential Solutions

One approach involves rendering specific CSS classes on the page with color properties explicitly set and marked as !important to supersede existing color definitions in SASS. However, leveraging SASS variables eliminates the need to define or override colors across numerous instances.

An alternative method entails dynamically modifying the CSS during runtime based on color changes from the CMS (despite CDN deployment). Alternatively, utilizing JavaScript to adjust colors post-page load introduces a delay before new colors take effect, potentially displaying original hues initially. Although viable, both these methods may appear cumbersome.

This seemingly straightforward task lacks clear online solutions, prompting an inquiry about novel approaches or experience-based insights from those who have encountered similar challenges. Thank you

Answer №1

After taking @Pete's advice, we successfully tackled this issue by utilizing CSS variables. By accepting a hexadecimal reference in our CMS for color selection, we were able to convert it into a .net Color and develop an extension method that enabled us to separate the H, S, and L components. These different components were then assigned as values to CSS variables within the view, allowing our SCSS to either specify a color or modify it accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to create a transparent sticky header that blends with the background while still maintaining visibility over images and text?

On my web page, the background features a radial gradient but the content extends beyond the viewport, causing the center of the gradient to not align with the center of the screen, producing the desired effect. However, I'm facing an issue with a sti ...

What is the correct method for handling images in HTML and CSS?

Hey there! Just playing around on jsfiddle and wanted to share this Destiny-inspired creation: http://jsfiddle.net/3mfnckuv/3/ If you're familiar with Destiny, you'll see the inspiration haha.. But here are a few questions for you: 1) Any ide ...

Enhancing the appearance of standard HTML checkboxes

This HTML snippet displays a pair of checkboxes positioned side by side <div id="mr_mrs"> <ul class="mr_mrs form-no-clear"> <li id="mr" class="popular-category"> <label for="Mr" id="mr">Mr</label> ...

The functionality of Bootstrap Mobile css is most effective when navigating by scrolling downwards

I am experiencing a strange issue. I am using Ajax to load the Search form. The CSS is being applied correctly, but there is an unusual problem with the bottom margin. The bottom margin only appears when you scroll down in mobile view. When you load the f ...

I am eager to incorporate my own unique 'add to cart' button

Currently, I'm utilizing the Motta theme for my WooCommerce store. However, I find the add to cart button to be too large for my liking. I am hoping to simplify it to resemble a plus button. Any assistance in achieving this would be greatly appreciate ...

The rel=preload attribute for the stylesheet is not properly rendering the styles after being downloaded

Exploring the use of rel=preload for the first time, specifically for a few stylesheets. Check out the code snippet below: <link rel="preload" href="css/styles.css" as="style"> <link rel="preload" href="//allyoucan.cloud/cdn/icofont/1.0.0beta/css ...

Class for Eliminating the Background Image Using Bootstrap

Is there a Bootstrap class that can be used to remove a background image from a div? Currently, I have this style defined in my CSS: background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0)); I would like to remove it using: bg-img-non ...

Adjust the CSS to ensure that all elements have the height of the tallest element in the set

Can anyone help me solve a design issue I'm facing? I have a div with three floating buttons, but one of the buttons is taller than the others due to more content. I'm looking for a way to ensure that all buttons are the same height as the talle ...

Hiding and showing div elements using CSS, JavaScript, and PHP

Here is the current code snippet: <? while ($row1 = mysql_fetch_object($result1)) { echo '<a href="#" onclick="showhide("'.$row1->id.'");">Name</a>'; while ($row2 = mysql_fetch_object($result2)) { ...

Arranging three section elements side by side

I have encountered an issue where I have 3 consecutive section tags in a row, but when applying margin to them, the last section tag moves to the next line instead of staying on the same line. I attempted using the float:left and display:inline properties ...

Persistent column menu in ag-grid

Is there a way to include a menu for each row within a sticky column in Ag-grid? I couldn't find any information about this feature in the official documentation, so I'm unsure if it's even possible. I've attempted several methods, but ...

What is the best way to create a hover effect exclusively for the hamburger icon, and not for the close button

I am facing an issue with the code snippet below: .btn-menu:hover .btn-menu__bars::before{ transform: translateY(-0.5875rem); } .btn-menu:hover .btn-menu__bars::after{ transform: translateY(0.5875rem); } Is there a way to make this hover effect only a ...

React js background image not filling the entire screen

Having experience with React Native, I decided to give ReactJS a try. However, I'm struggling with styling my components because CSS is not my strong suit. To build a small web application, I am using the Ant Design UI framework. Currently, I have a ...

Exploring pathways in Ruby on Rails: navigating the world of web

Having an issue with applying link effects in Ruby on Rails. Here is my current code: <header class="navbar navbarfixed navbar-default navstyle> <%= link_to "Cocktails", root_path, class: "btn btn-lg", id: "logo" %> <nav class="cl-effect-5 ...

Achieve vertical alignment and responsiveness of elements in primefaces using css techniques

In order to vertically align 2 elements inside an outputpanel, I initially used a margin-top of 3em. However, this method proved to be non-responsive, as shown in the following images: https://i.sstatic.net/yMRXc.png In mobile view: https://i.sstatic.net ...

What steps should I follow to create a photo gallery similar to Facebook?

I am currently developing a 4x3 image gallery showcasing pictures sourced from a database. Each picture varies in size. Utilizing Bootstrap and CodeIgniter, I create rows and columns for each image. My goal is to ensure that wide images adjust to the heigh ...

Most efficient method for revealing all concealed divs using JavaScript

I have a large div containing multiple hidden divs that can be displayed individually or all at once. Here is an example of how it's structured: <div class="maindiv"> Print "<a href=javascript:show()>Click here to show all</a> ...

image background not appearing in HTML, CSS, and JavaScript game

When working on a simple HTML, CSS, and JavaScript game, I decided to make a change in the CSS code. Instead of setting the background color to green as before, I opted to use an image with the following line: background-image: url(flappybird.png); I also ...

Responsive breakpoints in TailwindCSS seem to have an issue with applying padding and margin styles properly

Currently, I am tackling a project that involves creating a responsive design with Tailwind CSS on nuxtjs. Has anyone encountered the issue of py-8 applying to both breakpoints? If so, please share your insights! Here is how I have structured the compone ...

Guide to making a Material Design Radial effect animation

I am looking to create a unique toolbar effect by following the material design radial reaction choreography guideline. https://i.stack.imgur.com/6oB8r.gif I want to achieve this using an angular 2 transition, but I need some guidance on how to implement ...