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:
- 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
- Padding
- Margin
- Borders
Headers
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
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Explanation
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
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Explanation
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
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Explanation
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
Border top 3 pixels wide, solid style, color white.
Border right 3 pixels wide, solid style, color white.
Border bottom 3 pixels wide, solid style, color white.
Border left 3 pixels wide, solid style, color white.
Explanation
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:
- none
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
- initial
- 1px width
- 2px width
- 3px width
- 4px width
- ...
Positioning
Element is positioned as follows: 15 pixels from the top, 10 pixels from right.
Element is positioned as follows: 15 pixels from the bottom, 10 pixels from left.
Element is positioned as follows: 15 pixels from the top, 10 pixels from left.
Element is positioned as follows: 15 pixels from the bottom, 10 pixels from right.
Explanation
The position of an element is in relation to it's parent container in that case the mail container.
Headers
Header 1: Font family Arial, font size 22 pixels, font weight bold, font style normal, color red, padding top, left, bottom, right 10 pixels, margin same
Header 2: Font family Times New Roman, font size 20 pixels, font weight 300, font style italic, color white, padding top, left, bottom, right 15 pixels, margin same
Header 3: Font family Ubuntu, font size 18 pixels, font weight 700, font style oblique, color white, padding top, left, bottom, right 30 pixels, margin same
Header 4: Font family Helvetica, font size 16 pixels, font weight 400, font style normal, color yellow, padding top, left, bottom, right 4 pixels, margin same
Header 5: Same as header 4, except the font size is 14 pixels
Explanation
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.
- 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. [1]
- 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. [2]
[1] Reference: Wikipedia[2] Reference: Mozilla Developer Network