Styling the home page different from other pages

Feb 6, 2011 at 9:08 PM

I would like to use different CSS styling for the home page than I do for the other pages. Specifically I would like to use a different background image.

What would be the best way to go about this?

Coordinator
Feb 8, 2011 at 6:28 PM

Well, you could do something like this: http://weblogs.asp.net/bleroy/archive/2011/01/17/building-a-favicon-module-for-orchard.aspx and manipulate the tag that points to your stylesheet, but if all you have to do is change a background image I would just use an inline stylesheet for just that and continue to use the same global stylesheet (caching will probably be much more efficient that way).

To use an alternate layout for the home page, you can use this technique: http://weblogs.asp.net/bleroy/archive/2010/12/14/switching-the-layout-in-orchard-cms.aspx

Feb 14, 2011 at 3:39 PM

Bertrand, I appologise for being dense, but how does one use inline styling for a page?

 I see how to do it for the body by going into the Dashboard and selecting the page under Content Items and using the Edit Page with the TinyMCE editor for the body. This only sets the style for the body, not the entire page.

Feb 14, 2011 at 6:06 PM

This is a hack, but it works.

  1. Add a field "BackgroundUrl" to the Page Content type.  This will let you specify a background URL for every page.
  2. We can't ready that field from Layout.cshtml, so instead we are going to grab it in Content-Page.cshtml, and put it in an attribute.
  3. In Layout.cshtml we will use jquery to set the page property.

In your /Themes/ThemeName/View/Items/Content-Page.cshtml use code such as:

@using Orchard.ContentManagement;
@using Orchard.Core.Common.Fields;
@using Orchard.Utility.Extensions;
@{
    Layout.Title = Model.Title;

    var backgroundUrl = "";
    var contentItem = (ContentItem)Model.ContentItem;
    var backgroundUrlField = (TextField)contentItem.Parts.First(p => p.PartDefinition.Name == "Page").Fields.First(f => f.Name == "BackgroundUrl");
    if (backgroundUrlField != null)
    {
        backgroundUrl = backgroundUrlField.Value;
    }
}
<article id="pageTag" class="content-item page" backgroundUrl="@backgroundUrl">
    @Display(Model.Content)
</article>

In your /Themes/ThemeName/View/Layout.cshtml use code such as:

@{
    Style.Include("styles.css");
    Style.Include("Orchard.css");
    Script.Require("jQuery");

    Func<dynamic, dynamic> Zone = x => Display(x);

    Model.Id = "container";
    var tag = Tag(Model, "div");

   
}
@tag.StartElement
<div id="header"><img src="@Url.Content("~/Themes/Theme/Content/images/banner.gif")" width="600" height="96"></div>
<div id="wrapper">
<div id="content">
    <div id="contentBox">
        <div class="tablebar">&nbsp;</div>
        <div id="contentArea">
        @if (Model.Content != null) {
        <div id="pageContent" class="textstyle">
            @Zone(Model.Content)
        </div>
        }
        </div>
    </div>
</div>
</div>
<div id="navigation2">
@Zone(Model.Navigation)
</div>

<div id="navigation">
@if (Model.LowerLeft != null)
{
@Zone(Model.LowerLeft)
}
</div>
<div id="extra">&nbsp;</div>
@if (Model.Footer != null)
{
<div id="footer">@Zone(Model.Footer)</div>
}
@tag.EndElement

 

In your /Themes/ThemeName/View/Document.cshtml use code such as:

@using Orchard.Mvc.Html;
@using Orchard.UI.Resources;
@{
    //RegisterLink(new LinkEntry {Type = "image/x-icon", Rel = "shortcut icon", Href = Url.Content("~/modules/orchard.themes/Content/orchard.ico")});
    //todo: (heskew) get conditions (as in conditional comments) hooked up for script tags too
    Script.Include("html5.js").AtLocation(ResourceLocation.Head);

    //a bit opinionated - only the site name on the homepage
    var title = (Request.Path != Request.ApplicationPath && !string.IsNullOrWhiteSpace((string)Model.Title)
                    ? Model.Title + WorkContext.CurrentSite.PageTitleSeparator
                    : "") +
        WorkContext.CurrentSite.SiteName;
}
<!DOCTYPE html>
<html lang="en" class="static @Html.ClassForPage()">
<head>
    <meta charset="utf-8" />
    <title>@title</title>
    @Display(Model.Head)
    <script>        (function (d) { d.className = "dyn" + d.className.substring(6, d.className.length); })(document.documentElement);</script>
</head>
<body>
@* Layout (template) is in the Body zone @ the default position (nothing, zero, zilch) *@
@Display(Model.Body)
@Display(Model.Tail)
<script language="javascript">
    var backgroundImg = $('#pageTag').attr('backgroundUrl');
    if (backgroundImg) {
        $('#content').css("background-image", "url(" + backgroundImg + ")");
    }
</script>
</body>
</html>

Coordinator
Feb 14, 2011 at 6:17 PM

Or create an alternate layout for the home page (see http://weblogs.asp.net/bleroy/archive/2010/12/14/switching-the-layout-in-orchard-cms.aspx; by the way this will get a lot simpler in Orchard 1.1) and add this to your layout-homepage.cshtml:

<style>
body {background-image:url("/images/mybackground.png");}
</style>
Jul 24, 2011 at 11:15 AM

Hi - I need to do something very similar to change a CSS min-height just for the home page container - using Orchard 1.2 - do I still need a whole layout-homepage.cshtml to do this?

 

  @if (Model.Content != null)   

{    <section id="main-content" style="min-height: 330px !important;">       
<article>           
@Zone(Model.Content)       
</article>    
</section>   
}

Jul 25, 2011 at 7:21 AM

i fixed it by adding the http context  page instance as the body class