Switching out CSS files on the fly in ASP.NET

Looking to dynamically change the CSS file being used in my ASP.NET Web Application when it's running.

Imagine I have two CSS files, red.css and blue.css.

I attempted the following method:

In the Master Page, I have this link:

<link rel="Stylesheet" ID="Styles" runat="server"/>

In the Master Page's Page_Load event:

Styles.Href = Global.CSSPath;

In Global.asax:

public static string CSSPath = "red.css";
(assuming both are in the same folder)

This method works. Additionally, I could easily create functionality to change the value of CSSPath to switch to blue.css or any other theme. Now, I want to know if this change impacts only one user or all users of the web application.

If it only affects one user, that's fantastic, thank you! If it doesn't, what should I do to enable theme changes at runtime for a particular user/session?

Appreciate your insights,

Dennis

c#asp.netcsstheming

Answer №1

Reading the value from a static (global) variable will have an impact on all users.

If you want to change the theme during runtime, consider retrieving the user-specific value from the Session on the server-side.

Answer №2

To enhance your webpage, consider implementing code similar to the following in your html file:

    <script runat="server">

    protected void Page_Load(object sender, EventArgs e)
    {   
      HtmlLink csslink = new HtmlLink();
      csslink.Href = "~/styles.css";
      csslink.Attributes.Add("rel", "stylesheet");
      csslink.Attributes.Add("type", "text/css");
      Page.Header.Controls.Add(csslink);    
    }
 

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 could be causing the appearance of lines above and below my SVG element in the html?

I'm using an SVG to create a curved look on my web page. The SVGs are already in place and look great on desktop screens, but when viewed on mobile, I see small lines appearing above and below the SVG that I want to remove. Here are some pictures of ...

htmlcsssvgbootstrap-5

CSS3 stackable-design

How can I avoid CSS3 elements from overlapping? They are all <span> precious </span> <span> and </span> <span> cute </span> And here is my current CSS code span { margin : 20px; min-width: 150px; border-r ...

css

Is there a way to perfectly align a left-aligned drawable with a hint in a TextInputEditText and position them closer to the bottom of the text input field?

Struggling to align the drawableLeft horizontally with the hint and bring them closer to the bottom of the TextInputEditText. I have experimented with various attributes but haven't been successful so far. Wondering if I might be overlooking something ...

androidcssxmlandroid-layoutmaterial-ui

focusing on a specific category within a CSS identifier

My goal is to specifically target the class .page-has-children within this code snippet: <div id="dc_jqverticalmegamenu_widget-2" class="widget sidebarwidget "> <div class="dcjq-vertical-mega-menu" id="dc_jqverticalmegamenu_widget-2-item"> ...

csswordpress

Patiently anticipating the execution of several Ajax Webmethods before initiating a redirect

I have a list of items that I need to add to my shopping cart. I use AJAX to call a WebMethod N times to insert these items. Once all the items are added, I want to redirect to the summary page. function SellAll(){ $.each(x,function (index, value) { ...

jqueryasp.netajaxwebmethod

managing varying JSON responses for each request

Currently, I am utilizing json.net to deserialize JSON into C# objects. Although it generally works well, there are instances where instead of receiving an array, I receive an object. In my class (which was generated using http://json2csharp.com/ and the ...

c#jsonexception

The text area within the input group is misaligned with the input group button

Here is an example of how I'm using the input group feature with Bootstrap: <div class="input-group" style="padding-left: 20px;"> <input type="text" name="s" class="form-control input-sm"> <span class="input-group-btn"> ...

htmlcsstwitter-bootstrap

Basic HTML and JavaScript shell game concept

After spending several days working on this project, I am struggling to understand why the winning or losing message is not being displayed. The project involves a simple shell game created using HTML, JavaScript, and CSS. I have tried reworking the JavaSc ...

javascripthtmlcssshell

Guide to utilizing a FirefoxProfile in conjunction with an IWebDriver

I am experiencing multiple issues with Firefox and have come across several solutions that involve using the FirefoxDriver object. However, I specifically need to utilize the RemoteWebDriver. All of the suggested fixes for my problems require a FirefoxPro ...

c#selenium

Issue with the background opacity not being properly applied at the bottom of the div

One challenge I am facing is creating a clickable image with text at the bottom and a semi-transparent background behind it, which is a common design element on many websites. I have everything working except for a small portion of the image showing below ...

htmlcssopacity

Tips for visually conveying the values of x and y using SVG symbols

I recently came across a blog post discussing the use of SVG symbols for icons, which inspired me to create representations of symbols using svg files. The original svgs I used had properties like x, y, height and width. However, when I tried adding these ...

htmlcsssvg

Tips for detecting if text appears in bold on a webpage using Selenium

I came across a pdf document with the following content: <div class=**"cs6C976429"** style="width:671px;height:18px;line-height:17px;margin-top:98px;margin-left:94px;position:absolute;text-align:left;vertical-align:top;"> <nobr ...

c#cssselenium-webdriver

hide the side menu automatically - wordpress

is the official website created using a WordPress platform. Upon visiting the site, you will immediately notice a prominent "showcase" banner positioned right below the navigation bar. On the right side, there are additional posts that users can choose t ...

htmlcsswordpress

Generate a hard copy of the data table row without needing to view it beforehand

Here are some records from a table: +--------+---------+-------+----------+--------+ | Name | Address | Phone + Email | Action | +--------+---------+-------+----------+--------+ | Andy | NYC | 555 | <a href="/cdn-cgi/l/email-protection" cl ...

javascriptphpjqueryhtmlcss

How can I achieve a smooth opacity transition without using jQuery?

Although I understand that JQuery offers functions for this purpose, I am interested in finding a solution using only pure javascript. Is there a way to change the CSS opacity setting over time? Perhaps utilizing a unix time stamp with millisecond precisi ...

javascriptjquerycss

Ensure the vertical dimension of the webpage is properly maintained

I am currently working with a client who has requested a website design with a specific height for the content section. The Inquiry: Is it possible to automatically create a new page for text that exceeds the maximum height of the content section on the ...

javascriptjqueryhtmlcss

Using information retrieved from a JSON response

In my current project, I have set up a JavaScript object within a script tag. <script> searchdata = {"employees":[{"name":"john doe","sal": "10000"}]}; </script> I am utilizing the searchdata object in various functions as shown below: fu ...

jqueryasp.netajaxjson

You will be unable to browse the website while a file is in the process of downloading

I am attempting to download a large file directly from the server in chunks using the Context.Response.OutputStream.Write method. However, I am facing an issue where I cannot navigate on the site until the download is complete, i.e., until the response e ...

c#asp.nethttpresponseoutputstream

Ways to identify when a React child element is overflowing

tl;dr How can I create a component that hides overflow and toggles views with a button? For example, the user can initially see tabs 1, 2, and 3 while tabs 4, 5, and 6 are hidden. Clicking a button will hide tabs 1, 2, and 3, and show tabs 4, 5, and 6 with ...

javascripthtmlcssreactjs

The issue with onclientclick in Asp.Net button

I am experiencing a peculiar problem that I cannot seem to solve. The issue revolves around a button that I have implemented using the following code: <asp:Button ID="btnSave" runat="server" ClientIDMode="Static" Text="Save" OnClientClick="return Confi ...

javascriptasp.netonclientclick