3 .crm-contribute-widget {
5 font-family:Helvetica, Arial, sans;
7 -moz-border-radius: 4px;
8 -webkit-border-radius: 4px;
9 -khtml-border-radius: 4px;
11 border:1px solid #96C0E7;
14 .crm-contribute-widget h5 {
19 -moz-border-radius: 4px;
20 -webkit-border-radius: 4px;
21 -khtml-border-radius: 4px;
24 .crm-contribute-widget .crm-amounts {
29 .crm-contribute-widget .crm-amount-low {
32 .crm-contribute-widget .crm-amount-high {
35 .crm-contribute-widget .crm-percentage {
39 .crm-contribute-widget .crm-amount-bar {
40 background-color:#FFF;
43 border:1px solid #CECECE;
44 -moz-border-radius: 4px;
45 -webkit-border-radius: 4px;
46 -khtml-border-radius: 4px;
51 .crm-contribute-widget .crm-amount-fill {
52 background-color:#2786C2;
55 -moz-border-radius: 4px 0px 0px 4px;
56 -webkit-border-radius: 4px 0px 0px 4px;
57 -khtml-border-radius: 4px 0px 0px 4px;
58 border-radius: 4px 0px 0px 4px;
61 .crm-contribute-widget .crm-amount-raised-wrapper {
64 .crm-contribute-widget .crm-amount-raised {
67 .crm-contribute-widget .crm-logo {
70 .crm-contribute-widget .crm-comments,
71 .crm-contribute-widget .crm-donors,
72 .crm-contribute-widget .crm-campaign {
76 .crm-contribute-widget .crm-contribute-button {
78 background-color:#CECECE;
79 -moz-border-radius: 4px;
80 -webkit-border-radius: 4px;
81 -khtml-border-radius: 4px;
84 margin:0px 10% .8em 10%;
90 .crm-contribute-widget .crm-home-url {
96 .crm-contribute-widget {
97 background-color: {/literal}{$form.color_main.value}{literal}; /* background color */
98 border-color:{/literal}{$form.color_bg.value}{literal}; /* border color */
100 .crm-contribute-widget h5 {
101 color: {/literal}{$form.color_title.value}{literal};
102 background-color: {/literal}{$form.color_main_bg.value}{literal};
104 .crm-contribute-widget .crm-amount-raised { color:#000; }
105 .crm-contribute-widget .crm-amount-fill {
106 background-color:{/literal}{$form.color_bar.value}{literal};
108 .crm-contribute-widget a.crm-contribute-button { /* button color */
109 background-color:{/literal}{$form.color_button.value}{literal};
111 .crm-contribute-widget .crm-contribute-button-inner { /* button text color */
114 color:{/literal}{$form.color_about_link.value}{literal};
116 .crm-contribute-widget .crm-comments,
117 .crm-contribute-widget .crm-donors,
118 .crm-contribute-widget .crm-campaign {
119 color:{/literal}{$form.color_main_text.value}{literal} /* other color*/
121 .crm-contribute-widget .crm-home-url {
122 color:{/literal}{$form.color_homepage_link.value}{literal} /* home page link color*/
126 <div id="crm_cpid_{$cpageId}" class="crm-contribute-widget">
127 <h5 id="crm_cpid_{$cpageId}_title"></h5>
128 <div class="crm-amounts">
129 <div id="crm_cpid_{$cpageId}_amt_hi" class="crm-amount-high"></div>
130 <div id="crm_cpid_{$cpageId}_amt_low" class="crm-amount-low"></div>
131 <div id="crm_cpid_{$cpageId}_percentage" class="crm-percentage"></div>
133 <div class="crm-amount-bar">
134 <div class="crm-amount-fill" id="crm_cpid_{$cpageId}_amt_fill"></div>
136 <div class="crm-amount-raised-wrapper">
137 <span id="crm_cpid_{$cpageId}_amt_raised" class="crm-amount-raised"> -- placeholder -- </span>
139 {if $form.url_logo.value}
140 <div class="crm-logo"><img src="{$form.url_logo.value}" alt={ts}Logo{/ts}></div>
142 <div id="crm_cpid_{$cpageId}_donors" class="crm-donors"></div>
143 <div id="crm_cpid_{$cpageId}_comments" class="crm-comments"></div>
144 <div id="crm_cpid_{$cpageId}_campaign" class="crm-campaign"></div>
145 <div class="crm-contribute-button-wrapper" id="crm_cpid_{$cpageId}_button">
146 <a href='{crmURL p="civicrm/contribute/transact" q="reset=1&id=$cpageId" h=0 a=1 fe=1}' class="crm-contribute-button"><span class="crm-contribute-button-inner" id="crm_cpid_{$cpageId}_btn_txt"> -- placeholder -- </span></a>
150 <script type="text/javascript">
151 // Cleanup functions for the document ready method
152 if ( document.addEventListener ) {
153 DOMContentLoaded = function() {
154 document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
157 } else if ( document.attachEvent ) {
158 DOMContentLoaded = function() {
159 // Make sure body exists, at least, in case IE gets a little overzealous
160 if ( document.readyState === "complete" ) {
161 document.detachEvent( "onreadystatechange", DOMContentLoaded );
166 if ( document.readyState === "complete" ) {
167 // Handle it asynchronously to allow scripts the opportunity to delay ready
168 setTimeout( onReady, 1 );
170 // Mozilla, Opera and webkit support this event
171 if ( document.addEventListener ) {
172 // Use the handy event callback
173 document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
174 // A fallback to window.onload, that will always work
175 window.addEventListener( "load", onReady, false );
176 // If IE event model is used
177 } else if ( document.attachEvent ) {
178 // ensure firing before onload,
179 // maybe late but safe also for iframes
180 document.attachEvent("onreadystatechange", DOMContentLoaded);
181 // A fallback to window.onload, that will always work
182 window.attachEvent( "onload", onReady );
184 function onReady( ) {
185 var cpid = {/literal}{$cpageId}{literal};
186 var jsonvar = eval('jsondata' + cpid);
187 var crmCurrency = jsonvar.currencySymbol;
188 document.getElementById('crm_cpid_'+cpid+'_title').innerHTML = jsonvar.title;
189 if ( jsonvar.money_target > 0 ) {
190 document.getElementById('crm_cpid_'+cpid+'_amt_hi').innerHTML = jsonvar.money_target_display;
191 document.getElementById('crm_cpid_'+cpid+'_amt_low').innerHTML = crmCurrency+jsonvar.money_low;
193 document.getElementById('crm_cpid_'+cpid+'_amt_raised').innerHTML = jsonvar.money_raised;
194 document.getElementById('crm_cpid_'+cpid+'_comments').innerHTML = jsonvar.about;
195 document.getElementById('crm_cpid_'+cpid+'_donors').innerHTML = jsonvar.num_donors;
196 document.getElementById('crm_cpid_'+cpid+'_btn_txt').innerHTML = jsonvar.button_title;
197 document.getElementById('crm_cpid_'+cpid+'_campaign').innerHTML = jsonvar.campaign_start;
198 if ( jsonvar.money_raised_percentage ) {
199 var moneyRaised = jsonvar.money_raised_percentage;
200 var percentWidth = moneyRaised.split('%');
201 if ( percentWidth[0] > 100 ) {
202 moneyRaised = '100%';
204 document.getElementById('crm_cpid_'+cpid+'_amt_fill').style.width = moneyRaised;
205 document.getElementById('crm_cpid_'+cpid+'_percentage').innerHTML = jsonvar.money_raised_percentage;
207 if ( !jsonvar.is_active ) {
208 document.getElementById('crm_cpid_'+cpid+'_button').innerHTML = jsonvar.home_url;
209 document.getElementById('crm_cpid_'+cpid+'_button').style.color = 'red';
214 <script type="text/javascript" src="{$config->userFrameworkResourceURL}/extern/widget.php?cpageId={$cpageId}&widgetId={$widget_id}&format=3"></script>