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.

Text Editing

Formatting

Insert Content

Hyperlinks

Editor overview

  • Toolbars are only visible once the page is “checked out” to you.
  • The toolbar will vary depending on the content editor’s permission level.

Publisher view

Editor view

Text Editing

Headings

When selecting heading levels, ensure that they are in numerical order starting with “Heading 2.” For example, a “Heading 4” should only be a “child” of a Heading Three, never of Heading 1 or 2. This will help create the semantic structure of your page and assist those using non-visual devices navigate your content in the correct order. Learn more about accessibility laws and policies.

Open the “Format” dropdown menu to see heading options.

Tips

  • Do not pick headings based on how they look
  • Think of headings as an outline of your content so people can quickly scan your page for the content they care about
  • When creating paragraph headings, try to incorporate key search terms to improve search engine optimization (SEO)
  • The heading dropdown menu lives on the toolbar, which doesn’t appear until the page is checked out
  • Headings will appear slightly different when added into the Auxiliary Content column
  • Always start with a heading 2 in your Main Content column and Auxiliary Content column.
  • Review how the headings on this page are used and how the heading topics relate to one another

Descriptions

Heading 1

This is the page title and is created in the Properties tab under Navigation. The title text goes into the Menu caption field. This captures the main point of the page and content editors should not add other content that is unrelated to this heading.

Normal

This allows you to type in the standard font when typing sentences and paragraphs.

Heading 2

There are usually 1 or 2 topics/headings on a page that use Heading 2. The capture the highest level of topics being covered on the page that related to the page title/heading 1.

Heading 3

These are the sub-topics that all relate to the parent Heading 2 topic. When making multiple headings with the same number, they carry the same weight of importance regarding their parent heading topic.

Heading 4, 5 & 6

Great for clarifying sections within a sub-topic of the page. These are the sub-topics that all relate to their parent heading topic.

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 T) 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.

Pasting from Word documents

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.

Font options

  • 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

  • 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.

  • 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

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.
  2. Click the DIV icon.
  3. Below are instructions for creating two, three and four column layouts in your content.

Two columns

  1. A window will pop up. In the field box “stylesheet classes” type “columnWrapper” and click OK.
  2. Inside the ‘columnWrapper’ div container, Press the Enter key once to generate another paragraph tag.
  3. In the first paragraph container add “left” and in the second add “right”; this will help visually with the next steps.
  4. Click within the first paragraph container, click the DIV button again and enter the stylesheet class ‘leftColumn’. Click ok. Right column cannot go first.
  5. Next click within the second paragraph tag, click the div button again and enter the stylesheet class ‘rightColumn’. Click ok.
  6. Fill the first div with content for the left column and the second with content for the right column.

Three columns

  1. A window will pop up. For stylesheet classes, type “columnWrapper threeCol” and click OK.
  2. Inside the ‘columnWrapper threeCol’ div container, Press the Enter key twice to generate a total of three paragraph containers.
  3. In the first paragraph container add “one,” in the second add “two” and in the third add “three”; this will help visually with the next steps.
  4. Click in the first paragraph tag, click the DIV button again and enter ‘col1’. Click ok.
  5. Click in the second paragraph tag, click the DIV button again and enter ‘col2’. Click ok.
  6. Click in the third paragraph tag, click the DIV button again and enter ‘col3’. Click ok.
  7. 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.

Four columns

  1. A window will pop up. For stylesheet classes, type “columnWrapper fourCol” and click OK.
  2. Inside the ‘columnWarpper fourCol’ div container, press the Enter key three times to generate a total of four paragraph containers.
  3. In the first paragraph container add “one”, in the add “two”, in the third add “three”, and in the fourth add “four”; this will help visually with the next steps.
  4. Click the first paragraph tag, click the DIV button again and enter ‘col’. Click ok.
  5. Click in the second paragraph tag, click the DIV button again and enter ‘col’. Click ok.
  6. Click in the third paragraph tag, click the DIV button again and enter ‘col’. Click ok.
  7. Click in the fourth paragraph tag, click the DIV button again and enter ‘col’. Click ok.
  8. Fill in the first DIV with content for the left column, the second and third with the contents for the middle columns, and the last with the 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 toolbar and a new window will appear.

  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 uwbweb@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. 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. Or right-click on the link and select “remove link.”

Link maintenance

Web links change and break regularly and content editors are responsible for maintaining active links within their content. The UW administered program called Siteimprove monitors the quality of our website. Content editors can request to gain “report only access” to Siteimprove and get weekly emails the the status on your directories broken links and misspellings and/or accessibility reports. Contact your directory’s primary publisher or the web team (uwbweb@uw.edu) for more information.

Insert Content

Images

Use the “insert/edit image or media” icon (shown above) to upload and add images from your computer.

  1. Click on the image icon.
  2. Select the “Attachments” tab and then the “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!
    • Width – varies depending on which template is being used
      • UWB Standard 3 Column (standard) uses column one for the site navigation, column two as the “main content area” (max width ~560px) and column three as the “auxiliary content area” (max width ~188px).
      • UWB Standard 2 Column (standard wide) uses column one for the site navigation and column two as the “main content area” (max width ~ 750px).
    • Height – it will auto-adjust to match the width you set
    • Border Width – borders are generally not used
    • Border Color – if using, stick to UW Brand colors
    • Horizontal space – this will leave empty space to the left and right of the image
    • Vertical space – this will leave empty space above and under the image
    • Align – Choosing the different options will define where the image is placed 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

  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.
  3. Click OK and your table will appear where your cursor was on the page.
Column headerColumn header
Row headerTable data
Row header

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.