CSS is short for Cascading Style Sheets. The CSS defines how your skin design looks on the page. That is your fonts, font sizes, colors, etc. All mono D4 skin designs are built with and 100% controlled by CSS. There are no graphic elements - which means that everything in the design can be manipulated by changing the CSS.

Inside the mono tool, CSS can be modified and added in the custom CSS-field found under "site settings". Please note that changing or adding CSS affects your whole site - so it you should be confident with your CSS skills or have a professional help you. Note that mono doesn't support any custom added CSS should you run into trouble with it.

You can read more about CSS here.

Customize everything!

As mentioned above you can change almost anything in D4 designs through CSS. In most cases you might just want to adjust the color and/or font to fit the visual identity of your business. However you can get advanced with CSS if you prefer - for example you can even change the complete design of a particular module to fit a special need.

In the CSS library, we've created a resource of commonly used 'ready-to-paste-in' CSS code snippets to make it very easy for CSS experts and non-experts alike to manipulate their skin-design.

See the CSS library here.

If you need more extensive changes we suggest you to hook up with a front-end expert that has extensive CSS-knowledge.

Using Google Fonts

mono offers a broad palette of different font-types in the available skins. However, it is also possible to use fonts from Google. However, be aware that Google fonts may display in different ways on the different skin designs. So just note that mono can only support the fonts available in our originial skins if you run into issues.

Once inserted on your page, you may have to regulate the behavior of the Google font by adjusting the CSS in the particular skin - especially with regards to line height and size etc. In most cases though, Google fonts will replace the native skin font one-to-one without need for adjustments.

Read more about Google Fonts here.

Here´s how you do it

In this example we want to use the Google font 'Kite One' on the site. Find the font code on the Google Fonts page and then copy the code from Google Fonts:

<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'> 

Paste the code into the 'Global HTML Tags'-field (under site settings) in the mono editor like shown below:

Now place the code below in the Custom CSS code area like shown below

.contentArea .h1 {
color: #333;
font-weight: 400;
font-family: Kite One, sans-serif;
font-size: 65px;

Note that the text will not look like 'Kite One' when you are in edit-mode inside the site builder. Google fonts (in this case Kite One) will only be displayed correctly on your live website (when you publish the site).

After inserting the font-code you may adjust the font behaviour through CSS. You can control the font size, font-weight and color like illustrated below.

You can use this css code to change .h2 . .h3 and so forth.

Change the sub heading

.contentArea .h2 {
color: #333;
font-weight: 400;
font-family: Kite One, sans-serif;
font-size: 30px;

Or the Preamble

.h4 p {
color: #333;
font-weight: 400;
font-family: Kite One, sans-serif;
font-size: 32px;
line-height: 32px;