Customizing Editable Region Buttons

Editable Region Buttons Overview

An editable region button is used to provide a user-friendly label for an editable region within a page. Any number of editable regions can be created on a page. A few of the frequently used page divisions that are made editable:

  • Top navigation
  • Header
  • Footer
  • Main content region
  • Left navigation
  • Right navigation (also called the sidenav or local navigation)

The system by default includes editable region buttons that are pre-styled. For example:

Editable Region Button

The editable regions themselves are created within an <ouc:div> and usually the <ouc:editor> tag is used to include editing capability with the WYSIWYG Editor. Several attributes are available for these tags that can be used to customize the editing experience for the end user:

  • button
  • button-class
  • button-color
  • button-text
  • wysiwyg-editor

Prior to OU Campus 9.15.10, the button attribute was used to specify GIF buttons for editable regions. For example: button="707" provided a generic edit button.

Editable Region Button

After the release of version 10, the use of GIFs was deprecated, but in order to support existing implementations and button styling, the button attribute is still supported. The equivalent buttons are rendered using CSS. For example, if the button="707" is used with v10, the following edit button is provided:

Editable Region Button

Also, if the button attribute is inadvertently omitted without providing another method of styling buttons, the 707 button is used by default.

The following screenshot shows several examples of editable region buttons, which make the various regions of the page independently editable.

Editable Region Button