Modern Campus Catalog Emblem Modern Campus CMS Emblem Modern Campus Curriculum Emblem Modern Campus Involve Emblem Modern Campus Lifelong Learning Extended Education Emblem Modern Campus Message Emblem Modern Campus Navigate Emblem Modern Campus Schedule Emblem Modern Campus Virtual Tours & Maps Emblem Modern Campus Lifelong Learning Workforce and Community Emblem Site Menu Open Site Menu Close
Skip to Content
Modern Campus Support
Site Search
Search

Source Code

Pages created from templatesLink to this section

Those with access can edit the source code of pages created from templates (Publish Control Files [PCFs]).

Only level 9 and 10 users (administrators) can edit source code, by default. Level 10 users can grant access to level 1 through 8 users and restrict access to level 9s via user settings.

There are three ways to edit the source code of a page from Content > Pages, as follows:

  • Click to open your page, click Source in the page actions toolbar.
  • Check out your page, click More ActionsMore Actions Menu, click Edit > Properties.
  • Click to open your page, scroll to the page footer, click Edit Source.

A screenshot showing a blue button below the footer of a page that reads "Edit Source"

Pages created from layoutsLink to this section

No users can edit the complete source code of pages created from layouts (Layout Control Files [LCFs]), though those with access can edit the head code on pages created from layouts.

Only level 9 and 10 users (administrators) can edit head code, by default. Level 10 users can grant access to level 1 through 8 users and restrict access to level 9s via user settings.

Add HTML that will be inserted into the <head> of the page. Head code is typically used for page metadata and tracking. You can also add custom CSS and JavaScript for the page. To add custom CSS that will apply to all pages created from layouts, go to Layout Builder > Styles > Custom CSS.

Edit the code that will be placed into the <head> of your page as follows:

  1. Go to Content > Pages.
  2. Click to open the LCF page you want to edit.
  3. Click Properties in the page actions toolbar.
  4. Click Head Code.
  5. Enter code in the source editor.
  6. Save and Publish.

Toolbar and Shortcuts

The source editor has its own toolbar, different from the What You See Is What You Get (WYSIWYG) toolbar.

A toolbar labeled with the following options: Save (1), Save As (2), forward and back arrows (3), a magnifying glass (4), an arrow in a circle (5), an arrow pointing down and back (6), a link icon (7), two cycling arrows (8), Syntax dropdown (9), Theme dropdown (10), and a large and small uppercase A (11).

  1. Save: Save your changes and exit the source editor. To save without exiting the editor, use Ctrl+S (PC) or Cmd+S (Mac).
  2. Save As: Save a copy.
  3. Undo/Redo
  4. Find/Replace: Search the source code content, and/or replace what you're searching for. This field accepts regular expression (regex).
  5. Go To Line: Enter a line number in the text field, click Go, and the cursor is taken to that line.
  6. Line Wrap: Enable or disable text wrapping.
  7. Insert File Path: Insert a path to another page.
  8. Insert Asset: Insert a path to an asset.
  9. Syntax: Select the syntax formatting and highlighting based on the code type. The available languages are: None, HTML, XML, CSS, JavaScript, PHP, Python, VBScript, Perl, SQL, and C#.
  10. Theme: Select a theme that changes the colors of the text and background.
  11. Increase/Decrease Font Size

Use the following shortcuts in the source code editor:

  • Ctrl (Windows)/Cmd (Mac) + S: Save the text onto the staging server but remain in the editor and make further changes.
  • Ctrl/Cmd + A: Select all text in the editor.
  • Ctrl/Cmd + D: Delete the entire line of text on which the cursor is currently placed.
  • Ctrl/Cmd + Z: Undo the last change.
  • Ctrl/Cmd + Y: Redo the last undone change.
  • Ctrl/Cmd + F: Bring up the Find and Replace tool.
  • Ctrl/Cmd + /: Comment out the currently-selected line(s) of text. This function is syntax-specific; the format of the comment depends on the language selected in the "Syntax" dropdown menu.
  • Shift + Tab: Auto-indent all selected text according to the nesting of elements.
  • Ctrl/Cmd + [: Indent all selected text by one tab less.
  • Ctrl/Cmd + ]: Indent all selected text by one tab more.
  • Ctrl + Q: Fold the element on the current line, hiding child elements and other content, making the code easier to read.

Other Features

The source editor provides autocomplete suggestions as you type, depending on the syntax you select:

  • JavaScript: JS-related methods/syntax
  • HTML: HTML nodes/attributes
  • XML (PCF, TCF, TMPL, and XSL): Proprietary OU nodes/attributes such as <ouc:div> and <ouc:editor>, HTML nodes/attributes, and common XSL nodes/attributes.
  • CSS: CSS properties/pseudo classes

You can drag from the Images and YouTube Gadgets into source code as you would in the WYSIWYG editor. Adding an image or video via these gadgets inserts a simple <img> or <iframe> tag. Then you manually add description, alignment, or dimensions.

Related Content
Related Content

By continuing to use this site, you agree to the storing of first- and third-party cookies on your device to enhance site navigation; analyze site, product, and service usage; and assist in our marketing and promotional efforts. Cookie Policy