ansaurus

Question

Temporarily override Theme CSS in ASP.NET

Answer 1

A:

You can use something similar to:

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

Alan Haggai Alavi 2009-06-11 02:33:56

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

Fireworks 2009-06-11 02:44:42

Answer 2

+1 A:

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;}

Rex M 2009-06-11 02:41:48

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.

Fireworks 2009-06-11 03:10:18

Answer 3

A:

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;
}

Fireworks 2009-06-11 03:35:08

Answer 4

A:

Use OnPreRenderComplete event, like this:

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

Cleyton T 2009-12-07 21:44:25

ansaurus

tags:

views:

answers:

Temporarily override Theme CSS in ASP.NET

related questions