Sample Code

Some code samples

CSS sample code

Custom document styles

Here are some styles that could be applied to particular content in a document (in this example, a <block label="xyz">)

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

/* Specific to type and section id 'xyz' */
.psml-document div.label-xyz {
  font-style: italic;
  color:      orange;
  text-align: center;
  border-top: 2px dotted orange;
}

For further information regarding the customized display of content in PageSeeder, see How to change the display of PSML using CSS and for further reference regarding PageSeeder CSS, see PSML document styles (CSS)

Custom styles for a UI component

A stub to add style to a UI component. By convention, the content of each UI component (page, block, etc.) is wrapped in a div which ID is prefix by 'ps-content-' followed by the ID of the component. This can be used to filter the rules that apply to this component only.

/**
 * Custom styles for component ID 'XXX'
 */
#ps-content-XXX {
}

#ps-content-XXX p {
}

Created on , last edited on