Selective css - layout issues

Topics: Customizing Orchard, General
Jul 9, 2013 at 2:50 PM
Hi there

I would like to change the css for #layout-content depending on which page I am on. Any ideas on how to do this please? I need to set a top-margin but while this is perfect on some pages it is too deep on other pages. Any help would be gratefully received this has been sending me crazy!!

Thanks, Kirsy
Jul 9, 2013 at 4:57 PM
There are many ways to do this. The best approach depends on your theme. Generally you should be able to solve this with page / element specific CSS. There are ways to HtmlClassify the current content type and even url. Another way is override certain views using url alternates and include CSS from there. Yet another way could be to attach a text field to your content types or a part where the value represents the path to a style sheet to be included. The view for the content type would read this value and Style.Include it.
Jul 10, 2013 at 10:07 AM
Thanks for your reply. Basically I have a setoff pages for 90% of them Iwant to set the top-margin of #layout-content to 190px but for 2 other pages I want to change this. These 2 other pages are home and another one. In my css I set a new class to

layout-content .small

margin-top: 50px;

then I created an alternate file - Parts.Common.Body-url-homepage.cshtml, within this I wrapped the following around the code <div class="small"> </div> this worked but it also applied the existing #layout-content of margin-top: 190px too.

I really want to make the css changes to the 2 pages rather than all the others. The main reason for this is if I apply the css changes to the other pages, once the site is live and used as a CMS and if the user creates another page I am concerned this css won't be added.

Any ideas what would be the best route to take with this?

Tx Kirsty
Jul 10, 2013 at 3:17 PM
Edited Jul 10, 2013 at 3:17 PM
So maybe what you need to do is push a class name to the <html> element from withing your Parts.Common.Body-url-homepage.cshtml view. That way, you can create a CSS rule like this:

.small #layout-content { margin-top: 10px; }

The code to push the CSS class name to the <html> element would look like this:


@{ Html.AddPageClassNames("small"); }
Jul 15, 2013 at 1:47 PM

Thanks so much, this works extremely well, exactly what I wanted to do but didn’t know how! Really appreciate it. Kirsty