Configuration manual for PageSeeder

PSML document styles (CSS)

The document.css is a CSS stylesheet used to present PSML documents in the user interface. It can be used to customize the display of content in PageSeeder.


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);


To format content, styles depend on the HTML markup generated from PSML. Generally the HTML is stable, but from time to time it evolves along with the PageSeeder server.


Where document.css has been modified, always review the formatting after a PageSeeder upgrade. 


PSML structural elements are mapped as follows:

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


See bottom of page for information regarding PageSeeder versions before 5.8.


To format particular sections or fragments, use the following rules:

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

These selectors no longer work for transcluded or embedded content, instead use the fragment type.


Because PSML content will appear under the psml-content class, prefix CSS selectors with .psml-content

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


Where the same name has been used as both a block and inline label, differentiate them with the CSS element selector.


* remember to include .psml-content with these selectors. 

Styles in different contexts

There can be many reasons for formatting content one way for viewing and a different way for editing.

For styles to appear in the document view only use:


For styles to appear in both the document view and editor use:



Following is some sample code for the PSML properties editor.  To use this, replace details with the name of the fragment type to be formatted.

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

Before ver 5.8

Deprecation warning!

Previous versions of PageSeeder use the following rules in the document view:

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

Where custom CSS has been used with previous versions of PageSeeder, check carefully after upgrading. 

Created on , last edited on