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 centered, a dotted orange line on top but no other borders)

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

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

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 by editing the CSS when on the following page: Project dashboard > Template > Types

Custom block style

In this example, we use a darker background color for a warning block (<block label="warning"> )

/* Custom warnings */
.psml-content div.label-warning {
  background: #d42132 !important;
  color: white;
  border: none;
}

/* Also change the label name color */
.psml-content div.label-warning::before {
  color: white !important;
}

/* This allows code to be more readable */
.psml-content div.label-warning code {
  background-color: rgba(0,0,0,.25);
  color: white;
}

/* Don't forget the dark theme */
@media (prefers-color-scheme: dark) {
  .psml-content div.label-warning {
    background: #713f00 !important;
  }
}

Section styling

The following example sets a different background for an entire section (<section label="info"> )

#section-info {
  background: repeating-linear-gradient(
    135deg, #f3f3e7, #f3f3e7 4px, #fff 4px, #fff 8px
  );
  border: 3px solid #f3f3e7;
  padding: 1rem;
}

#section-info::before {
  border-bottom: 3px solid #7732;
  color: #773;
  content: 'Section below cannot be edited';
  display: block;
  font-size: 18px;
  margin-bottom: 1rem;
  padding-bottom: 1rem; 
  text-align: center;
}