Layouts

A layout defines the position of the content that is presented within an individual page. It defines some positions which content can be inserted into.

Most modern websites contain a header position, a headline, a sidebar and main content area. In our old sample website, the layout looks like this:

A Kooboo layout contains standard ASP.NET and HTML code with one additional position tag from Kooboo CMS. You can use the Kooboo API within a layout. To create or change the layout of your website, do the following:

First click on Development in the left menu. Then click on Layouts. You will see the following screen:

Layout_list


Right now we have two layouts. To edit the layout,  double click on the layout. This will open the layout editing page.

Edit_layout


This is the Microsoft Razor view engine. The @ mark is used by the Razor view engine. You can change the HTML code  any way you like.

To add a position in your HTML code, first move your mouse to the spot where you want to add the position, and then click on the Add button under ‘Positions’ in the top-right menu. 



Layout_add_position_1


Now you will see a textbox. Fill in the name of your position and click on the OK button. The position code will be added to your HTML page

Layout_add_position_2


The syntax to add a Kooboo position manually is:

@Html.FrontHtml().Position("yourname")

You can also render a view in the layout. The syntax is very simple:

@Html.FrontHtml().RenderView("myview",ViewData)


Layout helper and Code helper

In order to help you with common tasks like creating a menu or a contact form, we have provide some sample code. You may click to insert sample code block into your layout.

Layout_code_helper