Temporarily override Theme CSS in ASP.NET

Question

I have a MasterPage that is two column layout, left column menu, right column content. The whole page is XHTML/Divs/CSS layout. So the columns are div's with CSS applied to size them.

For one page, a grid page, I want only one column (the content column) to be 100% width for maximum viewing area.

How can I use the same masterpage and the same theme on this one off exception page?

Creating a whole new masterpage and adding a new CSS property to the theme just for this one page seems like overkill. Is there a way to override the content div's CSS width property on just this page? I'm not an expert in CSS but I thought there was a way to do this.

I do have some reservations about letting the client side do overriding though; for compatibility reasons. I would prefer a server side override.

Any suggestions?

I think the way to solve this painlessly is to add another content region that acts as a one column. That div can have the style that has 100% width. I'll post with results. — Fireworks
– Fireworks, Commented Jun 11, 2009 at 3:22

Rex M · Accepted Answer · 2009-06-11 02:41:48Z

1

Give each page a distinct CSS class in code, and target that class in your CSS. Here is a stupid-simple way to accomplish it:

Create your own MasterPage class:

class MyMasterPage : MasterPage
{
    public string BodyClass {get;set;}
}

In your Master Page:

<%@ Master Inherits="MyNamespace.MyMasterPage" %>
...
<body class="<% =this.BodyClass %>">
    <asp:ContentPlaceHolder ... />
</body>
...

And in the codebehind of your page:

void Page_Load(object sender, EventArgs e)
{
    ((MyMasterPage)Master).BodyClass = "specialpage";
}

And in your CSS class:

.specialpage .mainColumn {width:100%;}
.specialpage .otherColumn {display:none;}

answered Jun 11, 2009 at 2:41

Rex M

144k34 gold badges292 silver badges315 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fireworks Over a year ago

Interesting. However I'd have to change all of the pages to accommodate an exception. I don't have any requirements beyond this page to apply a different style to a shared div based on page. Gave me an idea though.

Alan Haggai Alavi · Accepted Answer · 2009-06-11 02:33:56Z

0

You can use something similar to:

#content {
    /* Some styles */
    width: 100% !important;
}

answered Jun 11, 2009 at 2:33

Alan Haggai Alavi

74.7k19 gold badges105 silver badges129 bronze badges

1 Comment

Fireworks Over a year ago

I take that this is how you override on the client?

Fireworks · Accepted Answer · 2009-06-11 03:35:08Z

Worked like a charm. Solution to this is to add another region to the masterpage with a new div that has the 100% width CSS assigned to it. Also create a new style entry in your CSS file. On the content page put the content you want to be 100% width in the region that has the style for 100% and not in the one that corresponds with the two column layout.

After that it's just a matter setting the content page to either use the masterpage content of the content page content.

MasterPage:

<!-- start page -->
<div id="page">
    <!-- start content -->
     <div id="contentOneColumn" >
      <asp:ContentPlaceHolder ID="ContentPlaceHolderContentOneColumn" runat="server">
      <!-- content that needs 100% width, one column -->
     </asp:ContentPlaceHolder>
     </div>     
    <div id="content" >
        <asp:ContentPlaceHolder ID="ContentPlaceHolderContent" runat="server">
        <!-- content that works with two column -->
        </asp:ContentPlaceHolder>

CSS:

/* Content */

content {
    float: right;
    width: 600px;
}

/* ContentOneColumn */
contentOneColumn {
    float:none;
    width: 850px;
}

Cleyton T · Accepted Answer · 2009-12-07 21:44:25Z

0

Use OnPreRenderComplete event, like this:

protected override void OnPreRenderComplete(EventArgs e)
    {
        base.OnPreRenderComplete(e);
        rfv_login.CssClass = "ValidatorReset";
        rfv_pwd.CssClass = "ValidatorReset";
    }

answered Dec 7, 2009 at 21:44

Cleyton T

1

Collectives™ on Stack Overflow

Temporarily override Theme CSS in ASP.NET

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related