Styling changes - Web parts

✖
Copy to clipboard

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:




<i class="icon-file-jpeg icon-file-default" aria-hidden="true"></i>

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)

New blog

Kentico 7

Kentico 8

wrapper

.new-blog

form

table layout

div layout (see Forms)

Chat

Chat login

Kentico 7

Kentico 8

input

.form-control

button

.SubmitButton / .LongButton

.btn .btn-primary

Content rating

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

Kentico 7

Kentico 8

wrapper

.search-dialog

form

table layout

div layout (see Forms)

Document library

Document library

Kentico 7

Kentico 8

action buttons

links with images

buttons (see Buttons)

listing

new table markup (see Tables)

dialogs

new look and feel (see 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.
  • 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)

shipping and payment form

table layout

div layout (see 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.

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
  • The form uses a div layout (see Forms).

Kentico 7

Kentico 8

button

.SubmitButton .AddToCartButton

.add-to-cart-button

Events

Event registration

  • The form uses a div layout (see 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):
    • 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

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)

Change password

Kentico 7

Kentico 8

wrapper

.ChangePasswordTable

.change-password

form

table layout

div layout (see 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: 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)
  • Addresses, Orders - new table markup (see Tables)
  • Messages - new tabs (see Tabs)
  • New message button - is no longer a link, but a button; images are not rendered
  • Messages listing - has new markup (see Tables)
  • Subscriptions - new table styling (see Tables)
  • Membership - new table styling (see Tables)
  • Categories - new tree markup (with font-icons), new breadcrumbs, new tabs
  • New calendar styling (see 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)

Messaging

Contact list / Ignore list / Inbox / Outbox

  • Administration interface markup for tables, paging and mass actions (see Tables)
  • The user selector uses new administration interface styling (bootstrap)

Send message

  • The New Message page has a div form layout (see Forms)

My messages

  • New markup within the tabs (see Tabs)

Tree View

  • Font icons and new tree markup (see 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)

table

new markup (see Tables)

edit task dialog send reminder dialog

form layout

div layout (see Forms)

Newsletters

My subscriptions

  • Administration interface markup for tables, paging and mass actions (see Tables)
  • Administration interface styling for the Select newsletter dialog (see Dialogs)

Newsletter / Content / Notification subscription

  • Form div layout (see Forms)

Reporting

Report / Report table

  • The parameter filter and tables use administration interface markup (see Tables, Filters)

User contributions

Contribution list / Edit contribution

  • Table - administration interface markup (see Tables)
  • The New document form has a div layout (see Forms)
  • Spell check dialog uses administration interface styling (see Dialogs)