BindTuning themes include several containers that you can use to visually wrap your content. We always recommend the use of these containers. Its easier and your content will look way nicer.

You can find all the available containers by opening the live preview of your theme at BindTuning.com.

containers_1

Note: We have created our demo website using WebMatrix. So the following steps are based on a WebMatrix installation. If you haven't created your Orchard website with WebMatrix and need help access our community and leave your question there.

Before using a container

Set the theme as current

Your theme must be set as current to set up the container. Enter as admin on your dashboard and on the left menu click on "Themes".

containers_2

If the theme is not set as current set it before moving on.

containers_3

Chose an option

When setting a container you need to specify the zone where you want the container to appear.

Some themes already include files with the name of the zones where you want to add the containers, and the containers are already set.

containers_5

Others might not include the files with the zones where you want to add the containers. Other themes might not include these files at all. In these last two cases we need to create the files ourselves.

containers_4

So in order to provide the best accurate instructions you will need to check if the theme already includes the .cshtml file corresponding to the zone where you want to add the container.

Open "your theme" folder and open the "Views" folder. Inside the "Views" folder look if there is any file with the zone where you want to add the container. These files terminoloy is zone-nameofthezone.cshtml.

containers_6

Chose one of the options before moving on:

  • Option 1, my theme does not include the .cshtml file of the zone where I want to add the container.

  • Option 2, my theme already include the .cshtml file of the zone where I want to add the container.


Option 1

Well in this case you will need to create a .cshtml file of the zone where you want to add the container and set the container you want use.

Ready for this?

Chose the zone

First chose the zone where you want to add the container. Do you want to add it in the "Before Main" zone? Or in the "Main Content" zone?

To chose which zone you will add the container start by opening BindTuning.com. Select the platform and from the theme gallery select the theme.

Now click on "live preview" to open the builder. Inside the builder click on "Structure", from the top menu, and then "Zones". Inside the "Zones" page you will find all the available zones for your theme.

Chose one of the zones and copy the name of the zone.

containers_7

Create the zone .cshtml file

Right click on the "Views" folder to create a file. Choose the type of file, in this case is .cshtml, and name it - the name must have the following terminology: [zone-(nameofthezone)].cshtml.

containers_8

The "nameofthezone" is the name of the zone you have copied during the Confirm the zones step.

Set up the container

Now that you have created the file we can set up the container.

Delete the auto generated content inside the new .cshtml file and copy the following code and paste it in your [zone-(nameofthezone)].cshtml file

<aside class="zone zone-[ZONE_NAME]">
@foreach (var item in @Model) {
item.Container = "[CONTAINER_NAME]";
@Display(item)
}
</aside>

[ZONE_NAME], replace it with the name of the zone where you are setting the container. The name you have set during the Creating the file step.

[CONTAINER_NAME], replace it with the container you want to use. You can confirm the name of the containers available for your theme. You can do this by opening "your theme" folder and opening the "Styles" folder.

So it would result in something like this:

<aside class="zone zone-BeforeMain">
@foreach (var item in @Model) {
item.Container = "C01";
@Display(item)
}
</aside>

Save and that's it!

containers_8

The result: containers_11


Option 2

Awesome! Half of the work is done.

All you need to do now is check if the container that is set in your zone-nameofthezone.cshtml file is the one you want to use.

If its not, you will need to change it. First confirm the containers available for your theme. You can do this by opening "your theme" folder and opening the "Styles" folder

containers_10

You can also open your theme with the live preview at BindTuning.com

In our case we are using the Metro theme, which also include the file of the zone where we want to add the container.

So the only thing we need to do here is to change the item.Container from "C00_Clean" to "C02", save and that's it!

containers_10

The result: containers_12


What an awesome looking website! Now you can start adding your content and share your vision with the World. Good luck!