Change the style of a content placeholder when using a master page

Question

I have a web site (VS2010, asp.net, VB) and I am using a master page. I have several other pages and on one of them I want to set the background color of just to content placeholder. I am using a style sheet and have the following code on the .aspx page. (this is just test code)

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Dashboard2.aspx.vb" Inherits="Dashboard2" %>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="body_color">
<table id="mainDisplay">
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</table>
</div>
</asp:Content>

I have tried referencing the id of the content placeholder but doesn't work.

The following is the CSS for the table as I centre it horizontally and vertically.

#mainDisplay
{
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    width:900px;
    height:450px;
}

Updated code to show all on the aspx page

rkawano · Answer 1 · 2013-10-04T14:12:36.223

2

ContentPlaceHolder element are not rendered on client code. View your generated sourcecode and check. You need to apply styles to your div inside ContentPlaceHolder.

Example:

<style>
    #placeHolderDiv {
        width: 1000px;
        height: 650px;
        background-color: #AAA;
    }
    #mainDisplay {
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        width: 900px;
        height: 450px;
        background-color: #DDD;
    }
</style>


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div id="placeHolderDiv">
        <table id="mainDisplay">
...

edited Oct 04 '13 at 14:12

answered Oct 04 '13 at 13:42

rkawano

2,443
22
22

thanks, I tried that and the color was only as thick as the table. I want it to cover the span of the content place holder. – Silentbob Oct 04 '13 at 13:43
You need to set width and height of the div to achiev this effect. – rkawano Oct 04 '13 at 13:48
I tried that before posting but I centre the table horizontally and vertically and for some reason the div color starts at the top of the table and finished at the bottom. the horizontal color is as wide as the page though. if I set the height to say 1200px then it still starts at the top of the table and goes down 1200px's therefore there is a white gap above the table. ill post the css I have which might help. – Silentbob Oct 04 '13 at 13:52
The content after the table are before ? – rkawano Oct 04 '13 at 13:54
There wont be any other content its all in the table. So the
will open then the table then the table closes then the div closes.
– Silentbob Oct 04 '13 at 13:58
You need to improve your code example showing these extra details. I believe your problem now is not about contentPlaceHolder, but is about to generate a background around a centered table. – rkawano Oct 04 '13 at 14:00
OK I will add it all in all thought there isn't much more to see. – Silentbob Oct 04 '13 at 14:03

score 1 · Accepted Answer · edited May 23 '17 at 12:24

Solution #1: CSS

If this is a CSS issue and you are simple finding a gap around your content, you'll likely need to adjust the way you're styling your divs. Try giving the container div (the one around the table that holds the background color) this class:

.container-div 
{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    top:100px;
}

This assumes you want a 100px gap at the top of your container div.

Solution #2: Change background with jQuery

Add a script tag within the tag in your content page. Within the script tag, place a jQuery code to change the class of the appropriate background layer. The following example assumes your background

Example:

Master page HTML

<body class="default-bg">
    <p>This is your content outside the ASP content place holder.</p>

    <asp:ContentPlaceHolder runat="Server" ID="ContentPlaceHolder1">
    </asp:ContentPlaceHolder>
</body>

Content page HTML

    <script>
        $(function(){
            $('.my-background-layer').removeClass('default-bg').addClass('alternate-bg');
        )};
    </script>



    <div>
        <table id="mainDisplay">
            <tr>
                <td>a</td>
                <td>a</td>
                <td>a</td>
            </tr>
            <tr>
                <td>a</td>
                <td>a</td>
                <td>a</td>
            </tr>
            <tr>
                <td>a</td>
                <td>a</td>
                <td>a</td>
            </tr>
        </table>
    </div>
</asp:Content>

CSS

.default-bg {background:white;}
.alternate-bg {background:grey;}

Keep in mind that ContentPlaceHolders are designed to only replace segments of code within the master page. A good technique I follow is to place at least two ContentPlaceHolders in the header section of your master page.

The first is for your default CSS and Javascript references, while the second is for additional content page references. If you leave out these ContentPlaceHolders from your content page, the default settings from your master page will take effect. However, if you want to change either the main CSS or Javascript references, you need only add an tag for that ContentPlaceHolder and add your code for that content page.

How to implement jQuery

I figured you might need a little crash course in how to install jQuery since you mentioned you dislike javascript (you'll have to learn it sooner or later btw). Here is a link to decent instructions:

Implementing jQuery (Stack Overflow)

I added `$(function(){...})` to make it an anonymous function. Otherwise I am unsure if it would trigger automatically. — Ross Brasseaux, Oct 04 '13 at 13:57
@user2050577 You can only change the code for the items within the ContentPlaceHolder using the technique described by rkawano. If you want to change the entire page's background color, you'll have to either replace the entire CSS stylesheet (obviously this is not recommended) or use javascript. That is unless your CPH wraps around the entire page or the element within the CPH is styled to cover the entire background (don't do that last part). — Ross Brasseaux, Oct 04 '13 at 14:05

Change the style of a content placeholder when using a master page

2 Answers2

Solution #1: CSS

Solution #2: Change background with jQuery

How to implement jQuery