Kentico CMS 6.0 Controls

Getting started

Getting started

 Previous topic Next topic Mail us feedback on this topic!  

Getting started

 Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic!  

The following is a step-by-step tutorial that will show you how to display a tab menu based on CMS content using the CMSTabControl control:

 

1. Create a new Web form somewhere in your website installation directory.

 

2. Switch to its Design tab, drag and drop a CMSTabControl control from the toolbox onto the form and set its following properties:

 

•MaxRelativeLevel: 1

•SelectFirstItemByDefault: True

 

This makes sure that only documents from the first level are displayed and that the first tab is selected by default.

 

3. Switch to the Source tab. The code of the CMSTabControl control should look like this:

 

<cms:CMSTabControl ID="CMSTabControl1" runat="server" MaxRelativeLevel="1" SelectFirstItemByDefault="True" />

 

Now add the following code between the tags of the <head> element:

 

<style type="text/css">

 

/* Tab menu class definitions */  

.TabControlTable { FONT-SIZE: 14px; FONT-FAMILY: Arial,Verdana }

.TabControlRow { }

.TabControl { BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-WEIGHT: bold; BACKGROUND: #e7e7ff; BORDER-LEFT: black 1px solid; CURSOR: hand; COLOR: black }

.TabControlSelected { BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-WEIGHT: bold; BACKGROUND: #4a3c8c; BORDER-LEFT: black 1px solid; CURSOR: default; COLOR: white }

.TabControlLinkSelected { COLOR: white; TEXT-DECORATION: none }

.TabControlLink { COLOR: black; TEXT-DECORATION: none }

.TabControlLeft { WIDTH: 1px }

.TabControlRight { WIDTH: 0px }

.TabControlSelectedLeft { WIDTH: 1px }

.TabControlSelectedRight { WIDTH: 0px }

 

</style>

 

This sets the CSS styles that will modify the appearance of the tab menu. The CMSTabControl control renders tabs even without any CSS classes specified, but they are extremely basic. You can find out what individual CSS classes affect in the Appearance and styling topic.

 

The classes are defined in the <head> element only for this quick example, if you wish to use the control on a Kentico CMS website, it is recommended to define these classes in the used stylesheet in the administration interface at Site Manager -> Development -> CSS stylesheets.

 

4. Add the following code just after the <cms:CMSTabControl> element. It will display a stripe under the tabs.
 

<hr style="width:100%; height:2px; margin-top:0px;" />

 

5. Save the changes to the web form. Now right-click it in the Solution explorer and select View in Browser. The resulting page should display a tab menu like this:

 

controls_clip0029