Sitecore 7 : Combine CSS from View Renderings into the Layout <head> area

2
votes

this is probably a newbie Qs... i am using Sitecore 7 for my web application, and this is what i have so far

  1. Data Template - this has only one field called "Title" to display page specific title

  2. One Layout - this is pointing to my cshtml file under asp.net mvc project path. This has complete markup starting from Doctype. The title tag under head tag uses Sitecore's Html extension to render the field "Title" from template mentioned in #1. This also renders sitecore's View via placeholder called "page-body" under body tag of layout.

  3. I have created a View Rendering pointing to Razor view in my asp.net mvc project. This view simply has h1 calling out hello world.

  4. The Sitecore/Content/Home item (from sitecore's master tree) uses the template created in #1 and uses the layout created in #2. This item has one and only one Rendering created in #3

Now when i hit the root from my local sitecore website, everything looks good! I see Hello World in H1 tag under body tag with complete html makrup mentioned in layout...

This is where things starts getting complicated... Now i want my View Rendering (created in #3) to refer a CSS file which is specific to this Rendering only. This CSS will not be referred to all the pages. Of course I want to add the reference into the head as link href. So tried using asp.net mvs "Section" but i keep getting that sweet error "file cannot be requested directly because it calls the rendersection method..." So i realized that my view rendering doesn't have any @{Layout = "..."} and ofcourse which is controlled by sitecore engine!!

So i still went ahead and added Layout reference in my view Rendering's cshtml file and refer to the same layout file that Sitecore Engine would (i.e. #2 above). I still have same error.

Then i found a post Using sections in Editor/Display templates which is essentially for Scripts and tried implementing for CSS. But this didn't work either because View Rendering executes after the Helper in head tag gets executed so my CSS reference never go spit out in stream. BTW for Scripts this solution works perfect because scripts rendering helper is called after the Sitecore's view rendering.

At this point i am totally stuck for "How can i get my CSS ref for View Rendering in head tag". Any sitecore experts to help here?

1
sitecoresitecore7
Why not just include all your CSS on all pages, and use a CSS selector to only target content in your rendering, via an ID or css class selector? – jammykam

1 Answers

3
votes

So it's definitely a more advanced customization, but we do this using Cassette and a customization to the renderLayout pipeline. Use of this pipeline solves your issue of the helper in the head tag being called before your view renderings.

  1. Extend the view rendering template (/sitecore/templates/System/Layout/Renderings/View rendering) and add a field that stores the name of a Cassette bundle you want to include on the page.
  2. In your RenderLayoutProcessor, loop through all the page renderings (Sitecore.Context.Page.Renderings), inspect the rendering item for the bundle field (rendering.RenderingItem.InnerItem[YOUR_FIELD]), and call Cassette's Bundles.Reference.
  3. In the header of your main layout, call Cassette's Bundles.RenderStylesheets().

You can also accomplish this without Cassette, but it makes the bundling, referencing, and inclusion of scripts and stylesheets much easier.

The other advantage to this approach is that it does not break Sitecore caching. Any approach which requires code to execute in your View rendering will render Sitecore HTML caching useless, because when the rendering is cached, your code will not execute and the page styling will be broken.