blob: 5bc7faa66aaa0ef9a46e7141abf7fb0b86fdf8c8 (
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
[%
# 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_file = "email-logo.gif"
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_gunmetal
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_background_color_dontknow = color_yellow
button_text_color = color_black
button_text_color_fixed = color_white
button_text_color_notfixed = color_white
button_text_color_dontknow = color_black
button_font_weight = "bold"
text_input_border_color = "#999";
submit_footer_td_style = "text-align: left; vertical-align: top; font-weight: normal; color: #000;"
submit_footer_h2_style = "font-size: 16px; line-height: 18px; margin: 0 0 10px 0;";
submit_footer_link_style = "color: #9CD0EA;";
%]
[% # 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 = table_reset
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;"
wrapper_max_width = 620 # in pixels without "px" suffix
wrapper_min_width = 520 # in pixels without "px" suffix
hint_min_width = wrapper_min_width - (column_padding * 2)
hint_style = "min-width: ${ hint_min_width }px; padding: ${ column_padding }px; color: $body_text_color; font-size: 12px; line-height: 18px;"
warning_style = "min-width: ${ hint_min_width }x; padding: ${ column_padding }px; background-color: $color_red_dark; color: $color_white;"
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%;"
contact_admin_links_style = "display: block;"
rss_meta_style = "padding: 5px ${ column_padding }px; vertical-align: top; background-color: $secondary_column_background_color; color: $secondary_column_text_color; border-bottom: 1px solid $column_divider_color; font-size: 14px;"
text_input_style = "padding: 0.5em 0.75em; border-radius: 0.3em; border: 1px solid $text_input_border_color; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; width: 30em; max-width: 100%; margin-top: 0.5em; font-size: 1em;";
# 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;"
dontknow_button_style = "$button_style border-color: $button_background_color_dontknow; background-color: $button_background_color_dontknow; color: $button_text_color_dontknow; 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 %]
|
