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

Change the text color of the Vuetify button to customize its appearance

Is there a way to change the default active color for button text in a toolbar using CSS? v-btn(:to="item.path" active-class="v-btn--active toolbar-btn-active") {{item.meta.title}} I attempted to override it with this custom class: .toolbar-btn-active { ...

htmlcssvue.jsvuetify.js

Troubleshooting display problems with the categories menu in Opencart version 1.5.1 caused by IE

For our opencart website, we utilize the li element for the sub categories items. displays properly on all modern browsers. However, we need to ensure compatibility with Internet Explorer 6 as well. ...

htmlcss

Disable the functionality of the next and previous buttons for the Bootstrap carousel when clicking on the outer

Here is the code for the carousel: The next/prev button functions under its respective div, how can I stop it? When I click on the div below the carousel, the carousel continues to move as usual. Below the carousel div, there is another one with a tabbi ...

javascriptjqueryhtmlcsstwitter-bootstrap

Not all divs are triggering the hover event as expected

I am facing an issue while creating a webpage with overlapping background and content divs. The hover event works properly on the div with the class "content," but not on the div with the class "background." There is no interference with the event in the J ...

javascripthtmlcss

Having trouble with Simplehtmldom's innertext function?

While working with simple_html_dom: I encountered the following code snippet: $j = ' <itemBody> <div>films - to watch (Simple Present)<br/> <textEntryInteraction responseIdentifier="RESPONSE_1"/> ...

phphtmlxmldomsimple-html-dom

How to modify the color of a div element with jQuery?

I need some help changing the color of a div with 'jQuery', but I am not sure how to do it. Below is the code I have been trying: function updateDivColor() { $('#OutlineX1').css("color","blue"); } ...

javascriptjqueryhtmlcss

What is the best way to customize the color of the border and icon in an outlined MaterialUI input field

I'm a newcomer to materialUI and I have a question regarding customizing an outlined input field with an icon. Due to my dark background, I need the icon, border, and text color to be lighter, such as grey. Can someone please advise on the materialUI ...

cssreactjsmaterial-ui

Guide to Incorporating a Marker into an SVG Blinking Rectangular or Circular Border Image on Google Maps

I have a link that points to a specific location on Google Maps using latitude and longitude: http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png Now, I am looking to add a blinking border to this marker link. Is there a way to achieve this ...

javascripthtmlcssimagephotoshop

What are the differences in how a link tag responds on mobile devices?

I have a question regarding opening a pdf in an iframe on the current page. Is there a way to handle this differently for mobile/tablet users? For example, clicking the link could open it in another tab for better readability instead of within the iframe ...

javascriptjqueryhtml

Tips for retrieving specific database entries using a JavaScript function

I'm currently in the process of developing a web directory that showcases organizations based on the selected county by utilizing an XML database. During testing, I have configured it to only display organization names and counties for now. However, ...

javascripthtmlxmlxpath

Empty Media Viewer

I am encountering an issue with setting up a code, as it only displays a blank white page. Any suggestions on what might be causing this problem in the setup and assistance in resolving it would be greatly appreciated. <script type="text/javascript ...

javascripthtmljqueryjwplayer

Delivering XML in response to a webmethod call

While working with an ajax PageMethod to call an asp.net webmethod, I encountered an issue when trying to pass a significant amount of XML back to a callback javascript function. Currently, I am converting the XML into a string and passing it in that form ...

javascriptajaxxmlvb.netwebmethod

Issue encountered while trying to exhibit jpg image content from server side on html

I am attempting to display an image from server-side data using an Ajax call. The data stored on the server looks something like this: "ÿØÿàJFIFÿÛC4­¶¸UOHlʵcBò)3¹_È'I4~&éüÿ§Ú<ã©ã4>'Øù¿ÇÄmËCÈgÚsZ¥ë" Upo ...

javascripthtmlangularjsajax

What is the best way to change the maxWidthLg of Material UI's .MuiContainer?

I need to remove the max-width that is set in the theme. When I look at it in Chrome and uncheck the option, it functions as desired: @media (min-width: 1280px) .MuiContainer-maxWidthLg { max-width: 1280px; } How can I achieve this? I have attempted ...

cssreactjsmaterial-uioverriding

Learn how to set up webpack or Next.js to generate a CSS file from custom Material styles and automatically inject it into the header

One of the things I've done is define some custom material styles, like this: import {createStyles, makeStyles, Theme} from '@material-ui/core/styles'; export const useStyles = makeStyles((theme: Theme) => createStyles({ fab ...

cssreactjswebpackmaterial-uinext.js

Is there a copyright concern regarding CSS?

There are countless websites that spark my creativity. If I am inspired by a particular design, CSS, or JavaScript on one of these sites, am I allowed to copy it to my local folder and use it? For instance, let's say I come across a website called xy ...

css

Animating CSS using JavaScript

Recently diving into the world of JavaScript, I've taken on the challenge of creating an analog clock. I began by crafting the second hand using CSS but now I'm eager to transition it to Javascript without relying on jQuery or any other JS framew ...

javascriptcss

The search results in ajax live search are present, but unfortunately they are not displaying on

I am currently working on a code for an ajax live search feature and need some help with getting results to display $(document).ready(function() { $("#search").keyup(function() { var query = $(this).val(); if (query != "" && query.leng ...

htmljqueryajaxsearchlive

Ways to update a specific div upon clicking an image

Is there a way to refresh a div using an image click? I have an image with the id 'sellhide' and another div with the id 'sellChart'. Below is the code: <div class="col-xs-12 col-lg-6 col-sm-6 col-md-6 index_table_three" id="sellCha ...

javascriptphpjquerycssajax

Is it possible to conceal JavaScript comments on a page before it is displayed?

Curiosity has led me to ponder a question that may seem trivial. Consider this scenario: in my HTML or ASPX page, I include a comment for some JavaScript code. When the page loads, will the comments be rendered along with the rest of the page's conten ...

javascriptjqueryasp.nethtmlbrowser