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

Install the document type 'review'

Working in the project 'movie', copy the document template in the 'review' folder of the project. The following file will be in your project:

/template/movie/psml/review/document-template.psml

Create a document of type 'review'

This step is only necessary to test your styles.

Create a new document 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 'project files' option in the 'dev' menu of PageSeeder);

Create the following file:

/woconfig/movie/css/review.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 'review.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