Third Level Tagging

In-Context Editing Overview

In-context editing (aka third-level tagging) provides a technique for customizing the WYSIWYG Editor to use CSS to add in a background image in order have it mimic the look of the final product.  

Terminology

  • Tagging: The process that HTML comments with OU-specific syntax are placed into a page.
  • Level 1 Tagging: A level of tagging where no editing CSS is used; HTML is edited with the basic, browser-provided styles.
  • Level 2 Tagging: Editing CSS is used to ensure the correct font faces and sizes are displayed in the editor, as well as custom CSS classes.
  • Level 3 Tagging: Editing CSS is expanded to include a doctored screenshot used as a background image in the editor.

Create a Screenshot

The first step in this process is to take a screen shot of the template that is going to be tagged. Then using your preferred image editing program, make several versions of the screen shot each with the content from one region removed. At this point, fading the images slightly will make them appear more as backgrounds to the editable region. Upload these images to server.

Create the CSS

Open the source code for the template being edited. After every <!-- com.omniupdate.div --> tag add a <!-- com.omniupdate.editor --> tag. This tag tells the WYSIWYG editor that the region has third level tagging. The parameters of this tag tell the editor where to look for the styling of the region. The parameters needed here are csspath, which lists the path to the css file detailing the position and styles of the region, and width which tells the editor how wide the editor should be when editing the page. It is a best practice to make the editor as wide as the backgrounds for the regions.

After inserting the tag and its parameters, the css file must be created.  In the folder listed in the value of csspath, create a css file. The only element that is required to be styled is the body. The styles that are required are the margin, which determines where in the editor the editable region is, the background, which will place the image you created earlier as the background of the editor, and the width, which tells the editor how wide the region is.

For more information, visit the Customizing the Styles Drop-down page.

Add any other styles that are needed for the body or any other tags. Then save the css file, edit the region and check for any adjustments that are needed. Then repeat the process for every region in the template.