Documentation

Toolbar

Kentico Toolbar Editor

In Kentico CMS, the toolbar is used to create web content without the content editor needing to knowing HTML or CSS. This toolbar functions similarly to Microsoft Word's style ribbon (toolbar). The navigation on the right provides a list of toolbar content covered; click on the topic you want to learn more about.

Checked out pageToolbars are only visible once the page is checked out.

The toolbar will vary depending on the content editor's permission level.​

Publisher view

publisher toolbar viewEditor view

editor toolbar view


Text Editing

Paste

Always select "Paste as a Plain Text" when pasting content into your document, especially if you're pasting content from Word. Users with accessibility needs have software that reads the coding instead of the page itself so all content editors need to comply with accessibility policies. Learn more about website accessibility.

  • Click where you would like to paste the information, then click the paste icon (with the clipboard and capital letter Tpaste as plain text icon) to paste as plain text. 
  • A window will appear where you can use the keyboard shortcut to paste in the information. Click "OK" and it will insert clean code.

Paste as plain text pop up

Do not paste directly from Word documents, this creates inaccessible code. If the copied information is from Word, please paste as plain text using the method above or you can:

  • Copy the information into http://word2cleanhtml.com/ and check all of the boxes. This produces the best result.
  • Copy the text into Windows Notepad first, then copy from Notepad into the CMS editor.

Undo & redo

The arrow point to the left will undo an action on the edited content. The arrow pointing to the right will redo an action on the edited content.
undo and redo

Font options

bold, italicise, strike through, sub script and super script

  • Bold should be used to make important content stand out but should not be used in place of a Heading.
  • Italicize should be used to emphasize important content.
  • Strikethrough to show that this content/option is not longer available. For example: training dates that have passed.
  • Sub and super script are also available.

Formatting

Bullet & numbered lists

lists options and increase descrease list indent highlighted.

  • Do not manually create lists by typing in numbers or symbols; always use the toolbar to create bullet or numbered lists
    • manually created lists are inaccessible to those using assistive technology

List hierarchy

Increase and decrease indent buttons should only be used on lists (bullet or numbered) and should not be used on a paragraph.

Numbered lists can have sub-bullets and vice versa. Example below:

  1. Example numbered list item
    • example sub-bullet list item: to change this from a bullet to a number, click on the "Insert/remove Numbered List" button and it will automatically change.

Content Alignment

Use these options to align your content differently.

List and Alignment Options

  • The font will default align to the left and according to brand standards, that is the preferred way to align text. Only realign text as necessary.

Show blocks show block icon

This will expose the HTML structure of your page in terms of which elements are contained in each HTML tag.

DIV container

Only publisher level content editors have access to this button.

DIV containers are needed in order to create multi-column layouts. In order to create a two or three column layout, follow the steps listed below. 

  1. Click the Show Blocks icon. show block icon
  2. Click the DIV icon. div icon
  3. A window will pop up. For stylesheet classes, type 'columnWrapper' and click OK.  

Two columns

  1. Inside the 'columnWrapper' div container, Press the Enter key once to generate another paragraph tag.
  2. Put the mouse cursor in the first paragraph tag, click the div button again and enter the stylesheet class 'leftColumn'. 
  3. Move the mouse cursor to the second paragraph tag, click the div button again and enter the stylesheet class 'rightColumn'. 
  4. Fill the first div with content for the left column and the second with content for the right column.

Three columns

  1. Inside the 'columnWrapper' div container, Press the Enter key twice to generate two more paragraph tags.
  2.  Put the mouse cursor in the first paragraph tag, click the div button again and enter the stylesheet class 'c3-Col1'. 
  3. Move the mouse cursor to the second paragraph tag, click the div button again and enter the stylesheet class 'c3-Col2'. 
  4. Move the mouse cursor to the second paragraph tag, click the div button again and enter the stylesheet class 'c3-Col3'. 
  5. Fill the first div with content for the left column, the second with content for the middle column and the last with content for the right column.

Hyperlinks

Insert/edit link

  1. Highlight the text you'd like to become the hyperlink.
  2. Hit the link icon on the toolbarinsert hyperlink button and a new window will appear.

    hyperlink options
  3. You can choose the link type that can be either:
    • Attachment: Word, PowerPoint, Excel, etc. - these documents must be accessible. Review best practices on uploading files into Kentico.
    • Content: Internal hyperlinks directing to a uwb.edu page you have access to. Use the Web tab if you don't.
    • Media libraries: Internal library of media that is currently outdated. The campus has shifted to useing Smugmug to house campus photos; contact uwbadv@uw.edu if interested.
    • Web: External hyperlinks directing to anything other than a uwb.edu page OR uwb.edu directories you don't have access to. 
    • Anchor: can be used in relation to an existing anchor
    • E-mail: email address can be hyperlinks which will open the user's default email client upon clicking. Can fill out the fields so areas will auto-populate for the user upon clicking.
  4. Each hyperlink type differs with adding a link
    • Attachment - Select "New file" and your computer file browser will appear where you can select the desired file. Hit insert.
    • Content & Media libraries - Find the document you'd like to hyperlink to within the content navigation tree and select it so it's  highlighted. Then hit insert.
    • Web - Paste the external webpage's URL into the "URL:" field. Delete the protocol (http://) (https://) and change it in the drop down menu if needed. With internal sites you don't have access to, start the URL after the ".edu/" for example "/it/forms/softwarerequest"
    • Anchor - Create the anchor before creating a link to the it within the editor by selecting text to be the anchor and clicking on the flag icon. anchor icon Then you'll be able to choose the radio button for "Link to existing anchor with name" and you'll find the anchor name you created in the dropdown menu. Hit insert. 
    • E-mail - Input the desired auto-populating information in the "To" "Cc" "Bcc" "Subject" and/or "Message body" then hit Insert.

Remove Link

Highlight the link to remove and click the unlink icon. unlink iconOr right-click on the link and select "remove link."


Insert Content

Image or mediaimage toolbar icon

Using the insert/edit image or media icon is recommended (shown above) to add images from a computer or website.

  1. Click on the media icon.
  2. Upload a file from your computer by clicking the "Attachments" tab and then "Upload" to open your computer's file browser.
  3. After an image is selected, the "General" tab will appear with:
    • Alternate Text- Never leave blank. Important for accessibility!
    • Border Width - borders generally not used
    • Border Color - if using, stick to UW Brand colors
    • Horizontal space- this will leave a space to the left and right of the image
    • Vertical space- this will leave a space above and under the image
    • Align- Choosing the different options will define where the image is place in relation to the text. (Example: choosing left will put the image to the left of the text)
    • Link - Here you can make the image a link to another site
    • Disregard the "Advanced" and "Behavior" tabs
  4. After selecting from the media option click Save & Insert.

Adding required alternative text

Alternative tags (alt tags) on images are required to provide descriptive information about the image for users of non-visual devices. See the accessibility page for more information on accessible webpages.

Creating a table table icon

  1. Click the Insert/edit table icon in the toolbar. 
  2. In the Table properties dialog, you can select the number of rows and columns you want your table to be.
    • Headers - always do "Both" with headers so the table is accessible to everyone
    • Caption- This will be added above the table, required for accessibilit
    • Learn about other properties to make tables accessible
    • Width maximum: Standard is 560, Standard Wide is 750
    • Cell spacing auto-adjusts as your type your content, no need to change.
    • accessible table example
  3. Click OK and your table will appear where your cursor was on the page.
Accessible table example
Column header Column header
Row header Table data
Row header

Table data

Editing a table

  • Right-click onto the table
  • Select "Table Properties" and the same window will appear. 
  • After a table is created you cannot change the amount of rows and columns from table properties.
    • To change the amount of rows, columns, or cells, right click on the table and hover the cursor over the "Cell", "Row", or "Column" section to see your options.
    • A row can also be added by going into the last table data cell and pressing the "Tab" key.

Youtube

youtube icon Refer to the Youtube page for more information on inserting and editing Youtube videos.