blob: d94466c02fa95c2d7f5e6c8adc7afff10b6f8603 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
[%
# The default colours.
color_blue = "#0F87C5"
color_blue_darker = "#00527C"
color_blue_pale = "#D6E2EB"
color_grey = "#D2D2D2"
color_gunmetal = "#42494C"
color_gunmetal_light = "#81959D"
color_yellow = "#FDD008"
color_red_dark = "#ce2626"
color_green_dark = "#39a515"
color_black = "#000000"
color_white = "#ffffff"
link_text_color = color_blue
link_hover_text_color = color_blue_darker
body_background_color = color_gunmetal
body_font_family = "Helvetica, Arial, sans-serif"
body_text_color = color_gunmetal_light
header_background_color = color_yellow
header_text_color = color_black
header_padding = "15px 20px" # a full CSS padding property (eg: top/right/bottom/left)
logo_width = "192" # pixel measurement, but without 'px' suffix
logo_height = "35" # pixel measurement, but without 'px' suffix
logo_font_size = "24px"
primary_column_background_color = color_white
primary_column_text_color = color_black
secondary_column_background_color = color_blue_pale
secondary_column_text_color = color_black
column_divider_color = color_grey
column_padding = "20" # a single CSS pixel measurement without the "px" suffix
preview_photo_border = "1px solid rgba(0,0,0,0.1)"
list_item_border_bottom = "1px solid $color_grey"
button_border_radius = "4px" # a full CSS border-radius property
button_background_color = color_yellow
button_background_color_fixed = color_green_dark
button_background_color_notfixed = color_red_dark
button_text_color = color_black
button_text_color_fixed = color_white
button_text_color_notfixed = color_white
button_font_weight = "bold"
%]
[% # Handy point at which your cobrand can override any of those default colours before the rest of the settings are constructed. %]
[% TRY %][% PROCESS '_email_color_overrides.html' %][% CATCH file %][% END %]
[%
# Variables used inside the email templates.
table_reset = 'cellspacing="0" cellpadding="0" border="0" width="100%"'
wrapper_table = 'cellspacing="0" cellpadding="5" border="0" width="100%"'
link_style = "color: $link_text_color;"
link_hover_style = "text-decoration: none; color: $link_hover_text_color;"
td_style = "font-family: $body_font_family; font-size: 16px; line-height: 21px; font-weight: normal; text-align: left;"
body_style = "margin: 0;"
wrapper_style = "$td_style background: $body_background_color; color: $body_text_color;"
hint_style = "padding: ${ column_padding }px 0; color: $body_text_color; font-size: 12px; line-height: 18px;"
header_style = "padding: $header_padding; background: $header_background_color; color: $header_text_color;"
only_column_style = "padding: ${ column_padding }px; vertical-align: top; background-color: $primary_column_background_color; color: $primary_column_text_color;"
primary_column_style = "vertical-align: top; width: 50%; background-color: $primary_column_background_color; color: $primary_column_text_color;"
secondary_column_style = "vertical-align: top; width: 50%; background-color: $secondary_column_background_color; color: $secondary_column_text_color; border-left: 1px solid $column_divider_color;"
# Use these to add padding inside primary and secondary columns.
start_padded_box = '<table cellspacing="0" cellpadding="' _ column_padding _ '" border="0" width="100%"><tr><th style="' _ td_style _ '">'
end_padded_box = '</th></tr></table>'
logo_style = "font-size: $logo_font_size; line-height: ${ logo_height }px; vertical-align: middle;"
h1_style = "margin: 0 0 20px 0; font-size: 28px; line-height: 30px;"
h2_style = "margin: 0 0 20px 0; font-size: 21px; line-height: 24px;"
p_style = "margin: 0 0 0.8em 0;"
secondary_p_style = "font-size: 14px; line-height: 20px; $p_style"
preview_photo_style = "display: block; margin: 0 0 1em 1em; border: $preview_photo_border;"
map_image_style = "display: block; width: 100%; height: auto;"
list_item_style = "padding-bottom: 20px; margin-bottom: 20px; border-bottom: $list_item_border_bottom;"
list_item_h2_style = "margin: 0 0 16px 0; font-size: 21px; line-height: 24px;"
list_item_p_style = "margin: 0 0 16px 0;"
list_item_date_style = "font-size: 14px; line-height: 20px; margin: 0; color: $color_gunmetal_light;"
list_item_photo_style = "float: right; margin: 0 0 1em 1em; border: none;"
contact_meta_style = "padding: 15px ${ column_padding }px; vertical-align: top; background-color: $secondary_column_background_color; border-bottom: 1px solid $column_divider_color;"
contact_th_style = "vertical-align: top; padding: 0.4em 1em 0 0; white-space: nowrap; text-align: left;"
contact_td_style = "vertical-align: top; padding: 0.4em 0 0.4em 0; width: 100%;"
# The below is so the buttons work okay in Outlook: https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design
button_style = "display: inline-block; border: 10px solid $button_background_color; border-width: 10px 15px; border-radius: $button_border_radius; background-color: $button_background_color; color: $button_text_color; font-size: 18px; line-height: 21px; font-weight: $button_font_weight; text-decoration: underline;"
fixed_button_style = "$button_style border-color: $button_background_color_fixed; background-color: $button_background_color_fixed; color: $button_text_color_fixed; margin: 0 0.2em;"
notfixed_button_style = "$button_style border-color: $button_background_color_notfixed; background-color: $button_background_color_notfixed; color: $button_text_color_notfixed; margin: 0 0.2em;"
%]
[% # Handy point at which your cobrand can override any of the constructed variables before they are sent to the templates. %]
[% TRY %][% PROCESS '_email_setting_overrides.html' %][% CATCH file %][% END %]
|
