Configuration manual for PageSeeder

PSML document style

The document.css is a CSS stylesheet that can be used to customise the style of PSML documents should be displayed in the user interface.


Custom styles for PSML documents are located in:


The document CSS will override the defaults styles including the default PSML styles, so it generally a good idea to import the default styles using the import rule below:

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


Styles depend on the HTML markup of PSML content.


While the HTML markup is generally stable, it changes from time to time, please review you CSS rules after upgrading.


For PSML structural elements are, PageSeeder uses the following

PSMLHTML ElementCSS Selector
<section><section>.psml-document section
Any fragment<div>.fragment

Before 5.8

Deprecation warning!

Previous versions of PageSeeder uses the different rules in the document view

PSMLHTML ElementCSS Selector
Any fragment<div>.ps-editcontent


To use rules on particular sections of fragments, use the following.

<section id="X"><section id="section-X">#section-X
<fragment id="Y"><div id="fragment-Y">#fragment-Y

These selectors are no longer available for transcluded or embedded content. Only the fragment type can be used.


All PSML content will appear under the psml-content class, so all CSS selector should be prefixed by .psml-content (even if it is not displayed in table below).

PSMLHTML ElementCSS Selector
<heading level="1"><h1>h1
<heading level="2"><h2>h2
<heading level="3"><h3>h3
<heading level="4"><h4>h4
<heading level="5"><h5>h5
<heading level="6"><h6>h6
<block label="A"><div class="label-a">.label-a
<inline label="B"><span class="label-b">.label-b


If the same label name is used as a block label and an inline label, you may need to use the CSS element selector to differentiate them.

Styles in different contexts

In some cases, it is desirable to use slightly different styles when viewing the document in the user interface and when editing or vice versa. The easiest way to achieve this is to use a mix of CSS selectors.

The .psml-document selector is used for the entire document, but it isn't used when editing a single fragment, so for styles in view mode only, the following prefix would ensure that would not appear during editing:

.psml-document .psml-content



Below is an example CSS to format fragments using the PSML Label Values editor (just replace 'details' with your fragment type).

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

/* PSML Label Values richtext */
.psml-content div.label-richtext {
    background: none repeat scroll 0 0 #E7E7E7; border: medium none;
    clear: both; float: left; font-family: Century Gothic; font-weight: bold;
    font-size: 11pt; color: #333333; width: 100%;
.psml-content div.label-richtext:before {
    content: "";
.psml-content div.label-richtext div[data-label] {
    background: none repeat scroll 0 0 #FFFFFF; border: medium none;
    font-family: Cambria; font-weight: normal; color: #000
.psml-content div.label-richtext div[data-label]:before {
    content: "";
/* Repeat rules below for each PSML Label Values fragment type */
.psml-content div[data-type=details] > p {
  clear: both; float: left; width: 100%; max-width: 800px; color: #333333;
  border: 1px solid #d7d7d7; text-align:right; background: #E7E7E7; font-size: 11pt;
  margin:0; border-bottom: none; font-family: Century Gothic; font-weight: bold;
.psml-content div[data-type=details] > p:last-child  {
  border-bottom: 1px solid #d7d7d7;
.psml-content div[data-type=details] > p span[data-label] {
  float: right; display: block;width: 380px; border: none; font-family: Cambria,Georgia; 
  border-left: 1px solid #d7d7d7; border-radius: 0; text-align:left; font-weight: normal;
  font-weight: normal; color: #000; background: white; margin-left: 8px
.psml-content div[data-type=details] > p span[data-label]:before {content: ''}
.psml-content div[data-type=details] > p span[data-label] a.xref {clear: both; float: left;}

Created on , last edited on