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.
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:
- The position of the whole header relative to the mail container
Body and Footer Section
The following settings can be made here:
- Background color and minimum height
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
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.
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
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
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:
- 1px width
- 2px width
- 3px width
- 4px width
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.
 Reference: Wikipedia Reference: Mozilla Developer Network
- Pixels: In 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. 
- Percent: The 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.