Is it possible for me to customize the CSS of the masterpage for a specific aspx file?

Recently, I completed a website that was almost ready to be published. However, my client now wants to add a new page with similar content as the main masterpage (including the logo, menu, and a few buttons), but with some changes in colors and background images.

Currently, my masterpage includes:

    <link id="Link1" runat="server" href="~/Styles/masterPage.css" rel="stylesheet" type="text/css" />

Instead of creating a whole new masterpage for just one single .aspx file, is it possible to create a new page.aspx based on the existing masterpage, but instructing the masterpage to use "masterPage2.css" instead of "masterPage.css"?

I hope the question makes sense, English is not my first language so I apologize if it's unclear. Thank you very much.

htmlcssvb.net

Answer №1

Of course, it is possible to customize the CSS styles by loading another .css file with your desired changes. Just make sure to load this file after the masterpage.css file.

In essence, you are replacing or overriding the existing CSS rules in your initial .css file.

For example:

masterpage.css
#someid{
      background-color:Orange;
}

specificstyle.css
#someid{
    background-color:White;
}

Therefore, you should only make modifications in the specificstyle.css file.

Masterpage

<link id="Link1" runat="server" href="~/Styles/masterPage.css" rel="stylesheet" type="text/css" />

Page.aspx

<link runat="server" href="~/Styles/specificstyle.css" rel="stylesheet" type="text/css" />

Note: If the new styles are not applied, consider using the !important keyword in the CSS rule.

#someid{
    background-color:White !important;
}

Answer №2

Success! Even with my basic knowledge of VB. I took both CSS styles out of the stylesheet and added this to the master page:

<link runat="server" id="ChangingCss" href="" rel="stylesheet" type="text/css" />

In the master VB file, I included this code:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Dim test As String = Request.RawUrl
    If test Like "*page.aspx*" Then
        ChangingCss.Href = "~/Styles/sec.css"
    Else
        ChangingCss.Href = "~/Styles/Main.css"
    End If
End Sub

I believe this is the first time I've gotten VB code to work properly :) Super happy about it! Thanks a bunch!

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

Issue with readonly is preventing the ability to alter the font color of the input

I need to change the font color of a disabled input. When it is disabled, it appears gray and I want it to be black instead. I attempted to use readonly but that did not have the desired effect, and now the input is showing [object Object]. Below is my HTM ...

javascripthtmlcssangulartypescript

Creating a JavaScript function that responds to multiple click events

Can someone please help me out? I have the link to the output of my work below using JavaScript and HTML: My goal is for only one circle to be active when clicked, while the others are disabled. Currently, when I click on a circle and then another one, bo ...

javascriptjqueryhtml

Grabbing only the button element using jQuery when a click event occurs

HEY THERE! I have a simple question that I need help with. To better explain the issue, I've included a small code snippet below. The problem I'm facing is related to grabbing the id of a button. Everything works fine except when I click on any ...

javascriptjqueryhtml

Having issues with a Retina iPhone interacting with a website built using responsive Twitter Bootstrap

I'm currently utilizing Twitter Bootstrap alongside responsive CSS for a web page that is optimized to run in a UIWebView. My goal is to ensure the consistency of the page's appearance across all iPhones, with an exception for images. These imag ...

iphonecssiostwitter-bootstrapresponsive-design

Integrate my API with HTML using J.Query/Ajax technology

Finally, after much effort, I have successfully created a JSON java API. My API design is simple and based on Interstellar movie details: { "title": "Interstellar", "release": "2014-11-05", "vote": 8, "overview": "Interstellar chronicl ...

javascriptjqueryhtmljsonajax

What is causing all three boxes to shift when I'm attempting to move just one of them?

Seeking assistance with a problem I'm encountering. As I work on creating my website, I've run into an issue where trying to move one of the three individual boxes (as shown in the image) causes all three of them to shift together. You can view t ...

htmlcsswebmargin

Tips for utilizing the "Sign In with Apple" feature through Apple JS

For implementing "Sign In with Apple" on a web platform using Apple JS, you can refer to the code example available at this link. Now, the query arises: where can I find the Client ID required for this process? I have tried using the app id identifier fro ...

javascripthtmlapple-sign-in

Attempting to create a dynamic layout for the objects using media queries and flexbox, however, the results are not as expected

.container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; flex-direction: column; } .item { margin: 10px; border: 1px solid lightgray; border-radius: 10px; overflow: hidden; width: 100%; } @media scree ...

htmlcssflexboxresponsive-designmedia-queries

How can I dynamically assign a class to an HTML element in Codeigniter?

In my CodeIgniter application, I am utilizing a Bootstrap template that includes a menu as a separate file. This menu is called on all pages and when a menu item has the class="active", it is highlighted to show users their current location. My question is ...

phphtmlcodeigniter

Embedding a video element results in an unexpected increase in height

When I insert an HTML5-Video element into a div, it results in the wrapper having a height larger than the video itself. The wrapper is 7px taller than the actual video source, without any min-height set. Check it out! (Scroll down to the Video) The vide ...

htmlcsshtml5-video

Generate time-dependent animations using circles

Hey there, I am trying to create an animation that involves drawing three circles and having one of them move from right to left. The circles should appear randomly in yellow, blue, or orange colors on the canvas at different intervals (3 seconds between ...

javascripthtmlcanvas

Struggling with making an Ajax and Jquery drop down menu work? Wondering how to use Javascript to retrieve a variable and then utilize it in PHP? Let's troubleshoot

Currently, I am utilizing Ajax/Jquery to present a dropdown menu with data retrieved from my SQL database. The process involves using javascript to obtain a variable that is then utilized in PHP. However, the function doesn't seem to be working as exp ...

javascriptphpjqueryhtmlajax

jQuery form validation not functioning as expected

I'm attempting jQuery form validation but encountering issues with the desired functionality. I would like the border of an input to turn red when it's empty upon focus out. Alternatively, I aim to incorporate the "has-danger" bootstrap class to ...

javascriptjqueryhtmlcssfrontend

Removing a blank line from a null variable in PHP and appending a backspace to it to display HTML text

How can I remove the empty line for a null variable? For example: $line1 = "Hello All"; $line2 = "Hello You"; $line3 = "Hello Me"; $line2 = null; Now when I echo echo "$line1<br>$line2<br>$line3"; it shows an empty line in the middle whe ...

phphtmltextnullecho

Struggling to access a .html page using Selenium?

Currently utilizing behat/mink, selenium 2 driver, and chrome driver in php to navigate a unique issue. Attempting to access a dummy HTML page proving challenging. Our team is implementing a chatbot onto our main site's landing page as an iframe posit ...

phphtmlseleniumbehatmink

Understanding the structure of html elements

Within my downloaded HTML files, I consistently have key executives mentioned at the beginning of each file (like "Dror Ben Asher" in the code snippet below): <DIV id=article_participants class="content_part hid"> <P>Redhill Biopharma Ltd. (NA ...

pythonhtmlbeautifulsouphtml-parsing

Ways to incorporate vertical alignment while adjusting the size of a <div> block

Seeking advice on how to vertically align <div> blocks (green blocks in my example) when changing block size. What adjustments are needed in my example for the vertical alignment (middle) of side blocks to be maintained when resizing the browser win ...

htmlcssalignmentvertical-alignment

Checking File Upload Progress in HTML and PHP

As a newcomer, I've been struggling to find a solution to an issue I'm facing. My concern is regarding a form that is meant to upload a file and send it via email. How can I display the progress status of the file being uploaded? It seems that us ...

javascriptphphtmlformsfile-upload

Excess space creating horizontal and vertical scrolling issues on an HTML webpage

Currently, I am experimenting with CSS effects. In my code, I have included div elements to display balls on the document body, each with random sizes and colors. However, an unexpected issue has arisen - excess scroll space is being generated due to the c ...

javascripthtmlcsslayoutresponsive-design

What is the process of choosing a language (English/French) within a pop-up?

<body style="text-align:center"> <h2>Popup</h2> <div class="popup" onclick="myFunction()">Interact with me to show/hide the popup! <span class="popuptext" id="myPopup">A Simple Popup!</span> </div> <script& ...

javascripthtmlwebpopuppopupwindow