MasterPages and applying CSS to content pages - DOTNET

This is a discussion on MasterPages and applying CSS to content pages - DOTNET ; Right now the header of my master page contains all of the CSS styles for all of the pages that might be loaded in my ContentPlaceHolder. The problem is that my <style> tag is getting too large to manage. I ...

+ Reply to Thread
Results 1 to 10 of 10

MasterPages and applying CSS to content pages

  1. Default MasterPages and applying CSS to content pages

    Right now the header of my master page contains all of the CSS styles for
    all of the pages that might be loaded in my ContentPlaceHolder. The problem
    is that my <style> tag is getting too large to manage. I have 300 lines of
    styles in my masterpage and I don't need all of this for every page --
    somehow this can't be a smart way of managing styles.

    How do I programmatically apply styles in my MasterPage based on the
    ContentPlaceHolder page that's being shown?

    Or another way to ask it - how do I apply styles to ContentPlaceHolder pages
    since these pages cannot contain a <header> tag?

    Thanks for any direction,
    Mort


  2. Default Re: MasterPages and applying CSS to content pages

    "Mort Strom" <mail@rocksdream.com> wrote in message
    news:89601CD3-9C87-493C-B954-35583BED8A07@microsoft.com...

    > How do I programmatically apply styles in my MasterPage based on the
    > ContentPlaceHolder page that's being shown?
    >
    > Or another way to ask it - how do I apply styles to ContentPlaceHolder
    > pages since these pages cannot contain a <header> tag?


    Firstly, make sure you have runat="server" in the MasterPage's header tag
    e.g.

    <head runat="server">

    </head>

    Then, in the PageLoad event of the content page:

    Style objStyle = new Style();
    objStyle.ForeColor = System.Drawing.Color.Yellow;
    Header.StyleSheet.CreateStyleRule(objStyle, null, "td");

    or

    HtmlLink objCSS = new HtmlLink();
    objCSS.Attributes.Add("href", "~/css/DifferentStyle.css");
    objCSS.Attributes.Add("rel", "stylesheet");
    objCSS.Attributes.Add("type", "text/css");
    Header.Controls.Add(objCSS);


    --
    Mark Rae
    ASP.NET MVP
    http://www.markrae.net


  3. Default Re: MasterPages and applying CSS to content pages

    Well done! This is exactly the kind of solution I was looking for.
    I'm new to MasterPages. Thank you

    "Mark Rae [MVP]" <mark@markNOSPAMrae.net> wrote in message
    news:#vSB9M5eIHA.4120@TK2MSFTNGP06.phx.gbl...
    > "Mort Strom" <mail@rocksdream.com> wrote in message
    > news:89601CD3-9C87-493C-B954-35583BED8A07@microsoft.com...
    >
    >> How do I programmatically apply styles in my MasterPage based on the
    >> ContentPlaceHolder page that's being shown?
    >>
    >> Or another way to ask it - how do I apply styles to ContentPlaceHolder
    >> pages since these pages cannot contain a <header> tag?

    >
    > Firstly, make sure you have runat="server" in the MasterPage's header tag
    > e.g.
    >
    > <head runat="server">
    >
    > </head>
    >
    > Then, in the PageLoad event of the content page:
    >
    > Style objStyle = new Style();
    > objStyle.ForeColor = System.Drawing.Color.Yellow;
    > Header.StyleSheet.CreateStyleRule(objStyle, null, "td");
    >
    > or
    >
    > HtmlLink objCSS = new HtmlLink();
    > objCSS.Attributes.Add("href", "~/css/DifferentStyle.css");
    > objCSS.Attributes.Add("rel", "stylesheet");
    > objCSS.Attributes.Add("type", "text/css");
    > Header.Controls.Add(objCSS);
    >
    >
    > --
    > Mark Rae
    > ASP.NET MVP
    > http://www.markrae.net



  4. Default Re: MasterPages and applying CSS to content pages

    If objPage1CSS is added to the Header for Content Page1.aspx, then
    objPage2CSS added for Content Page2.aspx, will the Header tag retain Page1 &
    2 CSS for subsequent pages (page3, page4, etc)?

    "Mark Rae [MVP]" <mark@markNOSPAMrae.net> wrote in message
    news:#vSB9M5eIHA.4120@TK2MSFTNGP06.phx.gbl...
    > "Mort Strom" <mail@rocksdream.com> wrote in message
    > news:89601CD3-9C87-493C-B954-35583BED8A07@microsoft.com...
    >
    >> How do I programmatically apply styles in my MasterPage based on the
    >> ContentPlaceHolder page that's being shown?
    >>
    >> Or another way to ask it - how do I apply styles to ContentPlaceHolder
    >> pages since these pages cannot contain a <header> tag?

    >
    > Firstly, make sure you have runat="server" in the MasterPage's header tag
    > e.g.
    >
    > <head runat="server">
    >
    > </head>
    >
    > Then, in the PageLoad event of the content page:
    >
    > Style objStyle = new Style();
    > objStyle.ForeColor = System.Drawing.Color.Yellow;
    > Header.StyleSheet.CreateStyleRule(objStyle, null, "td");
    >
    > or
    >
    > HtmlLink objCSS = new HtmlLink();
    > objCSS.Attributes.Add("href", "~/css/DifferentStyle.css");
    > objCSS.Attributes.Add("rel", "stylesheet");
    > objCSS.Attributes.Add("type", "text/css");
    > Header.Controls.Add(objCSS);
    >
    >
    > --
    > Mark Rae
    > ASP.NET MVP
    > http://www.markrae.net



  5. Default Re: MasterPages and applying CSS to content pages

    "Mort Strom" <mail@rocksdream.com> wrote in message
    news:89601CD3-9C87-493C-B954-35583BED8A07@microsoft.com...
    > Right now the header of my master page contains all of the CSS styles for
    > all of the pages that might be loaded in my ContentPlaceHolder. The
    > problem is that my <style> tag is getting too large to manage. I have 300
    > lines of styles in my masterpage and I don't need all of this for every
    > page -- somehow this can't be a smart way of managing styles.
    >
    > How do I programmatically apply styles in my MasterPage based on the
    > ContentPlaceHolder page that's being shown?
    >
    > Or another way to ask it - how do I apply styles to ContentPlaceHolder
    > pages since these pages cannot contain a <header> tag?
    >
    > Thanks for any direction,
    > Mort


    Mort, I see you've been provided a rather elegant solution, but I'm curious
    why not use a separate style sheet?

    The site I'm working on now uses master pages and the style sheet linked to
    the master is being applied to the content pages without any extra effort.
    I'm asking because maybe there is something I can learn here.



  6. Default Re: MasterPages and applying CSS to content pages

    "Mort Strom" <mail@rocksdream.com> wrote in message
    news:35B464D7-0E29-4FBB-A6B1-B4AA52B3AC3D@microsoft.com...

    > If objPage1CSS is added to the Header for Content Page1.aspx, then
    > objPage2CSS added for Content Page2.aspx, will the Header tag retain Page1
    > & 2 CSS for subsequent pages (page3, page4, etc)?


    The thing to realise about a MasterPage is that it's not a "page" in the way
    that an aspx page is a "page" - in fact, a MasterPage is little more than a
    UserControl... If the good folks who wrote ASP.NET had called them
    LayoutControls instead of MasterPages, then this would have been obvious...
    :-)

    You say that you are new to MasterPages, so maybe you're confusing them with
    framesets...?

    They are totally different...

    When a content page is requested, ASP.NET uses the MasterPage to construct
    the HTML which will eventually be streamed down to the client - it does this
    every time... The MasterPage does not remain on screen or in memory when you
    request a new content page...

    So, every time you request a content page which needs extra styles, they
    need to be added every time - that's why the code I gave you needs to go in
    the content pages' code-behind, not the MasterPage's code-behind...


    --
    Mark Rae
    ASP.NET MVP
    http://www.markrae.net


  7. Default Re: MasterPages and applying CSS to content pages

    "BobF" <rNfOrSePeAzMe@charter.net> wrote in message
    news:OtCgF26eIHA.2448@TK2MSFTNGP03.phx.gbl...

    > Mort, I see you've been provided a rather elegant solution, but I'm
    > curious why not use a separate style sheet?
    >
    > The site I'm working on now uses master pages and the style sheet linked
    > to the master is being applied to the content pages without any extra
    > effort. I'm asking because maybe there is something I can learn here.


    The OP had a single style sheet which was being referenced directly in his
    MasterPage... However, this single stylesheet was becoming very large, and
    not all of the content pages required all of the styles in the sheet...

    Therefore, the solution I suggested allows him to break the stylesheet up
    into several more manageable stylesheets which can then be referenced as
    necessary by the content pages which need them...


    --
    Mark Rae
    ASP.NET MVP
    http://www.markrae.net


  8. Default Re: MasterPages and applying CSS to content pages


    "Mark Rae [MVP]" <mark@markNOSPAMrae.net> wrote in message
    news:uWYSe86eIHA.5560@TK2MSFTNGP04.phx.gbl...
    > "BobF" <rNfOrSePeAzMe@charter.net> wrote in message
    > news:OtCgF26eIHA.2448@TK2MSFTNGP03.phx.gbl...
    >
    >> Mort, I see you've been provided a rather elegant solution, but I'm
    >> curious why not use a separate style sheet?
    >>
    >> The site I'm working on now uses master pages and the style sheet linked
    >> to the master is being applied to the content pages without any extra
    >> effort. I'm asking because maybe there is something I can learn here.

    >
    > The OP had a single style sheet which was being referenced directly in his
    > MasterPage... However, this single stylesheet was becoming very large, and
    > not all of the content pages required all of the styles in the sheet...
    >
    > Therefore, the solution I suggested allows him to break the stylesheet up
    > into several more manageable stylesheets which can then be referenced as
    > necessary by the content pages which need them...
    >


    Oh. I thought he had the style code embedded in the master page ...

    Thanks.



  9. Default Re: MasterPages and applying CSS to content pages

    Indeed I was confusing MasterPages with framesets and your explanation has
    cleared that up. Thanks again for helping bring MasterPages into clearer
    focus.

    On my way
    Mort

    "Mark Rae [MVP]" <mark@markNOSPAMrae.net> wrote in message
    news:eBgUC66eIHA.5560@TK2MSFTNGP04.phx.gbl...
    > "Mort Strom" <mail@rocksdream.com> wrote in message
    > news:35B464D7-0E29-4FBB-A6B1-B4AA52B3AC3D@microsoft.com...
    >
    >> If objPage1CSS is added to the Header for Content Page1.aspx, then
    >> objPage2CSS added for Content Page2.aspx, will the Header tag retain
    >> Page1 & 2 CSS for subsequent pages (page3, page4, etc)?

    >
    > The thing to realise about a MasterPage is that it's not a "page" in the
    > way that an aspx page is a "page" - in fact, a MasterPage is little more
    > than a UserControl... If the good folks who wrote ASP.NET had called them
    > LayoutControls instead of MasterPages, then this would have been
    > obvious... :-)
    >
    > You say that you are new to MasterPages, so maybe you're confusing them
    > with framesets...?
    >
    > They are totally different...
    >
    > When a content page is requested, ASP.NET uses the MasterPage to construct
    > the HTML which will eventually be streamed down to the client - it does
    > this every time... The MasterPage does not remain on screen or in memory
    > when you request a new content page...
    >
    > So, every time you request a content page which needs extra styles, they
    > need to be added every time - that's why the code I gave you needs to go
    > in the content pages' code-behind, not the MasterPage's code-behind...
    >
    >
    > --
    > Mark Rae
    > ASP.NET MVP
    > http://www.markrae.net



  10. Default Re: MasterPages and applying CSS to content pages

    Hello Mark,

    I have tried to apply your technique to nested master pages and their subsequent content pages, with out any success.

    IE:
    _template.master <- uses templateStyle.css

    layout1.master <- inherits styles from templateStyles.css + adds layout1.css
    layout2.master <- inherits styles from templateStyles.css + adds layout2.css

    content1.aspx <- styles = templateStyle.css, layout1.css, + content1.css
    content2.aspx <- styles = templateStyle.css, layout2.css, + content2.css

    I have tied to implement your example, but rather than adding the code you have provided for the pageLoad in the content page, I have added it to the 2nd level nested master page. _template.master head tag has ID="Header" & runat="server" ..... but still no luck,
    like the original poster I am somewhat new to this.

    Thanks in advance
    John

+ Reply to Thread