CODEWITHSUNDEEP
customizationorchardcms
Johnny_D
Johnny_D

Reputation: 4652

Implementing a sticky footer in Orchard CMS

Can somebody please explain how a sticky footer:

 <div id="container....
  ...content
 </div>
 <div id="footer"....
 </div>

 CSS:
 #container
 {
   height: 100%;
   margin-bottom: -height of footer
 }

might be implemented in Orchard CMS? The problem I can't manage is to envelop some main content layouts in a wrapper. Currently I have:

 <div id="aside-1 ...
 <div id="layout-navigation
 <div id="layout-main-container
 <div id="layout-footer

So main problem is to customize layouts rendering.

Upvotes: 0

Views: 238

Answers (1)

Sipke Schoorstra
Sipke Schoorstra

Reputation: 3409

In your Layout.cshtml file, use the Display method to render zones. The primary zone where content gets rendered is the Content zone, which you render like this:

<div id="container....
  @Display(Model.Content)
 </div>
 <div id="footer"....
 </div>

You can also define your own custom zones (via your Theme.txt manifest file). For example, in your Theme.txt file, define a Footer zone like this:

Zones: Content, Footer

Then in Layout.cshtml, render that zone like this:

<div id="container....
  @Display(Model.Content)
 </div>
 <div id="footer"....
  @Display(Model.Footer)
 </div>

You have complete freedom on how you want to layout content.

Upvotes: 1

Related Questions