Different Background color for each view in ASP.NET MVC using CSS

Question

I'm trying to build a website using ASP.NET MVC 4. My project came with a css file which affects all my views that make use of a main layout (_Layout.cshtml). I want to be able to use one of the three different background colors depending on the view and I need help with that. Here is what I have so far:

/* main layout
----------------------------------------------------------*/

.content-wrapper {
    margin: 0 auto;
    max-width: 960px;
}

#body {
    background-color: #eb6f5c;
    clear: both;
    padding-bottom: 35px;
}

#body#Geldi {
    background-color: #a0f3ab;
    clear: both;
    padding-bottom: 35px;
}

#body#Login {
    background-color: #e8f3a0;
    clear: both;
    padding-bottom: 35px;
}


footer {
    clear: both;
    background-color: #e2e2e2;
    font-size: .8em;
    height: 100px;
}

Research did not get me further than this. All my pages are still pinkish red (#eb6f5c). How can I tell Visual Studio that I want to use the "Geldi" body type or the "Login" one for a particular view?

Andrew Burgess · Accepted Answer · 2012-07-31 02:32:43Z

2

First, I don't think you can use that particular CSS selector (I think it translates to select element with ID="body" and also ID="Login" (or "Geldi"), but CSS is not my strength). If you are setting it for the body tag of the page, get rid of the #body and just use body since you can select by HTML element name. So instead: body#Login and body#Geldi

After that, it would probably be best to use ViewData, and set it in your subview (Login view or something), which will then make it available to your Master View

For instance:

_Layout.cshtml

<body id='@(ViewData["PageId"] ?? "")'>
    @RenderBody()
</body>

Login.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewData["PageId"] = "Login";
}

<div id='content'>
    <!-- All of your page content here and whatever -->
</div>

edited Jul 31, 2012 at 2:32

answered Jul 31, 2012 at 1:53

Andrew Burgess

5,2965 gold badges34 silver badges37 bronze badges

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

5 Comments

zerd Over a year ago

I got an error when I put that in: Compiler Error Message: CS1502: The best overloaded method match for 'string.IsNullOrEmpty(string)' has some invalid arguments No idea what to do now.

zerd Over a year ago

I think that's going to work, first it only made my my header green on the "green page", then i put it in a div that already had an id of "body" and it turned white, but I'll keep trying.

zerd Over a year ago

Also, if I remove the # in front of the parameterless body in the css file, my header becomes red also. But it doesn't look like I can use the other ones if I don't remove it. Should I just assign a PageId to all my views (there aren't that many of them anyway) and just delete the default part?

Andrew Burgess Over a year ago

CSS isn't really my forté and I don't know exactly how your page is set up. Basically the PageId value is just a way to pass data to your _Layout.cshtml file if needed

zerd Over a year ago

Ok, thank you, I haven't worked out the details yet but I think this is the way to go. I will write my own layout next time with this setup, after I study a bit more html and css.

Collectives™ on Stack Overflow

Different Background color for each view in ASP.NET MVC using CSS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related