Tutorials

Task-driven tutorials and recipes for PageSeeder

How to customize the style of PSML documents

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 CSS styles in PageSeeder for a PSML document.

In this tutorial we will create and customize the styles for the document type 'review' in the 'movie' project and work within the 'movie-test' project.

Prerequisites

This tutorial assumes that:

All the files for this tutorial are on Github .

Tutorial

Create the document type 'review'

Create a document type named 'review', see How to create a new document type.

Create a document of type 'review'

This step is only necessary to test your styles.

Create a new document of type 'review' in the group 'movie-test';

Edit the content of the document so that it includes

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

Create custom stylesheet for 'review'

Go to the files of project 'movie' in developer tools (select the 'Document config' option in the 'dev' menu of PageSeeder);

Click Create in the style column in the row for 'review', which will create the file:

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

This CSS file will be applied automatically whenever a document of type 'review' is viewed.

Customizes the styles

We can now edit the styles for documents of type 'review'.

Edit 'document.css' in the developer editor;

In order to import the default styles, make sure that the content includes:

@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 }

Check that any changes have taken effect by viewing the document created earlier:

the heading level one should appear 'blueviolet';

the heading level two should have a yellow background;

the paragraphs should have a dotted dark gray border.

Going further

PSML to HTML

By default, PageSeeder uses a standard PSML to HTML transformation to generate the HTML that is displayed in the browser. The styles are applied to generated HTML.

The mapping between PSML and HTML is relatively straight forward and documented in the article on PSML document style.

Styles

Several sets of styles are applied to the HTML in the following order:

Browser builtin styles;

Foundation styles providing basic typography;

PageSeeder PSML standard styles defined in psml-content.css (these can be removed if this file is not imported in the previous step);

Styles specific to the document type.

Created on , last edited on