Tutorials

Task-driven tutorials and recipes for PageSeeder

How to change the display of PSML using CSS

Skills requiredCSS
Time required (minutes)15
Intended audienceDeveloper
DifficultyEasy
CategoryDocument

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

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 a document

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.

Create custom stylesheet

When in the project “movie”,  go to the Dev tab and select the Document config option.;

Click Create in the style column for “review”, this will create the following file:

/woconfig/movie/psml/review/document.css

This contains the CSS styles to be applied when displaying a document that has @type="review".

Customizes the styles

The styles for documents of type “review” can now be customized.

Edit “document.css” in the developer editor;

To ensure that the default styles are imported, include the following statement:

@import url(../../../../weborganic/document/css/psml-content.css);

Add the following content:

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

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 may 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 straight forward 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;

Foundation styles that provide basic typography;

The default PageSeeder styles defined in “psml-content.css” (unless the file is not imported, as described in the previous step);

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

Created on , last edited on