# Page Styles

RHCore includes a cascading style sheet (CSS) to render tables in a style consistent with Content Server. The stylesheet can be used in any HTML rendering context (RHTemplate, WebLingo, WebReports, etc.).

The stylesheet also contains a number of helper classes (e.g., alignRight, floatLeft, width100, etc.) for formatting.

The stylesheet is located at support/rhcore/core/rhcore.css. An alternative support/rhcore/core/rhcore-16.2.6.css is included that adheres to some of the UI changes in CS 16.2.6.

# List Views

A list view can be rendered with rhcore.css and looks something like the following:

<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 as follows:

The main style is applied by the rhtable class, which cascades various styling rules to the table and its child 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 center; and
• nowrap - prevents wrapping of the cell contents.

# Detail Views

Detail views (or property views) are also possible:

<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 as follows:

The rhproperties class supports multiple columns by adding additional columns:

<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:

A button bar can be added with a <tfoot> section:

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