Commit | Line | Data |
---|---|---|
7d8ac5b7 J |
1 | {literal} |
2 | <style> | |
3 | .crm-wci-widget { | |
4 | font-size:12px; | |
5 | font-family:Helvetica, Arial, sans; | |
6 | padding:6px; | |
7 | -moz-border-radius: 4px; | |
8 | -webkit-border-radius: 4px; | |
9 | -khtml-border-radius: 4px; | |
10 | border-radius: 4px; | |
11 | border:1px solid #96C0E7; | |
851c37a8 J |
12 | background-color: {/literal}{$wciform.color_widget_bg}{literal}; /* background color */ |
13 | border-color:{/literal}{$wciform.color_border}{literal}; /* border color */ | |
14 | background: {/literal}{if $wciform.image}url('{$wciform.image}'){/if}{literal}; /* background image */ | |
7d8ac5b7 J |
15 | } |
16 | ||
17 | .crm-wci-widget.thin { | |
18 | width: 150px; | |
19 | } | |
20 | ||
21 | .crm-wci-widget.normal { | |
22 | width: 200px; | |
23 | } | |
24 | ||
25 | .crm-wci-widget.wide { | |
26 | width: 250px; | |
27 | } | |
28 | ||
29 | .crm-wci-widget h5 { | |
30 | font-size:14px; | |
31 | padding:3px; | |
32 | margin: 0px; | |
33 | text-align:center; | |
34 | -moz-border-radius: 4px; | |
35 | -webkit-border-radius: 4px; | |
36 | -khtml-border-radius: 4px; | |
37 | border-radius: 4px; | |
851c37a8 J |
38 | color: {/literal}{$wciform.color_title}{literal}; |
39 | background-color: {/literal}{$wciform.color_title_bg}{literal}; | |
40 | } /* title */ | |
7d8ac5b7 J |
41 | |
42 | .crm-wci-widget .crm-amounts { | |
43 | height:1em; | |
44 | margin:.8em 0px; | |
45 | font-size:13px; | |
46 | } | |
47 | .crm-wci-widget .crm-amount-low { | |
48 | float:left; | |
49 | } | |
50 | .crm-wci-widget .crm-amount-high { | |
51 | float:right; | |
52 | } | |
53 | .crm-wci-widget .crm-percentage { | |
54 | margin:0px 30%; | |
55 | text-align:center; | |
56 | } | |
851c37a8 | 57 | .crm-wci-widget .crm-amount-bar { /* progress bar */ |
7d8ac5b7 J |
58 | background-color:#FFF; |
59 | width:100%; | |
60 | display:block; | |
61 | border:1px solid #CECECE; | |
62 | -moz-border-radius: 4px; | |
63 | -webkit-border-radius: 4px; | |
64 | -khtml-border-radius: 4px; | |
65 | border-radius: 4px; | |
66 | margin-bottom:.8em; | |
67 | text-align:left; | |
851c37a8 J |
68 | |
69 | background-color:{/literal}{$wciform.color_bar}{literal}; | |
70 | border-color:#CECECE; | |
7d8ac5b7 J |
71 | } |
72 | .crm-wci-widget .crm-amount-fill { | |
73 | background-color:#2786C2; | |
74 | height:1em; | |
75 | display:block; | |
76 | -moz-border-radius: 4px 0px 0px 4px; | |
77 | -webkit-border-radius: 4px 0px 0px 4px; | |
78 | -khtml-border-radius: 4px 0px 0px 4px; | |
79 | border-radius: 4px 0px 0px 4px; | |
80 | text-align:left; | |
81 | width: {/literal}{$wciform.pb_percentage}{literal}%; /* progress bar percentage */ | |
82 | } | |
83 | .crm-wci-widget .crm-amount-raised-wrapper { | |
84 | margin-bottom:.8em; | |
85 | } | |
86 | .crm-wci-widget .crm-amount-raised { | |
87 | font-weight:bold; | |
851c37a8 | 88 | color:#000; |
7d8ac5b7 J |
89 | } |
90 | ||
91 | .crm-wci-widget .crm-logo { | |
92 | text-align:center; | |
93 | } | |
94 | ||
95 | .crm-wci-widget .crm-comments, | |
96 | .crm-wci-widget .crm-donors, | |
97 | .crm-wci-widget .crm-campaign { | |
98 | font-size:11px; | |
99 | margin-bottom:.8em; | |
851c37a8 | 100 | color:{/literal}{$wciform.color_description}{literal} /* other color*/ |
7d8ac5b7 J |
101 | } |
102 | ||
103 | .crm-wci-widget .crm-wci-button { | |
104 | display:block; | |
105 | background-color:#CECECE; | |
106 | -moz-border-radius: 4px; | |
107 | -webkit-border-radius: 4px; | |
108 | -khtml-border-radius: 4px; | |
109 | border-radius: 4px; | |
110 | text-align:center; | |
111 | margin:0px 10% .8em 10%; | |
112 | text-decoration:none; | |
113 | color:#556C82; | |
114 | padding:2px; | |
115 | font-size:13px; | |
116 | } | |
117 | ||
118 | .crm-wci-widget .crm-home-url { | |
119 | text-decoration:none; | |
120 | border:0px; | |
851c37a8 | 121 | color:{/literal}{$wciform.color_homepage_link}{literal} /* home page link color*/ |
7d8ac5b7 J |
122 | } |
123 | ||
7d8ac5b7 J |
124 | .crm-wci-widget a.crm-wci-button { /* button color */ |
125 | background-color:{/literal}{$wciform.color_button_bg}{literal}; | |
126 | } | |
127 | ||
128 | .crm-wci-widget .crm-wci-button-inner { /* button text color */ | |
129 | padding:2px; | |
130 | display:block; | |
131 | color:{/literal}{$wciform.color_button}{literal}; | |
132 | } | |
133 | ||
7d8ac5b7 | 134 | </style> |
851c37a8 | 135 | |
7d8ac5b7 J |
136 | <style> |
137 | {/literal} | |
138 | {$wciform.style_rules} | |
139 | {literal} | |
140 | </style> | |
141 | {/literal} | |
142 | ||
851c37a8 J |
143 | <div id="crm_wid_{$wciform.widgetId}" class="crm-wci-widget {$wciform.size_variant}"> |
144 | <h5 id="crm_wid_{$wciform.widgetId}_title"> | |
7d8ac5b7 J |
145 | {if $wciform.logo_image} |
146 | <span class="crm-logo"> | |
147 | <img src="{$wciform.logo_image}" alt={ts}Logo{/ts}> | |
148 | </span> | |
149 | {/if} | |
150 | {$wciform.title} | |
151 | </h5> | |
152 | <div class="crm-amounts"> | |
851c37a8 J |
153 | <div id="crm_wid_{$wciform.widgetId}_amt_hi" class="crm-amount-high"></div> |
154 | <div id="crm_wid_{$wciform.widgetId}_amt_low" class="crm-amount-low"></div> | |
155 | <div id="crm_wid_{$wciform.widgetId}_percentage" class="crm-percentage"></div> | |
7d8ac5b7 J |
156 | </div> |
157 | <div class="crm-amount-bar"> | |
851c37a8 | 158 | <div class="crm-amount-fill" id="crm_wid_{$wciform.widgetId}_amt_fill"></div> |
7d8ac5b7 | 159 | </div> |
851c37a8 | 160 | <div id="crm_wid_{$wciform.widgetId}_donors" class="crm-donors"> |
7d8ac5b7 | 161 | </div> |
851c37a8 | 162 | <div id="crm_wid_{$wciform.widgetId}_comments" class="crm-comments"> |
7d8ac5b7 J |
163 | {$wciform.description} |
164 | </div> | |
851c37a8 | 165 | <div id="crm_wid_{$wciform.widgetId}_campaign" class="crm-campaign"> |
7d8ac5b7 | 166 | </div> |
851c37a8 J |
167 | <div class="crm-wci-button-wrapper" id="crm_wid_{$wciform.widgetId}_button"> |
168 | <a href='{crmURL p="civicrm/contribute/transact" q="reset=1&id=$cpageId" h=0 a=1 fe=1}' class="crm-wci-button"><span class="crm-wci-button-inner" id="crm_wid_{$wciform.widgetId}_btn_txt">{$wciform.button_title}</span></a> | |
7d8ac5b7 J |
169 | </div> |
170 | </div> |