KB78621129: WebCenter - How to create a valid XHTML page for static text customization

Description

In WebCenter, the Admin user can use different tools to customize WebCenter on the Customization page. One of the options offered on this page, is Static Text customization. In this case a specific section in WebCenter can be replaced by your own HTML page, containing text and images. For a more detailed description, see: help.esko.com.

The problem that occurs often is that people fail to upload a valid XHTML file and receive an error at upload time. If the file is directly uploaded to the Web Server, this could even result in a broken page. Another re-occurring issue is failing to encode special characters. This may result in a broken page or a page with missing characters (possibly replaced by a question mark, square, etc.).

This article provides a few tips to avoid common mistakes.

Procedure

Starting from scratch

If you start from scratch, you could use the following template to get going:

<html>
<head>
    <title>my custom static text page</title>
    <style type="text/css">
        .container {height:100%;margin-top:10px;}
        .textarea {font-family:Verdana;font-size:12px;color:#000000;}
        .imagearea {border:thin grey;margin-top:20px;}
    </style>
</head>
<body>
<div class="container">
    <div class="textarea">
        <p>Welcome to WebCenter!</p>
    </div>
    <div class="imagesarea">
        <img src="images/WebCenter-banner.png" alt="logo"/>
    </div>
</div>
</body>
</html>

Copy this to a basic text or XML editor, for example Notepad++.
Change the text "Welcome to WebCenter!" to your own text.
Optionally change the image source (the image needs to be accessible to the Web Server).
Save the file as .html
Check your file for any mistakes (see: Checking your file).
Upload the file as a static text section and save your customization.

Preventing encoding issues

If you are using text containing special characters, you will first need to encode these characters to avoid problems later on. There are some handy online tools available to do so.

Search for "XML Encoder".

For example, if you would encode the following text:

Nous ne sommes nous qu'aux yeux des autres et c'est à partir du regard des autres que nous nous assumons comme nous.

The result is:

Nous ne sommes nous qu&#39;aux yeux des autres et c&#39;est &#224; partir du regard des autres que nous nous assumons comme nous.

Note that all special characters have been converted to special codes. You will now be able to use this text in your HTML file.

Checking your file

Besides encoding problems, there can be other problems with your file, for example small mistakes in the syntax. To make sure your HTML page is valid XHTML, it is recommended to use an online validator such as W3C's to check for any errors before you upload it to WebCenter (see: validator.w3.org).

An example of a mistake that could be detected easily using a validator:

...
<div class="container">
    <div class="textarea">
        <p>Welcome to WebCenter!</p>
		<p>Another paragraph<p>
    </div>
    <div class="imagesarea">
        <img src="images/WebCenter-banner.png" alt="logo"/>
    </div>
</div>
...

Since the paragraph "Another paragraph" is not properly closed (should end with </p> instead of <p>), the validator shows the following errors together with line numbers:

document type does not allow element "p" here

end tag for "p" omitted

This points you clearly in the direction of the mistake.

Article information
Applies to	WebCenter 12.1
Created	6-Dec-13
Last revised	11-Dec-13
Author	DEKE
CW Number	202637

Contents