--- title: Styling changes - Web parts --- > 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). The following sections describes how Kentico 8 changes CSS styling in the markup of web parts. ## Abuse report ### Abuse report | | Kentico 7 | Kentico 8 | | ------------- | -------------------- | ----------------- | | wrapper | .AbuseBody | .abuse-report | | label | style="display:none; | .sr-only | | textarea | .ReportComment | .form-control | | validator | .CMSValidator | | | submit button | .SubmitButton | .btn .btn-primary | ### Inline abuse report - The dialog window uses administration interface markup and styling. ## Attachments ### Document attachments MIME type icons are created as font icons: ```csharp ``` ### Document attachments with effect | | Kentico 7 | Kentico 8 | | -------------- | -------------- | -------------------------------- | | button wrapper | | .btn-actions | | button | .ContentButton | .ContentButton .btn .btn-default | ## Blogs ### Comment view | | Kentico 7 | Kentico 8 | | ------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | wrapper | .BlogPanel | | | label | .BlogLeaveComment | .control-label .blog-leave-comment | | label | .BlogSubscribe | .control-label .blog-subscribe | | form | table layout | div layout (see [Forms](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#forms)) | ### New blog | | Kentico 7 | Kentico 8 | | ------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | wrapper | | .new-blog | | form | table layout | div layout (see [Forms](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#forms)) | ## Chat ### Chat login | | Kentico 7 | Kentico 8 | | ------ | --------------------------- | ----------------- | | input | | .form-control | | button | .SubmitButton / .LongButton | .btn .btn-primary | ## Content rating ### Drop down list, Radio buttons, Stars | | Kentico 7 | Kentico 8 | | ------------- | ---------------------------------------- | ------------------------------------------------------- | | select | | .form-control | | radio wrapper | | .radio | | stars | .ratingStar .emptyRatingStar (bg images) | .rating-star .cms-icon-80 .icon-star-empty (font-icons) | | button | .CntRatingSubmitBtn | .btn .btn-default | ## Custom tables ### Custom table smart search | | Kentico 7 | Kentico 8 | | ------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | wrapper | | .search-dialog | | form | table layout | div layout (see [Forms](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#forms)) | ## Document library ### Document library | | Kentico 7 | Kentico 8 | | -------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | action buttons | links with images | buttons (see [Buttons](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#buttons)) | | listing | | new table markup (see [Tables](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#tables)) | | dialogs | | new look and feel (see [Dialogs](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#dialogs)) | The Document library is now styled by **\~/App\_Themes/Global/Skin.css**. If you want the default style, please include this stylesheet into your site's stylesheet. If you want to use custom styling: - The list of documents has different markup than in previous versions. See [Tables](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#tables). - You can see an ellipsis icon at the beginning of each row in the document list, which opens the context menu. You can style this icon using the **.btn-unigrid-action** class. - The context menu has new code. ## E-commerce ### Product filter | | Kentico 7 | Kentico 8 | | ---------------- | ------------- | --------------------------------------- | | select wrapper | | .control-group-inline | | select | .DropDownList | .DropDownList / .form-control / nothing | | checkbox wrapper | | .checkbox | ### Shopping cart - old | | Kentico 7 | Kentico 8 | | ------------------------------ | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | header (under .CartStepHeader) | | .wizard-header, .wizard-title, .wizard-description | | title | .BlockTitle | h3 | | steps | align="center" | | | wrapper | .BlockContent | .content-block-50 | | currency selector wrapper | | .control-group-inline, .content-block, .currency-selector | | product table | .UniGridGrid .CartContentTable | .CartContentTable .table .table-hover .\_nodivs | | product table header/rows | .UniGridHead, align="center/left/right", style="width:80px;white-space:nowrap;" | .text-right, .text-center, .wrap-nowrap, .main-column-100 | | product table rows | .EvenRow | | | product table elements | .UnitsTextBox, .RightAlign | .checkbox, .unigrid-actions, .text-unigrid-action, .input-width-20 .input-number .form-control | | buttons | .SubmitButton | .CartStepFooter > .btn .btn-primary | | billing address form | table layout | div layout (see [Forms](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#forms)) | | shipping and payment form | table layout | div layout (see [Forms](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#forms)) | | order preview | fieldset legend | | - Table styling tips: - Header - .ContentBody .CartContentTable.table thead th - Rows - .ContentBody .CartContentTable.table tbody > tr > td - Hovered rows - .ContentBody .CartContentTable.table tbody > tr:hover > td - When upgrading the shopping cart, we strongly recommend using the new web part based checkout process. See more details in [Checkout process](https://docs.kentico.com/k8/e-commerce-features/configuring-and-managing-your-store/checkout-process.md). ### Wishlist / product list | | Kentico 7 | Kentico 8 | | ------------------------ | --------------------- | ----------------------------------------------- | | add to cart link wrapper | .AddToCartContainer | .AddToCartContainer .add-to-cart-container | | add to cart link | .AddToCartLink | .AddToCartLink .add-to-cart-link | | add to cart image button | .AddToCartImageButton | .AddToCartImageButton .add-to-cart-image-button | | add to cart textbox | .AddToCartTextBox | .add-to-cart-text-box | ### Donate - The form uses a div layout (see [Forms](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#forms)). | | Kentico 7 | Kentico 8 | | ------ | ------------------------------ | ------------------- | | button | .SubmitButton .AddToCartButton | .add-to-cart-button | ## Events ### Event registration - The form uses a div layout (see [Forms](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#forms)). ## Filters ### Document name filter | | Kentico 7 | Kentico 8 | | ------ | --------- | ----------------- | | input | | .form-control | | button | | .btn .btn-default | ### Filter | | Kentico 7 | Kentico 8 | | ---------------- | ------------- | ------------- | | select | .DropDownList | .form-control | | checkbox wrapper | | .checkbox | ## Forms ### On-line form - default layout | | Kentico 7 | Kentico 8 | | -------- | -------------- | ----------------------------- | | textbox | .TextBoxField | .form-control | | textarea | .TextAreaField | .form-control | | button | .FormButton | .FormButton .btn .btn-primary | ## Forums - Div layout forms (see [Forms](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#forms)): - New thread - Subscribe to forum / post - Reply to post / Quote post / Edit post - Tree layout - uses font icons ## Full-text search ### Search web parts | | Kentico 7 | Kentico 8 | | ------ | -------------- | ----------------------------- | | input | .TextBoxField | .form-control | | select | .DropDownField | .form-control .DropDownField  | | button | .ContentButton | .btn .btn-default | ### Smart search filter | | Kentico 7 | Kentico 8 | | ------------- | ----------------------- | ------------------------------ | | row | | .filter-group | | radio wrapper | .ContentRadioButtonList | .ContentRadioButtonList .radio | ### Faceted search | | Kentico 7 | Kentico 8 | | ---------------- | -------------------- | ------------------------------ | | checkbox wrapper | .ContentCheckBoxList | .ContentCheckBoxList .checkbox | ### SQL search dialog | | Kentico 7 | Kentico 8 | | ------ | -------------------------------- | ---------------------------------------------- | | input | .CMSSearchDialogSearchForTextBox | .CMSSearchDialogSearchForTextBox .form-control | | button | .CMSSearchDialogSearchButton | .CMSSearchDialogSearchButton .btn .btn-primary | ## Listing and viewers ### Send to friend | | Kentico 7 | Kentico 8 | | -------- | ------------------------- | --------------------------- | | input | .sendToFriendEmailTextbox | .send-to-friend-textbox | | textarea | .sendToFriendMessage | .sendToFriendPanel textarea | ## Membership ### Registrations - password strength | | Kentico 7 | Kentico 8 | | ------- | ----------------------- | ------------------------- | | wrapper | | .change-password | | input | .LogonTextBox | .form-control | | text | .PasswordStrengthText | .password-strength-text | | | .PasswStrenghtIndicator | .passw-strength-indicator | ### Registration form | | Kentico 7 | Kentico 8 | | ------- | --------- | ------------------ | | wrapper | | .registration-form | - Div form layout (see [Forms](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#forms)) ### Change password | | Kentico 7 | Kentico 8 | | ------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | wrapper | .ChangePasswordTable | .change-password | | form | table layout | div layout (see [Forms](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#forms)) | ### Logon form | | Kentico 7 | Kentico 8 | | ---------------- | --------- | ----------------- | | label | | .control-label | | checkbox wrapper | | .checkbox | | button | | .btn .btn-primary | ### Logon mini form | | Kentico 7 | Kentico 8 | | ------ | ---------- | ----------------- | | input | LogonField | .form-control | | button | | .btn .btn-primary | ### OpenId required data / LiveId required data Uses a new form layout. | | Kentico 7 | Kentico 8 | | -------------------- | ------------- | -------------------- | | wrapper | | .membership-req-data | | existing user column | .existingUser | .existing-user | | new user column | .newUser | .new-user | > **Tip:** **Tip**: Set up a static max width for: `.password-strength .passw-strength-indicator` ### Sign out button | | Kentico 7 | Kentico 8 | | ------ | -------------- | --------------------------------- | | button | .signoutButton |  .signoutButton .btn .btn-primary | ### My account | | Kentico 7 | Kentico 8 | | ------- | --------------- | ----------------- | | wrapper | .MyProfilePanel | .my-profile-panel | - Forms - use a div layout (see [Forms](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#forms)) - Addresses, Orders - new table markup (see [Tables](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#tables)) - Messages - new tabs (see [Tabs](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#tabs)) - New message button - is no longer a link, but a button; images are not rendered - Messages listing - has new markup (see [Tables](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#tables)) - Subscriptions - new table styling (see [Tables](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#tables)) - Membership - new table styling (see [Tables](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#tables)) - Categories - new [tree markup](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#tree-view) (with font-icons), new [breadcrumbs](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#breadcrumbs), new [tabs](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#tabs) - New calendar styling (see [Calendar](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#calendar)) ### Users filter | | Kentico 7 | Kentico 8 | | ------ | --------- | ----------------- | | input | | .form-control | | button | | .btn .btn-default | ## Message board ### Message board | | Kentico 7 | Kentico 8 | | -------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | wrapper | .BoardPanel | .message-board-form | | form wrapper | .MessageEdit | .message-edit | | heading | .BoardLeaveMessage | .control-label .message-board-form-leave-message | | subscribe link | .BoardSubscribe | .message-board-form-subscribe | | form | table layout | div layout (see [Forms](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#forms)) | ## Messaging ### Contact list / Ignore list / Inbox / Outbox - Administration interface markup for tables, paging and mass actions (see [Tables](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#tables)) - The user selector uses new administration interface styling (bootstrap) ### Send message - The New Message page has a div form layout (see [Forms](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#forms)) ### My messages - New markup within the tabs (see [Tabs](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#tabs)) ## Navigation ### Tree View - Font icons and new tree markup (see [Tree view](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#tree-view)) ## Projects ### Project list | | Kentico 7 | Kentico 8 | | ------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | projects wrapper | | .project-list | | new project button wrapper | .Actions | .btn-actions | | new project button | link with image | button (see [Buttons](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#buttons)) | | table | | new markup (see [Tables](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#tables)) | | edit task dialog send reminder dialog | form layout | div layout (see [Forms](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#forms)) | ## Newsletters ### My subscriptions - Administration interface markup for tables, paging and mass actions (see [Tables](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#tables)) - Administration interface styling for the Select newsletter dialog (see [Dialogs](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#dialogs)) ### Newsletter / Content / Notification subscription - Form div layout (see [Forms](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#forms)) ## Reporting ### Report / Report table - The parameter filter and tables use administration interface markup (see [Tables](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#tables), [Filters](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#filters)) ## User contributions ### Contribution list / Edit contribution - Table - administration interface markup (see [Tables](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#tables)) - The New document form has a div layout (see [Forms](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#forms)) - Spell check dialog uses administration interface styling (see [Dialogs](https://docs.kentico.com/k8/installation/upgrading-kentico-7-to-8/updating-styling-for-live-site-components/styling-changes-general-components.md#dialogs))