How to modify the style of asp.net page that use asp:Content?

Question

I have asp.net page like this:

Default.aspx:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"></asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

     ...

</asp:Content>

Default.aspx.cs:

protected void Page_Load(object sender, EventArgs e) {
    BodyContent.Style["background-color"] = "Red";  // #1 This code doesn't work
}

I want to modify the background color of the page. I put the code above (#1) and it doesn't work.

So, how to modify the background color of the page?

Ashfaq Shaikh · Accepted Answer · 2011-12-14 08:33:56Z

6

   <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
         <div runat="server" ID="divMain">

</div>

    </asp:Content>
protected void Page_Load(object sender, EventArgs e) {

divMain.Style.Add("background-color", "red");
}

OR YOU CAN DO IT IN THIS WAY

       Page.Header.Controls.Add(
    new LiteralControl(
        @"<style type='text/css'>
                .myClass
                {
                    background-color: red;

                }
                </style>
            "
        )
);

answered Dec 14, 2011 at 8:33

Ashfaq Shaikh

1,66812 silver badges20 bronze badges

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

12 Comments

null Over a year ago

The background color changed only for the divMain, but not the entire page (<body>).

Ashfaq Shaikh Over a year ago

Page.Header.Controls.Add( new LiteralControl( @"<style type='text/css'> body { background-color: red; } </style> " ) );

null Over a year ago

@ Ashfaq Shaikh: oops, yes the second method works. Is there other alternative? Thx

null Over a year ago

Actually, I set the background colour based on the value saved in cookie. So your code will be like this: Page.Header.Controls.Add( new LiteralControl( @"<style type='text/css'>body { background-color: " + Request.Cookies["BackgroundColor"].Value + "; }</style>" ) );

Ashfaq Shaikh Over a year ago

you can make body tab as runat server and give it class. it will works fine.

|

Guffa · Accepted Answer · 2011-12-14 08:29:21Z

5

You can't style Content controls, as they don't render as any HTML element. They are just used to separate the content between files.

You can put a style element in the header:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style type="text/css">
body { background-color: red; }
</style>
</asp:Content>

answered Dec 14, 2011 at 8:29

Guffa

703k111 gold badges760 silver badges1k bronze badges

1 Comment

null Over a year ago

Yes, it works but I'm looking for the codebehind solution to set the background-color.

Pleun · Accepted Answer · 2011-12-14 08:53:32Z

3

Wrap a DIV around your contentplaceholder in your masterpage, and use CSS to style the DIV.

This will result in

<div class="mydiv">
<asp:ContentPlaceHolderID="MainContent"> 
     ... 
</asp:Content>
</div>

edited Dec 14, 2011 at 8:53

answered Dec 14, 2011 at 8:32

Pleun

8,9102 gold badges33 silver badges51 bronze badges

1 Comment

Eray Balkanli Over a year ago

When I try this, I receive error: Parser Error Message: Only Content controls are allowed directly in a content page that contains Content controls.

Collectives™ on Stack Overflow

How to modify the style of asp.net page that use asp:Content?

3 Answers 3

12 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related