Design Templates

To start it is advisable to duplicate one of the 2 existent templates and play around with it. A template is divided into four parts. All parts have a background, padding, margin and border section. These can be styled using CSS (Cascading Style Sheets). See explanations on CSS below.

Please be aware that for designing a descent template having some HTML & CSS knowledge is highly recommended.

Head Section

In the Head section, you may choose to insert an Image, like your logo or a portrait. This image will be linked to your concrete5 website. The following settings can be made concerning the header image:

  • The size of the image:
    • Changing the width value will automatically calculate the height value and vice versa.
  • The position of the image in the head container:
    • Left
    • Center
    • Right
  • The position of the whole header relative to the mail container
    • Top
    • Right
    • Bottom
    • Left


Body and Footer Section

The following settings can be made here:

  • Background color and minimum height
  • Padding
  • Margin
  • Borders


There are 5 different headers which can be used in the rich text editor inside the Newsletters. Here you can style them as follows:

  • Font family
  • Font weight
  • Font size
  • Font color
  • Padding
  • Margin

CSS Explanations

CSS is used to style the parts of the template. Templates can be styled using the CSS units pixel or percent. The CSS-commands being used in are explained below.

Text styling is made inside the rich text editor of concrete5. Please refer to the Editors Guide of concrete5.



Padding is the distance between the container and the inner content. 
In this example the padding is as follows:
  • Padding Top: 5 Pixels
  • Padding Right: 10 Pixels
  • Padding Bottom: 15 Pixels
  • Padding Left: 20 Pixels



Margin is the distance between the container and its parent container, in our case this would be the email body.
In this example the margin is as follows:
  • Margin Top: 5 Pixels
  • Margin Right: 10 Pixels
  • Margin Bottom: 15 Pixels
  • Margin Left: 20 Pixels

Minimum height


The minimum height defines the height a container must have. If the content is bigger than this height, the height will be adapted automatically.
In this example the minimum height is as follows:
  • Minimum height: 75 Pixels



Borders may have width defined in pixels. They can be on top, right, bottom or left side of the container. The following styles are allowed:



The position of an element is in relation to it's parent container in that case the mail container.



There are 5 headers defined in the rich text editor of concrete5 (in HTML generally there are 6 of them). You may define font family, style, color, weight, padding and margin of them.

Units Following CSS units are allowed:
pixels or percents.
  • PixelsIn digital imaging, a pixel, pel, or picture element is a physical point in a raster image, or the smallest addressable element in an all points addressable display device ... Read more. [1]
  • PercentThe percentage CSS data types represent a percentage value. Many CSS properties can take percentage values, often to define sizes in terms of parent objects ... Read more. [2]
[1] Reference: Wikipedia
[2] Reference: Mozilla Developer Network