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"> is displayed with text orange and centred, a dotted orange line on top but no other borders or text before.)

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

/* Specific to type and block label 'xyz' */
.psml-content div.label-xyz {
  font-style: italic;
  color:      orange;
  text-align: center;
  border-top: 2px dotted orange;
  border-bottom: none;
  border-left: none;
  border-right: none;
}
.psml-content div.label-xyz::before {
  content: none;
}

For this style to only appear in the document view and not the editor use:

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

/* Specific to type and block label 'xyz' */
.psml-document div.label-xyz {
  font-style: italic;
  color:      orange;
  text-align: center;
  border-top: 2px dotted orange;
  border-bottom: none;
  border-left: none;
  border-right: none;
}
.psml-document div.label-xyz::before {
  content: none;
}

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

This example can be deployed using the Dev > Document config page.

Created on , last edited on