Converting OUC Nodes

In replacement of the standard commented div and editor tags, nodes can be used. There are a variety of benefits to this, including:

  1. Increased validation of the document. With the use of nodes, the document becomes fully XML valid.
  2. The ability to change the layout of the WYSIWYG in-context editing based on a Page Properties defining the layout.
  3. Pre-configuration for future use.

To use ouc nodes, updates need to be made to the XSLs, including:

  1. An additional template match, which passes a wysiwyg-class attribute to the div tag. This is used for the in-context editing.
  2. A variable for identifying the class to be passed.
  3. Updates to the XPaths. Since the tags are now actual nodes, they need to be included in the XPaths.
  4. Update to the main document template match identifying the root node of the document.

For the purposes of this tutorial, assume those changes have already been made.

Updating the PCF

Navigate to the create-new-page.pcf file and make a copy of it with the name create-new-page-div.pcf. Open this new document.

Start by changing the pcf-stylesheet declaration to point to default-oucdiv.xsl

<?xml version="1.0" encoding="utf-8"?>
<?pcf-stylesheet path="/_resources/xsl/default-oucdiv.xsl" extension="html" title="Web"?>
<?pcf-stylesheet path="/_resources/xsl/page2pdf.xsl" extension="pdf" alternate="yes" title="PDF"?>
<!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">

Then add a namespace to the root node. This is used because ouc: will be added to the new nodes. Namespaces provide a method to avoid element name conflicts, and whenever a new namespace is used within a file, the use of that namespace needs to be declared, along with a URI to the schema for the namespace. This URI is called a namespace name.

Update the <document> node to read as:

<document xmlns:ouc="http://omniupdate.com/XSL/Variables">

Replace all commented OmniUpdate tags with a node: <ouc:NAME>.

  • <!-- ouc:properties --> becomes <ouc:properties>
  • <!-- /ouc:properties --> becomes </ouc:properties>
  • <!-- ouc:div --> becomes <ouc:div>
  • <!-- /ouc:div --> becomes </ouc:div>
  • <!-- ouc:editor --> becomes <ouc:editor>
  • <!-- /ouc:editor --> becomes </ouc:editor>

Leave all attributes alone. They will remain the same.

Save the page. The preview should appear exactly the same as it did before the edits. Essentially the page has been converted to use the <ouc:NAME> tags.

WYSIWYG-CLASS

In order to take full advantage of the new nodes, the wysiwyg-class attribute can be used. The wysiwyg-class attribute allows for the CSS applied to the editable region’s WYSIWYG Editor to change based on a Page Property. It also allows one CSS file to be used for all editable regions with multiple body tags that include classes defining the editable region in order for the background image and margins to change appropriately.

The wysiwyg-class attribute can be added to <ouc:div> tag via the XSL and the <ouc:editor> tag. The attribute from within the <ouc:editor> tag is used to give static information to the CSS file. For instance, if there are multiple editable regions, the attribute will identify the region and therefore the body CSS that should be applied to the editor. In this case, the class will be added to the <ouc:editor> tag for the title.

Within the create-new-page.pcf file, find the editor tag for the title, and change the CSS file to pt-oucdiv.css. Also add wysiwyg-class="title".

<ouc:editor csspath="/_resources/ou/editor/pt-oucdiv.css" cssmenu="/_resources/ou/editor/pt-styles.txt" width="1042" toolbar="Title Toolbar" wysiwyg-class="title" />

Also update the editor tag for the main content area to point to the new CSS file. 

<ouc:editor csspath="/_resources/ou/editor/pt-oucdiv.css" cssmenu="/_resources/ou/editor/pt-styles.txt" width="1042"/>

Save the changes. The preview should appear as expected based on the page's configuration. 

Creating the Variable CSS

To see the background of the file change based on the editable region and the page layout, the CSS file needs to be configured.

The body selectors already in use will be combined into one file, and classes will be applied, allowing the editor to pull the correct body background based on the wysiwyg-class attribute values. This example will have five.

  1. A default one column layout
  2. A content layout
  3. A title layout for one column pages
  4. A title layout for content pages

The CSS file will be configured as follows:

@import url("/_resources/css/main.css");
 
body {
      background-image: url("/_resources/ou/editor/pt-onecolumn.jpg");
      background-repeat: no-repeat;
      margin: 214px 17px 200px 11px;
      min-width:0px;
      font-family: Arial,"Helvetica Neue",Helvetica,Geneva,sans-serif;
       background-color: #EEEEEE;
      color:#4B4A4A;
      text-align: left !important;
      line-height: 20px;
}
body.content {
      background-image: url("/_resources/ou/editor/pt-twocolumn.jpg");
      background-repeat: no-repeat;
      margin: 214px 17px 0px 352px;
      min-width:0px;
      font-family: Arial,"Helvetica Neue",Helvetica,Geneva,sans-serif;
       background-color: #EEEEEE;
      color:#4B4A4A;
      text-align: left !important;
      line-height: 20px;
}
 
body.title.onecolumn {
        background-image: url("/_resources/ou/editor/pt-onecolumn-title.jpg");
        background-repeat: no-repeat;
        margin: 168px 17px 0 11px;
        padding: 12px 0 10px;
        min-width:0px;
        font-family: Georgia,"Times New Roman",Times,serif;
        font-size:28px;
        text-rendering: optimizelegibility;
        border-bottom: 1px solid #C9C9C9;
        background-color: #EEEEEE;
        color:#4B4B4B;
        text-align: left !important;
        line-height: 20px;
}
body.title.content {
      background-image: url("/_resources/ou/editor/pt-twocolumn-title.jpg");
      background-repeat: no-repeat;
      margin: 214px 17px 0px 352px;
      min-width:0px;
      font-family: Arial,"Helvetica Neue",Helvetica,Geneva,sans-serif;
       background-color: #EEEEEE;
      color:#4B4A4A;
      text-align: left !important;
      line-height: 20px;
}
p {
    margin: 0 0 20px;
}
p, li, blockquote {
    line-height: 1.4em;
}
h1, h2, h3, h4, h5, h6 {
    border-bottom: 1px solid #C9C9C9;
    margin: 0 0 10px;
    padding: 12px 0 10px;
}
h1, h2, h3, h4, h5, h6 {
    color: #4B4B4B;
    font-family: Georgia,"Times New Roman",Times,serif;
    text-rendering: optimizelegibility;
}
main.css
h3 {
    font-size: 24px;
}

Take note that the body selectors have different classes applied to each, except the first. The first one is the default. This is used when classes are not being applied or do not exist in the CSS file.

Note: If a page is not checked out to a user when he/she enters into an editable region, the class will not be passed, and the default body selector will be used. It is valuable to check out the page prior to editing in order to ensure the proper CSS is being applied to the editor.

After saving the file, upload it to the /_resources/ou/editor folder and publish it.

Test the page by editing different editable regions and changing the Page Properties.

The page is now using the ouc nodes and corresponding CSS. Save this page as a TMPL in order to use it to create new pages. Remember that TCFs may need to be updated to point to the new TMPL if it has a new name.