Sep 262014
 

Introduction

Say you’re building a page in Weblingo or WebReports. Like most pages in Content Server, it probably contains a table to layout the data. Now you’re staring at the screen and asking yourself: How do I make this look like a Content Server page?

Almost every page in Content Server is rendered with a table in one of two styles. Variations exists, of course, but they’re all more or less:

  • a list view, which summarizes a grouping of related items (e.g., browse view, audit data, etc.); or
  • a detail (or “property”) view, which provides details on a specific item (e.g., General tab, Records Detail tab, etc.); forms are usually rendered in this style as well.

Let’s look at a screenshot of each.

List View

An audit tab lists events in a table:

Detail View

A general tab displays information about a node, but also contains a few form elements:

These types of pages in Content Server are often a mashup of nested tables, inline styles, external CSS, and superfluous table and image elements to add separator lines or padding. It’s often a variation of something like this:

<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
    <TR VALIGN="top">
        <TD CLASS="tblBackground" WIDTH="100%">
            <TABLE WIDTH="100%" BORDER="0" CELLSPACING="1" CELLPADDING="0">
                <TR>
                    <TD class="tblForeground">
                        <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">
                            <TR>
                                <TD> ... </TD>
                                <TD CLASS="labelVerticalDividerRight" BACKGROUND="`ing`tbl-divider-ver.gif" STYLE="background-repeat: repeat-y;">
                                    <IMG HEIGHT="1" ALT="" SRC="`img`spacer.gif" WIDTH="2" BORDER="0">
                                </TD>
                                <TD> ... </TD>
                            </TR>
                        </TABLE>
                    </TD>
                </TR>
            </TABLE>
        </TD>
    </TR>
</TABLE>

I don’t understand why it’s done this way, but I believe one reason is to add a shadow effect behind the table. Whatever the reason, it’s complex and difficult to work with. Much of it can be simplified.

This blog post introduces a cascading style sheet (CSS), which can be used to easily render a table in a style consistent with Content Server. The stylesheet is compatible with RHTemplate (introduced in Part III), but also with WebReports and WebLingo.

The Stylesheet

RHCore includes a CSS stylesheet named rhcore.css. The stylesheet simplifies the styling of many standard Content Server components, but also contains a number of presentational style classes (e.g., alignRight, floatLeft, width100, etc.) for quick and easy formatting. There is some debate whether presentational style classes are good practice or not, but I won’t get into that here.

Let’s look at how the stylesheet can be used to render a list and detail view:

List Views

A list view rendered with rhcore.css looks something like the following. In the example we are using RHTemplate, but something similar could be done with WebReports or WebLingo:

<table class="rhtable rhstriped">
    <thead>
        <tr>
            <td class="minWidth">{% usemacro sortheader "subtype" "Type" %}</td>
            <td class="width70">{% usemacro sortheader "name" "Name" %}</td>
            <td class="alignRight">{% usemacro sortheader "size" "Size" %}</td>
            <td class="alignCenter">{% usemacro sortheader "modifydate" "Modified" %}</td>
        </tr>
    </thead>    
    <tbody>
        {% for child in node.children|sort:request.sort %}
            <tr>
                <td>{{ child.img }}</td>
                <td>{% usemacro browselink child %}</td>
                <td class="alignRight nowrap">{{ child.size }}</td>
                <td class="alignCenter nowrap">{{ child.modifydate|date }} ({{ child.modifydate|timesince }})</td>
            </tr>
        {% endfor %}
    </tbody>
</table>

This renders a table like this:

The main style is applied by the rhtable class, which cascades various styling rules to the table and its elements. Namely, it:

  • adds a border around the table;
  • sets a grey background on the header row;
  • adds a line below the header to separate it from the rows;
  • removes the underline on the header sort links; and
  • sets padding within the cells.

Additional presentational styles are used to do specific formatting:

  • rhstriped – alternates the row colours;
  • minWidth – sets the width to 1%;
  • width70 – sets the width to 70%;
  • alignRight – aligns the cell contents to the right;
  • alignCenter – aligns the cell contents in the centre; and
  • nowrap – prevents wrapping of the cell contents.

Now let’s look at detail views.

Detail Views

Detail views (which I also refer to as property views) are also easy to render with rhcore.css:

<table class="rhtable rhproperties">
    <tbody>
        <tr>
            <td>Key A:</td>
            <td>Value A</td>
        </tr>
        <tr>
            <td>Key B:</td>
            <td>Value B</td>
        </tr>
    </tbody>
</table>

This renders something as follows:

The rhtable class applies all the rules as described before, but we’ve now added the rhproperties class. This class adds the following:

  • a grey background on the odd numbered columns; and
  • a border around the cells.

The rhproperties class also supports multiple columns, which is easy to apply by just adding more cells to the row:

<table class="rhtable rhproperties">
    <tbody>
        <tr>
            <td>Key A:</td>
            <td>Value A</td>
            <td>Key B:</td>
            <td>Value B</td>
        </tr>
        <tr>
            <td>Key C:</td>
            <td>Value C</td>
            <td>Key D:</td>
            <td>Value D</td>
        </tr>
    </tbody>
</table>

This renders as follows:

You can also add a button bar with a <tfoot> section:

<tfoot>
    <tr class="buttonBar">
        <td colspan="4">
            <input type="submit" value="Save" />
            <input type="reset" />
        </td>
    </tr>
</tfoot>

Wrapping Up

I find the stylesheet extremely useful since it allows me to quickly create tables without the fuss of hardcoded inline styles or deeply nested tables. The source is also highly readable, which makes it easy to debug and maintain. How easy is that?

Questions or comments about what you read here? Please leave a comment below.

Need help developing for Content Server or interested in using RHCore? Contact me at cmeyer@rhouse.ch.

  4 Responses to “Part XI: Page Styles in OpenText Content Server”

  1. Chris, does rhstriped honor the user’s color settings?

  2. Hi Chris. Is it possible to get a copy of your CSS file for these styles? I would find this a great help when developing WebReports.
    Kind regards, Tony.

    • Hi Tony, I hadn’t considered releasing the CSS separate from RHCore itself. But why not? There will be some superfluous styles in there, which are for specific RHCore widgets. You can edit them out or just ignore them. Send me an e-mail at chris@rhouse.ch and I’ll set you up.

 Leave a Reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)