Orchard - add class or id to the body using fields

Question

My questions is - how do I add a class or id to the body tag using a text field within Orchard?

So if I enter the word "product" in the text field then the result should be <body class="product">. I want to use this method instead of creating alternate layout templates as every page has the same layout but I need a different class for each page to reference a different colour scheme I have setup for each page in my CSS.

I have added a text field with the name Area to the Title ContentType in the backend. My problem is now how to get the value of the field to be put into the body in the Document.cshtml.

I have read Setting Unique Body Classes and IDs in Orchard and Using Alternatives for Document.cshtml in Orchard CMS but I still can't get it to work! The second one seems like what I want to do but so far I have been unable to acheive it.

Any answer would be very appreciated?

Thanks

Andy

juanchod juanchod · Accepted Answer · 2013-08-01T12:21:02

I am so frustrated that there is no readily available solution found in the net about this. Since I am more comfortable coding in jquery & js...

Here's my solution: Assuming you have jquery loaded...

@using(Script.Foot()) {
<script type ="text/javascript">
//<![CDATA[
$(document).ready(function () { 
    var url = window.location.pathname;
    var count = url.match(new RegExp("/", 'g'));
    var urlsplit = url.split("/");
    var page_class = urlsplit[count.length];

   alert(page_class);
    $('body').addClass(page_class);
});
//]]>
</script>
}

Orchard - add class or id to the body using fields

2 Answers