How to reference color variables from code behind in ASP and use them in CSS files

I have a total of 3 files dedicated to my Login-Screen: Login.aspx, Login.aspx.cs, and LoginStyle.css

Upon the execution of the Page_Load method, I retrieve various data from the current system, including the theme-color represented as a string (e.g., #003b67).

Within my .css file, I have defined 3 style rules that are meant to utilize this color.

.linkButtonPassword:hover {
        color: #38d39f;
}

.login-input-div.focus > .login-faItem > i {
    color: #38d39f;
}

.login-input-div:before, .login-input-div:after {
    content: '';
    position: absolute;
    bottom: -2px;
    width: 0%;
    height: 2px;
    background-color: #38d39f;
    transition: .4s;
}

Therefore, my query is whether there exists a way to substitute the current color-string ""#38d39f"" with the color retrieved from the code behind without explicitly specifying the style within my .aspx file? (Is it possible to access a variable of sorts within my css file)

cssasp.netcode-behind

Answer №1

ASP.NET does not process CSS files by default, so the simple answer is "no".

But fear not, there is a workaround using CSS Custom Properties!

Phase 1:

To implement this solution in your .aspx page, ideally within the <head> section (hopefully utilizing <asp:ContentPlaceHolder?), add the following code after your existing 

<link rel="stylesheet">
element:

<style type="text/css">
:root {
    --theme-color: <%= this.customColor %>;
}

.linkButtonPassword:hover,
.login-input-div.focus > .login-faItem > i,
.login-input-div:before,
.login-input-div:after {
    color: var(--theme-color);
}
</style>

One could argue that this is similar to directly overwriting properties using <%= %> - however, the key difference lies in being able to eliminate the color: property from the snippet above and instead use color: var(--theme-color); directly in your .css file!

Phase 2:

Your <head> should now include the following:

<style type="text/css">
:root {
    --theme-color: <%= this.customColor %>;
}
</style>

Additionally, ensure that your .css file incorporates the following code:

.linkButtonPassword:hover {
    color: #38d39f;
    color: var(--theme-color);
}

.login-input-div.focus > .login-faItem > i {
    color: #38d39f;
    color: var(--theme-color);
}

.login-input-div:before,
.login-input-div:after {
    content: '';
    position: absolute;
    bottom: -2px;
    width: 0%;
    height: 2px;
    background-color: #38d39f;
    background-color: var(--theme-color);
    transition: .4s;
}

The duplication of color values (initially as a hex-color value and then with var(--theme-color)) serves to maintain compatibility with older browsers lacking support for CSS Custom Properties (such as IE11 - which presumably requires consideration given your ASP.NET WebForms usage).

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

Can you explain the distinction between a Web farm and a Web Garden?

Can you explain the contrast between a Web farm and a Web Garden? ...

asp.netweb-farm

Extract a CSS property and store it in a variable using JQuery

Is there a way to extract a CSS value from a specific class on a webpage and then use it for styling other elements in different ways? I created an example on jsfiddle where I want to retrieve the background color from .box and save it to a variable nam ...

jquerycsshtml

Struggling with aligning images in the center while ensuring they remain responsive on various devices

My website has an image with dimensions of 955x955, which is a square size. I want this image to be responsive on all devices, but the section it's in is not squared. This causes the image to look distorted when viewed on smaller screens. The focus of ...

htmlcss

Repetitively showcasing data in asp.net mvc

Here is my LINQ code snippet: public JsonResult getfull() { var coursename = Session["course"].ToString(); var location = Session["location"].ToString(); var result = (from insti in db.Institute_Master ...

asp.netangularjsasp.net-mvc-3asp.net-mvc-4

Creating a moving background for a loading bar with HTML5 and Shadow DOM is currently underway

Can anyone help with animating the progress bar using the HTML5 <progess> tag? I've been able to customize the Shadow DOM elements successfully, but I'm having trouble animating the background (repeating linear gradient). It seems to work i ...

htmlcssprogress-barlinear-gradientsrepeating-linear-gradient

What methods are available to test my website across different browsers such as outdated versions of Internet Explorer like IE8?

Currently, I am working on Chrome with Windows 7 OS installed. However, Windows 7 does not support Internet Explorer 8. This is causing issues when trying to view my web pages in the IE8 version and older. How can I resolve this problem? I have attempted ...

javascripthtmlcssuser-interface

Retrieving Records within a Specific Date Range for Check-ins and Check-outs

Our team is currently working on developing booking software that requires handling different room pricing based on specific dates. Each room has distinct pricing for weekdays and weekends. ROOM 1 Pricing 1: September 1st - November 3rd, Weekday: $100, W ...

javascriptc#jqueryasp.netasp.net-core

Challenge with CSS selectors

Here is the HTML code I am working with: <label for="tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]" class="error" id="tx_alterneteducationcatalog_subscriberadd[newSubscriber] [gender]-error">This field is required.</label> ...

htmlcsscss-selectors

The toggler in Bootstrap 5's Navbar menu is experiencing difficulties opening on mobile browsers

Just arrived here for the first time. Encountering an issue with my Bootstrap 5.1 Navbar menu. Background info: My website is hosted locally via Xampp with php pages for forms and cookies. Everything functions perfectly on desktop. Checked responsiveness o ...

javascripthtmlcssnavbarbootstrap-5

CSS and JavaScript issues causing compatibility errors with Internet Explorer

Recently, I've been working on a portfolio website just for fun, and I'm encountering compatibility issues specifically in Internet Explorer. Surprising, right? The issue seems to be stemming from the flipcard.css and flipcard.js files. While oth ...

javascripthtmlcssinternet-explorer

Tips for wrapping text around an image using Bootstrap 5

I am having trouble getting my text to wrap around an image using the Bootstrap 5 grid system. I've attempted to use 'float: right' on the image, but it hasn't produced the desired result. The text should flow naturally around the imag ...

htmlcssbootstrap-5

Tips for aligning words on a single line

Encountering an issue with long words being split up in the middle of a line, as shown in this photo: https://i.stack.imgur.com/IxQi6.png This is the code snippet causing the problem: ineligiblePointsTableRows() { return this.state[PointsTableType. ...

htmlcsssassstyling

Revolving mechanism within React.js

I am currently developing a lottery application using React.js that features a spinning wheel in SVG format. Users can spin the wheel and it smoothly stops at a random position generated by my application. https://i.stack.imgur.com/I7oFb.png To use the w ...

javascriptcssreactjs

Can I create a div with a rounded right side?

Is there a way to give a div a slightly rounded right side using CSS? If so, can you show me how in this fiddle template: http://jsfiddle.net/z2hejemu/ HTML <div class="rounded-side"> <p>By default, this div is rectangular. I would like t ...

htmlcss

I am experiencing an issue where the CSS code is not appearing in the Chrome Debugger when I inspect an element

I recently wrote some CSS code to remove default browser styles: /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } ​ /* Remove default padding */ ul[class], ol[class] { padding: 0; } ​ /* Remove default margin */ body, h ...

htmlcss

Fixed Positioning Div to Stay at the Top while Scrolling

Currently, I have successfully implemented the functionality to stick the div to the top once it scrolls down by 320px. However, I am curious if there is an alternative approach to achieving this effect. Below is the code snippet I am using: jQuery(functi ...

javascriptjquerycsshtml

Having difficulty adjusting certain internal styles within Material UI's <Dialog> component

I want to customize the styling of my <Dialog> component by adding rounded corners using a border radius. Here is the inline style I am trying to apply to override the default styles of the <Dialog>: let overrideStyles = { padding: 0, marg ...

cssreactjsdialogmaterial-ui

What is the reason behind the browser crashing when a scrollbar pseudo-class is dynamically added to an iframe?

1. Insert a new iframe into your HTML: <iframe id="iframe-box" onload=onloadcss(this) src="..." style="width: 100%; border: medium none; "></iframe> 2. Incorporate the following JavaScript code into your HTML file ...

javascripthtmlcssgoogle-chromeiframe

In Internet Explorer, transitions do not always play correctly when using ng-animate and ng-if

I am facing an issue with a simple div that has a transition effect. It goes from a yellow background to a red one. <div class="bar" ng-class="{'bar-visible': vm.visible}"> The transition works smoothly when the bar-visible class is added ...

angularjscsscss-transitionsng-animate

Can a search engine algorithm be developed to display an iframe based on the keywords entered in the search query?

Is it possible to create a search engine algorithm in HTML, CSS, and JavaScript that takes keywords from a search bar input and displays the best solution (or solutions) through iframes? html, css, javascript Below is the code for the iframes and search ...

javascripthtmlcssalgorithmiframe