• Basics
  • Update Content
  • Update Your Site
  • Update Widgets
  • Basics
    • Log In
      Log In

      Logging in to OU Campus is the first step in editing your website. Watch the accompanying training video for step-by-step instructions on how to log in.

    • Find Files
      Find Files

      Learning how to navigate through the file structure of OU Campus is an important element of keeping your website well-organized, linking to files easily, and knowing where to create files.
      Watch the accompanying video to learn how to navigate through OU Campus to find your files and folders.

    • Check Out Pages
      Check Out Pages
      1. Only one person may edit a page at a time. To edit a Page, you must first check-out the page. Do this by clicking the lightbulb icon, causing it to light up.
        Lightbulb
        Lit Lightbulb
      2. You check-in a page by clicking on the lightbulb icon again. Remember, as long as you have a page checked out, no one else can check it out.
      3. Publishing a page will also check it back in.
    • See Your Checked-Out Pages
      See Your Checked-Out Pages
      1. Click the gadget icon in the upper right corner in OU Campus.
        Gadget Icon
      2. Open the My Checked-Out Content dropdown.
        My Checked-Out Content Dropdown
      3. You can check-in pages from here by click the lightbulb icon.
    • Enter Edit Mode
      Enter Edit Mode
      1. Open the page you wish to edit. Make sure you are in the Edit tab.
        Edit Tab
      2. Click the green Main Content edit button. Look for the pencil icon.
        Main Content Edit Button
    • Save a Version of a Page
      Save a Version of a Page

      To rollback to a previous Page state, you must have a saved version of that page state. Saving normally DOES NOT save a version of the page. It is a good habit to make sure you have a saved version of a Page before editing it.

      1. In order to save a version of a Page, click the save version button.
        Save Version Button
      2. Enter a description of the changes you have made, then click Save Version.
        Naming Version
    • Revert to Another Version of a Page
      Revert to Another Version of a Page
      1. Click on the Versions button.
        Version Button
      2. Highlight the version you wish to revert to and click the Revert icon.
        Revert Icon
      3. Click the Revert button on the pop-up.
        Revert Button
      4. Caution: Reverting does not save a version of the current save state. 
    • Publish a Page
      Publish a Page
      1. After you finish editing a Page, click the green Publish button to put the changes on the production server.
        Publish Button
      2. Click the Spelling and Link buttons in the pop-up. This will check the page for spelling mistakes and broken links. Fix any spelling mistakes and broken links before publishing.
        Spell and Link Check
      3. If you have linked to a document, image or page that hasn't been published yet, you will be given the option to publish them now. If you don't, those links will be broken on the site until the files are published.
        Include Dependencies in Publish
      4. Click the Publish button in the pop-up. It will take up to a few minutes for the changes to be seen on the website.
        Publish Button
      5. Publishing saves a version of the page and checks in the page.

     

  • Update Content
    • Show Blocks
      Show Blocks
      1. Enter edit mode.
      2. Click the Show Blocks icon in the toolbar.
        Show Blocks Button
      3. The page now shows how your content is grouped together in blocks. There are different types of blocks indicated by the top left corner of the block. Paragraph blocks(P) are the most common. Heading blocks(H and a size number), Ordered Lists(OL) and Unordered Lists(UL) are also common.
        Blocks Example
      4. You can create a new paragraph block by hitting Enter inside of a paragraph block.
        New Paragraph Blocks
      5. You can create a new line within a paragraph block by hitting Shift and Enter.
        New Lines
      6. You can combine adjacent paragraph blocks by hitting Backspace or Delete on the first space of the lower paragraph block.
        Combined Blocks
      7. Use paragraph, lists and heading blocks to organize and position the contents in a user friendly way.

    • Heading vs Paragraph
      Heading vs Paragraph
      1. In addition to paragraph blocks, you can also use heading blocks to organize your page’s content into sections.
        Sections
      2. Start with Heading 3, and go down in size to create sections within sections.
      3. Make Headings short, no longer than a line.
    • Switch between Heading and Paragraph Blocks
      Switch between Heading and Paragraph Blocks
      1. Create a new paragraph block or click onto an existing paragraph block.
      2. Click the block dropdown and select the desired Heading size.
        Block Dropdown
      3. Turn a heading into a paragraph block by first click onto the heading.
        Example Heading
      4. Use the block dropdown to select paragraph.
        Selecting Paragraph
      5. Do not leave a heading block at the bottom of a page.
    • Add Images
      Add Images
      1. Enter edit mode.
      2. Click where you want the image to appear.
      3. You may create a new paragraph block to add the image in.
      4. Click the Insert/Edit Image icon in the toolbar.
        Insert/Edit Image Icon
      5. In the Source field, click the folder icon and navigate to the desired image in the assets/pics folder of your site.Source Field
      6. Select the image and click Insert.Image Navigation
      7. You can verify you selected the correct image by looking at the path name below the Source field.Path Name
      8. In the Description field, add a short description of the image. The description gives information to the visually impaired and also appears if the image fails to load.Description Field
      9. Click OK.OK Button
    • Replace Images
      Replace Images
      1. Enter edit mode.
      2. Scroll to the image you wish to change.
      3. Right click the image.Right-clicked Image
      4. In the Source field, click the folder icon and navigate to the image that will replace the first image.
      5. Select the image and click Insert.
      6. Update the Description field for the replacement image.New Description
      7. Click OK. The new image should now appear.New Image
      8. If the first image is no longer in use, you should move it to the recycle bin. This stops your asset folders from becoming cluttered with old images.
    • Remove Images
      Remove Images
      1. Enter edit mode.
      2. Scroll to the image you wish to remove.
      3. Right click or highlight the image, then press Delete/Backspace.
      4. If the image is no longer in use, move the image file in the assets folder to the recycle bin.
    • Resize Images
      Resize Images

      Note: If possible, resize images with an image editor before uploading them.

      1. Enter edit mode.
      2. Scroll to the image you wish to resize.
      3. Right click the image.
      4. Change the width and height of the image in the Dimensions field.Dimensions Field
      5. If constrain proportions is checked, adjusting one dimension will cause the other dimension to adjust automatically so that the image will not be distorted.
      6. The dimensions may be set to a percentage. The image size will then adjust with screen size.
    • Insert a Snippet
      Insert a Snippet
      1. Enter edit mode.
      2. Click where you want the snippet to go.
      3. Click on the Snippet icon.Snippet Icon
      4. Select the snippet you wish to add.
      5. Click Insert.
    • How to Use an Accordion
      How to Use an Accordion
      1. Click where you want the accordion to appear.
      2. Click the Snippet icon in the toolbar.
      3. Select Accordion from the menu and click Insert.t
      4. A table will appear with the heading Accordion Snippet.Accordion Heading
      5. You will NOT edit the grey headings that say Panel, Heading and Content. These are just labels. You will edit the white sections next to Heading and Content.
      6. Each row labeled Panel represents an accordion panel. The panels will be seen in the same order as their rows in the table from top to bottom.Panel
      7. Each panel row contains a table.
      8. The top row of the panel table is labeled Heading. The white section next to Heading contains what appears at the top of a panel.Accordion Heading
      9. The bottom row or the panel table is labeled Content. The white section next to Content contains what appears when a panel is opened.Accordion Content
    • How to Use Tabs
      How to Use Tabs

      Note: Tabs become accordions on smaller screens.

      1. Click where on the page you want the tabs to appear.
      2. Click the Snippet icon in the toolbar.
      3. Select Tabs from the menu and click Insert.Tabs in Menu
      4. A table will appear with the heading Tabs Snippet.Tabs Table Header
      5. You will NOT edit the grey headings the say Tab, Title, Heading and Content. You will edit the white sections next to Title, Heading and Content.
      6. Each row labeled Tab represents a tab. The will be shown left to right in the same order as they appear in the table from top to bottom.Tab Rows
      7. Each tab row contains a table.
      8. The top row of a tab table is Title. The white section next to Title contains what appears at the top of a tab.Tab Title
      9. The middle row of a tab table is Heading. The white section next to Heading contains what appears at the top of a tab when it becomes an accordion on smaller screens. Most of the time you should make this the  same as the Tab Title.Tab Heading
      10. The bottom row of a tab table is Content. The white section next to Content contains what appears underneath the tabs if that tab is active.Tab Heading
    • How to Use Tables
      How to Use Tables
      1. Click where on the page you want the tabs to appear.
      2. Click the Snippet icon in the toolbar.
      3. Select one of the table options from the menu and click Insert. (Bordered, compact and striped behave the same but look different)
        Table options
      4. A table with three columns and and three rows will appear. Unlike accordions and tabs, the table will look the same on the site as it looks in the editor.Table example
      5. Alter the contents of a table cell by clicking inside of it.Put the title of the table in the Table Caption area.
      6. To add a row, right click near where you want the row to go. In the menu, highlight Row, then select one of the two Insert Row options.
        Insert Row
      7. To add a column, right click near where you want the column to go. In the menu, highlight Column, then select one of the two Insert Column options.
        Insert Column
      8. To remove a row, right click on the row to be removed. In the menu, highlight Row, then select Remove Row.
        Remove Row
      9. To remove a column, right click on the column to be removed. In the menu, highlight Column, then select Remove Column.
        Remove Column
    • Add Rows to Accordions and Tabs
      Add Rows to Accordions and Tabs
      1. For Accordions, Tabs and Rows, you often need to add more Panels or Tabs.
      2. Scroll to area of the Accordion or Tabs where you wish to add a new row. Right click a currently existing row
      3. In the options, scroll to Rows, then select Copy Row.Copy Row
      4. Right click the row again.
      5. In the options, scroll to Row, the select either Paste Row Before or Paste Row After.Paste Row
      6. You now have a new row. Simply alter the information to what you need the new Panel or Tab to contain.New Row

     

  • Update Your Site
    • Change the Header Nav
      Change the Header Nav
      1. The Header Nav is an ordered grouping of links to pages in your site that allows users to easily access information they need. It appears right above the pages in your site. You can edit these links.
      2. Navigate to your site's directory and open the _header-nav.pcf file. 
        Header Nav File
      3. Click the green Header Nav edit button to enter edit mode.Header Nav Edit Button
      4. This brings up the WYSIWYG editor. The main list items are the words that appear across the navbar. The sub-list is what appears in the drop-down menu for the main list item.Header Nav Table
      5. Hitting enter while your cursor is next to a bullet point will create a new list line of that type.New Submenu ItemNew Menu Item
      6. Tricky! To turn a menu item into a submenu item, you must click the Increase Indent icon in the toolbar, then the Decrease Indent icon, then the Increase Indent again.Increase IndentDecrease IndentMenu to Submenu Item
    • Change the Banner Image
      Change the Banner Image
      1. The Banner Image is the large image displayed at the top of your site. You can change this image.
      2. Navigate to your site's directory and open the _props.pcf file.Props File
      3. Check-out the props file.
      4. Click onto the Properties tab.
        Properties Tab
      5. Under Custom Settings, go to the Section Banner field and click the page icon.Section Banner
      6. Navigate to the image you wish to replace the current banner with and click choose file.
      7. Click the Save button.
      8. Publish the props file.
      9. Publish your entire site so that the new banner image will take effect.
    • Create a New Page
      Create a New Page
      1. Navigate to the appropriate folder for the new Page.
      2. Click on the New button. A pop-up will give you several options to customize the new page.New Page Button
      3. In the pop up box, select Interior Page.Interior Page
      4. A pop-up box will give you several options to customize the new page. These options can be changed later in Page Parameters. 
      5. Page Title determines what will be displayed inside the browser tab for a page. It also sets the default Page Heading and Breadcrumb for the page. Page Title
      6. Description will be displayed by search engines when the site is searched for.Description field
      7. Filename is the what the file will be displayed as in the directory.Filename field
      8. When you are finished entering in the information, click Create.Create button
      9. You will be taken to the new Page.
    • Page Parameters
      Page Parameters

      You access the parameters of a page by checking out the page and going to the properties tab.

      Properties

      Title and Meta Tags

      Changes to these parameters don't cause visible changes in OU Campus. They help search engines determine the content of the page.

      1. Title determines what will be displayed inside the browser tab for a page. Generally you should leave Title, Page Heading and Breadcrumb the same.
        Title
      2. Description determines what search engines will display for the page
      3. Keywords help search engines identify the contents of the page.
      Custom Settings
      1. Page Heading determines what is displayed at the top of the page under the Header Nav. It is set to the Title by default.Page Heading
      2. Section Heading allows you to toggle the site's section heading on and off. It will appear right below the page heading.Section Heading
      3. Breadcrumb determines what will represent this page in the navigational aid under the heading. This will not be displayed for index pages.Breadcrumb
      4. Summary toggles the editable summary region above Main Content.Summary
      5. Share Links toggles the social media icon links below Main Content.Share Links
      Sidebars
      1. Keep all of these toggled off unless you already have a sidebar.
      Widgets
      1. Add a Widget to a Page by clicking the file icon and choosing a Widget. They will be displayed in their order in Parameters.
      Footer
      1. Place Icon Bar and Quick Link Widgets here. They will display below the page content.
    • Upload Documents and Images
      Upload Documents and Images
      1. In your site’s folder, navigate to the assets folder, then to the appropriate folder (either docs or pics).
      2. Click the Upload button.
        Upload
      3. You may drag the files into the box that pops up, or you may click the Add button and navigate to the files you wish to upload.Upload
      4. You may have to alter the names of the documents to meet naming conventions (no spaces in filename).
      5. When uploading a document that will be replaced or updated on a regular basis, it is a good practice to add the date to the end of the filename. This allows you to more easily keep track of which files are updated and which are not.
      6. When replacing a document or image, first upload the new file and link to it BEFORE recycling the old document.
    • Remove Files
      Remove Files
      1. Navigate to the folder that contains the file you wish to delete
      2. Move your cursor to the file.Highlighted File in Nav
      3. Move your cursor to the File dropdown.File Dropdown
      4. Select Move to the Recycle Bin.Move to Recycle Bin
      5. A pop-up will ask you to confirm the Move to Recycle Bin. It will also list any pages that link to this file.
        Recycle Bin Pop Up
      6. If any pages link to this file, you should go into those pages and remove the link or change the link to another file.
      7. Only confirm the move if no pages link to the file. Otherwise, you WILL create broken links or images on the website.

     

  • Update Widgets
    • How Widgets Work
      How Widgets Work
      1. Widgets give you different ways to organize and style your content.
      2. Widgets are kept in your site's assets/widgets folder. Widget Folder
      3. Widgets need to be linked to inside a page in order to be seen.Widget Link
      4. Widgets are mostly used for index pages(home pages).
      5. Go to the widgets folder to edit a widget. They are not edited from the index page.
      6. You only need to publish the widget, not the page that contains it.
      7. You change the settings of the whole widget in Parameters. Widget Parameters
      8. You change the settings of an element in a widget in the MultiEdit. Widget MultiEdit Options
      9. Access MultiEdit by checking out the page and clicking the orange MultiEdit button at the top of the page.Widget MultiEdit
      10. Textboxes can be edit in the WYSIWYG editor by clicking the appropriate green edit button. Look for the pencil icon.
    • Common Parameters
      Common Parameters

      Note: Top Heading and Bottom Link are optional. 

      1. Top Heading sets the text above the entire widget.Top Heading
      2. Heading Alignment sets which side of the widget the Top Heading appears on.
      3. Bottom Link sets the text of a link below the entire widget.Bottom Link Left
      4. Bottom Link Location sets the URL users will be directed to. If either Bottom Link or Bottom Link Location are blank, the bottom link will not appear.
      5. Link Alignment sets which side of the widget the Bottom Link appears on.Bottom Link Right
    • Content Blocks
      Content Blocks
      1. Content Blocks allow for exactly three blocks of content in a row. It contains an image and a small text overlay at the bottom, and can also include a video.Content Blocks
      MultiEdit
      1. Heading sets the text overlay for the individual block.
      2. Link turns the Heading into a link to the given URL.
      3. Date adds a date below the main text in the text overlay.
      4. Image sets the image for the block.
      5. Image Description - add a short description of the Image.
      6. Video allows a specified mp4 video to show when the block is clicked.
    • Content Boxes
      Content Boxes
      1. Content Boxes allow for up to three boxes of text that can have an image on top of each box. The width of the boxes can be altered and boxes may hidden to display fewer boxes. Content Boxes
      MultiEdit
      1. Width sets which percentage of the screen a box will occupy. This can be set to Hide, so the the box will not appear. Additional rows are added if box widths sum to 100% or more. Always make each row either three 33% boxes or two 50% boxes.
      2. Image adds an image to a box. It can be blank.
      3. Heading lets you add text above the boxes.
      4. Button URL sets the link for button at the bottom of the box.
      5. Button Title sets the text for the button at the bottom of the box. The button will not be visible if both Button Title and Button URL are not set.
      6. Color sets the color of the text box. The options are light grey, dark grey or blue.
      7. Help Icon URL - don't use this field.
    • News and Events
      News and Events
      1. Blocks that contain an image and small text overlay. Can include a video. The width of the boxes can be adjusted and blocks can be hidden.News and Events
      MultiEdit

      Note: Refer to Content Blocks MultiEdit

      1.  News and Events works like Content Blocks, except there can be up to 6 blocks of different widths. Use either three 33% boxes, one 33% box and one 66% box or two 50% boxes.
    • Text Content
      Text Content
      1. Text Content is just an editable area exactly like the editable Main Content area, except it can be moved around like other widgets.Text Content
      Parameters
      1. Width sets how far across the screen the box will stretch.
      2. Heading sets the text above the content box.
    • Promo
      Promo
      1. Promo contains an image and textbox side by side. The position of the textbox and image can be switched. Promo
      MultiEdit

      Note: Refer to Content Blocks MultiEdit

      1. Color sets the color of the textbox next to the Image.
      2. Style set the position of the textbox and image.
    • Jumbotron
      Jumbotron
      1. Jumbotron displays a large image that extends across the page. It also includes a textbox overlay whose size and position can be adjusted. Jumbotron
      MultiEdit
      1. Poster sets the large image that will be displayed.
      2. Content sets the text inside of the text overlay.
      3. Box Style sets the color and positioning of the text overlay. Grey Left and Blue Right are the options.
      4. Box Size sets the width of the content box. 42% and 62% are the options.
    • Jumbotron Slider
      Jumbotron Slider
      1. Jumbotron Slider displays a series of Jumbotrons, one at a time. Users can scroll through thumbnails at the bottom of the Jumbotron Slider representing each Jumbotron. Clicking these thumbnails causes the specified Jumbotron to appear. Jumbotron Slider
      MultiEdit

      Note: Refer to Jumbotron MultiEdit

      1. Thumbnail sets the small image that represents the given Jumbotron in the slider.
      2. Position sets the order of the Jumbotrons. Otherwise they are presented in the same order as the MultiEdit.
    • Icon Bar
      Icon Bar
      1. Icon Bar allow you to add a row of images with links to the footer of a page. Icon Bar does not have MultiEdit, only Parameters.Icon Bar
      Parameters
      1. Link sets the URL the icon will direct users towards.
      2. Image sets the image you want as the icon.
      3. Image Description - add a short description of the image here. 
    • Quick Links
      Quick Links
      1. Quick Links allows you to add a row of link to the footer of a page. Quick Links does not have a MultiEdit, only Parameters.
        Quick Links
      Parameters
      1. Link sets what URL the user will be sent to.
      2. Text sets the wording of the quicklink.
      3. Icon adds an icon in front of the text.