Styling changes - General components

Breadcrumbs

Breadcrumbs in administration components use the administration interface markup — a .breadcrumbs-dialog wrapper containing a .breadcrumb unordered list.

The Breadcrumbs web part still uses the same markup as in Kentico 7 — no wrapper (can be added via Content before and after properties) and a list of links with the .CMSBreadCrumbsLink class.

Buttons

In Kentico 8, all buttons have the .btn class inherited from bootstrap. If you combine .btn with other classes in stronger selectors, you may affect the design of header action buttons on the Page and Design tab in the Pages application. To deal with this problem:

• Do not use classes from the page body (like .ContentBody or browser type classes) combined with .btn in CSS selectors
• Use the header action button wrapper class and overwrite the changed properties for .cms-edit-menu .btn to the default values

Calendar

Kentico 8 brings several changes to the calendar used for date and time selection:

• The month switching arrows were moved just after the drop-down lists for month and year selection in the markup.

• Icons were switched to font icons.

• The following classes were added to the markup:

  	Kentico 7	Kentico 8
  month and year wrapper		.control-group-inline
  month and year dropdowns		.form-control, .input-width-20
  time input table		.datetime-ui-time-input

Dialogs

Dialogs do not use consistent markup and styling on the live site. Administration components may have additional styles:

Dropdown menu and toggle button

If your site’s CSS interferes with the administration interface context menu (for example displayed by right-clicking groups in the Groups viewer web part), try to use the following code to fix the menu:

.dropdown-menu li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

To modify the background color of the active dropdown toggle button, use the .open .btn.dropdown-toggle selector with the !important directive or the .btn-actions .btn-group.open .btn.icon-only.dropdown-toggle selector.

For styling the borders between the buttons in .btn-group, use .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {  border-right: 1px solid #YOURCOLOR; }

Note: This is considered as a semi-administration component (not supported in Internet Explorer versions older than 9).

To fix the height of the dropdown toggle button in .btn-actions, set .dropdown-toggle { line-height: normal; }

Error labels

To style error labels displayed on your live site, use one of the following CSS selectors:

• .ContentBody .form-control-error
• .ContentBody .ErrorLabel
• .ContentBody .LineErrorLabel
• .ContentBody .EditingFormErrorLabel

Forms

Kentico 8 completely redesigns the default layout of forms (inspired by bootstrap). Most forms now use a <div> based layout.

• The whole form is wrapped in the .form-horizontal class
• Form rows (containing the title label, input and validation label) are represented by the .form-group class
  • The title label is wrapped by the .editing-form-label-cell class
  • The input (for example a textbox, dropdown or radio button list) and optional validation label are wrapped by the .editing-form-value-cell class

<div class="form-horizontal">
  <div class="form-group">
    <div class="editing-form-label-cell">
      Field label
    </div>
    <div class="editing-form-value-cell">
      Field input
    </div>
  </div>
  <div class="form-group">
    <div class="editing-form-label-cell">
      Another field label
    </div>
    <div class="editing-form-value-cell">
      Another field input
    </div>
  </div>
</div>

If you notice a large space above the form when using Skin.css, it might be caused by the clear property set for .form-group:after by the .clearfix() mixin in Skin.less. Adding the .form-horizontal .form-group:after { clear:none; } rule to your CSS should solve the issue.

You may need to add the following styles to your stylesheet to align the labels and text inside the form:

.control-label {
  display: inline-block;
  padding-right: 16px;
  margin-top: 6px;
}

.form-control-text {
  margin-top: 6px;
  display: inline-block;
}

Filters

The structure of advanced filters is now based on the form markup (see Forms). The .form-horizontal wrapper has an additional class: .form-filter

Icons

We recommend using default padding (6px) for the .icon-only class to display buttons that only contain an icon.

Logon web part

Rating stars

If your site uses stars for content rating, use the following selectors to style the size:

• .rating-star { font-size: 8px !important;  /* this is the space between stars */ }
• .rating-star:before { font-size: 16px;  /* this is the star */ }

Search box

Search box styling is now based on the .form-horizontal class (see Forms). In Skin.css, the default width of the class is 660px. If you encounter problems with search box styling, we recommend one of the following solutions:

• Remove the rule .form-horizontal { width: @screen-tablet; } from Skin.less (affects all sites on the instance)
• Use a stronger selector (at least 3 classes or the !important directive) to overwrite the .ContentBody .form-horizontal { width: 660px; } rule in Skin.css (for example, wrap the search box into the .searchTextMode class and set the width for .ContentBody .searchTextMode .form-horizontal)

Shopping cart

Kentico 8 introduces a new customizable checkout process. The old checkout process managed by the Checkout process web part is still supported, but the web part’s markup is slightly different. See Shopping cart - old for a list of selectors used to style the shopping cart content table.

Tables

Tables can be found in many parts of the Kentico 8 administration interface, as well as several live site components (for example the My account web part - Subscriptions, Addresses, Messages). The tables are implemented by the UniGrid control, but referred to as tables here, because the final HTML output are <table> elements.

• Tables are wrapped by the .unigrid and .unigrid-content classes.
• The actual table elements use the .table .table\-hover classes.
• The table header row is represented by the .unigrid\-head class in thead.
• Other rows use classes depending on the type of the content, for example: .ArrowIcon, .FileTypeIcon, .RowContent

Table actions

For tables with a selection option, the selection action is a check box with the .unigrid-selection class applied.

Other actions, such as delete, view, reply are wrapped in the .unigrid\-actions class. If there are additional actions in the context menu, the .unigrid-actionmenu wrapper class is used.

Context menu

If available, the context menu is located in a <div> element below the table, wrapped by the .ContextMenu and .cms\-bootstrap classes. Items in the menu are <span> elements with the .Name class and image removed, wrapped in .ItemPadding.

Paging

The table pager contains the following blocks:

• List - an unordered list of page numbers, with the .pagination\-list class. The link to the currently active page is marked by the .active class.
• Pages - a selector wrapped by the .pagination-pages class.
• Items per page - a selector wrapped by the .pagination\-items\-per\-page class.

Mass actions

Some tables allow users to perform mass actions that affect the listed items. Mass actions are offered using form-like markup:

• The mass action form is wrapped in the .form\-horizontal .mass\-action classes.
• Each row has its .form-group
• Selectors and the confirmation button are wrapped in .mass\-action\-value\-cell``.

Tabs

There are currently two types of tab headers and tab content wrappers:

• .TabContainer + .TabBody
• .TabsHeader + .TabsContent

.TabBody or .TabsContent identifies the content of the currently displayed tab.

.TabContainer or .TabsHeader contains the list of all selectable tabs.

In some cases, the old markup of tab names was replaced by the bootstrap-based structure used in the administration interface:

<div class="nav-tabs-container-horizontal">
  <ul class="nav nav-tabs">
    <li class="active"><span class="tab-title">Inbox</span></a></li>
    <li><a class="Link" href="..." target="_self"><span class="tab-title">Outbox</span></a></li>
    <li><a class="Link" href="..." target="_self"><span class="tab-title">Contact list</span></a></li>
  </ul>
</div>

Tree view

Kentico 8 slightly changes the Tree view control (for example used by the Tree view web part or the category tree).

Font icons are used instead of images — <i> elements placed before the tree element links. The <i> elements have a class assigned, which determines the displayed font icon, for example .icon\-doc. The system loads the core-icons font for this purpose from the ~/App_Themes/Default/Fonts folder.