silverstripe-framework/docs/en/reference/typography.md

Typography

Introduction

SilverStripe lets you customise the style of content in the CMS.

Usage

This is done by setting up a CSS file called (projectname)/css/typography.css.

You also need to create a file called (projectname)/css/editor.css with the following content:

:::css
/**	
 * This support file is used to style the WYSIWYG editor in the CMS
 */

@import "typography.css";

body.mceContentBody {
	min-height: 200px;
	font-size: 62.5%;
}
body.mceContentBody a.broken {
	background-color: #FF7B71;
	border: 1px red solid;
}

In typography.css you can define styles of any of the tags that will get created by the editor:

• P, BLOCKQUOTE
• H1-6
• UL, OL, LI
• TABLE
• STRONG, EM, U
• A

It's important to realise that this CSS file is included directly into the CMS system, and if you aren't careful, you can alter the styling of other parts of the interface. While this is novel, it can be dangerous and is probably not what you're after.

The way around this is to limit all your styling selectors to elements inside something with class="typography". The other half of this is to put class="typography" onto any area in your template where you would like the styling to be applied.

WRONG

:::css
CSS:
h1, h2 {
  color: #F77;
}

Template:
<div>
$Content
</div>

RIGHT

:::css
CSS:
.typography h1, .typography h2 {
  color: #F77;
}

Template:
<div class="typography">
$Content
</div>

If you would to include different styles for different sections of your site, you can use class names the same as the name of the data fields. This example sets up different paragraph styles for 2 HTML editor fields called Content and OtherContent:

:::css
.Content.typography p {
  font-size: 12px;
}

.OtherContent.typography p {
  font-size: 10px;
}

Removing the typography class

Sometimes, it's not enough to add a class, you also want to remove the typography class. You can use the [api:HTMLEditorField] method setCSSClass.

This example sets another CSS class typographybis:

:::php
function getCMSFields() {
        ...
        $htmleditor = new HTMLEditorField("ContentBis", "Content Bis");
	$htmleditor->setCSSClass('typographybis');
	$fields->addFieldToTab("Root.Content.Main", $htmleditor);
	...
        return $fields;
}

Note: This functionality will be available in the version 2.0.2 of the CMS.