6.3Customizing richtext and branding

Within the q-custom.css style adjustments are available for richtext elements. Also a branding logo could be definded appearing on top of the background on the cmsWorks editors desktop.

The q-custom.css is fully qualified as:

<cmsWorks-installdir>/htdocs/webui/cmsdesk.custom/<myCustomerName>/q-custom.css

Customizing the richtext in the richtext editor

Customizing the richtext elements targets size and coloring of headlines, defining line-heights and distances between elements or special layout adjustments for links or lists.

/* Richtext styles examples */
.richtext p {
  margin: 5px 0; /* setting a distance between paragraphs*/
}
.richtext p a { /* setting the links of the richtext to black and underlined */
  color: inherit;
  text-decoration: underline;
}
.richtext h2 { /* Adjusting the Headline2 definitions */
  margin: 4px 0;
  font-size: 1.25rem;
  color: #ed7529;
}
.richtext h3 { /* Adjusting the Headline3 definitions */
  margin: 4px 0;
  font-size: 1em;
  color: #ed7529;
}
.richtext ul { /* Setting styles for unordered lists */
  margin: 0 0 0 20px;
  list-style-type: square;
  padding: 0;
}
.richtext ol { /* Setting styles for ordered lists */
  margin: 0 0 0 20px;
  list-style-type: decimal;
  padding: 0;
}

Styling a table in the richtext editor is possible, too:

.richtext table.taSty tr.taStyHead td { font-weight: bold; font-style: italic; font-size: 1.2em; }
.richtext table.taSty { background-color: #ec722a; }

Remember to define the in here used styles ("taSty", "taStyHead", ...) in your q-custom.js richtext configuration section.

Event if there would be a whish to style the richtext of a special property from a special document individually, there could be

.richtext.dtcontentpage.ptmetadescription p { /* setting the paragraph style only for the special field */
  font-family: "Courier"
  background: #ccc;
}

This would only target the field metadescription of the document type contentpage.

Usage of classes: .richtext.dt<documenttypename>.pt<propertytypename>

Adding a branding logo

Add the following css into the q-custom.css. And save the logo file beside the q-custom.css

.deskbg .logo {
  position: absolute;
  top: 10px; /* positioning */
  right: 10px;
  left: initial;
  bottom: initial;
  width: 400px; /* dimension */
  height: 509px;
  background: url(logo.gif) no-repeat center center; /* place the logo right beside the q-custom.css file*/
  opacity: 0.4;
}