Quick understanding of layout + zones

Topics: Writing themes
Jun 7, 2011 at 6:39 PM

my role on this project will be the UI layer for our orchard cms...I have read some of the documentation surrounding themes etc...but have some high-level questions that I hope someone can point me in the right direction for UI authoring needs.

How would I change the CSS widths for a content item. For example some pages will be full width 850px for Model.content (layout-main), but there is a scenario now in which we will be populating the Aside.Second zone and in this case I would need to define a fixed width for #layout-main (500px). I have a limited understanding of the conventions, zones, widget layers, view, parts etc... but Im not sure what a best practice would be. The question I guess is where should I determine the width change from a site-wide point of view. Ideally following a convention pattern seems easiest for a UI developer w/o having to code a single line of code. I do have a MVC developer building modules etc..as needed. Where are dynamic CSS changes best handled? CSS, Using HTML widgets in zones? Views?

Just looking for a bit of clarity. Thanks in advance

My simple layout (from theme machine but stripped down)

 <div id="layout-main-container">
        This is the layout-main-container<br /><br />

        <div id="layout-main">
            @if (Model.Content != null)
            {
            <div id="content">
                @Zone(Model.Content)
            </div>
            }
        </div>
        
        @if (Model.AsideSecond != null)
        {
        <div id="aside-second" class="aside-second" >
            @Zone(Model.AsideSecond)
        </div>
        }
    </div>

Coordinator
Jun 7, 2011 at 6:45 PM

This module might be what you're looking for: http://orchardproject.net/gallery/List/Modules/Orchard.Module.Downplay.Orchard.LayoutSelector

Jun 7, 2011 at 7:01 PM

Actually, TheThemeMachine already handles changing the widths of content regions based on which zones appear.

Just have a look through the template and stylesheets and you'll see what I mean. It adds various CSS classes to the layout depending what zones are displayed, and the stylesheet sets widths based on that. You just have to avoid the temptation to "strip down" TheThemeMachine - just use it as is and tweak the stylesheets - everything is there for a reason. I made that LayoutSelector module but I've actually ended up never using it, since I realised how much TheThemeMachine does for you already :)

Coordinator
Jun 7, 2011 at 7:08 PM

ah, good catch, yes.

Jun 7, 2011 at 7:24 PM

Thanks guys, I'll check into my CSS a little bit more. So to summarize; I should be able to dynamically control alternate zone structures (not in that same zone) in the DOM (ie DIV widths) based on weather or not a secondary zone is populated or not? for example:

/* If zone 2 is on */
.aside-2 #layout-content { float: left; width: 600px; }
.aside-2 .aside-second { float: right; width: 360px; }

which in effect will change the default width of #layout-content and obviously default Page content for Model.Content

<div id="layout-content" class="group">

@if (Model.Content != null) {
        <div id="content" class="group">
            @Zone(Model.Content)
        </div>
        }

</div>

Jun 7, 2011 at 7:27 PM

Well that's what TheThemeMachine does; just play around with it and you'll see. If a zone is empty then different CSS classes are applied. You can see how it does it in Layout.cshtml and then use the same technique in your own theme to customise in whatever way you need.