Background: I want to avoid creating an Alternate Layout for my home-page and I'd like to keep the "The Theme Machine" zones and layout next to intact, and actually "theme" most of everything using pure CSS. So I need to selectively target CSS to specific "pages", including, and most importantly, the homepage. The simplest way to do that would be to add a class to the layout-wrapper "div" that wraps the entire layout. I could add a class to the "body" element by overriding the Document.cshtml file, but I really think it is cleaner to just work inside the Layout.chstml file and capitalize on the Model.Classes to add the needed CSS classes to the "opening" tag.
I' currently doing something like this:
string area = Model.DesignatedAreaField;
Model.Classes.Add(string.IsNullOrWhiteSpace(area) ? "home" : area);
Model.Id = "layout-wrapper";
var tag = Tag(Model, "div"); // using Tag so the layout div gets the classes, id and other attributes added to the Model
I know that the Area will not cut, because the homepage, and other pages are all in the same area, and Model.DesignatedAreaField actually returns an empty string for either the homepage or other pages. So, in the end, the code above will ALWAYS generate the following markup (I'm showing the 3 tripels on the homepage):
<div class="home tripel-123" id="layout-wrapper">
I would like to be able to add the "home" CSS class only when the homepage is being displayed. Some pseudo-code would be as follow:
string wrapperCss = IsHomepage ? 'home' : Model.GetUrlPathOrSomethingUniqueForThePath();
Model.Classes.Add(wrapperCss);
This will allow me to, for example, make the main content shrink and float to the right, and put the tripels on its left (that's how the home page design should look like, but I don't want to write an entire different layout for the home if I could do the same with simple, targeted CSS).