Placement of navigation part

Topics: Customizing Orchard, General, Writing modules, Writing themes
Sep 5, 2011 at 6:21 AM

Hey all,

               This is Naresh. I need help in placing the default navigation that appears in the orchard pages from the current navigation zone to the AfterMain zone. If i am not wrong, the Placement.info file helps in doing that. but i am not sure as to how or which parts i must use to do it.

Any other suggestions and steps on how to do that is appreciated very much.

PLease help me soon guys.

Thank you,

Regards,

Naresh Kumar

Sep 5, 2011 at 9:25 AM

Hello Naresh,

I have tried in the past to use Placement.info to move shapes (such as the default navigation) into different zones and have not had success just using the Placement.Info.  Perhaps someone else will be able to reply and explain how the do it. I know Bertrand has this article up in regards to moving shapes to arbitrary zones (using code): 

http://weblogs.asp.net/bleroy/archive/2011/03/26/dispatching-orchard-shapes-to-arbitrary-zones.aspx

If the object in question is a Widget (which the default navigation is not), you can use Dashboard --> Widgets (url is /Admin/Widgets) to control the locations where the widgets are used.

In regards to the particular issue of the default navigation, I am pretty sure it is hardcoded into the theme.  If you go to your theme, in the Views folder, there should be a file called Layout.cshtml.  In my theme, the code block looks like this:

<header id="layout-header" class="group">
<div id="header-wrapper" class="group">
    <div id="header">
        @Zone(Model.Header)
    </div>
    @if (Model.Navigation != null) {
    <div id="layout-navigation">
    @Zone(Model.Navigation)
    </div>
}
 </div>
</header>

NOTE: do this step on a copy of the theme (or better yet, use the codegen module to generate a theme based off the current theme). So I want to cut the @if (Model.Navigation.... section seen here:

@if (Model.Navigation != null) {
    <div id="layout-navigation">
    @Zone(Model.Navigation)
    </div>
}

Then, for my example since I don't have an "AfterMain" in my theme, I pasted it into the layout-content area as seen here:

<div id="layout-main" class="group">
    <div id="layout-content" class="group">
        @if (Model.Navigation != null) {
        <div id="layout-navigation">
        @Zone(Model.Navigation)
        </div>
} @if (Model.Messages != null) { <div id="messages"> @Zone(Model.Messages) </div>

This worked and will allow you to place your navigation where you want it (note, you will have to redo the CSS styling).  It is possible someone else will be able to advise a means of doing this without modifying the Layout.cshtml - if they can, that will be great.  If they don't then I hope this helps.

Sep 5, 2011 at 10:41 AM

Hey jao28!

                thanks alot. it did the job exceptionally well

Cheers,

Naresh

Sep 5, 2011 at 10:42 AM

Hey Bertrand,

                    Extremely sorry for troubling you alot. It was just that i had an urgent requirement to be fulfilled in my theme.

 

Cheers,

Naresh

Sep 19, 2011 at 8:55 PM

I have pasted the below code into my Layout.cshtml file afer my AferMain.

What would the Site.css styling need to look like in order to move the navigation bar around?

Thanks

<div id="layout-main" class="group">
<div id="layout-content" class="group">
@if (Model.Navigation != null) {
<div id="layout-navigation">
@Zone(Model.Navigation)
</div>
}

@if (Model.Messages != null) {
<div id="messages">
@Zone(Model.Messages)
</div>
Sep 19, 2011 at 9:02 PM

Hello finchinator,

You should not need to use the Site.css to move the navigation bar around, by modifying your layout.cshtml you should see the navigation bar in the new position.  I only made mention to the site.css because, upon moving this navigation zone, it may not look pretty (in fact, I am pretty sure it won't).  This has to do with the way the theme set up the CSS (they assume you won't move the zone).  Since I have not personally move the navigation zone to another area, I don't have any CSS examples to provide... but hopefully this comment will better explain what I meant above (and maybe someone else out there who has actually moved the navigation zone will share their CSS with us).

Sep 20, 2011 at 1:07 PM

Well it's just that I moved the navigation code to where you see it above in my previous post but it did nothing for the positioning, anymore ideas? I'm all ears, I'm fresh out of ideas lol.

Sep 20, 2011 at 2:39 PM

Hello finchinator,

Hmmm, I think you will have to inform me what theme you are working on.  The trick to the trade above was that I went into my theme (think I was using Contoso) and found the Navigation section of code.  I then "CUT" the section from where it was and moved it around on the page.  This did move the navigation menu for me (with ugly styling of course).  Perhaps the theme you are using does not call it "Model.Navigation"... which would explain the dilemma.  Perhaps you "COPIED" it into a new location instead of "CUT and PASTE" and this would end up rendering the navigation menu in the original spot...

If possible, send me over some code of what you originally started out with in your layout.cshtml and then what you ended up with.  Also, drop me the name of the theme you are using (i.e. Contoso, Classic...).

Sep 20, 2011 at 3:32 PM
Edited Sep 20, 2011 at 3:32 PM

I actually found a solution to my problem, I changed the display:block to display:inline-block in my branding as well as .zone-header,

.zone-header { padding: 30px 0 0 12px; position: relative; display:inline-block; height:21px  }

    #branding
    {  
        display:inline-block;

         width:209px;
        height:68px;
        text-indent:-9999px
    }

 

like so, and this let the navigation bar move up to the desired location.

 

But thank you for your assistance :)!

Sep 21, 2011 at 1:10 PM

Ok, so new problem now, the site looks fine in Chrome, but for some reason is not using the inline-blocks in IE and Firefox, it just treats them like blocks again. Does anyone know why this would be, or how I would fix it?

Thanks

Sep 21, 2011 at 3:29 PM

Nevermind, fixed it lol.

Sep 22, 2011 at 4:20 PM
finchinator wrote:

Nevermind, fixed it lol.

I'm not sure you are using a good approach here. You should not use site.css if you want to move your navigation to another part of your page. Although, if you just want to adjust its position with a few pixels, site.css is the way to go. If you want to move your navigation the only code you want to move is probably:

@if (Model.Navigation != null) {
        <div id="layout-navigation">
                @Zone(Model.Navigation)
        </div>
}
Do you want to move your navigation up or down? Feel free to post the entire content of your Layout.cshtml and describe what you want to do. Then I'll try to guide you.

Sep 22, 2011 at 4:55 PM
Hi,

A common SEO optimisation technique is to have the navigation physically sit below the content yet appear to be at the top. This needs to be done in CSS.

Thanks

Steve



On 22 Sep 2011, at 17:20, "JLedel" <notifications@codeplex.com> wrote:

From: JLedel

finchinator wrote:

Nevermind, fixed it lol.

I'm not sure you are using a good approach here. You should not use site.css if you want to move your navigation to another part of your page. Although, if you just want to adjust its position with a few pixels, site.css is the way to go. If you want to move your navigation the only code you want to move is probably:

@if (Model.Navigation != null) {
        <div id="layout-navigation">
                @Zone(Model.Navigation)
        </div>
}
Do you want to move your navigation up or down? Feel free to post the entire content of your Layout.cshtml and describe what you want to do. Then I'll try to guide you.

Sep 22, 2011 at 5:49 PM

Good point, and thanks for the info.

SteveTaylorUK wrote:
Hi,
A common SEO optimisation technique is to have the navigation physically sit below the content yet appear to be at the top. This needs to be done in CSS.
Thanks
Steve



On 22 Sep 2011, at 17:20, "JLedel" <notifications@codeplex.com> wrote:

From: JLedel

finchinator wrote:

Nevermind, fixed it lol.

I'm not sure you are using a good approach here. You should not use site.css if you want to move your navigation to another part of your page. Although, if you just want to adjust its position with a few pixels, site.css is the way to go. If you want to move your navigation the only code you want to move is probably:

 

@if (Model.Navigation != null) {
        <div id="layout-navigation">
                @Zone(Model.Navigation)
        </div>
}
Do you want to move your navigation up or down? Feel free to post the entire content of your Layout.cshtml and describe what you want to do. Then I'll try to guide you.