Creating Editable Regions & WYSIWYG Styling

Size: px

Start display at page:

Download "Creating Editable Regions & WYSIWYG Styling"

Rosa Lane
5 years ago
Views:

Now that the initial PCF has been created, the file needs to be updated so that it can be edited. To do this, editable regions are created using custom code.

1 Now that the initial PCF has been created, the file needs to be updated so that it can be edited. To do this, editable regions are created using custom code. Additionally, the regions can be styled so that it contains in-context CSS for editing from within the WYSIWYG Editor. To begin creating the editable region, start by opening the file in the Source Code Editor. After the opening <content> tag, add the following:  Then, right before the closing </content> tag, add the following:  This defines the editable region. Example attributes are shown below: 1. Label: Provides a unique label for the editable region. It must be unique to the page, but it does not have to match the containing node's name 2. Group: Defines the group of uses who can edit this editable region. 3. Button: Defines the edit button that should appear on the screen. 4. Break: Defines a line break following the button. For a list of all available attributes, visit the Support site, and navigate to Development > Page Tagging > Page Tagging Reference. Once the defined tags are added, save the page, and click the Edit button. Above the main content area, a green edit button should now be displayed. Page 1 of 11

It is possible to have more than one editable region. Very often, the editable regions correspond with specific XPaths, but they do not have to. They need to be included within the XPaths.

2 It is possible to have more than one editable region. Very often, the editable regions correspond with specific XPaths, but they do not have to. They need to be included within the XPaths. In this case, two editable regions are created for the main content area. One is for the title, and the other for the actual content region. 1. Open the page in the Source Code Editor. 2. After the opening <content> tag, add the following:  3. Right before the editable region tag created in the exercise above, add the following:  4. Move the <h2> tags to right before the new opening div tag, and right after the closing div tag. <h2 class="h-color-link"> </h2> Page 2 of 11

-- /ouc:div --></h2> To test the updates, click Edit, and there will be two Edit buttons: one for the title, and one for the main content area.

3 5. Move the title to between the opening and closing div tags. <h2 class="h-color-link"> Creating a New Page </h2> To test the updates, click Edit, and there will be two Edit buttons: one for the title, and one for the main content area. Adding In-Context Styling to the WYSIWYG Editor Now that the editable regions have been created, click the Edit Main Content Area button. When it opens, notice that the title no longer appears because it is in another editable region, and there is no styling applied to the WYSIWYG Editor. The background is white, and the text shows no resemblance to the actual page s text. Page 3 of 11

To add in-context styling to the WYSIWYG Editor, the files need to first be prepped. Creating In-Context Editing Files One of the first things to do is to create the background image.

4 To add in-context styling to the WYSIWYG Editor, the files need to first be prepped. Creating In-Context Editing Files One of the first things to do is to create the background image. The easiest way to do this is to remove content from the editable region that will ultimately be the area being edited with this background image. Then on preview of the page, take a screenshot of the page without the footer, and use image editing software to fade it out using the opacity settings. It may be necessary, given the background image, and proximity of the footer to the content area, to add paragraph breaks with no content to create a larger empty background area. Page 4 of 11

5 A different image should be created for editable regions that should appear differently. Next is to create the CSS file for the editable region. At a minimum, this file should import the main CSS files, and it should have a body tag that references the image just created, as well as contains margins necessary to align the text that will be added on the background image with where it will actually appear on the page. The file can also include special classes that should appear in the WYSIWYG Editor. These classes may be those that will be added to the Styles drop-down. Setting the margins can be done using the Layout option of the browser s inspect tool or the image editor used to create the background image. It is possible that some trial and error may occur as well. Page 5 of 11

6 @import url("/_resources/css/main.css"); body { background-image: url("/_resources/ou/editor/pt-onecolumn.jpg"); background-repeat: no-repeat; margin: 185px 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; } p {padding: px 0; } Save the CSS file as pt-onecolumn.css and upload it, and the background image pt-onecolumn.jpg to the /_resources/ou/editor folder in. The CSS file needs to be published to production. Adding the Editor Tag to the Editable Regions Now that the files have been created, the editable regions can be added to the PCF. Navigate back to the PCF, and open the page in the Source Code Editor. Start by adding the editor tag to the main content area. After the opening div tag for the main content area (the one with label="maincontent" ), add the following:  This tag includes: 1. csspath: The path to the CSS file for the WYSIWYG Editor. 2. cssmenu: The path to the text file defining the classes available in the Styles drop-down. Formatting of this file and requirements for its use will be described shortly. 3. width: The width of the WYSIWYG Editor s area. Additional attributes are available and are listed on the Page Tagging Reference page. Save the changes, and edit the main content region. Notice the newly added background image and how the text aligns appropriately to provide in-context editing. Page 6 of 11

7 For the title, a very simplistic toolbar will be added to the editor tag. Because the title s styling is being added outside the editable region (remember the <h2> tags were added outside the editable region s div tags), and the CSS for the editable region should be updated to include the styling for the header so that it displays as expected in the WYSIWYG Editor. Follow the steps that were taken for the main content area to obtain the background image and to create the CSS file for the editable region. Upload and save the CSS file as pt-onecolumn-title.css, and the background image pt-onecolumn-title.jpg, and make sure to publish the CSS file. Page 7 of 11

$Editable Region CSS @import url("/_resources/css/main.css"); body { background-image: url("/_resources/ou/editor/pt-onecolumntitle.$

8 Editable Region url("/_resources/css/main.css"); body { background-image: url("/_resources/ou/editor/pt-onecolumntitle.jpg"); background-repeat: no-repeat; margin: 130px 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; } Then add the following after the opening div tag for the title area (with label="pageheader" ).  In this case, cssmenu was not defined, as there will be no Styles drop-down, but a toolbar was defined in order to restrict the tools available to all users. This toolbar already exists for the workshop. The only tools included in this example toolbar include Save, Auto-Draft, and Spell Check. Save the page, and then Edit the title area. The background image should appear, along with a restrictive toolbar, and the proper styling for the title once it is entered. Page 8 of 11

This is because while the file has been declared, it has not actually been created. The file is a simple text file.

9 Creating the Style Drop-Down File The background images, WYSIWYG CSS files, and specialized toolbar have all be defined and declared. Earlier, though, a file was declared for the cssmenu attribute in the main content s editable region. However, currently nothing appears in the Styles drop-down. This is because while the file has been declared, it has not actually been created. The file is a simple text file. It includes any classes desired for the drop-down, a friendly name, and a block declaration if it is meant to be a block-level element. The classes should be in both the CSS for the editable region, and the CSS for the site. NOTE: If the class is not associated with any other identifiers in the site s CSS, such as an id attribute or the body tag, it may not need to be included in the editable region s CSS. Simply test the results before adding the style to the editable region s CSS. To format the text file for the Styles drop-down, first navigate to the existing file styles.txt in the / _resources/ou/editor directory. Copy it to the same directory, and rename it to pt-styles.txt. Add the class name,.quote, a single tab, and a friendly name for the drop-down. The quote class should be applied as a block-level element, so add another single tab, and then the word block. Add one class per line. Remove the header classes..yellow.green.quote Yellow Green Quote block Save the file, it does not need to be published. Test that everything is functioning as expected by going to the PCF and editing the main content area. The Stylesdrop-down should display now with Yellow, Green, and Quote. Page 9 of 11

10 Test the application of the styles by selecting text and applying the styles. Page 10 of 11

11 Page 11 of 11

Getting Started with CSS Sculptor 3

Getting Started with CSS Sculptor 3 With CSS Sculptor, you can quickly create a cross-browser compatible layout with custom widths, margins, padding, background images and more. Additionally, you can use