DirectEdit Button


The DirectEdit button is the button or link on each page of the live site on which users can click in order to access OU Campus and begin editing pages. When a user clicks this link and logs in, the user is provided direct access to editing the page in OU Campus on the staging server. The DirectEdit link is determined by template design and included with a new implementation. The DirectEdit configuration requires that JavaScript be in place, additional code in the XSL, and an identifier where the link should be included.

Example of DirectEdit Link

Last Updated

Keep in mind that the system allows for as much or as little flexibility as desired. In some cases, it may be desired to force users to always use the DirectEdit link to access a page to be edited. This would minimize the need for assigning permissions at a very granular level to the directories housing the pages. Granting access to only the directories containing the pages they should be editing limits the number of groups that may need to be created, but it also limits a user’s ability to navigate through the folder structure to pages to edit.

Relation to Account Settings

At the account level, the Login Page fields work in conjunction with the DirectEdit login to control the authentication method used when logging in to OU Campus. If an institution uses CAS or Shibboleth for authentication, users are first directed to the URL defined in the account settings when they initially click the DirectEdit link. If this setting is not defined for an account, the standard OU Campus Login page is used. The Announcement URL field of the account settings can be used to customize the Login page.

Setting up DirectEdit

  1. In addition to the account level settings, DirectEdit for a site can be configured, which provides a selection of the type to use and also allows for code to be used to style the link, which overrides the standard button.
  2. Navigate to Setup > Sites
  3. Locate the desired site, if multiple sites are available.
  4. Hover over the site row and click Edit
  5. Scroll to the panel or select DirectEdit Button from the left panel. 
  6. Choose a Button Type and, if necessary, provide custom CSS for the Button Code.
  7. Click Save.

Example of DirectEdit Panel Settings

DirectEdit Button

Button Type

Determines if a button is used and where the button is located. The options are as follows:

  • None: The None button type will not add a DirectEdit button to the bottom of each page. All DirectEdit buttons/links (including the button code) are disabled. Only used if there should not be any DirectEdit links for the site.
  • Standard: The Standard button type without an additional definition in the Button Code field uses the OU icon as the DirectEdit log in link. Can be used in conjunction with the Button Code field to override the OU icon with styling, an image, and text.

OU Icon for DirectEdit


  • Transparent: Adds a predefined transparent GIF as the DirectEdit button. The following image shows the result of a cursor hovering over a DirectEdit button that has been defined as a transparent GIF:

Transparent Gif Example

Button Code

The button code can be an image or other text. For example, here is an example of a text link that includes the last updated date:

DirectEdit Example

The standard last updated date link can be configured with the following code:

<a href="^0" target="_top" rel="nofollow">Last Updated ^2</a>

This can be interpreted as identifies what on the screen is the DirectEdit link (e.g., Last Updated [DATE]). It is configured as a link and includes an href of ^0, which is what takes the user to the current page for editing within OU Campus. There is a 256 character limit for the button code.

Button Code Reference

Button Code Description

This part of the href indicates that this is the DirectEdit link and will take the user to the login page.


The use of this indicates the complete URL path. This is generally used in back-end code only.


This formats the date that appears on the page as month/day/year format (e.g., 1/1/11).


This formats the the date as a three character month, day, and year (e.g., Jan 1, 2011).

Another example of a the button code used to style the DirectEdit link:

<a id="direct-edit" style="color: #9C9C9C; text-decoration: none;" href="^0" rel="nofollow">&nbsp;Last Updated ^2</a>