CODEWITHSUNDEEP
htmlcssasp.net-mvcbackground-color
zerd
zerd

Reputation: 27

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

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?

Upvotes: 0

Views: 11089

Answers (1)

Andrew Burgess
Andrew Burgess

Reputation: 5298

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>

Upvotes: 2

Related Questions