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.
Toolbars are only visible once the page is checked out.
The toolbar will vary depending on the content editor's permission level.
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.
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.
- 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.
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
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:
- 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.
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.
This will expose the HTML structure of your page in terms of which elements are contained in each HTML tag.
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.
- Click the Show Blocks icon.
- Click the DIV icon.
- A window will pop up. For stylesheet classes, type 'columnWrapper' and click OK.
- Inside the 'columnWrapper' div container, Press the Enter key once to generate another paragraph tag.
- Put the mouse cursor in the first paragraph tag, click the div button again and enter the stylesheet class 'leftColumn'.
- Move the mouse cursor to the second paragraph tag, click the div button again and enter the stylesheet class 'rightColumn'.
- Fill the first div with content for the left column and the second with content for the right column.
- Inside the 'columnWrapper' div container, Press the Enter key twice to generate two more paragraph tags.
- Put the mouse cursor in the first paragraph tag, click the div button again and enter the stylesheet class 'c3-Col1'.
- Move the mouse cursor to the second paragraph tag, click the div button again and enter the stylesheet class 'c3-Col2'.
- Move the mouse cursor to the second paragraph tag, click the div button again and enter the stylesheet class 'c3-Col3'.
- 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.
- Highlight the text you'd like to become the hyperlink.
- Hit the link icon on the toolbar and a new window will appear.
- 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 firstname.lastname@example.org 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.
- 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.
Highlight the link to remove and click the unlink icon. Or right-click on the link and select "remove link."
Image or media
Using the insert/edit image or media icon is recommended (shown above) to add images from a computer or website.
- Click on the media icon.
- Upload a file from your computer by clicking the "Attachments" tab and then "Upload" to open your computer's file browser.
- After an image is selected, the "General" tab will appear with:
- Alternate Text- Never leave blank. Important for accessibility!
- [Image] 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).
- [Image] Height - it will auto-adjust to match the width you set
- 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
- 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
- Click the Insert/edit table icon in the toolbar.
- 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.
- Click OK and your table will appear where your cursor was on the page.
Accessible table example
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.
Refer to the Youtube page for more information on inserting and editing Youtube videos.