--- title: Styling changes - General components related: - https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components.md --- > Agent instructions: > **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown. > > - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version. > - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt). ## Breadcrumbs Breadcrumbs in [administration components](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-administration-interface-components.md) 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](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-administration-interface-components.md) may have additional styles: | | Live site and Semi-admin components | Admin components | | ---------------------- | ----------------------------------- | ------------------------------ | | header - wrapper | .dialog-header .non-selectable | .dialog-header | | header - actions | hidden | .dialog-header-action-buttons | | header - action button | hidden | .action-button / .close-button | | header - title | | .dialog-header-title | | content - wrapper | .PageContent | .dialog-content | | footer - wrapper | .PageFooterLine | .dialog-footer | ## 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: ```css .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](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-administration-interface-components.md) (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 \
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 ```xml
Field label
Field input
 
Another field label
Another field input
``` 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. | | Kentico 7 | Kentico 8 | | -------------------------------------------------------------------------- | ----------------------- | -------------------------------- | | textbox | .TextBoxField | input\[type="text"].form-control | | textarea | .TextAreaField | textarea.form-control | | non-editable value | .LabelField | .form-control-text | | table layout label
(e.g. shipping/billing form in the checkout process) | .EditingFormLabelCell | .FieldLabel | | password strength indicator wrapper
(for setting width) | .PasswStrenghtIndicator | .password-strength | You may need to add the following styles to your stylesheet to align the labels and text inside the form: ```css .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](#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 | | Kentico 7 | Kentico 8 | | ------------- | ----------------------------- | ---------------------------------------------------------- | | textbox | .LogonField | .logon input\[type="text"], .logon input\[type="password"] | | submit button | .logon button\[type="submit"] | .logon input\[type="submit"] | ## Rating stars If your site uses stars for [content rating](https://docs.kentico.com/k8/community-features/content-rating.md), 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](#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](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-web-parts.md#shopping-cart---old) for a list of selectors used to style the shopping cart content table. > **Info:** To learn about the new Kentico 8 checkout process, see [Checkout process](https://docs.kentico.com/k8/e-commerce-features/configuring-and-managing-your-store/checkout-process.md). ## 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](https://docs.kentico.com/k8/references/kentico-controls/ui-controls/unigrid.md) control, but referred to as tables here, because the final HTML output are `` 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 `
` element below the table, wrapped by the `.ContextMenu` and `.cms\-bootstrap` classes. Items in the menu are `` 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: ```csharp
``` ## 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 — `` elements placed before the tree element links. The `` 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.