How to change the display of PSML using CSS

Objective

PSML documents are rendered as HTML when displayed to end-users in both PageSeeder and Berlioz. This tutorial explains how to customize the presentation of documents using CSS styles.

This tutorial explains how to create and customize styles for the document type of “review” in the “movie” project while working in the “test” group.

Prerequisites

This tutorial assumes that:

• The student knows how to create a document.
• The student knows how to create a document type.
• The student has a member role of administrator.

All tutorial files are on Github .

Tutorial

Create the document type

Create a document type of “review”, see How to create a new document type.

Do this in the “movie” project. Create a group called “test” and add yourself as a member.

Create custom stylesheet

Go to the Template configuration page, click the Create link for your document type in the Style column:

It opens the code editor panel titled document.css

Customizes the styles

The styles your document type can now be customized.

Edit ‘document.css’ in the code editor panel and add the following content:

.document-type-movie_information .psml-content h1 { 
  color: blueviolet
}
.document-type-movie_information .psml-content h2 {
  background: yellow
}
.document-type-movie_information .psml-content p {
  border: 1px dotted charcoal
}

Create a document check

In the test group, create a new document and select “review” as the type. This document is needed to test the updated styles.

Edit the document content so that it includes:

• a heading level 1;
• a heading level 2;
• multiple paragraphs.

View the updated format to confirm the following changes:

• heading level one should appear 'blueviolet';
• heading level two should have a yellow background;
• the paragraphs should have a dotted dark gray border.

Understanding more

CSS is a big, fast-moving  topic. The following points might help to provide additional context or direction.

PSML to HTML

By default, PageSeeder uses a standard PSML to HTML transformation to present documents in the browser. The styles are applied to this HTML, not the PSML used to generate it.

The mapping between PSML and HTML is straightforward and documented in the article on PSML document styles (CSS).

Order of styles

Styles are applied to the HTML in the following order:

Styles builtin to the browser

The Default PageSeeder styles that provide basic typography

The default PageSeeder styles defined in psml-content.css

Styles specific to a document type, like those described in this tutorial