{"id":18420,"date":"2020-09-11T14:47:08","date_gmt":"2020-09-11T18:47:08","guid":{"rendered":"https:\/\/www.uvm.edu\/it\/kb\/?page_id=18420"},"modified":"2026-04-01T09:58:49","modified_gmt":"2026-04-01T13:58:49","slug":"kbmanual","status":"publish","type":"page","link":"https:\/\/www.uvm.edu\/it\/kb\/kbmanual\/","title":{"rendered":"Knowledge Base Manual"},"content":{"rendered":"    \t\t<div class=\"hts-messages hts-messages--info  hts-messages--withtitle hts-messages--withicon \"   >\r\n    \t\t\t<span class=\"hts-messages__title\">Requesting Access to Create KB Content<\/span>    \t\t\t    \t\t\t\t<p>\r\n    \t\t\t\t\t<\/p>\n<p>If you or your group would like access to create Knowledge Base content, please email <a href=\"mailto:etskb@uvm.edu\">etskb@uvm.edu<\/a> with the following information:<\/p>\n<ul>\n<li>NetIDs of all users who need access.<\/li>\n<li>A brief description of the guide(s) your team would like to create.<\/li>\n<\/ul>\n<p>    \t\t\t\t<\/p>\r\n    \t\t\t    \t\t\t\r\n    \t\t<\/div><!-- \/.ht-shortcodes-messages -->\r\n    \t\t\n<h2>Editor Interface<\/h2>\n<p>There are two editor interfaces in WordPress, the Classic Editor and the Block Editor. Most KB contributors at UVM are more familiar with the Classic Editor, and most articles in the KB were developed using the Classic Editor. It is recommended to use the Classic Editor in most cases.<\/p>\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Getting Started with the Block Editor (optional)<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p>Most existing articles were created using the Classic Editor, which is what you see in this screenshot:<\/p>\n<p><a href=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ClassicEditor.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32902\" src=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ClassicEditor.png\" alt=\"Classic Editor with Editor card highlighted\" width=\"1008\" height=\"785\" srcset=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ClassicEditor.png 1008w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ClassicEditor-300x234.png 300w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ClassicEditor-768x598.png 768w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ClassicEditor-50x39.png 50w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ClassicEditor-60x47.png 60w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ClassicEditor-100x78.png 100w\" sizes=\"auto, (max-width: 1008px) 100vw, 1008px\" \/><\/a><\/p>\n<p>At some point in the future, compatibility between the various plugins used by the Knowledge Base may require a transition to the Block Editor interface. You can test the Block Editor by selecting <strong>Switch to block editor<\/strong> from the right side menu, or by choosing the\u00a0<strong>Edit (block editor)\u00a0<\/strong>option when viewing <strong>Knowledge Base -&gt;<\/strong>\u00a0<strong>All Articles<\/strong> from the left-side menu.<\/p>\n<p>It is recommended to test the Block Editor only with new or draft articles. Editing existing published articles in the Block Editor that were created using the Classic Editor adds complexity.<\/p>\n<p>If you switch to Block Editor, make sure to <strong>Update<\/strong> or <strong>Save<\/strong> changes first.<\/p>\n<p>The rest of documentation in this article below refers to the Classic Editor.<\/p>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n<h2>Conventions: Styling, Naming, etc.<\/h2>\n<p>Proper and consistent style and naming conventions are critical not only for user experience, but also for the effectiveness of the KB-search feature and <a href=\"https:\/\/moz.com\/beginners-guide-to-seo\">SEO<\/a>.<\/p>\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>What Should Be Documented<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<ul>\n<li>Document the\u00a0<strong>Best<\/strong> way\u2014don&#8217;t document <em>every <\/em>way.<\/li>\n<li>Don&#8217;t document something that&#8217;s already documented well elsewhere\u2014point to reputable documentation instead.\n<ul>\n<li>Exception: there are significant UVM-specific aspects of the process.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Writing Voice and Tone<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<ul>\n<li>Use <strong>you<\/strong> when referring to the reader.<\/li>\n<li>Avoid using <strong>We<\/strong> as the author. Instead, use a passive voice, for example, <em>It is recommended&#8230;<\/em><\/li>\n<li>Avoid jargon or technical language.\n<ul>\n<li>In cases where this is unavoidable, try to link to resources with explanations of the jargon.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Article Titles<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p>Article titles should be concise, clear, and accurately represent the contained content. Avoid multi-line titles, and strip superfluous language where possible.<\/p>\n<p>For example, &#8220;Accessing Network Folders&#8221; is a much better title than &#8220;How to connect to the Shared, My Docs, Netfiles, and Zoo Network Folders&#8221;.<\/p>\n<p><div class=\"hts-messages hts-messages--info  hts-messages--withtitle  \"   >\n    \t\t\t<span class=\"hts-messages__title\">Article Title Prefix<\/span>    \t\t\t    \t\t\t\t<\/p>\n<p>\n    \t\t\t\t\tIn cases where a major UVM service or software has several associated articles, such as Brightspace or Microsoft Teams, find and use a consistent prefix. For example, &#8220;Brightspace -&#8221; or &#8220;Microsoft Teams -&#8220;.    \t\t\t\t<\/p>\n<\/p><\/div>\n<p><!-- \/.ht-shortcodes-messages -->\n    \t\t<\/p>\n<p>An article&#8217;s title is used to create the article&#8217;s URL, so it&#8217;s important to have a well-considered title from the beginning. You can rename an article and manually change it&#8217;s URL later, but avoid that when possible.<\/p>\n<p>If you change an article URL (A.K.A. <strong>permalink<\/strong>), the old permalink will lead to a 404 page not found error. This can lead to broken links in other articles and on search engines, and can negatively affect the reputation of Knowledge Base. For these reasons, a redirect should be set up to send people to the new URL when they click on a link to the old URL. Record the old permalink and <a href=\"mailto:etskb@uvm.edu\">please contact etskb@uvm.edu<\/a>\u00a0when modifying a permalink.<\/p>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Punctuation and Style<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p>The use of consistent grammar, punctuation, sentence structure, and formatting is paramount and includes, but is not limited to, the following rules:<\/p>\n<ul>\n<li>End complete sentences with a period, question mark, or exclamation mark!<\/li>\n<li>When describing a link or button that includes an ellipsis (i.e. <strong>Settings&#8230;<\/strong>), include the ellipsis in the description.<\/li>\n<li>When referring to a screen element the reader must interact with, make the text of the element bold (i.e. &#8220;Click the <strong>Settings&#8230;<\/strong> button.&#8221;).<\/li>\n<li>Use Roboto font.<\/li>\n<\/ul>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Headings<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p><a href=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_StyleDropDown.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32905\" src=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_StyleDropDown.png\" alt=\"WordPress Classic Editor Style drop-down menu\" width=\"311\" height=\"331\" srcset=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_StyleDropDown.png 311w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_StyleDropDown-282x300.png 282w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_StyleDropDown-47x50.png 47w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_StyleDropDown-56x60.png 56w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_StyleDropDown-94x100.png 94w\" sizes=\"auto, (max-width: 311px) 100vw, 311px\" \/><\/a><\/p>\n<ul>\n<li>Headings should be nested in order, not skipping any.<\/li>\n<li><em>Heading 1<\/em> is reserved for the Title and should not be used within the editor.<\/li>\n<li>Toggles are interpreted by web browsers as <em>Heading 3.<\/em>\n<ul>\n<li>As such, toggles should always be nested below a <em>Heading 2<\/em>.<\/li>\n<li>When dividing text within a toggle into sections, <em>Heading 4<\/em> should be used next.<\/li>\n<\/ul>\n<\/li>\n<li>Use <em>Preformatted<\/em> for code blocks and terminal commands.<\/li>\n<li>Use <em>Paragraph<\/em> for all other non-heading text.\n<ul>\n<li>Change the typographic emphasis (and less commonly, the font size) manually if required.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Numbered and Bulleted Lists<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p>Concrete, sequential steps should use ordered\/numbered lists. A user should be able to to follow each step to complete the desired task or process.<\/p>\n<p>Unordered\/bulleted lists should be used when order doesn&#8217;t matter, like when you&#8217;re describing service features or recommendations.<\/p>\n<h4>Best Practices for Lists (and an Unordered\/Bulleted List Example!)<\/h4>\n<ul>\n<li>Edit text down to only what is needed.<\/li>\n<li>Use specific wording, identical to the actual options or text (i.e. &#8220;Click the <strong>Settings&#8230;<\/strong> button.&#8221;).<\/li>\n<li>Use appropriate, consistent punctuation.<\/li>\n<li>Include only 1 (or 2 if brief) steps per list item.<\/li>\n<\/ul>\n<h4>Ordered\/Numbered List Example<\/h4>\n<p>To request your transcript through MyUVM, follow these steps:<\/p>\n<ol>\n<li><a href=\"https:\/\/myuvm.uvm.edu\">Visit MyUVM and sign in with your NetID and password<\/a>.<\/li>\n<li>Within the <strong>Academic Records <\/strong>card, select <strong>Request My Official Transcript<\/strong>.<\/li>\n<li>Click\u00a0<strong>Mail <\/strong>or\u00a0<strong>Email<\/strong>, depending on your desired delivery method.<\/li>\n<\/ol>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Formatting Phone Numbers<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<ul>\n<li>Always include the area code.<\/li>\n<li>Phone numbers should be formatted thusly: <strong>(802) 656-2604<\/strong><\/li>\n<\/ul>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n<h2>Buttons &amp; Hyperlinks<\/h2>\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Formatting Hyperlinks<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p><div class=\"hts-messages hts-messages--danger  hts-messages--withtitle hts-messages--withicon \"   >\n    \t\t\t<span class=\"hts-messages__title\">Never set links to <em>Open in a New Window<\/em> or <em>Tab<\/em><\/span>    \t\t\t    \t\t\t\t<\/p>\n<p>\n    \t\t\t\t\tLinks that open in a new tab or window have potential to create accessibility issues.    \t\t\t\t<\/p>\n<\/p><\/div>\n<p><!-- \/.ht-shortcodes-messages -->\n    \t\t<\/p>\n<ul>\n<li>If your sentence is similar to &#8220;<em>Click here to complete the form<\/em>&#8220;, or &#8220;<em>Visit the Registrar page for more information<\/em>&#8220;, the entire sentence should be hyperlinked.<\/li>\n<li>Do your best to keep these hyperlinked sentences concise and descriptive.<\/li>\n<li>References to specific services, supplemental KB articles, and other resources may hyperlink specific relevant words.<\/li>\n<li>Try to hyperlink several words, rather than only one word. This improves visibility of that link.<\/li>\n<li>If the same hyperlink appears in an article multiple times, use the same link text for each instance.<\/li>\n<\/ul>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Creating Button Hyperlinks<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p>In some cases, it can be useful to have an obvious button, front-and-center on a KB guide, like this:<\/p>\n<p class=\"button-kb\"><a href=\"go.uvm.edu\/techteam\">Contact the Tech Team<\/a><\/p>\n<p>Creating this button requires some basic editing of your guide in the\u00a0<strong>Code <\/strong>section, as this theme does not include a gui-based method of creating them.<\/p>\n<ol>\n<li>Click\u00a0<strong>Code<\/strong> in the top-right corner.<\/li>\n<li>Copy and paste the following into the spot where your button will appear.\n<pre>&lt;p class=\"button-kb\"&gt;&lt;a href=\"https<strong>:\/\/www.path.tld\"&gt;Button Text<\/strong>&lt;\/a&gt;&lt;\/p&gt;<\/pre>\n<\/li>\n<li>Replace <em>https:\/\/www.path.tld<\/em> with the destination URL.<\/li>\n<li>Replace <em>Button Text<\/em> with the text to display on the button.<\/li>\n<\/ol>\n<p><div class=\"hts-messages hts-messages--danger  hts-messages--withtitle hts-messages--withicon \"   >\n    \t\t\t<span class=\"hts-messages__title\">When working with buttons...<\/span>    \t\t\t    \t\t\t\t<\/p>\n<ul>\n<li>Buttons should <em>ONLY <\/em>be used to share links. Don&#8217;t use buttons in place of Messages.<\/li>\n<li>Button text should be succinct and specific. Avoid buttons that say, &#8220;Log In Here&#8221;.<\/li>\n<\/ul>\n<\/p><\/div>\n<p><!-- \/.ht-shortcodes-messages -->\n    \t\t<\/p>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n<h2>Categories &amp; Tags<\/h2>\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Categories<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p>Categories are the high-level organization for the KB, and are visible on the main <a href=\"https:\/\/www.uvm.edu\/it\/kb\/\">Knowledge Base page<\/a>.<\/p>\n<p>Each article\u00a0<span style=\"text-decoration: underline;\">must have at least one category assigned to it<\/span>, but can have multiple if appropriate. If a user selects one of the <strong>Help Topics<\/strong> from the KB main page, they will see a listing of all articles associated with that category.<br \/>\n<a href=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2024\/01\/KB-Article-Categories.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-28016\" src=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2024\/01\/KB-Article-Categories.png\" alt=\"Knowledge Base Article Categories\" width=\"313\" height=\"367\" srcset=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2024\/01\/KB-Article-Categories.png 313w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2024\/01\/KB-Article-Categories-256x300.png 256w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2024\/01\/KB-Article-Categories-43x50.png 43w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2024\/01\/KB-Article-Categories-51x60.png 51w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2024\/01\/KB-Article-Categories-85x100.png 85w\" sizes=\"auto, (max-width: 313px) 100vw, 313px\" \/><\/a><\/p>\n<div class=\"hts-messages hts-messages--info  hts-messages--withtitle hts-messages--withicon \"   >\n    \t\t\t<span class=\"hts-messages__title\">Categories are created at the site-administrator level<\/span>    \t\t\t    \t\t\t\t<\/p>\n<p>\n    \t\t\t\t\tIf you feel strongly that a new category should be created, <a href=\"mailto:etskb@uvm.edu\">please contact etskb@uvm.edu<\/a>.    \t\t\t\t<\/p>\n<\/p><\/div>\n<p><!-- \/.ht-shortcodes-messages -->\n    \t\t<\/p>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Tags<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p>Tags make the KB search more effective. They also help with search engine optimization. It is recommended to assign one or more tags to each article, although it is not required.<\/p>\n<p>Rules and recommendations:<\/p>\n<ul>\n<li>Chose existing tags before creating new ones, especially for articles about a specific product, like &#8220;Outlook&#8221;.<\/li>\n<li>Use simple, concise names (<i class=\"fas fa-check \" ><\/i> &#8220;Assignment&#8221; vs. <i class=\"fas fa-times \" ><\/i> &#8220;Assignment <em>T<\/em><em>ool&#8221;<\/em>).<\/li>\n<li>Don&#8217;t use tags to specify author or department.<\/li>\n<li>Use vendor names where appropriate (<i class=\"fas fa-check \" ><\/i> Nintendo vs. <i class=\"fas fa-times \" ><\/i> Wii U).<\/li>\n<li>Use Title Case for Tags (<i class=\"fas fa-check \" ><\/i> &#8220;Browser Cache&#8221; vs. <i class=\"fas fa-times \" ><\/i> &#8220;browser cache&#8221;).<\/li>\n<li>Use spaces in multi-word tags, not dashes or underscores (<i class=\"fas fa-check \" ><\/i> &#8220;Microsoft Teams&#8221; vs. <i class=\"fas fa-times \" ><\/i> &#8220;Microsoft-Teams&#8221;).<\/li>\n<\/ul>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n<h2>Toggles, Messages, Tabs, &amp; Accordions<\/h2>\n<p>This guide refers to short codes used by the KnowAll KB theme. Shorcodes can be inserted by selecting the expanding the Heroic Shortcodes menu or by copying and pasting an existing Shortcode. <a href=\"https:\/\/herothemes.com\/support\/knowledge-base\/knowall-heroic-shortcodes-reference\/\">You can read more about Heroic Short Codes here<\/a>.<\/p>\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Toggles<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p><a href=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_Toggles.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32907\" src=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_Toggles.png\" alt=\"Heroic Shortcodes menu with Toggles highlighted\" width=\"336\" height=\"142\" srcset=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_Toggles.png 336w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_Toggles-300x127.png 300w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_Toggles-50x21.png 50w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_Toggles-60x25.png 60w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_Toggles-100x42.png 100w\" sizes=\"auto, (max-width: 336px) 100vw, 336px\" \/><\/a><\/p>\n<pre>&#091;ht_toggle title=\"Toggle Title\" id=\"\" class=\"\" style=\"\" &#093;\r\nThis is the toggle content.\r\n&#091;\/ht_toggle&#093;\r\n<\/pre>\n<p>Toggles are an organizational device used in nearly every article, except in cases where the article scope is exceedingly small. Using toggles to condense information enables an article to contain a lot of content without appearing bloated. Users can skip over toggles that are not relevant to them.<\/p>\n<p>In the majority of cases, a toggle should contain all the steps needed to complete a given task &#8211; even when some of those steps are redundant with other sections of the guide.<\/p>\n<p>Examples of common uses:<\/p>\n<ul>\n<li><a href=\"https:\/\/kb.helpline.w3.uvm.edu\/article\/connect-to-uvm-wireless\/\">Connecting to UVM Wireless<\/a> &#8211; toggles for a variety of operating systems and device types<\/li>\n<li><a href=\"https:\/\/www.uvm.edu\/it\/kb\/article\/clearing-browser-cache\/\">Clearing Browser Cache<\/a> &#8211; toggles for common browsers<\/li>\n<li><a href=\"https:\/\/www.uvm.edu\/it\/kb\/kbmanual\/\">KB Manual<\/a> &#8211; toggles for various features and practices<\/li>\n<\/ul>\n<p>It is not possible to have a toggle within a toggle (nested toggle).<\/p>\n<p><div class=\"hts-messages hts-messages--info  hts-messages--withtitle hts-messages--withicon \"   >\n    \t\t\t<span class=\"hts-messages__title\">Link directly to a toggle<\/span>    \t\t\t    \t\t\t\t<\/p>\n<p>\n    \t\t\t\t\tYou can link directly to a toggle and have it auto-expanded by adding #toggle-name to the end of a URL, like this:<\/p>\n<p><a href=\"https:\/\/uvm.edu\/it\/kb\/kbmanual\/#toggles\">https:\/\/uvm.edu\/it\/kb\/kbmanual\/#toggles<\/a>    \t\t\t\t<\/p>\n<\/p><\/div>\n<p><!-- \/.ht-shortcodes-messages -->\n    \t\t<\/p>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Messages<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p><a href=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_Messages.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32906\" src=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_Messages.png\" alt=\"Heroic Shortcodes menu with Messages highlighted\" width=\"338\" height=\"114\" srcset=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_Messages.png 338w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_Messages-300x101.png 300w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_Messages-50x17.png 50w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_Messages-60x20.png 60w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_Messages-100x34.png 100w\" sizes=\"auto, (max-width: 338px) 100vw, 338px\" \/><\/a><\/p>\n<pre>&#091;ht_message mstyle=\"info\" title=\"Message Title\" show_icon=\"true\" id=\"\" class=\"\" style=\"\" &#093;\r\nThis is the message body.\r\n&#091;\/ht_message&#093;\r\n<\/pre>\n<p>Messages offer an effective way to draw a reader&#8217;s attention to important information. They should be used sparingly and should never be overly packed with information. Messages should always have the <strong>Show Icon <\/strong>box checked or set to <strong>&#8220;true&#8221;<\/strong> and include a <strong>Title<\/strong>.<\/p>\n<p><div class=\"hts-messages hts-messages--alert  hts-messages--withtitle hts-messages--withicon \"   >\n    \t\t\t<span class=\"hts-messages__title\">This is the Alert message style<\/span>    \t\t\t    \t\t\t\t<\/p>\n<p>\n    \t\t\t\t\tAlert messages can be used to highlight commonly made mistakes or convey important information.\u00a0    \t\t\t\t<\/p>\n<\/p><\/div>\n<p><!-- \/.ht-shortcodes-messages -->\n    \t\t<\/p>\n<p><div class=\"hts-messages hts-messages--danger  hts-messages--withtitle hts-messages--withicon \"   >\n    \t\t\t<span class=\"hts-messages__title\">This is the Danger message style<\/span>    \t\t\t    \t\t\t\t<\/p>\n<p>\n    \t\t\t\t\tCritical details and information, or steps that, if missed, could cause a major failure or error should use the danger style.    \t\t\t\t<\/p>\n<\/p><\/div>\n<p><!-- \/.ht-shortcodes-messages -->\n    \t\t<\/p>\n<p><div class=\"hts-messages hts-messages--info  hts-messages--withtitle hts-messages--withicon \"   >\n    \t\t\t<span class=\"hts-messages__title\">This is the Information message style<\/span>    \t\t\t    \t\t\t\t<\/p>\n<p>\n    \t\t\t\t\tSupplemental information, useful facts, or feature descriptions should use the info style.    \t\t\t\t<\/p>\n<\/p><\/div>\n<p><!-- \/.ht-shortcodes-messages -->\n    \t\t<\/p>\n<p><div class=\"hts-messages hts-messages--success  hts-messages--withtitle hts-messages--withicon \"   >\n    \t\t\t<span class=\"hts-messages__title\">This is the Success message style<\/span>    \t\t\t    \t\t\t\t<\/p>\n<p>\n    \t\t\t\t\tGenerally used as an alternate message style in cases where multiple messages are used (different from the message style&#8217;s name would suggest&#8230;). <a href=\"https:\/\/www.uvm.edu\/it\/kb\/article\/teams\/\">See the Teams article for an example.<\/a>     \t\t\t\t<\/p>\n<\/p><\/div>\n<p><!-- \/.ht-shortcodes-messages -->\n    \t\t<\/p>\n<p>It is not possible to nest toggles within a message, but it <em>is<\/em> possible to put messages in a toggle (as is the case here!).<\/p>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Accordions &amp; Tabs<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p><div class=\"hts-messages hts-messages--alert  hts-messages--withtitle hts-messages--withicon \"   >\n    \t\t\t<span class=\"hts-messages__title\">Avoid Accordions and Tabs<\/span>    \t\t\t    \t\t\t\t<\/p>\n<p>\n    \t\t\t\t\tAvoid using these features, as their implementation can make it difficult to effectively update the article or troubleshoot issues later.    \t\t\t\t<\/p>\n<\/p><\/div>\n<p><!-- \/.ht-shortcodes-messages -->\n    \t\t<\/p>\n<p>While a Toggle is a single, self-contained set of instructions or processes, accordions and tabs are a way of organizing like-content into a single entity. The most notable feature of accordions and tabs is that they always have one section expanded.<\/p>\n<h4>Why avoid Accordions and Tabs<\/h4>\n<p>Below is the default text organization of an accordion (without [] brackets). Tabs are very similar, but have a different <em>ht_ <\/em>tag.<\/p>\n<p><em>ht_accordion sections=&#8221;2&#8243; section_head_1=&#8217;Section Head&#8217; section_content_1=&#8217;Section Content&#8217; section_head_2=&#8217;Section Head&#8217; section_content_2=&#8217;Section Content&#8217; id=&#8221;&#8221; class=&#8221;&#8221; style=&#8221;&#8221;<\/em><\/p>\n<ul>\n<li>Tedious and confusing to add new sections.\n<ul>\n<li>You must add incremental section_head and section_content fields, as well as increment the count of sections. For longer accordions and tabs, this can be complex and lead to hard-to-find errors.<\/li>\n<\/ul>\n<\/li>\n<li>Fields are encapsulated by quotation marks.\n<ul>\n<li>If you ever quote your text (i.e. <strong>Click &#8220;More Options&#8221;<\/strong>), you have to swap the encapsulating characters from double quotes to inverted commas.<\/li>\n<li>The opposite is true if you ever use an apostrophe (i.e. <strong>UVM&#8217;s Admissions department<\/strong>).<\/li>\n<\/ul>\n<\/li>\n<li>It&#8217;s a big block of text, which can be difficult to parse or troubleshoot when updating content.<\/li>\n<\/ul>\n<p>Just don&#8217;t use them. Use toggles instead.<\/p>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n<h2>Images &amp; Screenshots<\/h2>\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Screenshot Shortcut<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<ul>\n<li>macOS Screenshot Shortcut Keys\n<ul>\n<li>Option + Shift + 4 (+ spacebar to screenshot a window instead)<\/li>\n<li><a href=\"https:\/\/support.apple.com\/en-us\/HT201361\">More Info (screenshots on macOS)<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Windows Screenshot Shortcut Keys\n<ul>\n<li>Windows Key (<i class=\"fa fa-windows \" ><\/i>) + Shift + S<\/li>\n<li><a href=\"https:\/\/support.microsoft.com\/en-us\/help\/12445\/windows-keyboard-shortcuts\">More Info (general shortcut keys)<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Screenshot Editing Recommendations<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p><div class=\"hts-messages hts-messages--info  hts-messages--withtitle hts-messages--withicon \"   >\n    \t\t\t<span class=\"hts-messages__title\">Tools<\/span>    \t\t\t    \t\t\t\t<\/p>\n<p><a href=\"https:\/\/support.apple.com\/guide\/preview\/welcome\/mac\">macOS Default &#8211; Preview<\/a><\/p>\n<p><a href=\"https:\/\/www.wpxbox.com\/detailed-guide-use-paint-3d-app-windows-10\/\">Windows 10 Default &#8211; Paint 3d<\/a><\/p>\n<p>Paid Alternative: <a href=\"https:\/\/www.techsmith.com\/screen-capture.html\">Techsmith&#8217;s SnagIt<\/a> (used by the etskb admins)<\/p>\n<\/p><\/div>\n<p><!-- \/.ht-shortcodes-messages -->\n    \t\t<\/p>\n<p>Screenshots are valuable enhancements to any article and can provide useful context for support staff, users who have strayed from the correct steps, and for visual learners.<\/p>\n<h4>Use light mode and default themes.<\/h4>\n<p>Switch your computer, device, or app to light mode before taking screenshots. Use default themes to keep the focus on the important elements and ensure the screenshots are accurate for the greatest number of users.<\/p>\n<h4>Display relevant steps and context.<\/h4>\n<p>A screenshot should be a visual representation of the instructions immediately proceeding it in a support article. Show the icons, buttons, links, or fields you&#8217;ve instructed the user to interact with. Sometimes it&#8217;s also helpful to include some surrounding visual context to help the user see that they are on the right track and help them find the relevant elements, like in this example:<\/p>\n<p><a href=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ScreenshotWithSurroundingContext.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-32914\" src=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ScreenshotWithSurroundingContext.png\" alt=\"Knowledge Base step example with screenshot showing surrounding visual context\" width=\"400\" height=\"522\" srcset=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ScreenshotWithSurroundingContext.png 513w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ScreenshotWithSurroundingContext-230x300.png 230w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ScreenshotWithSurroundingContext-38x50.png 38w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ScreenshotWithSurroundingContext-46x60.png 46w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ScreenshotWithSurroundingContext-77x100.png 77w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><\/p>\n<h4>Don&#8217;t show the entire window\u2014crop it down.<\/h4>\n<p>If possible, you should crop unnecessary space in your screenshots. You can also try to reduce the size of the application or browser window before capturing to reduce the need to cut-out sections or limit blank space. This example highlights the elements the user needs to interact with, and cuts out the superfluous items from the context menu:<\/p>\n<p><a href=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2025\/06\/WordOnlineMoreOptionsAdd-ins.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31313 size-full\" src=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2025\/06\/WordOnlineMoreOptionsAdd-ins.png\" alt=\"Word Online More Options menu with Add-ins highlighted\" width=\"274\" height=\"298\" srcset=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2025\/06\/WordOnlineMoreOptionsAdd-ins.png 274w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2025\/06\/WordOnlineMoreOptionsAdd-ins-46x50.png 46w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2025\/06\/WordOnlineMoreOptionsAdd-ins-55x60.png 55w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2025\/06\/WordOnlineMoreOptionsAdd-ins-92x100.png 92w\" sizes=\"auto, (max-width: 274px) 100vw, 274px\" \/><\/a><\/p>\n<h4>Use screenshot adornments.<\/h4>\n<p>Put a box around key buttons or menus to draw a user&#8217;s eye. Use an arrow to point a user to the next step. If you must use multiple arrows, make sure they show a flow from one step to the next. However, sticking to 1 or 2 steps per screenshot is ideal in most cases.<\/p>\n<p><a href=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2018\/03\/win11_OutlookClassic_MoveRules.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-32878\" src=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2018\/03\/win11_OutlookClassic_MoveRules.png\" alt=\"Outlook Move and Rules drop-downs with Manage Rules &amp; Alerts highlighted\" width=\"450\" height=\"322\" srcset=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2018\/03\/win11_OutlookClassic_MoveRules.png 568w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2018\/03\/win11_OutlookClassic_MoveRules-300x214.png 300w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2018\/03\/win11_OutlookClassic_MoveRules-50x36.png 50w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2018\/03\/win11_OutlookClassic_MoveRules-60x43.png 60w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2018\/03\/win11_OutlookClassic_MoveRules-100x71.png 100w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/p>\n<p>Additional adornments can sometimes help when to draw attention away from or towards a certain element, like in this example:<a href=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ScreenshotWithElementCrossedOut.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-32915 \" src=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ScreenshotWithElementCrossedOut.png\" alt=\"KB step including a screenshot with certain elements crossed out\" width=\"530\" height=\"381\" srcset=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ScreenshotWithElementCrossedOut.png 582w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ScreenshotWithElementCrossedOut-300x215.png 300w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ScreenshotWithElementCrossedOut-50x36.png 50w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ScreenshotWithElementCrossedOut-60x43.png 60w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_ScreenshotWithElementCrossedOut-100x72.png 100w\" sizes=\"auto, (max-width: 530px) 100vw, 530px\" \/><\/a><\/p>\n<p>Too many adornments can detract from the usefulness of a screenshot. If everything on the page is highlighted, then nothing is highlighted.<\/p>\n<h4>Keep it consistent.<\/h4>\n<p>If you use a red box and an arrow to indicate where to click on the screen, use the same shapes and colors to indicate the same actions throughout the article.<\/p>\n<h4>Screenshots supplement written instruction, not replace it.<\/h4>\n<p>It may be tempting to only include your step-by-step instructions in the screenshot, but that affects the accessibility and usability of a guide. It&#8217;s crucial that Knowledge Base guides are accessible. The more effective a guide, the more users are able to self-help, leading to fewer support requests.<\/p>\n<p>If you do choose to include text adornments in your screenshot, ensure that text is also written explicitly in the guide. Here is an example of a screenshot with adornments that would require supplemental description in the article:<\/p>\n<p><a href=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2020\/05\/TeamsGuest_Interface-1.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16764 size-full\" src=\"https:\/\/kb.helpline.w3.uvm.edu\/wp-content\/uploads\/2020\/05\/TeamsGuest_Interface-1.png\" alt=\"screenshot example with lots of text\" width=\"384\" height=\"310\" srcset=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2020\/05\/TeamsGuest_Interface-1.png 384w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2020\/05\/TeamsGuest_Interface-1-300x242.png 300w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2020\/05\/TeamsGuest_Interface-1-50x40.png 50w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2020\/05\/TeamsGuest_Interface-1-60x48.png 60w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2020\/05\/TeamsGuest_Interface-1-100x81.png 100w\" sizes=\"auto, (max-width: 384px) 100vw, 384px\" \/><\/a><\/p>\n<h4>Screenshots that contain video players<\/h4>\n<p>When documenting a process that includes screenshots of a video, avoid displaying the entire playback image. Otherwise, the screenshot looks like an element on the screen that the user should interact with.<br \/>\n<a href=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2020\/07\/Training_Video.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17512 size-full\" src=\"https:\/\/kb.helpline.w3.uvm.edu\/wp-content\/uploads\/2020\/07\/Training_Video.png\" alt=\"Example screenshot of a video player cropped in half\" width=\"625\" height=\"170\" srcset=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2020\/07\/Training_Video.png 625w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2020\/07\/Training_Video-300x82.png 300w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2020\/07\/Training_Video-50x14.png 50w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2020\/07\/Training_Video-60x16.png 60w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2020\/07\/Training_Video-100x27.png 100w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><div class=\"hts-messages hts-messages--danger  hts-messages--withtitle hts-messages--withicon \"   >\n    \t\t\t<span class=\"hts-messages__title\">A poorly edited screenshot can be worse than no screenshot at all<\/span>    \t\t\t    \t\t\t\t<\/p>\n<p>\n    \t\t\t\t\tFollow the recommendations above, and use your best judgement when creating and editing screenshots. <strong>Don&#8217;t upload an image until you are satisfied it is as good as it can be<\/strong>.\u00a0    \t\t\t\t<\/p>\n<\/p><\/div>\n<p><!-- \/.ht-shortcodes-messages -->\n    \t\t<\/p>\n<h4>Blur personal details.<\/h4>\n<p>Avoid including your own name and email in screenshots.<br \/>\n<a href=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2021\/07\/ACC_Success.jpg\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-21065\" src=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2021\/07\/ACC_Success.jpg\" alt=\"Android blue check mark icon CatCard scan success message\" width=\"420\" height=\"438\" srcset=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2021\/07\/ACC_Success.jpg 1080w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2021\/07\/ACC_Success-287x300.jpg 287w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2021\/07\/ACC_Success-981x1024.jpg 981w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2021\/07\/ACC_Success-768x801.jpg 768w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2021\/07\/ACC_Success-48x50.jpg 48w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2021\/07\/ACC_Success-57x60.jpg 57w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2021\/07\/ACC_Success-96x100.jpg 96w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/a><\/p>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Uploading your Image<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p><div class=\"hts-messages hts-messages--alert  hts-messages--withtitle hts-messages--withicon \"   >\n    \t\t\t<span class=\"hts-messages__title\">Accepted image formats<\/span>    \t\t\t    \t\t\t\t<\/p>\n<p>\n    \t\t\t\t\tPlease save images as png, gif, or jpg format before uploading.    \t\t\t\t<\/p>\n<\/p><\/div>\n<p><!-- \/.ht-shortcodes-messages -->\n    \t\t<\/p>\n<p>With your adequately annotated and cropped image prepared, you can now upload it.<\/p>\n<h4>The Simple Method<\/h4>\n<ol>\n<li>Position the cursor in the content (click the place in the guide where you want the image to go).<\/li>\n<li>Drag-drop the image file into the WordPress window.<\/li>\n<li>The image should upload and be selected. Click\u00a0<strong>Insert into page<\/strong>.<\/li>\n<\/ol>\n<p>After your image has been uploaded, you can edit the image options by clicking on the image, then clicking the pencil <i class=\"fa fa-pencil \" ><\/i> icon.<\/p>\n<ul>\n<li>Alternative Text: Text describing the image&#8217;s purpose\n<div class=\"hts-messages hts-messages--info  hts-messages--withtitle hts-messages--withicon \"   >\n    \t\t\t<span class=\"hts-messages__title\">Alt text is required<\/span>    \t\t\t    \t\t\t\t<\/p>\n<p>\n    \t\t\t\t\tScreen readers read alt text in place of the image. Alt text is required for these tools to work properly.    \t\t\t\t<\/p>\n<\/p><\/div>\n<p><!-- \/.ht-shortcodes-messages -->\n    \t\t<\/li>\n<li>Caption: Generally not required<\/li>\n<li>Alignment\n<ul>\n<li><strong>None<\/strong> is usually recommended. It displays the image its own blank line.<\/li>\n<li><strong>Left<\/strong> and <strong>Right<\/strong> position the image next to the article text and the paragraph is wrapped around the image.<\/li>\n<li><strong>Center<\/strong> is often avoided. The reasoning for this is noted lower in this guide in the section on positioning images.<\/li>\n<\/ul>\n<\/li>\n<li>Size: Leave as <strong>Full Size<\/strong> unless a smaller image is desirable for aesthetic reasons or formatting issues after viewing the preview or published article. You can also resize an image by selecting it and clicking and dragging on the squares in the corner of the image.<\/li>\n<li>Link To: Leave as <strong>Media File<\/strong>. This ensures the lightbox plugin functions correctly. Read more about the plugin below.<\/li>\n<li>URL: Leave as is. This is dynamically set based on file name and the path to the file on the server.<\/li>\n<\/ul>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Editing an Existing Image<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p>If you wish to edit the options for your image, click the image once and then click the <strong>Edit<\/strong> button (<i class=\"fas fa-pencil-alt \" ><\/i>) which appears. Click the <strong>Remove<\/strong> button (<i class=\"fas fa-times \" ><\/i>) instead to delete an image. Removing or Editing an image this way only affects the current article, not the Media Library.<\/p>\n<p>When editing an existing image, enter alt text if there is none.<\/p>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Media Library<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p>All the images uploaded to your website can be viewed and edited in the <em>Media Library<\/em>. Click <strong>Media<\/strong> in the left hand navigation menu of the dashboard to view them.<\/p>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Alt Text<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p>For accessibility, all images should have an alt text. This allows screen readers to describe the image, and displays on the screen in cases when the image cannot be loaded. In HTML, this appears in the img tag as:<\/p>\n<pre> alt=\"image description\"<\/pre>\n<p>In the WordPress interface, you can edit alt text using the <strong>Alternative Text<\/strong> field in the <strong>Image details<\/strong> window.<\/p>\n<p><a href=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/AltTextExample.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32847\" src=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/AltTextExample.png\" alt=\"WordPress Alternative Text example\" width=\"1259\" height=\"308\" srcset=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/AltTextExample.png 1259w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/AltTextExample-300x73.png 300w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/AltTextExample-1024x251.png 1024w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/AltTextExample-768x188.png 768w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/AltTextExample-50x12.png 50w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/AltTextExample-60x15.png 60w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/AltTextExample-100x24.png 100w\" sizes=\"auto, (max-width: 1259px) 100vw, 1259px\" \/><\/a><\/p>\n<p>If you make changes to the Alternative Text field, make sure to click <strong>Update<\/strong> after and then <strong>Save<\/strong> the article the image is attached to.<\/p>\n<p>You can edit alt text from the WordPress Media Library, but if you do, it will not automatically update the alt text for any attached versions of that image in articles. Always make sure appropriate alt text is provided as you&#8217;re adding images to any article as you are editing. If you notice missing alt text for an image in an existing article, consider adding some.<\/p>\n<p>Alt Text should be descriptive but concise. Here are some general guidelines:<\/p>\n<ul>\n<li>Do not include &#8220;screenshot of&#8221; or &#8220;image of&#8221;. That part is already implied.<\/li>\n<li>Avoid punctuation.<\/li>\n<li>Try to keep alt text to under 125 characters.<\/li>\n<li>Someone using a screen reader should get the same benefit from the alt text as someone looking at the image.<\/li>\n<li>Avoid alt text altogether for images that are purely decorative.<\/li>\n<li><a href=\"https:\/\/afb.org\/digital-inclusion\/accessibility-resources\/writing-effective-image-descriptions\">See additional suggestions on the web<\/a>.<\/li>\n<\/ul>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n<h2>Plugins &amp; Theme<\/h2>\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Better Font Awesome<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p>The FontAwesome plugin can be used to insert logos and other helpful graphics into your content.<\/p>\n<p>The <em>Insert Icon<\/em> button on the editor toolbar displays all available FontAwesome icons. This list is searchable. Icons can be inserted using that menu or by copying an existing icon&#8217;s shortcode.<\/p>\n<p>Here are some of the common icons you may use:<\/p>\n<ul>\n<li><i class=\"fa fa-apple \" ><\/i><br \/>\n&#091;icon name=&#8221;apple&#8221; class=&#8221;&#8221; unprefixed_class=&#8221;&#8221;&#093;<\/li>\n<li><i class=\"fa fa-windows \" ><\/i><br \/>\n&#091;icon name=&#8221;windows&#8221; class=&#8221;&#8221; unprefixed_class=&#8221;&#8221;&#093;<\/li>\n<li><i class=\"fa fa-trash \" ><\/i><br \/>\n&#091;icon name=&#8221;trash&#8221; class=&#8221;&#8221; unprefixed_class=&#8221;&#8221;&#093;<\/li>\n<li><i class=\"fa fa-chevron-down \" ><\/i><br \/>\n&#091;icon name=&#8221;chevron-down&#8221; class=&#8221;&#8221; unprefixed_class=&#8221;&#8221;&#093;<\/li>\n<\/ul>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Contact Form 7<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p>We use contact forms in a few places on the KB &#8211; the most notable being the form for<a href=\"https:\/\/www.uvm.edu\/it\/kb\/submit-a-ticket\/\">\u00a0<strong>Submitting a Help<\/strong> <strong>Ticket<\/strong>.<\/a><\/p>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Copy Anything to Clipboard<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p>This plugin makes makes it so you can surround text with &lt;pre&gt; tags, creating a box that people can copy text from.<\/p>\n<pre> Here's an example!<\/pre>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Relavanssi<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p>This plugin improves the KB&#8217;s search capabilities, allowing for various weighting based on the article&#8217;s title, categories, tags, content, and metadata.<\/p>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>User Role Editor<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p>This plugin gives site administrators greater control over the many roles and associated rights of Knowledge Base editors, authors, or subscribers.<\/p>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n    \t\t<div class=\"hts-toggle  \"  >\r\n    \t\t\t<div class=\"hts-toggle__title\"><h3>Responsive Lightbox<\/h3><\/div>\r\n    \t\t\t<div class=\"hts-toggle__content\">\r\n    \t\t\t\t<div class=\"hts-toggle__contentwrap\">\r\n    \t\t\t\t\t<\/p>\n<p>This is a lightbox plugin, expanding images when clicked to 100% their upload size, and dimming the rest of the web page. Click the image below for an example.<\/p>\n<p><a href=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_PluginsLightboxExample.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32912\" src=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_PluginsLightboxExample.png\" alt=\"Sample of WordPress plugins list demonstrating Lightbox functionality\" width=\"761\" height=\"222\" srcset=\"https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_PluginsLightboxExample.png 761w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_PluginsLightboxExample-300x88.png 300w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_PluginsLightboxExample-50x15.png 50w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_PluginsLightboxExample-60x18.png 60w, https:\/\/www.uvm.edu\/it\/kb\/wp-content\/uploads\/2026\/03\/KB_PluginsLightboxExample-100x29.png 100w\" sizes=\"auto, (max-width: 761px) 100vw, 761px\" \/><\/a><\/p>\n<p><div class=\"hts-messages hts-messages--alert  hts-messages--withtitle hts-messages--withicon \"   >\n    \t\t\t<span class=\"hts-messages__title\">Image must be linked correctly. <\/span>    \t\t\t    \t\t\t\t<\/p>\n<p>\n    \t\t\t\t\tIn the image&#8217;s <strong>Display Settings<\/strong>, it must link to a <strong>Media File<\/strong> with the appropriate <strong>URL <\/strong> for that media file, else the lightbox will not function.     \t\t\t\t<\/p>\n<\/p><\/div>\n<p><!-- \/.ht-shortcodes-messages -->\n    \t\t<\/p>\n<p>\n    \t\t\t\t<\/div>\r\n    \t\t\t<\/div><!-- \/ht-toggle-content -->\r\n    \t\t<\/div>\r\n    \t\t\n<p>Thanks for contributing to the ETS Knowledge Base!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Editor Interface There are two editor interfaces in WordPress, the Classic Editor and the Block Editor. Most KB contributors at UVM are more familiar with the Classic Editor, and most articles in the KB were developed using the Classic Editor. It is recommended to use the Classic Editor in most&#8230;<\/p>\n","protected":false},"author":119,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_relevanssi_hide_post":"","_relevanssi_hide_content":"","_relevanssi_pin_for_all":"","_relevanssi_pin_keywords":"","_relevanssi_unpin_keywords":"","_relevanssi_related_keywords":"","_relevanssi_related_include_ids":"","_relevanssi_related_exclude_ids":"","_relevanssi_related_no_append":"","_relevanssi_related_not_related":"","_relevanssi_related_posts":"","_relevanssi_noindex_reason":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-18420","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.uvm.edu\/it\/kb\/wp-json\/wp\/v2\/pages\/18420","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uvm.edu\/it\/kb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.uvm.edu\/it\/kb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.uvm.edu\/it\/kb\/wp-json\/wp\/v2\/users\/119"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uvm.edu\/it\/kb\/wp-json\/wp\/v2\/comments?post=18420"}],"version-history":[{"count":75,"href":"https:\/\/www.uvm.edu\/it\/kb\/wp-json\/wp\/v2\/pages\/18420\/revisions"}],"predecessor-version":[{"id":32948,"href":"https:\/\/www.uvm.edu\/it\/kb\/wp-json\/wp\/v2\/pages\/18420\/revisions\/32948"}],"wp:attachment":[{"href":"https:\/\/www.uvm.edu\/it\/kb\/wp-json\/wp\/v2\/media?parent=18420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}