Quick Start Guide

This guide will help you get started with Kentico CMS for ASP.NET within approximately 2 hours.
It covers:

1. Installation
2. Content Editing I
3. Content Editing II
4. Page Templates and Web Parts
5. Creating a Simple Page Template
6. Master Pages and Visual Inheritance
7. Design and CSS Styles

If you need a more detailed documentation, please see the following documents (you can find
them at www.kentico.com or in the standard installation:

• Kentico CMS Tutorial - a detailed tutorial with an example of building a web site from scratch
• Kentico CMS Developer's Guide - everything you need to know about the system and its
configuration
• Kentico CMS Web Parts and Controls Reference
• Kentico CMS API Reference
• Kentico CMS Database Reference

If you need any help, please feel free to send a message to support@kentico.com.
 Kentico CMS for ASP.NET - Quick Start Guide

Step 1 - Installation

1 Download: You can download a free 30-day trial version at www.kentico.com.

System requirements: Windows XP/2000/2003, Microsoft Internet Information Services (IIS) or Visual Studio 2005, .NET Framework 2.0, SQL Server 2000 or 2005.

Run KenticoCMS.exe and install Kentico CMS on your computer. The setup doesn't make any special configuration changes to your system, it only
copies documentation and project files and creates Start menu shortcuts. Kentico CMS can be installed on a production server (e.g. on a shared host-
ing)
2

3 Choose to launch Kentico CMS Web Installer at the end of the setup. Now you can choose to install Kentico CMS on your local IIS
server or only copy files and open the project using Visual Studio 2005.

After the wizard is finished, choose to open the web site in a web browser or in Visual Studio. If you
open the web project in Visual Studio, you need to press F5 to open the web site using built-in web
server.

4 The Database Setup Wizard starts. You need to enter the name of your SQL Server. You will typically use one of these values:
- the name of the server (such as DBSERVER1)
- the IP address of the server (such as 192.168.1.105)
- (local)
- .\sqlexpress

Then, you need to choose if you want to use SQL authentication (with user name and password) or Windows Authentication. Windows Au-
thentication requires that the account under which you run the ASP.NET web site has a login in SQL Server and was granted with permissions
for creating a database. If you encounter any problem, please refer to Developer's Guide -> Installation and deployment -> Troubleshooting
installation issues.

In the next step, you need to choose if you want to create a new database (a typical choice if you have your own server) or use an existing database (typically on
shared servers).

5
In the last step of the wizard, please choose to create the sample Corporate Site (portal engine). After the web site is created, you will
be redirected to the sample web site.

The default account is administrator with blank password.

 Kentico CMS for ASP.NET - Quick Start Guide

Step 2 - Content Editing I

Click the CMS Desk link at the top of the screen and sign in as administrator with blank password. The editing interface opens. On the left, you can see the content tree that represents the site struc-
ture (site map) and on the right, you can edit the content.

Click Home in the content tree and change some text in the editable region. Click Save to save changes. You can see the live page by choosing the Live Site view mode.

Editable regions usually contain unstructured text. You can have several editable regions on a single page. You will typically use them for a home page, contact page and other pages without strict
structure.

Document actions View mode Editing mode Editor toolbar

Content tree Editable region

 Kentico CMS for ASP.NET - Quick Start Guide

Step 3 - Content Editing II

1 Now we will create a news document. Click News in the content tree and click the New button in the main menu. Choose to create a new document of type News. Enter some values
and click Save.

You can edit news document fields in the Form editing mode. Unlike the Page mode, this
mode is used for editing structured content, such as news title, release date, summary, etc.
When you click the Live site button, you will see your news item on the page.

There are several pre-built document types, such as articles, news, events, products, job
openings, office, etc. You can create your own document types with custom fields for storing
structured content. Please refer to Developer's Guide -> Programming and API -> Docu-
ment types and transformations for more details.

In Kentico CMS, every page is displayed using some page template. The page template defines
the layout of the page, its design and the content that is displayed. The page template can display 2
unstructured content using editable regions or structured content using a master/detail control.

You have already seen the home page and the news list. Each of these pages is based on a different page
template. The page templates can be used for a single page (ad-hoc templates) or they can be re-used for
several pages with same structure.

3
Click the Services page in the content tree. The page consists of title and main text. Now we will create a new page based on
the same template. Click New and choose to create a new page. Enter page name Web hosting and choose page template Tem-
plates with editable regions/Header, text region. Click Save. You are redirected to the new page and you can enter content into
editable regions.
 Kentico CMS for ASP.NET - Quick Start Guide

Step 4 - Page Templates and Web Parts

Kentico CMS allows you to quickly build web sites using web parts. Web parts (also known as "portlets" or "modules" in some systems) allow you to display content, integrate features such as
1 newsletters or forums and they can contain your own custom code. There are 30+ web parts delivered with Kentico CMS, such as menus, document viewers, search box, newsletter subscription,
etc. You can easily create your own web parts as user controls (ASCX) in Visual Studio 2005.

<div class="leftColumn>
<cc1:CMSWebPartZone ID="zoneLeft" runat="server" />
</div>
<div class="rightColumn>
<cc1:CMSWebPartZone ID="zoneRight" runat="server" />
</div>
2 The web designer creates the page template.

Web part The page template is based on some page layout,

Page layout
which is HTML code with web part zones that specify places
where web parts can be placed.

The web parts are then placed by developer in the browser-

based user interface into the page template and configured.

Page template

Welcome to our web site!

Content
Edited page Live page

3 The content editor enters text into existing page tem-

plate. 4 The visitor gets the final page that uses the page layout
defined by web designer with content entered by con-
tent editor (site owner).
 Kentico CMS for ASP.NET - Quick Start Guide

Step 5 - Creating a Simple Page Template

In this step, you will learn how to create a simple page template for displaying a Careers section on your web site. Click root, click New and choose to create a new Page. Enter page name Career
1 and click the option Create a blank page using this layout. Choose the Two columns layout (you can choose between table-based and CSS layout versions). Click Save. Use the Down button to
move the page after the Contact page.

Click the Design tab. Now you can see the page template with web parts. Click + Add web
part in the zoneTop zone and choose Navigation/Breadcrumbs web part. Click OK to on the
Web Part Properties dialog.
2
Click + Add web part in the zoneLeft zone and choose to add a Text/Editable text web part. This web
part will enable content editors to enter the text. Click OK.

Click + Add web part in the zoneRight zone and choose to add a Listings and viewers/Repeater
web part. Set the following properties of the Repeater web part:
- Content filter/Document types: cms.job
- Transformations/Transformation: cms.job.preview
- Transformations/Selected item transformation: cms.job.default
- Editing buttons/Show New button: yes
- Editing buttons/New button text: Add job posting
- Editing buttons/Show Edit and Delete buttons: yes

Click OK. The web part will display the list of job documents under the Careers section.

Click Page to switch to the editing mode. You can enter some text into the editable region or you can
create a new job opening.

3
You can also try to modify the HTML layout of the page. Click Design -> HTML Layout. Add <hr /> elements at the beginning and at the end
of the HTML code and click Save. When you go back to the Page tab, you will see the horizontal lines added to the page design. As you can
see, you have full control over page design - you're not limited to predefined layouts!

Re-using page templates

You have just created a new ad-hoc template that is used only by a single page and sub-pages. If you decide to use the same page template for another 4
page, you need to save it as a re-usable page template. Click Properties -> Template and click Save as new template. Enter the following values:
- Template display name: Jobs with left text
- Template code name: Jobswithlefttext
- Template category: Job openings
- Template description: Displays job listings with descriptive text on the left side.

Click OK to save the new page template. Then, click Save on the Template dialog to assign the new page template to the page. Click OK. You have just
created a re-usable page template that can be used for other pages with same structure.
 Kentico CMS for ASP.NET - Quick Start Guide

Step 6 - Master Pages and Visual Inheritance

Master page is a page whose content is shared to underlying sub-pages. The master pages are typically used for the main layout of the web site - the site header, main menu and footer. In Ken-
1 tico CMS, the main master page is defined by the root document. The master page must contain the Page Placeholder web part that ensures loading of sub-pages:

Sub-page content

Master page Page placeholder

Defining your master page

2
Click the root document and click Master page. Now you can edit the HTML layout of the master page as well as configure the DOCTYPE,
<HEAD> and <BODY> sections.. You can add additional web part zones using the following expression:
<cc1:CMSWebPartZone ID="zoneTop" runat="server" />
The web part zone ID must be unique within a single page layout.

After you finish changes, click Save. When you switch to Design mode, you can add and configure the dynamic web parts (such as main menu) on
the page.

As you can see you can use any web design with Kentico CMS, so you're NOT limited to the default design or layout.

Breaking visual inheritance

3
In some cases, you may want to break the visual inheritance so that the content is not inherited from parent pages. You can do that in two ways:

1. Click the Properties -> Template -> Edit template properties. Now you can set the Inherit content configuration. You can for example choose not to inherit any content if you want to create a
completely different page design.

2. Click Design -> Configure (in any web part). Now you can set the Hide on sub-pages or Show for document types property that allows you to specify the web part visibility.
 Kentico CMS for ASP.NET - Quick Start Guide

Step 7 - Design and CSS Styles

Each web site has a default CSS style sheet. Click the Switch to Site Manager link at the top of the screen, go to the Sites tab and click Edit site next to the Corporate Site. Here you can
1 specify the Site CSS style sheet and Editor CSS style sheet. Set it to Blue, click OK and go back to CMS Desk -> Live site. You will see the web site in blue design.

The Site styles sheet is used for all pages and you can override it for particular page by setting the Properties -> Metadata -> CSS style sheet value in CMS Desk.

2
You can edit the CSS style sheets in Site Manager -> Development -> CSS style sheets. Edit
the Blue style sheet and change the following style like this:

.LTR, .RTL
{
background-color: #D0D0D0;
}

This CSS class is used for the BODY element. Save the changes. If you view the web site now, you can
see the background is now light gray.

Please note: it's recommended that you place the images and Flash animations shared over the
whole site into the <web project>\App_Themes\<style sheet code name> folder. It will en-
sure that the files are exported with web site when you are deploying the site to the live server.

.CMSMenu
3 Menu styles
{
border: 0px 0px 0px 0px;
padding: 0px;
There are several menu web parts available in Kentico CMS: margin: 0px;
• Drop-down menu (CMSMenu control) - uses JavaScript and tables }
• CSS list menu (CMSListMenu control) - uses <UL> and <LI> elements
.CMSMenuItem, .CMSMenuItemMouseOver, .CMSMenuHighlightedMenuItem,
• Tree menu (CMSTreeMenu) - for tree menus .CMSMenuHighlightedMenuItemMouseOver
• Tab menu (CMSTabControl) - for tabs {
border: none;
Each of these web parts uses a specific set of CSS classes that need to be defined in your CSS height: 18px;
style sheet. You can find detailed description of CSS styles for each web part/control in Kentico background-repeat: repeat-x;
CMS Web Parts and Controls Reference. background-image: url(../app_themes/green/Images/Gray/menuitem.gif);
color: #838c92;
The example on the right shows part of the CSS styles used for the main drop-down menu. You /* ... etc. ....*/
can see there's a CSS style for sub-menu called SubCMSMenu. }

If you want to use different styles for sub-menus, you need to set the CSS Prefix property of the .SubCMSMenu
menu web part. If you set it to Main;Sub;Sub2 the CSS class names for the first level will start {
with Main (such as MainCMSMenu), with Sub for second level and with Sub2 for third and any background: #e7eaed;
following levels. /* ... etc. ....*/
}