Need to know how to alter master page css settings for just one page.

Last post 08-23-2007 1:44 PM by Lee Dumond. 6 replies.

Sort Posts:

  • Need to know how to alter master page css settings for just one page.

    08-23-2007, 10:16 AM
    • Member
      403 point Member
    • LD50
    • Member since 08-20-2007, 1:56 PM
    • Brighton, UK
    • Posts 113

    Hey, I'm a bit new with using css in ASP.NET.  I have a Page.Master and it has a Main.css.  There's one page they we need to be blue now, but the left main and right column, and the nav bar are all formed in Page.Master.  I would like to know how I can make a child page change the colors on them as well. 

  • Re: Need to know how to alter master page css settings for just one page.

    08-23-2007, 11:08 AM
    • Contributor
      6,366 point Contributor
    • Lee Dumond
    • Member since 11-03-2004, 10:51 AM
    • Decatur, IL USA
    • Posts 1,168

    You could set new rules in the style= attribute of the element itself.

    Duplicate rules are allowed in CSS. Rules declared in the element will override the same rule declared in an external stylesheet. 

  • Re: Need to know how to alter master page css settings for just one page.

    08-23-2007, 11:11 AM
    • Member
      403 point Member
    • LD50
    • Member since 08-20-2007, 1:56 PM
    • Brighton, UK
    • Posts 113

     yes, but the elements are in the master page.  I don't want to alter the master page because every other page on the site uses it.

  • Re: Need to know how to alter master page css settings for just one page.

    08-23-2007, 11:42 AM
    • Contributor
      6,366 point Contributor
    • Lee Dumond
    • Member since 11-03-2004, 10:51 AM
    • Decatur, IL USA
    • Posts 1,168
    Sorry I wasn't more clear. I wasn't suggesting that you change the markup. You can change it in the Page_Load of the page itself.

    Let's say you have a style in Main.css that controls the background color of a div in the Master page, with an ID of myDiv. 

    You can set it to a different color (say, blue) by setting an element-level style on it in the Page_Load of the child page:

     

    protected void Page_Load(object sender, EventArgs e)
        {
            HtmlGenericControl myDiv = (HtmlGenericControl)Page.Master.FindControl("myDiv");
            myDiv.Attributes.CssStyle.Add(HtmlTextWriterStyle.BackgroundColor, "blue");
        }
      
  • Re: Need to know how to alter master page css settings for just one page.

    08-23-2007, 1:04 PM
    • Member
      403 point Member
    • LD50
    • Member since 08-20-2007, 1:56 PM
    • Brighton, UK
    • Posts 113

    I'll give it a try !  Thx a lot ! 

  • Re: Need to know how to alter master page css settings for just one page.

    08-23-2007, 1:28 PM
    • Member
      403 point Member
    • LD50
    • Member since 08-20-2007, 1:56 PM
    • Brighton, UK
    • Posts 113

    Ok, so I can change the background and color for "Body" no problem.  But can I change the attributes for "logo", "box-office", and "navigation" without altering the Master?  I tried with the code you gave me, but obviously they don't have an ID....

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Page.master.cs" Inherits="Page" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Header" runat="server"></head>

    <body id="Body" runat="server">
    <form runat="server">

        <div class="logo"><h1>Anonymous</h1></div>
        <div class="box-office">Box Office: 416.XXX.XXXX</div>

        <yc:Navigation ID="Navigation" runat="server" />

        <asp:ContentPlaceHolder id="Misc" runat="server"/>

        <div class="column main-column">
            <asp:ContentPlaceHolder id="MainColumn" runat="server"/>
        </div>

        <div class="column left-column">
            <asp:ContentPlaceHolder id="LeftColumn" runat="server"/>
        </div>

        <div class="column right-column">
            <asp:ContentPlaceHolder id="RightColumn" runat="server"/>
        </div>

    </form>
    </body>

    </html>
     

  • Re: Need to know how to alter master page css settings for just one page.

    08-23-2007, 1:44 PM
    Answer
    • Contributor
      6,366 point Contributor
    • Lee Dumond
    • Member since 11-03-2004, 10:51 AM
    • Decatur, IL USA
    • Posts 1,168

     Well, they have to have an ID and be addressable server-side, so just do this:

      

    <div class="logo" id="logo" runat="server"><h1>Anonymous</h1></div>
    <div class="box-office" id="boxoffice" runat="server">Box Office: 416.XXX.XXXX</div>
     
Page 1 of 1 (7 items)