Guide

The end-user 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.

Location

Custom styles for PSML documents are located in:

/woconfig/[project]/psml/[documenttype]/

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

Styles depend on the HTML markup of PSML content.

Warning!

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

Structure

For PSML structural elements are, PageSeeder uses the following

PSMLHTML ElementCSS Selector
<document><article>.psml-document
<section><section>.psml-document section
Any fragment<div>.fragment
<fragment><div>.psml-fragment
<properties-fragment><div>.psml-properties-fragment
<xref-fragment><div>.psml-xref-fragment
<media-fragment><div>.psml-media-fragment

Before 5.8

Deprecation warning!

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

PSMLHTML ElementCSS Selector
<document><article>article
<section><section>section
Any fragment<div>.ps-editcontent
<properties-fragment><div>.psml-properties
<xref-fragment><div>.psml-xrefs

Identifiers

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

PSMLHTMLCSS selector
<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.

Content

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
<para><p>p
<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
<list><ul>ul
<nlist><ol>ol
<item><li>li
<preformat><pre>pre
<block label="A"><div class="label-a">.label-a
<inline label="B"><span class="label-b">.label-b

Note

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.

Example

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