Custom Id and Css for Body tag

Topics: Customizing Orchard, Writing themes
May 10, 2012 at 10:21 PM

Hi, I am using Vanderlay.Classy.

This is a really great module. Earlier it was not working on Page content type but then I found a post by Bertrand where he mentioned some changes in the default content.cshtml to make it work for Page content page type and now it is working properly for pages but it sets the id and css class for the <article> tag just outside that page content whereas I want to set the id and css class for the top <body> tag of that page.

Any ideas what I might be missing?

It would be great if someone can guide me to how to get it working with the <body> tag of the page.

If I setup a new field on page content type, is it possible that I get its reference in the Document.cshtml to set id and/or css class on the <body> tag?

Thanks.

May 11, 2012 at 7:07 AM

If the above cannot work, it would be great if someone could help me how to get reference of <body> tag inside Content.cshtml so that I can manually setup Id and Class on <body> or to get reference of the page content type inside Document.cshtml so that I can manually access properties and custom fields there?

Thanks.

Developer
May 11, 2012 at 7:49 AM

What you could do is override the Document.cshml template from your custom theme. Then you could render anything inside of the body tag. For example, you could use the ViewBag from controllers or other templates, which you can use from within Document.cshtml. I'm not sure this is the best way, but at least you have control over the body tag.

May 12, 2012 at 10:30 AM
Edited May 12, 2012 at 1:51 PM

I used ViewBag in Content.cshtml to set the value of id and css and then tried to get that in Document.cshtml but ViewBag did not have those properties I setup earlier.

Do you have any example of using ViewBag to get the reference of ContentItem (Page) from Document.cshtml?

Thanks.

Coordinator
May 12, 2012 at 8:33 PM

Can you show what you did?

May 12, 2012 at 10:38 PM

In Content.cshtml:

dynamic c = Model.ContentItem;
ViewBag.CustomBodyId = c.CustomCss.CustomId;
ViewBag.CustomBodyCss = c.CustomCss.CssClass;

In Document.cshtml:

<body id='@ViewBag.CustomBodyId' css='@ViewBag.CustomBodyCss'> 

Coordinator
May 13, 2012 at 8:57 AM

Did you set breakpoints in there to see what happens?

May 13, 2012 at 12:38 PM

Yes I did check, Value is properly set in Content.cshtml but ViewBag properties are blank on Document.cshtml.

Coordinator
May 14, 2012 at 6:22 PM

In what order are your breakpoints hit? Did you try to set something on Layout, as an alternative to ViewBag?

May 22, 2012 at 11:16 AM

Breakpoints hit in proper order, first in Content.cshtml and then in Document.cshtml but ViewBag values were empty in the Document.cshtml. I tried different options but could not set the id and css class attribute in the main <body> tag. At last, I used jQuery to update the body tag attributes.

In override Content.cshtml and used the following code to get the id and css classs:

dynamic c = Model.ContentItem; 
var customId = c.CustomCss.CustomId;
var cssClass = c.CustomCss.CssClass;
Then with jQuery I used:
$(document).ready(function () { 
  $("body").attr("id", '@customId');
$("body").addClass('@cssClass');
});

It may not be the best solution because when I look at the page source, page id and class is not there but when I check in Firebug, id and class is there in the page body.

It would be greate if this option is available in the new version of Orchard so that it can be easily implemented.


Coordinator
May 26, 2012 at 5:18 AM

You did not answer my question: did you try to set something on Layout instead of using ViewBag?

May 29, 2012 at 6:31 AM

I am not an expert in MVC; I tried to get a reference of Content.cshtml in Layout.cshtml but it didn't work and that's why I wrote the first post in this thread. If you know  any other solution of my problem then please let me know.

Thanks.

Coordinator
May 29, 2012 at 6:43 AM

Layout is a dynamic object, and it's available through WorkContext.Layout from every view. Try to use that.