Creating layout without <div class="zone zone-XXX"> elements

Topics: Writing themes
Dec 28, 2011 at 10:34 AM

Hello

I've got some questions about theming Orchard and I'd really appreciate your help.

I have a web page which looks like as follows:

<head>

<!--Some contents-->

</head>

<body>

<div class="navigation">

                <ul class="nav">

                                <li class="active"><a href="#">Home</a></li>

                                <li><a href="#about">About</a></li>

                                <li><a href="#contact">Contact</a></li>

                </ul>

</div>

<div class="container">

                <div class="content">

                                <div class="row">

                                                <div class="row-left">

                                                                <!--Some contents-->

                                                </div>

                                                <div class="row-right">

                                                                <!--Some contents-->

                                                </div>

                                </div>

                </div>

                <footer>

                <!--Some contents-->

                </footer>

</div>

</body>

I also have a couple of CSS files to define the styles of the page.

What I've been trying to achieve is to create the same HTML structure using Orchard. However, Orchard automatically inject a lot of <div> elements such as <div class="zone zone-header">, <div class="zone zone-content"> and etc. These unfortunately corrupt the existing page layout.

So here are my questions:

  • A. How can I create the above HTML layout using Orchard without the unnecessary <div>s?
  • B. Which approach do you recommend? Override Orchard so that it renders the existing web page (which I'm hoping to do) or modify the existing HTML and CSS files so that they can be used in Orchard?

Many thanks

Coordinator
Dec 28, 2011 at 9:55 PM

They are not automatically injected, they are rendered by the Zone shape, and as such that markup can be overridden by the theme.

Dec 30, 2011 at 10:10 AM

Hi bertrandleroy

Thanks for your reply.

bertrandleroy wrote:

They are not automatically injected, they are rendered by the Zone shape, and as such that markup can be overridden by the theme.

I have a "Content.cshtml" file in my Views folder.  In order to override the rendering of the Content zone (<div class="zone zone-content">), I've created a file called "Zone-Content.cshtml" in my Views folder.  In this file, I simply call the DisplayChildren method:

@DisplayChildren(Model)

And now the <div class="zone zone-content"> bit is disappeared when running my site in WebMatrix. 

Is my approach correct?  I'm new to Orchard CMS and still trying to get my head around it.

Many thanks

Dec 30, 2011 at 12:21 PM
Edited Dec 30, 2011 at 12:27 PM

One more question please.

I've got a tree structure like the following (I'm using the Designer Tools module):

...
...
Menu
Zone[Content]
    Content
        Parts_RoutableTitle
        Parts_Common_Metadata
        Parts_Blogs_Blog_Description
        Parts_Blogs_RemotePublishing [empty]
        Parts_Contents_Publish [empty]
        ...
Zone [AsideSecond]
    ...
    ...

What I'd like to do is to move the following parts:

  • Parts_RoutableTitle
  • Parts_Common_Metadata
  • Parts_Blogs_Blog_Description

out of the Zone [Content] and put them between the Menu and the Zone [Content].

My Content.cshtml looks like this:

@using Orchard.Utility.Extensions;
@{
	Layout.Title = Model.Title;
	var contentTypeClassName = ((string)Model.ContentItem.ContentType).HtmlClassify();
}
<article class="content-item @contentTypeClassName">
	<header>
		@Display(Model.Header)
		@if (Model.Meta != null) {
		<div class="metadata">
			@Display(Model.Meta)
		</div>
		}
	</header>
	@Display(Model.Content)
	@if(Model.Footer != null) {
	<footer>
		@Display(Model.Footer)
	</footer>
	}
</article>

Does anyone know how I can achieve this?

Thanks

Dec 30, 2011 at 1:07 PM

Why do you need to move them there? Can't you just use CSS styling to achieve the same effect?

Dec 30, 2011 at 1:34 PM

Hi randompete

> Why do you need to move them there?

That's because the layout I'm trying to create has these parts there.

> Can't you just use CSS styling to achieve the same effect?

I'm trying to change where those parts appear, not their styles.

I've so far tried removing the <header>...</header> bit out of my Content.cshtml and put it to Layout.cshtml file so that it's placed between the Menu and the Zone [Content].  However, I still have my blog description left in the Zone [Content] :(

Dec 30, 2011 at 1:51 PM

But you can use styles to alter where things appear.

Dec 30, 2011 at 2:06 PM

OK.  I'll give your suggestion a go.  Thanks.

Dec 30, 2011 at 2:50 PM

I realise there are situations where you'd need to move parts into completely different layout zones, but for the most part it's best if you can stick within Orchard's layout and use positional styles. There are a few techniques to move parts outside of the Content zone but it can get quite tricky, and it's very situational depending on your exact requirements and layout. Hopefully I'll be releasing a module sooner or later that will make it much easier!

Dec 30, 2011 at 3:12 PM

> I'll be releasing a module sooner or later that will make it much easier!

I'm looking forward to that, randompete!

By the way, would you be able to tell me if my approach below was correct?

jpen wrote:

I have a "Content.cshtml" file in my Views folder.  In order to override the rendering of the Content zone (<div class="zone zone-content">), I've created a file called "Zone-Content.cshtml" in my Views folder.  In this file, I simply call the DisplayChildren method:

@DisplayChildren(Model)

And now the <div class="zone zone-content"> bit is disappeared when running my site in WebMatrix. 

Is my approach correct?

Cheers