Guide to Using Containers

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.

Here's what we'll cover:

1. What you need to do before using a container
2. How you can set a container

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

Before using a container

1. Set the theme as current
2. Choose an option

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".

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

Choose 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.

Others might not include the files with the zones where you want to add the containers. In this case, we need to create the files ourselves.

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 and after that choose one of the below options.

To confirm, 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.

Now that you've checked you can choose one of the options:

• 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.

Setting 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?

Copy the name of the zone

First choose the zone where you want to add the container. Do you want to add the container in the "Before Main" zone or in the "Main Content" zone?

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.

Create the .cshtml file for the zone

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.

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

Set up the container

Now that you have created the file you 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 Create the .cshtml file for the zone 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!

The result:

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

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!

The result: