{"id":25,"date":"2019-03-07T20:18:28","date_gmt":"2019-03-07T20:18:28","guid":{"rendered":"http:\/\/sites.monroecc.edu\/web-standards\/?page_id=25"},"modified":"2026-04-24T14:35:02","modified_gmt":"2026-04-24T14:35:02","slug":"typo3-content-management","status":"publish","type":"page","link":"https:\/\/sites.monroecc.edu\/web-standards\/training\/typo3-content-management\/","title":{"rendered":"TYPO3 Content Management"},"content":{"rendered":"<h1><a id=\"top\"><\/a>TYPO3 Content Management<\/h1>\n<p><em><strong>To print these instructions, right-click within the page and choose Print to open the print dialogue window.<\/strong><\/em><\/p>\n<ul>\n\t<li><a title=\"Directs viewer to an internal page\" href=\"https:\/\/sites.monroecc.edu\/web-standards\/before-you-begin-a-note-about-messing-things-up\/\"><strong>Before you begin, a note about messing things up<\/strong><\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#introduction\">Introduction<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#logging_in\">Logging in<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#selecting_workspace\">Selecting your Workspace for editing<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#working_with_content\">Working with Content Elements<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#working_in_editing_window\">Working in the Editing Window<\/a>\n<ul>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#save_changes\">TYPO3 does not automatically save your changes<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#pasting_content\">Pasting content from MS Word and other sources<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#copy_and_paste\">Copy and Paste Functions<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#common_content\">Common Content Page<\/a><\/li>\n<\/ul>\n<\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#adding_document_and_image_files\">Adding Document and Image files to TYPO3 Workspaces<\/a>\n<ul>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#uploading_files\">Uploading a file<\/a><\/li>\n<\/ul>\n<\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#adding_pdf_files\">Adding PDF files<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#images\">Images<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#typo3_link\">TYPO3 Links<\/a>\n<ul>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#linking_to_document\">Linking to a document<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#linking_to_page\">Linking to another Page<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#linking_to_external_url\">Linking to an external URL<\/a> (another website)<\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#linking_to_email\">Linking to an email<\/a><\/li>\n<\/ul>\n<\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#deleting_from_filelist\">Deleting Documents\/Files\/Images from your Filelist<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#format_options\">Format options in the editor<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#previewing_pages\">Previewing Pages<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#moving_from_editing\">Moving from Editing to the Next Stage in Workflow<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#reviewing_edited_pages\">Reviewing Edited Pages and Publishing<\/a>\n<ul>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#final_review\">Final Review<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#publishing_schedule\">Publishing Schedule<\/a><\/li>\n<\/ul>\n<\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#getting_help\">Getting Help<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#updates_to_directory\">Updates to the Faculty and Staff directory listings<\/a><\/li>\n<\/ul>\n<h2><a id=\"introduction\"><\/a>Introduction<\/h2>\n<p>TYPO3 gives you the ability to keep your area (workspace) of the MCC website up to date, as easily as any other documents you might work with on a regular basis. It also allows for a designated workflow and content approval cycle that minimizes the chance of publishing inaccurate information to the live website. The first part of this editing guide outlines the steps for updating content as a <strong>Basic Editor<\/strong>, within an assigned workspace. <a title=\"Directs viewer to a section on this page\" href=\"#moving_from_editing\">The <strong>Publisher\u2019s<\/strong> role<\/a> in particular in the TYPO3 workflow is discussed at the end of this page.<\/p>\n<h2><a id=\"logging_in\"><\/a>Logging in<\/h2>\n<p>To begin editing in TYPO3 <em>(as pictured in Figure 1)<\/em><\/p>\n<ol>\n\t<li>Open <a title=\"Opens internal link in new window\" href=\"https:\/\/www.monroecc.edu\/typo3\" target=\"_blank\" rel=\"noreferrer\">www.monroecc.edu\/typo3<\/a> in the Chrome browser*. Be sure to allow all popups from this site!<\/li>\n\t<li>Type your MCC username (your full MCC email address) and password.<\/li>\n\t<li>Click the login button.<br>\n<figure id=\"attachment_1731\" aria-describedby=\"caption-attachment-1731\" style=\"width: 346px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1731 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/url-and-login.png\" alt=\"Username and Password fields and login button\" width=\"346\" height=\"375\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/url-and-login.png 346w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/url-and-login-277x300.png 277w\" sizes=\"auto, (max-width: 346px) 100vw, 346px\" \/><figcaption id=\"caption-attachment-1731\" class=\"wp-caption-text\">Figure 1<\/figcaption><\/figure>\n<\/li>\n<\/ol>\n<p><em><strong>*Important: Using the Firefox or MS Edge browsers to work within the TYPO3 backend will produce undesirable results.<\/strong><\/em><\/p>\n<p>To begin editing TYPO3 from a computer <strong>off-campus<\/strong>, you must first log in to the MCC VPN. The instructions can be found in the Employee tab in MyMCC.<strong> Go to:<\/strong><\/p>\n<ol>\n\t<li>Technology<\/li>\n\t<li>Remote Work Support<\/li>\n\t<li>Off-Campus Access<\/li>\n\t<li>Follow the instructions for Remote Desktop Via VPN (AnyConnect).<\/li>\n<\/ol>\n<h2><a id=\"selecting_workspace\"><\/a>Selecting your Workspace for editing<\/h2>\n<p>The first time you log in, the page will open to the first workspace you were granted permissions to edit.\u00a0 After your very first login, TYPO3 will remember the last workspace that you were editing in. If you have editing permissions to more than one workspace, you can access them by clicking on the <strong>workspace icon<\/strong> in the header bar <em>(as pictured in Figure 2)<\/em>. <strong>Note:\u00a0 You should be on PAGE in Module menu <\/strong><em>(as pictured in Figure 2a)<\/em><strong>.<\/strong><\/p>\n\n<figure id=\"attachment_1719\" aria-describedby=\"caption-attachment-1719\" style=\"width: 442px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1719 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/changing-workspace.png\" alt=\"Workspace List\" width=\"442\" height=\"143\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/changing-workspace.png 442w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/changing-workspace-300x97.png 300w\" sizes=\"auto, (max-width: 442px) 100vw, 442px\" \/><figcaption id=\"caption-attachment-1719\" class=\"wp-caption-text\">Figure 2<\/figcaption><\/figure> <figure id=\"attachment_1732\" aria-describedby=\"caption-attachment-1732\" style=\"width: 189px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1732 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/page-pick.png\" alt=\"Figure 2a\" width=\"189\" height=\"173\"><figcaption id=\"caption-attachment-1732\" class=\"wp-caption-text\">Figure 2a<\/figcaption><\/figure>\n\n<p>To change to another workspace, click on the desired workspace name.\u00a0 The selected workspace will get the checkmark and the workspace name will appear on the top bar <em>(as pictured in Figure 3)<\/em>.<\/p>\n\n<figure id=\"attachment_1733\" aria-describedby=\"caption-attachment-1733\" style=\"width: 408px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1733 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/changing-workspace-fig-3.png\" alt=\"Figure 3\" width=\"408\" height=\"161\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/changing-workspace-fig-3.png 408w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/changing-workspace-fig-3-300x118.png 300w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><figcaption id=\"caption-attachment-1733\" class=\"wp-caption-text\">Figure 3<\/figcaption><\/figure>\n\n<h2><a id=\"working_with_content\"><\/a>Working with Content Elements<\/h2>\n<p>TYPO3 pages consist of one or more <strong>Content Elements<\/strong>\u00a0or <strong>Content Blocks<\/strong>. To edit a page, you work within the individual content elements.<\/p>\n<blockquote>\n<p><strong><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-94 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/05\/remember.png\" alt=\"\" width=\"40\" height=\"49\">Remember:<\/strong> Don\u2019t be confused by all the icons. To find out what an action icon does, use the mouse to point and hover (do not click) over any icon to see the help text appear.<\/p>\n<\/blockquote>\n<ol>\n\t<li>Pass the cursor over the top bar of a content element until the four-pointed arrow appears<\/li>\n\t<li>Click on the pencil icon to open the element for editing.<\/li>\n\t<li>Clicking on the text of the element will do the same thing, open the element.<\/li>\n\t<li>Clicking on the <strong>copy element<\/strong> icon will copy the entire content element and allow you to paste it on the same page or another page <em>(as pictured in Figure 4)<\/em>.<\/li>\n<\/ol>\n\n<figure id=\"attachment_1735\" aria-describedby=\"caption-attachment-1735\" style=\"width: 1143px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1735 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/content-element-intro-f-4.png\" alt=\"Figure 4\" width=\"1143\" height=\"289\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/content-element-intro-f-4.png 1143w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/content-element-intro-f-4-300x76.png 300w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/content-element-intro-f-4-1024x259.png 1024w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/content-element-intro-f-4-768x194.png 768w\" sizes=\"auto, (max-width: 1143px) 100vw, 1143px\" \/><figcaption id=\"caption-attachment-1735\" class=\"wp-caption-text\">Figure 4<\/figcaption><\/figure>\n\n<h2><a id=\"working_in_editing_window\"><\/a>Working in the Editing Window<\/h2>\n<p>The top of the editing window contains the settings for the content element. For day-to-day editing purposes, you probably won\u2019t be changing the defaults.<\/p>\n<p>There are three main types of content elements that you will use: <strong>Text<\/strong>, <strong>Text &amp; Images<\/strong>, and <strong>Images<\/strong>.\u00a0 Different options for arranging images appear for the Text &amp; Image and Image type of content elements <em>(as pictured in Figure 5)<\/em>.<\/p>\n\n<figure id=\"attachment_1810\" aria-describedby=\"caption-attachment-1810\" style=\"width: 666px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1810 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/figure-5-content-element-top.png\" alt=\"Figure 5\" width=\"666\" height=\"212\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/figure-5-content-element-top.png 666w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/figure-5-content-element-top-300x95.png 300w\" sizes=\"auto, (max-width: 666px) 100vw, 666px\" \/><figcaption id=\"caption-attachment-1810\" class=\"wp-caption-text\">Figure 5<\/figcaption><\/figure>\n\n<p>When creating a new content element, the Header can be used as a short title. You can also <strong>1)<\/strong> add a date and <strong>2)<\/strong> make it a hyperlink <em>(as pictured in Figure 6)<\/em>.<\/p>\n\n<figure id=\"attachment_97\" aria-describedby=\"caption-attachment-97\" style=\"width: 702px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-97 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/05\/Figure-7-2.png\" alt=\"Figure 6\" width=\"702\" height=\"260\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/05\/Figure-7-2.png 702w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/05\/Figure-7-2-300x111.png 300w\" sizes=\"auto, (max-width: 702px) 100vw, 702px\" \/><figcaption id=\"caption-attachment-97\" class=\"wp-caption-text\">Figure 6<\/figcaption><\/figure>\n\n<p>If you give the content element a visible header, remember that in order to follow ADA accessibility rules for content on a page, headings must follow the H1 to H5 protocol. The only H1 on a web page would be the page heading. Content elements below that must cascade down from h2, according to the relationship of one to the next <em>(as pictured in Figure 7)<\/em>.<\/p>\n\n<figure id=\"attachment_258\" aria-describedby=\"caption-attachment-258\" style=\"width: 481px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-258 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/06\/Figure-7-3.png\" alt=\"Figure 7\" width=\"481\" height=\"182\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/06\/Figure-7-3.png 481w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/06\/Figure-7-3-300x114.png 300w\" sizes=\"auto, (max-width: 481px) 100vw, 481px\" \/><figcaption id=\"caption-attachment-258\" class=\"wp-caption-text\">Figure 7<\/figcaption><\/figure>\n\n<h3>Best Practice: Creating a Hidden Header<\/h3>\n<p>Even if you don&#8217;t want a visible header in a content element, a hidden header will keep the first column in the Workspaces table from stretching the view to an unmanageable width. If the content element header is left blank, TYPO3 will create a working header from the content element text of up to 255 characters, forcing users to scroll back and forth when working in Workspaces, as pictured in Figure 50 below. A descriptive hidden header of a few words will not be seen in the live page view but will become a working title for the content element.<\/p>\n<p>To create the hidden header, type a brief title in the Header field of the content element, and choose <em><strong>Hidden <\/strong><\/em>in the drop-down menu.<br>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-1804\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/create-hidden-header-drop-down-167x300.png\" alt=\"Choose Hidden in the Header drop-down menu\" width=\"167\" height=\"300\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/create-hidden-header-drop-down-167x300.png 167w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/create-hidden-header-drop-down.png 177w\" sizes=\"auto, (max-width: 167px) 100vw, 167px\" \/><\/p>\n<p>The hidden header is now the working title in Workspaces, and subsequently the live title when the element is published.<br>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1805\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/create-hidden-header-workspaces-view.png\" alt=\"View of the hidden header title - Create a Hidden Header, in the Workspace.\" width=\"208\" height=\"81\"><\/p>\n<p>The toolbar gives you two options for many functions.<br>\nYou can use <strong>(1)<\/strong> drop-down menus or <strong>(2)<\/strong> icons <em>(as pictured in Figure 8)<\/em>.<\/p>\n\n<figure id=\"attachment_1811\" aria-describedby=\"caption-attachment-1811\" style=\"width: 698px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1811 size-full\" title=\"Figure 9\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/figure-8-editing-window-controls-active.png\" alt=\"Figure 8\" width=\"698\" height=\"152\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/figure-8-editing-window-controls-active.png 698w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/figure-8-editing-window-controls-active-300x65.png 300w\" sizes=\"auto, (max-width: 698px) 100vw, 698px\" \/><figcaption id=\"caption-attachment-1811\" class=\"wp-caption-text\">Figure 8<\/figcaption><\/figure>\n\n<p>You can use full-screen editing or adjust the screen size for editing using the arrow button in the tool <em>(as pictured in Figure 9)<\/em>.<\/p>\n\n<figure id=\"attachment_1740\" aria-describedby=\"caption-attachment-1740\" style=\"width: 698px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1740 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/editing-window-controls-full-screen.png\" alt=\"Figure 9\" width=\"698\" height=\"152\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/editing-window-controls-full-screen.png 698w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/editing-window-controls-full-screen-300x65.png 300w\" sizes=\"auto, (max-width: 698px) 100vw, 698px\" \/><figcaption id=\"caption-attachment-1740\" class=\"wp-caption-text\">Figure 9<\/figcaption><\/figure>\n\n<p>Editing a content block is similar to editing in Microsoft Word. You will notice that the functional icons in the <strong>Rich Text Editor<\/strong> are the same or very similar to Microsoft Word.<\/p>\n<p><em>Be sparing<\/em> when using italics, bold and other type features. Try to avoid using terms that someone you met on the street would not be familiar with.<\/p>\n<p><strong>Note: <\/strong>Be sure to use the spell checker once you are done editing <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-335 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/07\/spellcheck.png\" alt=\"spell check icon\" width=\"32\" height=\"27\">.<\/p>\n<h3><a name=\"save_changes\"><\/a>TYPO3 does not automatically save your changes!<\/h3>\n<p>Whenever you make changes to content in TYPO3, be sure to look for the icons at the top of the editing window and click at least one of them <em>(as pictured in Figure 10)<\/em>:<\/p>\n\n<figure id=\"attachment_1817\" aria-describedby=\"caption-attachment-1817\" style=\"width: 275px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1817 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/save-content-drop-down-figure-10.png\" alt=\"Figure 10\" width=\"275\" height=\"119\"><figcaption id=\"caption-attachment-1817\" class=\"wp-caption-text\">Figure 10<\/figcaption><\/figure>\n\n<ol>\n\t<li>Save document<\/li>\n\t<li>Save document and view page*<br>\n<em><strong>You need to use this option when you are done to move this forward in publishing.<\/strong><\/em><\/li>\n\t<li>Save document and create a new one <em>(content element on the same page)<\/em><\/li>\n\t<li>Save and close document<em><br>\n<\/em><\/li>\n<\/ol>\n<p><em>The remaining icon functions are:<\/em><\/p>\n<ol start=\"5\">\n\t<li>Close document<\/li>\n\t<li>Delete (content element)<\/li>\n<\/ol>\n<p><em>(as pictured in Figure 11)<\/em><\/p>\n\n<figure id=\"attachment_1818\" aria-describedby=\"caption-attachment-1818\" style=\"width: 266px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1818 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/save-content-close-delete-figure-11.png\" alt=\"Figure 11\" width=\"266\" height=\"115\"><figcaption id=\"caption-attachment-1818\" class=\"wp-caption-text\">Figure 11<\/figcaption><\/figure>\n\n<h3><a id=\"pasting_content\"><\/a>Pasting content from MS Word and other sources<\/h3>\n<p>Pasting content from other sources is always a time and effort-saver. However, often extra hidden formatting gets copied into the content element.\u00a0 If you find you need to, you can remove formatting by selecting <strong>Clear Formatting<\/strong> from the drop-down menu under <strong>Format <\/strong><em>(as pictured in Figure 12)<\/em>.<\/p>\n\n<figure id=\"attachment_1726\" aria-describedby=\"caption-attachment-1726\" style=\"width: 432px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1726 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/clear-formatting.png\" alt=\"Figure 12\" width=\"432\" height=\"224\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/clear-formatting.png 432w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/10\/clear-formatting-300x156.png 300w\" sizes=\"auto, (max-width: 432px) 100vw, 432px\" \/><figcaption id=\"caption-attachment-1726\" class=\"wp-caption-text\">Figure 12<\/figcaption><\/figure>\n\n<blockquote>\n<p><strong><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-94 size-full alignleft\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/05\/remember.png\" alt=\"\" width=\"40\" height=\"49\"><\/strong>The TinyMCE editor works like most text editors.\u00a0 If you hit\u00a0<strong>&lt;enter&gt;<\/strong>, you will get a hard carriage or paragraph return, which gives the appearance of a double space between lines. To get a soft carriage return or single-spacing when adding lines, use\u00a0<strong>&lt;shift&gt;&lt;enter&gt;<\/strong>\u00a0<em>(as pictured in Figure 13)<\/em>.<\/p>\n<\/blockquote>\n\n<figure id=\"attachment_1813\" aria-describedby=\"caption-attachment-1813\" style=\"width: 711px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1813 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/figure-13-paragraph-spacing.png\" alt=\"Figure 13\" width=\"711\" height=\"199\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/figure-13-paragraph-spacing.png 711w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/figure-13-paragraph-spacing-300x84.png 300w\" sizes=\"auto, (max-width: 711px) 100vw, 711px\" \/><figcaption id=\"caption-attachment-1813\" class=\"wp-caption-text\">Figure 13<\/figcaption><\/figure>\n\n<blockquote>\n<p><strong>\u00a0Accessibility Note:<\/strong> Adding white space between paragraphs using double hard or soft carriage returns will decrease the accessibility of the content. The CSS\/style sheet is set to provide consistent text line spacing between sentences and paragraphs.\u00a0<\/p>\n<\/blockquote>\n<h3><a name=\"copy_and_paste\"><\/a>Copy and Paste Functions<\/h3>\n<p>While you can copy by selecting <strong>Copy<\/strong> in the <strong>Edit<\/strong> drop-down menu, or Ctrl+C keyboard shortcut, the <strong>Paste<\/strong> option in the Edit drop-down menu will not work. You will need to use Ctrl+V to paste <em>(as pictured in Figure 14)<\/em>.<\/p>\n\n<figure id=\"attachment_1820\" aria-describedby=\"caption-attachment-1820\" style=\"width: 648px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1820 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-14-paste-as-text.png\" alt=\"Figure 14\" width=\"648\" height=\"295\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-14-paste-as-text.png 648w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-14-paste-as-text-300x137.png 300w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><figcaption id=\"caption-attachment-1820\" class=\"wp-caption-text\">Figure 14<\/figcaption><\/figure>\n\n<p>If by chance you forget, you will get a reminder to use the keyboard shortcut <strong>Ctrl+V to paste <\/strong><em>(as pictured in Figure 15)<\/em>.<\/p>\n\n<figure id=\"attachment_1815\" aria-describedby=\"caption-attachment-1815\" style=\"width: 692px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1815 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/figure-15-non-support-warning.png\" alt=\"Figure 15\" width=\"692\" height=\"117\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/figure-15-non-support-warning.png 692w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/figure-15-non-support-warning-300x51.png 300w\" sizes=\"auto, (max-width: 692px) 100vw, 692px\" \/><figcaption id=\"caption-attachment-1815\" class=\"wp-caption-text\">Figure 15<\/figcaption><\/figure>\n\n<h3><a id=\"common_content\"><\/a>Common Content Page<\/h3>\n<p>Each department has a \u2018common content\u2019 page. This is where the information that appears on multiple pages (such as the contact information found in the right-hand column of department pages) is stored in separate content elements.<\/p>\n<p>These content elements are created on the common content page and then inserted as a \u201creference.\u201d\u00a0 If you see a blue information bar that states \u201cThis is a reference to an element on page\u2026.\u201d you should find that content element on your common content page <em>(as pictured in Figure 16)<\/em>.<\/p>\n<p>This allows you to edit the information once and have it displayed correctly on multiple pages.<\/p>\n\n<figure id=\"attachment_119\" aria-describedby=\"caption-attachment-119\" style=\"width: 360px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/05\/Figure-14.png\" alt=\"Figure 16\" width=\"360\" height=\"79\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/05\/Figure-14.png 360w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/05\/Figure-14-300x66.png 300w\" sizes=\"auto, (max-width: 360px) 100vw, 360px\" \/><figcaption id=\"caption-attachment-119\" class=\"wp-caption-text\">Figure 16<\/figcaption><\/figure>\n\n<h2><a id=\"adding_document_and_image_files\"><\/a>Adding Document and Image files to TYPO3 Workspaces<\/h2>\n<p>TYPO3 editors have the ability to add image files to their workspaces.<\/p>\n<p><strong>Important:<\/strong> Documents must be reviewed by the Web Services Team. Please refer to the <a href=\"#adding-pdf-files\"><em>Adding PDF Files<\/em><\/a> for information.<\/p>\n<p><strong>Filenames that will be uploaded and referenced on the web should:<\/strong><\/p>\n<ol>\n\t<li>only include letters, numbers, and hyphens<\/li>\n\t<li>be all in lowercase<\/li>\n\t<li>not include dates or version numbers<\/li>\n\t<li>not have spaces within the filename<\/li>\n<\/ol>\n<pre>changing-workspace-fig-3.png, typo3-tips-for-accessibility.pdf<\/pre>\n<h3><a id=\"uploading_files\"><\/a>Uploading a file<\/h3>\n<p>Before linking to a new document or adding an image file to a content element, it should be uploaded to your TYPO3 workspace in the documents or images filespace. <strong>Note: <\/strong>There are options to upload documents in conjunction with linking to the files. It is best to upload your documents\/images first to ensure that you are placing them in the proper folders <em>(as pictured in Figure 17)<\/em>.<\/p>\n\n<figure id=\"attachment_1829\" aria-describedby=\"caption-attachment-1829\" style=\"width: 678px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1829 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-17-upload-file-1.png\" alt=\"Figure 17\" width=\"678\" height=\"232\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-17-upload-file-1.png 678w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-17-upload-file-1-300x103.png 300w\" sizes=\"auto, (max-width: 678px) 100vw, 678px\" \/><figcaption id=\"caption-attachment-1829\" class=\"wp-caption-text\">Figure 17<\/figcaption><\/figure>\n\n<p>Right-click on the<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-127 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/05\/file-folder.png\" alt=\"folder icon\" width=\"24\" height=\"19\">folder icon to the left of <strong>documents or images <\/strong>in the page tree area. Click on Upload Files in the fly-out menu <em>(as pictured in Figure 18)<\/em>.<\/p>\n\n<figure id=\"attachment_1830\" aria-describedby=\"caption-attachment-1830\" style=\"width: 225px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1830 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-18-right-click-on-documents.png\" alt=\"Figure 18\" width=\"225\" height=\"191\"><figcaption id=\"caption-attachment-1830\" class=\"wp-caption-text\">Figure 18<\/figcaption><\/figure>\n\n<p>If uploading a new version of a file\u2014<\/p>\n<ol>\n\t<li>Select Overwrite existing files.<\/li>\n\t<li>Click the Choose Files button and find the file on your own hard drive or any network area where you have access.<\/li>\n\t<li>Once the file is chosen, click Upload files.<br>\n<em>(as pictured in Figure 19)<\/em><\/li>\n<\/ol>\n\n<figure id=\"attachment_1832\" aria-describedby=\"caption-attachment-1832\" style=\"width: 300px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1832 size-medium\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-19-upload-files-300x153.png\" alt=\"Figure 19\" width=\"300\" height=\"153\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-19-upload-files-300x153.png 300w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-19-upload-files.png 418w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-1832\" class=\"wp-caption-text\">Figure 19<\/figcaption><\/figure>\n\n<p>The file name now appears in your workspace file list <em>(as pictured in Figure 20)<\/em>.<\/p>\n\n<figure id=\"attachment_1833\" aria-describedby=\"caption-attachment-1833\" style=\"width: 491px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1833 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-20-upload-file-2.png\" alt=\"Figure 20\" width=\"491\" height=\"181\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-20-upload-file-2.png 491w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-20-upload-file-2-300x111.png 300w\" sizes=\"auto, (max-width: 491px) 100vw, 491px\" \/><figcaption id=\"caption-attachment-1833\" class=\"wp-caption-text\">Figure 20<\/figcaption><\/figure>\n\n<p>You can also drag and drop files to the space above the <strong>Filename<\/strong> bar to upload them.<\/p>\n<p>Once you drag a file to that space, a message will appear <em>(as pictured in Figure 21)<\/em>.<\/p>\n\n<figure id=\"attachment_132\" aria-describedby=\"caption-attachment-132\" style=\"width: 263px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-132 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/05\/Figure-20.png\" alt=\"Figure 21\" width=\"263\" height=\"92\"><figcaption id=\"caption-attachment-132\" class=\"wp-caption-text\">Figure 21<\/figcaption><\/figure>\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-94\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/05\/remember.png\" alt=\"\" width=\"40\" height=\"49\"><strong>Remember<\/strong> &#8211; If uploading a new version of a file\u2014 make sure it has the same file name and select <strong>Overwrite existing files<\/strong> when prompted.<\/p>\n<h2><a id=\"adding_pdf_files\"><\/a>Adding PDF Files<\/h2>\n<p>If you would like to upload a PDF to your website, it must be reviewed by the Web Services team for accessibility. Please submit the source file and the PDF via a <a title=\"Opens internal link in new window\" href=\"https:\/\/www.monroecc.edu\/go\/request\/\" target=\"_blank\" rel=\"noreferrer\">Technology Support Request<\/a> and allow two weeks for the review and processing of your document(s). When complete, the Web Services Team will upload the file to TYPO3 and add the link to your website.\u00a0<\/p>\n<p>Please note that some programs\u00a0<em><strong>do not<\/strong><\/em> create accessible documents.\u00a0<a href=\"https:\/\/sites.monroecc.edu\/web-standards\/accessibility\/create-accessible-content\/create-accessible-content-documents\/\">View information about Accessible Documents<\/a> to learn more.<\/p>\n<h2><a name=\"images\"><\/a>Images<\/h2>\n<p>Images should be optimized for Web presentation, including physical and file size, and file format. While TYPO3 has some built-in formatting tools, it is best that you contact the <a href=\"https:\/\/www.monroecc.edu\/go\/request\/\">Web Services Team<\/a> if you are not familiar with these formatting requirements.<\/p>\n<p>Pictures shot with today&#8217;s digital cameras are too large a file size to be placed on the web without editing. The Web Services team can assist you with these issues.<\/p>\n<p>Images on the web should have alt attributes so that assistive technology can describe the image and\/or function of the image in a meaningful way. See <a title=\"Opens external link in new window\" href=\"https:\/\/webaim.org\/techniques\/alttext\" target=\"_blank\" rel=\"noreferrer\">WebAIM\u2019s alt text page<\/a> for additional guidelines on writing alternative text.<\/p>\n<h2><a name=\"typo3_link\"><\/a>TYPO3 Links<\/h2>\n<p>The TYPO3 link icon is used to create links to pages, files, external URLs (other websites), and email addresses. The process is very similar for each type of link.<\/p>\n<p>To begin creating each type of link <em><strong>Select the text<\/strong><\/em> that you want to link your file to and click on the <strong>TYPO3 Link icon <\/strong><em>(as pictured in Figure 23)<\/em>.<\/p>\n\n<figure id=\"attachment_1824\" aria-describedby=\"caption-attachment-1824\" style=\"width: 679px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1824 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-23-link-button-1.png\" alt=\"Figure 23\" width=\"679\" height=\"173\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-23-link-button-1.png 679w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-23-link-button-1-300x76.png 300w\" sizes=\"auto, (max-width: 679px) 100vw, 679px\" \/><figcaption id=\"caption-attachment-1824\" class=\"wp-caption-text\">Figure 23<\/figcaption><\/figure>\n\n<p><strong>Accessibility Advice:\u00a0<\/strong><\/p>\n<ul>\n\t<li>Avoid phrases like &#8220;Click here&#8221;, &#8220;Here&#8221;, &#8220;More&#8221;, &#8220;More information&#8221;, &#8220;Read more&#8221;, and &#8220;Continue.&#8221;<\/li>\n\t<li>URLs as link text should usually be avoided unless the URL is relevant content.<\/li>\n<\/ul>\n<h3><a id=\"linking_to_document\"><\/a>Linking to a document<\/h3>\n<p>Once you have uploaded a document file, the process of linking to it in the edit page view is quite straightforward. Click on the Page module, and then the item in the page tree that you wish to edit. Open a Content Element for editing. (See <a title=\"Directs viewer to a section on this page\" href=\"#working_with_content\"><strong>Working with Content Elements<\/strong><\/a>, in this guide.)<\/p>\n<p><em><strong>Select the text<\/strong><\/em> that you want to link your file to and click on the <strong>TYPO3 Link icon <\/strong><em>(as pictured in Figure 23)<\/em>.<\/p>\n<ol>\n\t<li>Click on the File tab.<\/li>\n\t<li>Click documents in the Folder Tree.<\/li>\n\t<li>Click the down arrow to open the target menu and choose New window <em>(as pictured in Figure26)<\/em>. <em>This will open the document in a new browser window or tab when a user clicks on the link in the Web page.<\/em><\/li>\n\t<li>Type <strong><em>Opens PDF in new window\u00a0<\/em><\/strong>in the Title field.<\/li>\n\t<li>Under <strong>Files:<\/strong> Click on the file name to choose that document. <em>Save and switch to preview mode (see <\/em>Previewing Pages<em>) to test the link.<br>\n(as pictured in Figure 25)<\/em><\/li>\n<\/ol>\n\n<figure id=\"attachment_1825\" aria-describedby=\"caption-attachment-1825\" style=\"width: 615px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1825 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-25-file-link-steps.png\" alt=\"Figure 25\" width=\"615\" height=\"293\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-25-file-link-steps.png 615w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-25-file-link-steps-300x143.png 300w\" sizes=\"auto, (max-width: 615px) 100vw, 615px\" \/><figcaption id=\"caption-attachment-1825\" class=\"wp-caption-text\">Figure 25<\/figcaption><\/figure>\n\n<h3><a id=\"linking_to_page\"><\/a>Linking to another Page<\/h3>\n<p>At times you may want to link to another page on the MCC website, such as directions to the College or another page within your own department.<\/p>\n<p>Once you are editing within a content element, select the text that you want to link your file to and click on the <strong>TYPO3 Link icon <\/strong><em>(as pictured in Figure 23)<\/em>.<\/p>\n<ol>\n\t<li>Click on the <strong>Page<\/strong> tab.<\/li>\n\t<li><em><strong>If you are linking to a page outside your own department,<\/strong><\/em> click the down arrow to open the target menu and choose New window. This will open the page in a new browser window or tab when a user clicks on the link in the Web page.<\/li>\n\t<li>Type <strong><em>Opens internal link in new window <\/em><\/strong>in the Title field.<\/li>\n\t<li>Browse the page tree to reach the page you wish to link to and click on the page name.<br>\n<em>(as pictured in Figure 26)<\/em><\/li>\n<\/ol>\n<p><em>Save and switch to preview mode (see <\/em>Previewing Pages<em>) to test the link.<\/em><\/p>\n\n<figure id=\"attachment_1007\" aria-describedby=\"caption-attachment-1007\" style=\"width: 616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1007 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2020\/02\/Figure-26-a.png\" alt=\"Figure 26\" width=\"616\" height=\"353\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2020\/02\/Figure-26-a.png 616w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2020\/02\/Figure-26-a-300x172.png 300w\" sizes=\"auto, (max-width: 616px) 100vw, 616px\" \/><figcaption id=\"caption-attachment-1007\" class=\"wp-caption-text\">Figure 26<\/figcaption><\/figure>\n\n<p><strong>When you link to a page within the same workspace:<\/strong><\/p>\n<ol>\n\t<li>Choose the <strong>Page<\/strong> tab.<\/li>\n\t<li>Choose <strong>Top<\/strong> in the dropdown menu.<\/li>\n\t<li>Enter <em><strong>Opens internal link in current window<\/strong><\/em> in the Title field.<\/li>\n\t<li>Browse the page tree to reach the page you wish to link to and click on the page name. <em>(as pictured in figure 26-a)<\/em><\/li>\n<\/ol>\n\n<figure id=\"attachment_1137\" aria-describedby=\"caption-attachment-1137\" style=\"width: 428px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1137 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2020\/04\/Figure-26-same.png\" alt=\"Figure 26-a\" width=\"428\" height=\"316\"><figcaption id=\"caption-attachment-1137\" class=\"wp-caption-text\">Figure 26-a<\/figcaption><\/figure>\n\n<h3><a id=\"linking_to_external_url\"><\/a>Linking to an external URL (another website)<\/h3>\n<p>You can also link to other websites. Be judicious in how many external links you use as websites often change which could lead to broken links on your page!<\/p>\n<p>Once you are editing within a content element, select the text that you want to link your file to and click on the <strong>TYPO3 Link icon <\/strong><em>(as pictured in Figure 23)<\/em><strong>.<\/strong><\/p>\n<ol>\n\t<li>Click on the External URL tab.<\/li>\n\t<li>Click the down arrow to open the target menu and choose New window. This will open the Web page in a new browser window or tab when a user clicks on the link in the Web page.<\/li>\n\t<li>Type <strong><em>Opens external link in new window <\/em><\/strong>in the Title field.<\/li>\n\t<li>Copy the URL and paste it into the URL field including the http:\/\/ or https:\/\/.<\/li>\n\t<li>Click Set Link.<br>\n<em>(as pictured in Figure 27)<\/em><\/li>\n<\/ol>\n\n<figure id=\"attachment_209\" aria-describedby=\"caption-attachment-209\" style=\"width: 481px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-209 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/05\/Figure-30.png\" alt=\"Figure 27\" width=\"481\" height=\"275\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/05\/Figure-30.png 481w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/05\/Figure-30-300x172.png 300w\" sizes=\"auto, (max-width: 481px) 100vw, 481px\" \/><figcaption id=\"caption-attachment-209\" class=\"wp-caption-text\">Figure 27<\/figcaption><\/figure>\n\n<p><em>Save and switch to preview mode (see <strong>Previewing Pages<\/strong>) to test the link.<\/em><\/p>\n<h3><a id=\"linking_to_email\"><\/a>Linking to an email<\/h3>\n<p>You can also create links to email addresses on your page.\u00a0 If you provide an email address on your department\u2019s pages, you should create a link to that email address.<\/p>\n<p>Once you are editing within a content element, <em><strong>select the text<\/strong><\/em> that you want to link your file to and click on the <strong>TYPO3 Link icon <\/strong><em>(as pictured in Figure 23)<\/em>.<\/p>\n<ol>\n\t<li>Select the Email tab.<\/li>\n\t<li>Copy and paste the full email address into the window.<\/li>\n\t<li>Type <strong><em>Opens window for sending email <\/em><\/strong>in the Title field.<\/li>\n\t<li>Click Set Link. <em>(as pictured in Figure 28)<\/em><\/li>\n<\/ol>\n\n<figure id=\"attachment_869\" aria-describedby=\"caption-attachment-869\" style=\"width: 471px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-869 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/11\/Figure-32-1.png\" alt=\"email link\" width=\"471\" height=\"167\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/11\/Figure-32-1.png 471w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/11\/Figure-32-1-300x106.png 300w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><figcaption id=\"caption-attachment-869\" class=\"wp-caption-text\">Figure 28<\/figcaption><\/figure>\n\n<p><em>Save and switch to preview mode (see <strong>Previewing Pages<\/strong>) to test the link.<\/em><\/p>\n<p><strong>Accessibility Note:<\/strong> Accessible pages allow individuals using screen readers to \u2018scan\u2019 the links quickly by using meaningful text that describes the link destination. <em>Never<\/em> use phrases like \u2018click here\u2019 since, without the context of the paragraph, they are ambiguous.\u00a0 Use link words and phrases that can be intuitively organized, for example: \u2018Contact us\u2019 as opposed to \u2018how to contact us.\u2019<\/p>\n<p><strong>Tip:<\/strong> If the title on the hyperlink&#8217;s destination page gives an accurate summary of what is on the page, use it for the hyperlink text. For example, this hyperlink text matches the title on the destination page: <a title=\"Opens external link in new window\" href=\"https:\/\/templates.office.com\/\" target=\"_blank\" rel=\"noreferrer\">Templates and Themes for Office Online<\/a>.<\/p>\n<p><strong>Important:<\/strong> If multiple similar links on the same page go to different locations, do not use the same link text. Refer to the section regarding <a title=\"Opens internal link in current window\" href=\"https:\/\/sites.monroecc.edu\/web-standards\/accessibility\/create-accessible-content\/create-accessible-content-web-pages\/#hyperlink-text\">descriptive hyperlink text<\/a> for additional information.<\/p>\n<p><strong><a id=\"link-titles\"><\/a>Link Titles:<\/strong> In TYPO3, use phrases placed in the title field to alert a user of assistive technology of actions occurring with the link:<\/p>\n<ul>\n\t<li>\n<div>Opens internal link in current window <em>(when linking to another page in your workspace)<\/em><\/div>\n<\/li>\n\t<li>\n<div>Opens internal link in new window <em>(when linking to a page in another workspace)<\/em>\u00a0<\/div>\n<\/li>\n\t<li>\n<div>Opens external link in new window<\/div>\n<\/li>\n\t<li>\n<div>Opens PDF in new window<\/div>\n<\/li>\n\t<li>\n<div>Opens window for sending email<\/div>\n<\/li>\n\t<li>\n<div>Directs viewer to a section on this page <em>(when linking to a bookmark on the same page)<\/em>\u00a0\u00a0<\/div>\n<\/li>\n\t<li>\n<div>Opens video in new window<\/div>\n<\/li>\n\t<li>\n<div>Opens audio player in new window<\/div>\n<\/li>\n\t<li>Plays embedded video on this page <em>(for videos embedded using iframes)<\/em><\/li>\n<\/ul>\n<h2><a name=\"deleting_from_filelist\"><\/a>Deleting Documents\/Files\/Images from your Filelist<\/h2>\n<p>TYPO3 editors have the ability to delete unused document and image files from their workspaces. TYPO3 should have currently used documents and images and should not be used to archive older files.<\/p>\n<p>To delete unused or unwanted document or image files.<\/p>\n<ol>\n\t<li>Go to the Filelist Module.<\/li>\n\t<li>Check the box before Extended View (if not already selected).<\/li>\n\t<li>Select the appropriate directory- <strong>documents<\/strong> or <strong>images <\/strong><em>(as pictured in Figure 29)<\/em><strong>.<\/strong><\/li>\n<\/ol>\n\n<figure id=\"attachment_1838\" aria-describedby=\"caption-attachment-1838\" style=\"width: 220px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1838 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-29-filelist.png\" alt=\"Figure 29\" width=\"220\" height=\"184\"><figcaption id=\"caption-attachment-1838\" class=\"wp-caption-text\">Figure 29<\/figcaption><\/figure>\n\n<p><strong>Remember that the Ref number shows how many times a file or image is linked to within TYPO3 <\/strong><em>(as pictured in Figure 30)<\/em><strong>.<\/strong><\/p>\n<ol>\n\t<li>If the file has no references (&#8220;-&#8220;), the file is not linked in TYPO3 but might be used by other systems, such as Recruit. Once you have confirmed that it is not being used by an MCC system outside of TYPO3, skip to \u201cSave and Delete the File.\u201d<\/li>\n\t<li>If the file has a number in the Ref column, it is linked (or referenced) in TYPO3.<\/li>\n<\/ol>\n\n<figure id=\"attachment_1842\" aria-describedby=\"caption-attachment-1842\" style=\"width: 750px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1842 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-30-filelist-ref-1.png\" alt=\"Figure 30\" width=\"750\" height=\"82\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-30-filelist-ref-1.png 750w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-30-filelist-ref-1-300x33.png 300w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><figcaption id=\"caption-attachment-1842\" class=\"wp-caption-text\">Figure 30<\/figcaption><\/figure>\n\n<h3>Remove References<\/h3>\n<ol>\n\t<li>In the row of the file you\u2019d like to remove, click on the <strong>i<\/strong> (info icon) or the number in the Ref column (Figure 31).<br>\n<figure id=\"attachment_1843\" aria-describedby=\"caption-attachment-1843\" style=\"width: 723px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1843 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-31-filelist-ref-i.png\" alt=\"Figure 31\" width=\"723\" height=\"71\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-31-filelist-ref-i.png 723w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-31-filelist-ref-i-300x29.png 300w\" sizes=\"auto, (max-width: 723px) 100vw, 723px\" \/><figcaption id=\"caption-attachment-1843\" class=\"wp-caption-text\">Figure 31<\/figcaption><\/figure>\n<\/li>\n\t<li>In the resulting pop-up window, scroll down to see the list of TYPO3 elements that refer to the file (Figure 32).<br>\n<figure id=\"attachment_1844\" aria-describedby=\"caption-attachment-1844\" style=\"width: 792px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1844 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-32-reference-list.png\" alt=\"Figure 32\" width=\"792\" height=\"108\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-32-reference-list.png 792w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-32-reference-list-300x41.png 300w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-32-reference-list-768x105.png 768w\" sizes=\"auto, (max-width: 792px) 100vw, 792px\" \/><figcaption id=\"caption-attachment-1844\" class=\"wp-caption-text\">Figure 32<\/figcaption><\/figure>\n<br>\n<ol style=\"list-style-type:lower-alpha;\">\n\t<li>Click on the pencil icon to the right of each element.<\/li>\n\t<li>Remove or replace the file you want to delete from the element.\n\n<ol style=\"list-style-type:lower-roman;\">\n\t<li>To remove a hyperlink, place the cursor on the hyperlink. (The TYPO3 Link icon will darken.) Click on the TYPO3 Link icon (Figure 33). In the TYPO3 Link pop-up window, click the \u201cRemove Link\u201d tab on the right (Figure 34). Save and close the element. Repeat as needed.<br>\n<figure id=\"attachment_1846\" aria-describedby=\"caption-attachment-1846\" style=\"width: 650px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1846 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-33-typo3-link.png\" alt=\"Removing the hyperlink\" width=\"650\" height=\"117\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-33-typo3-link.png 650w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-33-typo3-link-300x54.png 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><figcaption id=\"caption-attachment-1846\" class=\"wp-caption-text\">Figure 33<\/figcaption><\/figure> <figure id=\"attachment_1847\" aria-describedby=\"caption-attachment-1847\" style=\"width: 419px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1847 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-34-remove-link-button.png\" alt=\"Remove link button\" width=\"419\" height=\"202\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-34-remove-link-button.png 419w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-34-remove-link-button-300x145.png 300w\" sizes=\"auto, (max-width: 419px) 100vw, 419px\" \/><figcaption id=\"caption-attachment-1847\" class=\"wp-caption-text\">Figure 34<\/figcaption><\/figure>\n<\/li>\n\t<li>To remove an image, select the \u201cImages\u201d tab. Hover over the file name for the edit options to appear. Click on the garbage can icon to \u201cDelete record (!)\u201d (Figure 35). Save and close the element. Repeat as needed.<br>\n<figure id=\"attachment_1851\" aria-describedby=\"caption-attachment-1851\" style=\"width: 551px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1851 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-35-remove-image-button.png\" alt=\"Figure 35\" width=\"551\" height=\"215\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-35-remove-image-button.png 551w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-35-remove-image-button-300x117.png 300w\" sizes=\"auto, (max-width: 551px) 100vw, 551px\" \/><figcaption id=\"caption-attachment-1851\" class=\"wp-caption-text\">Figure 35<\/figcaption><\/figure>\n<\/li>\n\t<li>Close the pop-up window.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h3>Save and Delete the File<\/h3>\n<p>Once you have removed all references to the file, please download and save the file, then delete it from TYPO3.<\/p>\n<h4>Save a Copy<\/h4>\n<p>If you would like to save a copy for archival purposes, click on the file name. The file will open in a new tab.<\/p>\n<p><strong>Exception<\/strong>: If the file is <strong>not<\/strong> an image or PDF, the browser will download it. Move the file from your Downloads folder to your Documents folder or shared drive.<\/p>\n<p>If the file is a PDF, click on the Download icon (arrow pointing down at a horizontal line) (Figure 36). This will open a window to select the folder in which you can save the PDF.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1455 size-full\" style=\"font-weight:bold;color:#333333;font-family:Arial, serif;font-size:14px;\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/01\/save-copy-1.png\" alt=\"Example of saving a PDF from the browser using the Download icon.\" width=\"298\" height=\"258\"><\/p>\n<p><span style=\"font-size:14px;color:#333333;font-family:Arial, serif;\">Figure 36<\/span>\u00a0<\/p>\n<p><span style=\"color:#616265;font-family:Arial, sans-serif;font-size:16px;\">If the file is an image, click on the <\/span><strong style=\"color:#616265;font-family:Arial, sans-serif;font-size:16px;\">Show<\/strong><span style=\"color:#616265;font-family:Arial, sans-serif;font-size:16px;\"> icon (Figure 37) to open the image in a new tab.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1857 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-37-show-icon.png\" alt=\"Figure 37\" width=\"584\" height=\"70\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-37-show-icon.png 584w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-37-show-icon-300x36.png 300w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/p>\n<p>Figure 37<\/p>\n<p>Right-click on the image in the new tab and choose <strong>Save image as&#8230;<\/strong> in the drop-down menu (Figure 37a).<\/p>\n\n<figure id=\"attachment_1858\" aria-describedby=\"caption-attachment-1858\" style=\"width: 300px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-1858\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-37-a-save-image-as-300x190.png\" alt=\"Figure 37a\" width=\"300\" height=\"190\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-37-a-save-image-as-300x190.png 300w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-37-a-save-image-as.png 326w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-1858\" class=\"wp-caption-text\">Figure 37a<\/figcaption><\/figure>\n\n<p><span style=\"color:#616265;font-family:Arial, sans-serif;font-size:16px;\">Save the file to either your computer or on a shared drive, such as the M Drive.<\/span><\/p>\n<h4>Delete the File<\/h4>\n<p>Option 1 (Extended View):<\/p>\n<ol>\n\t<li>Click on the garbage can\/Delete icon (Figure 38).<\/li>\n<\/ol>\n\n<figure id=\"attachment_1855\" aria-describedby=\"caption-attachment-1855\" style=\"width: 494px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1855 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-38-delete-file-garbage-icon-1.png\" alt=\"Figure 38\" width=\"494\" height=\"69\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-38-delete-file-garbage-icon-1.png 494w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-38-delete-file-garbage-icon-1-300x42.png 300w\" sizes=\"auto, (max-width: 494px) 100vw, 494px\" \/><figcaption id=\"caption-attachment-1855\" class=\"wp-caption-text\">Figure 38<\/figcaption><\/figure>\n\n<p>Option 2 (No garbage can icon):<\/p>\n<ol>\n\t<li>Click on the icon to the left of the file, such as the PDF icon or TYPO3\u2019s image icon and select \u201cDelete\u201d from the menu (Figure 39).<br>\n<figure id=\"attachment_1447\" aria-describedby=\"caption-attachment-1447\" style=\"width: 212px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1447\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/01\/delete-file-2.png\" alt=\"Cursor over the Delete option (garbage can) in file menu in TYPO3.\" width=\"212\" height=\"186\"><figcaption id=\"caption-attachment-1447\" class=\"wp-caption-text\">Figure 39<\/figcaption><\/figure>\n<\/li>\n\t<li>It will ask if you are sure you want to delete the selected file. Click OK (Figure 40).<br>\n<figure id=\"attachment_1853\" aria-describedby=\"caption-attachment-1853\" style=\"width: 576px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1853 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-40-delete-file-message.png\" alt=\"Figure 40\" width=\"576\" height=\"134\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-40-delete-file-message.png 576w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/01\/figure-40-delete-file-message-300x70.png 300w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><figcaption id=\"caption-attachment-1853\" class=\"wp-caption-text\">Figure 40<\/figcaption><\/figure>\n<\/li>\n\t<li>Text in a green box will appear above the list of files confirming that the file has been deleted (Figure 41).<br>\n<figure id=\"attachment_1449\" aria-describedby=\"caption-attachment-1449\" style=\"width: 529px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1449\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/01\/delete-file-4.png\" alt=\"Green box in TYPO3 that confirms the file has been successfully deleted.\" width=\"529\" height=\"111\"><figcaption id=\"caption-attachment-1449\" class=\"wp-caption-text\">Figure 41<\/figcaption><\/figure>\n<\/li>\n<\/ol>\n<h2><a id=\"format_options\"><\/a>Format options in the editor<\/h2>\n<p>There are format options available from the menu bar in the editor. You should b<em>e sparing<\/em> when using italics, bold and other type features. The <strong>Formats<\/strong> drop-down will be useful when editing to help replace <strong>Buttons<\/strong> and to add <strong>PDF<\/strong> and <strong>External link<\/strong> icons. <a title=\"Opens internal link in same window\" href=\"https:\/\/www.monroecc.edu\/typo3-training-site\/examples\/styling\/\">The Styles page<\/a> shows an overview of the current MCC web styles.\u00a0<\/p>\n<p>When you edit text that has special formatting (such as a Button), you may remove the formatting.\u00a0 No worries, you just need to select the text, and then apply the format after you are done editing.<\/p>\n<ol>\n\t<li>To add a <strong>Links &amp; Buttons<\/strong> format, you <em>first<\/em> need to create a link <a title=\"Directs viewer to a section on this page\" href=\"typo3_link\">(see TYPO3 Link section)<\/a>.<\/li>\n\t<li>Select the text of the link.<\/li>\n\t<li>Select <strong>Links &amp; Buttons<\/strong> from the <strong>Formats<\/strong> drop-down, <em>(as pictured in Figure 42).<\/em><\/li>\n\t<li>Select your button style:\n\n<ul>\n\t<li>Button Primary is outlined in Gold.<\/li>\n\t<li>Button Primary Full is a gold button (text will appear white).<\/li>\n\t<li>Button Secondary is outlined in Grey.<\/li>\n\t<li>Button Secondary Full is a grey button (text will appear white).<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n<figure id=\"attachment_232\" aria-describedby=\"caption-attachment-232\" style=\"width: 356px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-232 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/06\/Figure-35.png\" alt=\"Figure 31\" width=\"356\" height=\"219\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/06\/Figure-35.png 356w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/06\/Figure-35-300x185.png 300w\" sizes=\"auto, (max-width: 356px) 100vw, 356px\" \/><figcaption id=\"caption-attachment-232\" class=\"wp-caption-text\">Figure 42<\/figcaption><\/figure>\n\n<p><em>A general rule of thumb is to alternate use of primary and secondary buttons.<\/em><\/p>\n<ol>\n\t<li>Create a link.<\/li>\n\t<li>Select<\/li>\n\t<li>For document files (should be saved as .pdf), select PDF Link.<\/li>\n\t<li>For a link to another Website, select External Link.<br>\n<em>(as pictured in Figure 43)<\/em><\/li>\n<\/ol>\n\n<figure id=\"attachment_233\" aria-describedby=\"caption-attachment-233\" style=\"width: 356px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-233 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/06\/Figure-36.png\" alt=\"Figure 32\" width=\"356\" height=\"219\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/06\/Figure-36.png 356w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/06\/Figure-36-300x185.png 300w\" sizes=\"auto, (max-width: 356px) 100vw, 356px\" \/><figcaption id=\"caption-attachment-233\" class=\"wp-caption-text\">Figure 43<\/figcaption><\/figure>\n\n<h2><a id=\"previewing_pages\"><\/a>Previewing Pages<\/h2>\n<p>At any time during the editing process, you can preview the page to see what your changes will look like on the Web by clicking the <strong>Save and View Page<\/strong> option in the dropdown menu. This opens a new window\/tab <em>(as pictured in Figure 44)<\/em>.<em> Be sure to allow all popups from this site!<\/em><\/p>\n\n<figure id=\"attachment_1761\" aria-describedby=\"caption-attachment-1761\" style=\"width: 768px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1761\" title=\"Figure 36\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/11\/page-preview-figure-44.png\" alt=\"Figure 44\" width=\"768\" height=\"295\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/11\/page-preview-figure-44.png 768w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/11\/page-preview-figure-44-300x115.png 300w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><figcaption id=\"caption-attachment-1761\" class=\"wp-caption-text\">Figure 44<\/figcaption><\/figure>\n\n<p>Moving the <strong>(1) slider bar<\/strong> between Staged Version and Published Version moves the view between the page you are currently working on (Staged) and the page that is live on the Web (Published).<\/p>\n<p>Clicking on the <strong>(2) end icon<\/strong> allows you to select how you want to compare the working and live view; either side by side (vertical), stacked on top of each other (horizontal), or by using the slider.<\/p>\n<p>Move back to the other open TYPO3 tab to resume editing.<\/p>\n\n<figure id=\"attachment_1760\" aria-describedby=\"caption-attachment-1760\" style=\"width: 768px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1760\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/11\/figure-45-top-banner-preview.png\" alt=\"Figure 45\" width=\"768\" height=\"66\"><figcaption id=\"caption-attachment-1760\" class=\"wp-caption-text\">Figure 45<\/figcaption><\/figure>\n\n<p>Another way to quickly preview your work; click <strong>View<\/strong> in the Web category of the Module Menu to open the page in the content area <em>(as pictured in Figure 46)<\/em>. This preview does not give you the option to easily compare your changes to the live Web page.<\/p>\n\n<figure id=\"attachment_1762\" aria-describedby=\"caption-attachment-1762\" style=\"width: 768px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1762 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/11\/quick-view-figure-46.png\" alt=\"Figure 46\" width=\"768\" height=\"276\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/11\/quick-view-figure-46.png 768w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/11\/quick-view-figure-46-300x108.png 300w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><figcaption id=\"caption-attachment-1762\" class=\"wp-caption-text\">Figure 46<\/figcaption><\/figure>\n\n<h2><a id=\"moving_from_editing\"><\/a>Moving from Editing to the Next Stage in Workflow<\/h2>\n<p>Once you are satisfied that you are done, you need to move your edited page to the next stage in the workflow.\u00a0Select the <strong>Save and View Page<\/strong> option in the dropdown menu\u00a0to get the preview to open in a second window.<\/p>\n<p>Move to the next stage by clicking \u2018<strong>Send to stage \u201cDept Approval<\/strong><strong>\u201d&#8217; <\/strong>at the top of the preview window, as pictured in Figure 47. Clicking on <strong>Discard<\/strong> will roll back any page content changes that are ready to send for publishing in the Workspace. Don\u2019t worry if you click it by mistake, a pop-up will ask if you really want to do that.<\/p>\n<blockquote>\n<p><strong>NOTE:<\/strong> Using the green button in this view to send to the next stage in the workflow will mark <strong>all<\/strong> of the individual content elements on the page as \u201cDept Approval\u201d.<\/p>\n<\/blockquote>\n\n<figure id=\"attachment_1758\" aria-describedby=\"caption-attachment-1758\" style=\"width: 660px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1758 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/11\/send-to-stage-figure-47-e1667853105605.png\" alt=\"Figure 47\" width=\"660\" height=\"49\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/11\/send-to-stage-figure-47-e1667853105605.png 660w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/11\/send-to-stage-figure-47-e1667853105605-300x22.png 300w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><figcaption id=\"caption-attachment-1758\" class=\"wp-caption-text\">Figure 47<\/figcaption><\/figure>\n\n<p>Once \u2018<strong>Send to stage \u201cDept Approval<\/strong>\u201d\u2019 is clicked, a pop-up box will open. Some email recipients <strong>may<\/strong> already be listed and checked. Any that are greyed out can\u2019t be changed or deleted.<\/p>\n<ol>\n\t<li><strong>If no email recipient is listed and checked, make sure the notification is forwarded to your department publisher<\/strong> by typing their email addresses into the top text box <strong>(1). <\/strong>Additional recipients can be added to this form.<\/li>\n\t<li><strong>Include a comment<\/strong> in the box below <strong>(2)<\/strong> to identify the change you made for your publisher.<\/li>\n\t<li>Click <strong>ok<\/strong> <strong>(3)<\/strong> to process the action.<br>\n<em>(as pictured in Figure 48)<\/em><\/li>\n<\/ol>\n\n<figure id=\"attachment_1777\" aria-describedby=\"caption-attachment-1777\" style=\"width: 592px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1777 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/11\/action-box-figure-48.png\" alt=\"Action box Send for Department Approval -Figure 48\" width=\"592\" height=\"319\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/11\/action-box-figure-48.png 592w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/11\/action-box-figure-48-300x162.png 300w\" sizes=\"auto, (max-width: 592px) 100vw, 592px\" \/><figcaption id=\"caption-attachment-1777\" class=\"wp-caption-text\">Figure 48<\/figcaption><\/figure>\n\n<blockquote>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-94 alignleft\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/05\/remember.png\" alt=\"\" width=\"40\" height=\"49\"><strong>Special Note:\u00a0<\/strong>To limit the number of emails sent when making multiple edits on several pages in a short period of time, move the edits to &#8220;Dept Approval&#8221; state from the Workspace module, instead of using the green button in the preview window for each individual page as outlined in the next section.<\/p>\n<\/blockquote>\n<h2><a id=\"reviewing_edited_pages\"><\/a>Reviewing Edited Pages and Publishing<\/h2>\n<p><em>The next eight steps require that you are a department Publisher<\/em><strong>.<\/strong> Basic Editors do not have permission to move changes beyond the <strong>&#8220;Dept Approval&#8221; stage.<\/strong><\/p>\n<p>In the working view of the site start at the landing\/top page of the group, then open the <strong>Workspaces<\/strong> module in the left-hand navigation bar to view all changes to the site, and the current state for each change <em>(as pictured in Figure 49)<\/em>.<\/p>\n<blockquote>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-94\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/05\/remember.png\" alt=\"\" width=\"40\" height=\"49\"><strong>Special Note:\u00a0<\/strong><\/p>\n<ul>\n\t<li>If you do not start at the landing page before opening the Workspaces module, you won&#8217;t see all of the changes.<\/li>\n\t<li>Click on the clear page cache icon <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1765 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/11\/clear-cache.png\" alt=\"Clear page cache icon\" width=\"100\" height=\"30\">\u00a0 in the Page module, to make sure you can see all the changes when switching to the Workspaces module.<\/li>\n<\/ul>\n<\/blockquote>\n\n<figure id=\"attachment_1773\" aria-describedby=\"caption-attachment-1773\" style=\"width: 410px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1773 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/11\/workspaces-button-landing-page-figure-49.png\" alt=\"Figure 49\" width=\"410\" height=\"193\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/11\/workspaces-button-landing-page-figure-49.png 410w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/11\/workspaces-button-landing-page-figure-49-300x141.png 300w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><figcaption id=\"caption-attachment-1773\" class=\"wp-caption-text\">Figure 49<\/figcaption><\/figure>\n\n<p>If you have access to multiple workspaces, you will see more than one tab, select the appropriate tab. Publishers will see all edited pages <em>(as pictured in Figure 50)<\/em>.<\/p>\n\n<figure id=\"attachment_1980\" aria-describedby=\"caption-attachment-1980\" style=\"width: 672px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1980 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/07\/workspaces-screen-figure-50.png\" alt=\"Figure 50\" width=\"672\" height=\"224\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/07\/workspaces-screen-figure-50.png 672w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/07\/workspaces-screen-figure-50-300x100.png 300w\" sizes=\"auto, (max-width: 672px) 100vw, 672px\" \/><figcaption id=\"caption-attachment-1980\" class=\"wp-caption-text\">Figure 50<\/figcaption><\/figure>\n\n<p>In the right-hand column, you can see the current stage, and choose action options related to the content element or page as detailed in Figure 51.<\/p>\n\n<figure id=\"attachment_1775\" aria-describedby=\"caption-attachment-1775\" style=\"width: 251px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1775 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/11\/action-icons-figure-51.png\" alt=\"Action icon buttons Figure 51\" width=\"251\" height=\"103\"><figcaption id=\"caption-attachment-1775\" class=\"wp-caption-text\">Figure 51<\/figcaption><\/figure>\n\n<ol>\n\t<li>Opens a pop-up that shows the color-coded changes made to the workspace element and the history of the changes, including the date and editor.<\/li>\n\t<li>Lets you preview the workspace element with changes.<\/li>\n\t<li>Opens the element for editing.<\/li>\n\t<li>Opens the workspace version of the page in editing mode.<\/li>\n\t<li>Discards the workspace version of the record.<\/li>\n\t<li>Selects the workspace element for staging action.<\/li>\n<\/ol>\n<p>In the History tab, the green highlighted text indicates the change that was made to the page. You can also see the date and time the change was made, and who made it. <em>(as pictured in Figure 52)<\/em>.<\/p>\n\n<figure id=\"attachment_1787\" aria-describedby=\"caption-attachment-1787\" style=\"width: 599px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1787 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/history-of-changes-figure-52-1.png\" alt=\"Figure 52\" width=\"599\" height=\"490\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/history-of-changes-figure-52-1.png 599w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/history-of-changes-figure-52-1-300x245.png 300w\" sizes=\"auto, (max-width: 599px) 100vw, 599px\" \/><figcaption id=\"caption-attachment-1787\" class=\"wp-caption-text\">Figure 52<\/figcaption><\/figure>\n\n<p>The legend at the bottom of the <strong>Workspaces<\/strong> module gives the color-coded key for the kinds of changes displayed in the record history. These include: edited, moved, created, hidden, and deleted <em>(as pictured in Figure 53).<\/em><\/p>\n\n<figure id=\"attachment_1785\" aria-describedby=\"caption-attachment-1785\" style=\"width: 419px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1785 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/color-coded-change-identification-figure-53.png\" alt=\"Figure 53\" width=\"419\" height=\"34\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/color-coded-change-identification-figure-53.png 419w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/color-coded-change-identification-figure-53-300x24.png 300w\" sizes=\"auto, (max-width: 419px) 100vw, 419px\" \/><figcaption id=\"caption-attachment-1785\" class=\"wp-caption-text\">Figure 53<\/figcaption><\/figure>\n\n<p>You can also choose the option to move forward or back in the workflow cycle\u00a0<b><i>until<\/i><\/b> you have selected <em>Send to Ready to Publish<\/em>. Once an item is in Ready to Publish status <em>(as pictured in Figure 54)<\/em>, it will get a\u00a0<strong>final review by the Technology Services Web Team before it is published to the live website.*\u00a0 If at this point, you need to make a change, a web team member can return it to editing status for you.<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1800 size-full\" style=\"font-weight:bold;color:#333333;font-family:Arial, serif;font-size:14px;\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/ready-to-publish-changed-element-1.png\" alt=\"Figure 54\" width=\"686\" height=\"115\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/ready-to-publish-changed-element-1.png 686w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/ready-to-publish-changed-element-1-300x50.png 300w\" sizes=\"auto, (max-width: 686px) 100vw, 686px\" \/><\/p>\n<p>Figure 54<\/p>\n<p>Figure 54 above represents changes that were made to elements of the page titled <em><strong>Non-Traditional Ways to take Math Courses<\/strong><\/em>. Notice that the page title is color-coded <strong>edited<\/strong>, as pictured in Figure 53 above.<\/p>\n\n<figure id=\"attachment_1801\" aria-describedby=\"caption-attachment-1801\" style=\"width: 760px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1801 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/ready-to-publish-new-element.png\" alt=\"Figure 55\" width=\"760\" height=\"115\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/ready-to-publish-new-element.png 760w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/ready-to-publish-new-element-300x45.png 300w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><figcaption id=\"caption-attachment-1801\" class=\"wp-caption-text\">Figure 55<\/figcaption><\/figure>\n\n<p>Figure 55 represents a new element that was added to the same page. Notice that the element title is color-coded <strong>new<\/strong>, as pictured in Figure 53 above.<\/p>\n<p>After selecting all of the pages and elements, select the action from the dropdown menu at the bottom of the page <em>(as pictured in Figure 56)<\/em>.\u00a0<\/p>\n\n<figure id=\"attachment_1802\" aria-describedby=\"caption-attachment-1802\" style=\"width: 257px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1802 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/12\/ready-to-publish-drop-down.png\" alt=\"Figure 56\" width=\"257\" height=\"121\"><figcaption id=\"caption-attachment-1802\" class=\"wp-caption-text\">Figure 56<\/figcaption><\/figure>\n\n<h3><a id=\"final_review\"><\/a>*Final Review<\/h3>\n<p>The College is committed to the accessibility of our website as part of our open-access mission and our service to our community. To further this commitment, the manner in which information is posted on the website has been changed to centralize the publishing of content, allowing trained members of the Technology Services Web Team to be the posters of new website material. While TYPO3 liaisons will retain responsibility for the content of their web pages and will still be expected to follow the ADA Compliance Standards and MCC Standards for which they have been trained, changes to the website will be published to the live website after careful review for ADA compliance, functionality and style conformity by the Technology Services Web Team.<\/p>\n<h4><a id=\"publishing_schedule\"><\/a>Publishing Schedule<\/h4>\n<p><strong>Publishing will occur Mondays, Wednesdays and Fridays<\/strong>, excluding days when the College is closed. Normal operations will commence on the next scheduled review date. <strong>Any changes made after noon are not guaranteed to be moved live until the next publishing day<\/strong>. Please plan your changes in accordance with the publishing schedule.\u00a0<\/p>\n<p>Urgent requests for uploads can be made on a limited basis. To request an urgent change, a <strong><a title=\"Directs viewer to a section on this page\" href=\"#technology_ticket\">technology request ticket<\/a><\/strong> must be submitted indicating the reason for the urgency and an explanation of what changes were made. Urgent requests for publishing will only take place during normal business hours and are not guaranteed. There will be a few exceptions for publishing changes that will be published to the live website outside of schedule:<\/p>\n<ul>\n\t<li>Broken Links<\/li>\n\t<li>Cancellations<\/li>\n\t<li>Date Changes<\/li>\n\t<li>Legal Requirements<\/li>\n\t<li>Misinformation<\/li>\n<\/ul>\n<p><a title=\"Opens PDF in new window\" href=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2020\/04\/ADA-compliance-publishing-schedule.pdf\" target=\"_blank\" rel=\"noreferrer\"><strong>Full text of the ADA Compliance Publishing Schedule announcement (PDF)<\/strong><\/a>.<\/p>\n<h2><a id=\"getting_help\"><\/a>Getting Help<\/h2>\n<p><strong>Note:<\/strong> To print these instructions, right-click within the page and choose &#8220;Print&#8221; to open the print dialogue window.<\/p>\n<p>The current version of other training materials can be found at M:\\Offices\\Shared\\TYPO3 Training Materials.<\/p>\n<p>Visual examples of pages, headlines, buttons, and more can be found on the <a title=\"Opens internal link in new window\" href=\"https:\/\/www.monroecc.edu\/typo3-training-site\/examples\/\" target=\"_blank\" rel=\"noreferrer\">TYPO3 Examples webpage<\/a>.<\/p>\n<p><a id=\"technology_ticket\"><\/a>To get help with TYPO3 technical problems or request an urgent change to a page, log on to MyMCC and go to the Tech tab. Under Technology Service Support &amp; Requests, click <a title=\"Opens internal link in new window\" href=\"https:\/\/tech.monroecc.edu\/Staff\/\" target=\"_blank\" rel=\"noreferrer\"><strong>Create or View Technology Support Requests<\/strong><\/a>. Under Request Help With\u2026 Select Web Site.<\/p>\n<ol>\n\t<li>In the Description, give a brief description of the TYPO3 issue.<\/li>\n\t<li>Be sure to include the URL of the page (copy it from the address bar of your browser).<\/li>\n\t<li>Add a date required if appropriate, complete the rest of the request as necessary and click submit.<\/li>\n<\/ol>\n<h2><a id=\"updates_to_directory\"><\/a>Updates to the Faculty &amp; Staff directory listings<\/h2>\n<p><strong>Note:<\/strong> If you need to have the Faculty &amp; Staff page updated, this information comes from the College Directory. \u00a0Log on to MyMCC and go to the Tech tab. Under Technology Service Support &amp; Requests, click <strong>Create or View Technology Support Requests<\/strong>. Under Request Help With \u2026 Select\u00a0 Telephone &amp; Directory Services \u2013 then select Directory listings and fill in the form.<\/p>","protected":false},"excerpt":{"rendered":"<p>TYPO3 Content Management To print these instructions, right-click within the page and choose Print to open the print dialogue window. Before you begin, a note about messing things up Introduction Logging in Selecting your Workspace for editing Working with Content Elements Working in the Editing Window TYPO3 does not automatically save your changes Pasting content [&#8230;]<\/p>\n","protected":false},"author":128,"featured_media":0,"parent":38,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-25","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/pages\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/users\/128"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/comments?post=25"}],"version-history":[{"count":220,"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/pages\/25\/revisions"}],"predecessor-version":[{"id":2311,"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/pages\/25\/revisions\/2311"}],"up":[{"embeddable":true,"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/pages\/38"}],"wp:attachment":[{"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/media?parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}