How do I change the 'CSS Theme' of my website?

With Halloween approaching, I am eager to transform my website's BODY css into a spooky Halloween theme. The challenge is that my .Net pages are Templates. Is there a way for me to ensure that the body class checks for an existing CSS theme override?

Can I switch themes by following this method:

CSS:

/* standard theme */
body {
    background-color: white;
    font-color: #000;
}

/* halloween theme css */
body.halloween {
    background-color: black;
    font-color: #666;
}

Then this code goes in the HEAD's editable region:

<%
'CSS Theme overwrite - uncomment if required
 cssTheme = "halloween"
 %>

My BODY tags

<body class="<%=cssTheme%"> 
    content........
</body>

Although I have attempted the above steps, it seems to be ineffective.

Do I require a function like doOnLoad() attached to the <body> that checks for the cssTheme and applies it if one exists?

javascripthtmlcss.netdocument-body

Answer №1

A common misconception about CSS is that you can't easily override styles, but that's not the case. The "C" in CSS actually stands for cascading, which means you can prioritize specific styles over others in your stylesheets.

To demonstrate this concept, let's take a look at an example using a div element. However, keep in mind that this approach can be applied to any HTML element, not just div. (Ignore the javascript code here, it's only used to apply the Halloween CSS class, showcasing different visual styles.)

$('button').click(function(){
 $('div').addClass("halloween");  
});
div{
  background-color:grey,
    color:Black
}

div.halloween{
  background-color:black;
  color:orange
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Content here
 </div>

<button>make halloween</button>

Answer №2

Sample code snippet in global.asax.cs using C#

    void Application_PostReleaseRequestState(object sender, EventArgs e)
    {

        if (Response.ContentType == "text/html")
            Response.Filter = new CustomFilter(Response.Filter);

    }

    class CustomFilter : System.IO.MemoryStream
    {

        private System.IO.Stream outputStream = null;

        public CustomFilter(System.IO.Stream output)
        {
            outputStream = output;
        }

        public override void Write(byte[] buffer, int offset, int count)
        {

            var contentInBuffer = System.Text.UTF8Encoding.UTF8.GetString(buffer);

            //Modify the .css file name here
            contentInBuffer = contentInBuffer.Replace(@"MainDesign.css", @"MainDesign_hallow.css");

            outputStream.Write(System.Text.UTF8Encoding.UTF8.GetBytes(contentInBuffer), offset, System.Text.UTF8Encoding.UTF8.GetByteCount(contentInBuffer));
        }

    }

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

Similar to TypeScript's `hasOwnProperty` counterpart

When working with TypeScript objects, is there a way to loop through a dictionary and set properties of another dictionary similar to how it is done in JavaScript? for (let key in dict) { if (obj.hasOwnProperty(key)) { obj[key] = dict[key]; } } If ...

javascriptobjecttypescripttypescript1.8

Guide on creating HTML content within a ToolTip function for a table row

I'm working on implementing a tooltip feature that will appear when hovering over a row with extensive HTML content. This feature is intended to be used alongside Foundation framework. However, I am encountering issues getting the tooltip to work prop ...

htmlcsstooltipzurb-foundation

What exactly does the combination of {on, attrs} create within Vue/Vuetify?

Although this question may have been asked before, I am still struggling to grasp its meaning. Can you help me understand it better? <v-dialog v-model="dialog" width="500" > <template v-slot:activator=&quo ...

javascriptvue.js

Access the value retrieved from a form on the previous page using PHP

I'm struggling with extracting values from radio buttons on a previous page. Currently, my HTML and PHP code works fine with the search bar, which is the first form below. However, I'd like to add radio button filters below the search bar. <s ...

javascriptphpjqueryhtml

Determine the status of a checkbox in Protractor with JavaScript: Checked or Unchecked?

I'm currently facing a challenge while writing an end-to-end Protractor test. I need to verify whether a checkbox is enabled or not, but it doesn't have a 'checked' property. Is there a way in JavaScript to iterate through a list, check ...

javascriptprotractor

PHP script to automatically update a table in a database upon the closure of a

I recently experimented with the following code snippet: <script> function myFunction() { return "You have not logged out of your account. Do you want to leave without logging out? "; } </script > <body onbeforeunload="return myFun ...

javascriptphpjqueryajax

Print directly without the need for a preview or dialog box

Is there a way to easily print content with just one click, without having to go through the preview or print dialog box? Here is a snippet of my code: <head> <style type="text/css"> #printable { display: none; } @media print { #non-pr ...

javascriptjqueryhtmlcss

Unable to locate xpath during the second iteration or attempt

As a newcomer and hobbyist programmer, I have hit a wall with this particular issue. My goal is to loop through a website and extract data to print. While my code successfully retrieves data from the first link, I am struggling to make it "click" on the se ...

javascriptpythonselenium

"Troubleshoot: Why is the Position Absolute Not Functioning in

Trying to achieve a layout similar to the last element at the bottom of the footer] 1, but getting something like this instead: https://i.sstatic.net/lXazk.png <footer> <div class="container-fluid"> <div class="row"> ...

htmltwitter-bootstrapcss

Sending JSON data stored in a JavaScript variable through a jQuery POST request

I am currently attempting to retrieve data from a remote location using a JQuery post method. It works perfectly fine when I directly input the data to be posted, but for some reason, it fails when I store the JSON in a JavaScript variable and pass it in. ...

javascriptajaxjson

Utilizing CSS selectors to pinpoint specific elements on a webpage

As I continue to enhance my CSS skills, I stumbled upon a challenging puzzle that requires me to figure out how to select each individual image on a webpage using selectors. Here is the provided HTML code: <!DOCTYPE html> <html> <head> ...

csscss-selectors

What is the best way to alphabetically arrange an array of names in a JavaScript.map?

I am attempting to alphabetically sort an array of first names using JavaScript map function. Additionally, I aim to remove the "undefined" row from the final results: function contacts_callback(obj) { var contactinfo = obj.contacts .filter( ...

javascriptjqueryarrayssorting

What is the method for showcasing an h1 heading and an unordered list link side by

Can you help me align my h1 and ul elements on the same line in my header? I want to have my logo and navigation links next to each other (This extra text is just filler) Below is the code snippet: HTML: <div id="header"> <h1>Logo</h1> ...

htmlcsshtml-listsinline

Tips for organizing ng-repeat information according to a condition of true or false

Apologies if this question has already been addressed, but I have not been able to find a solution. I am attempting to organize an ng-repeat based on the selection of radio buttons, but I am struggling with hiding and showing items within the ng-repeat. ...

javascripthtmlangularjsangularjs-directive

Animation that responds to scrolling movements

Is there a way to animate text based on scrolling? <p class="class">TEXT</p> transform:translateX(-500px);opacity:0; transform:translateX(0px);opacity:1; ...

javascripthtmlcss

Utilizing a mouse-over script for image popup alignment

I recently came across the mouse over script below on a website, and I must say it works really well and is very easy to use. The only issue I have with it is the placement of the image. Currently, the image follows the cursor as it moves. Question: Is th ...

javascriptjqueryhtmlcss

Attempting to utilize a Jquery Ajax post method to retrieve information from my specified URL and display it within my HTML Div element

Seeking assistance in fetching real-time data using a jQuery Ajax Post method. My experience lies mainly in SQL and C#, so coding in this language is relatively new to me. I was advised to use this script, which seemed straightforward. However, despite my ...

jqueryhtmlajaxasp.net-ajax

Is there a way to automatically fill a form from a database using the HTML column of a gridview?

I have developed an asp.net webform that contains checkboxes and textboxes. Upon submission, the data is stored in a SQL Server database. In addition to this form, I have created another webform with a gridview displaying the submitted data. My goal is t ...

c#jqueryhtmlasp.netgridview

Experiencing problems with malfunctioning javascript tabs

As a beginner user and coder, I'm currently working on creating a portfolio website. I had the idea to implement tabs that would allow for content swapping, but unfortunately, I'm having trouble getting the JavaScript to function correctly. I at ...

javascripthtmlcss

Having trouble with creating a new Next.js app using the latest version with npx?

Having some difficulty with the "npx create-next-app@latest" command while setting up Next.js. As a newcomer to both the community and Next.js, I could use some assistance in resolving this problem. Upon running the command, an unfamiliar message was displ ...

javascriptnode.jsnpmnext.jsnpx