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-bar /* progress bar */
106 background-color:{/literal}{$form.color_bar.value}{literal};
107 border-color:#CECECE;
109 .crm-contribute-widget .crm-amount-fill { background-color:#2786C2; }
110 .crm-contribute-widget a.crm-contribute-button { /* button color */
111 background-color:{/literal}{$form.color_button.value}{literal};
113 .crm-contribute-widget .crm-contribute-button-inner { /* button text color */
116 color:{/literal}{$form.color_about_link.value}{literal};
118 .crm-contribute-widget .crm-comments,
119 .crm-contribute-widget .crm-donors,
120 .crm-contribute-widget .crm-campaign {
121 color:{/literal}{$form.color_main_text.value}{literal} /* other color*/
123 .crm-contribute-widget .crm-home-url {
124 color:{/literal}{$form.color_homepage_link.value}{literal} /* home page link color*/
128 <div id="crm_cpid_{$cpageId}" class="crm-contribute-widget">
129 <h5 id="crm_cpid_{$cpageId}_title"></h5>
130 <div class="crm-amounts">
131 <div id="crm_cpid_{$cpageId}_amt_hi" class="crm-amount-high"></div>
132 <div id="crm_cpid_{$cpageId}_amt_low" class="crm-amount-low"></div>
133 <div id="crm_cpid_{$cpageId}_percentage" class="crm-percentage"></div>
135 <div class="crm-amount-bar">
136 <div class="crm-amount-fill" id="crm_cpid_{$cpageId}_amt_fill"></div>
138 <div class="crm-amount-raised-wrapper">
139 <span id="crm_cpid_{$cpageId}_amt_raised" class="crm-amount-raised"> -- placeholder -- </span>
141 {if $form.url_logo.value}
142 <div class="crm-logo"><img src="{$form.url_logo.value}" alt={ts}Logo{/ts}></div>
144 <div id="crm_cpid_{$cpageId}_donors" class="crm-donors"></div>
145 <div id="crm_cpid_{$cpageId}_comments" class="crm-comments"></div>
146 <div id="crm_cpid_{$cpageId}_campaign" class="crm-campaign"></div>
147 <div class="crm-contribute-button-wrapper" id="crm_cpid_{$cpageId}_button">
148 <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>
152 <script type="text/javascript">
153 // Cleanup functions for the document ready method
154 if ( document.addEventListener ) {
155 DOMContentLoaded = function() {
156 document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
159 } else if ( document.attachEvent ) {
160 DOMContentLoaded = function() {
161 // Make sure body exists, at least, in case IE gets a little overzealous
162 if ( document.readyState === "complete" ) {
163 document.detachEvent( "onreadystatechange", DOMContentLoaded );
168 if ( document.readyState === "complete" ) {
169 // Handle it asynchronously to allow scripts the opportunity to delay ready
170 setTimeout( onReady, 1 );
172 // Mozilla, Opera and webkit support this event
173 if ( document.addEventListener ) {
174 // Use the handy event callback
175 document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
176 // A fallback to window.onload, that will always work
177 window.addEventListener( "load", onReady, false );
178 // If IE event model is used
179 } else if ( document.attachEvent ) {
180 // ensure firing before onload,
181 // maybe late but safe also for iframes
182 document.attachEvent("onreadystatechange", DOMContentLoaded);
183 // A fallback to window.onload, that will always work
184 window.attachEvent( "onload", onReady );
186 function onReady( ) {
187 var cpid = {/literal}{$cpageId}{literal};
188 var jsonvar = eval('jsondata' + cpid);
189 var crmCurrency = jsonvar.currencySymbol;
190 document.getElementById('crm_cpid_'+cpid+'_title').innerHTML = jsonvar.title;
191 if ( jsonvar.money_target > 0 ) {
192 document.getElementById('crm_cpid_'+cpid+'_amt_hi').innerHTML = jsonvar.money_target_display;
193 document.getElementById('crm_cpid_'+cpid+'_amt_low').innerHTML = crmCurrency+jsonvar.money_low;
195 document.getElementById('crm_cpid_'+cpid+'_amt_raised').innerHTML = jsonvar.money_raised;
196 document.getElementById('crm_cpid_'+cpid+'_comments').innerHTML = jsonvar.about;
197 document.getElementById('crm_cpid_'+cpid+'_donors').innerHTML = jsonvar.num_donors;
198 document.getElementById('crm_cpid_'+cpid+'_btn_txt').innerHTML = jsonvar.button_title;
199 document.getElementById('crm_cpid_'+cpid+'_campaign').innerHTML = jsonvar.campaign_start;
200 if ( jsonvar.money_raised_percentage ) {
201 var moneyRaised = jsonvar.money_raised_percentage;
202 var percentWidth = moneyRaised.split('%');
203 if ( percentWidth[0] > 100 ) {
204 moneyRaised = '100%';
206 document.getElementById('crm_cpid_'+cpid+'_amt_fill').style.width = moneyRaised;
207 document.getElementById('crm_cpid_'+cpid+'_percentage').innerHTML = jsonvar.money_raised_percentage;
209 if ( !jsonvar.is_active ) {
210 document.getElementById('crm_cpid_'+cpid+'_button').innerHTML = jsonvar.home_url;
211 document.getElementById('crm_cpid_'+cpid+'_button').style.color = 'red';
216 <script type="text/javascript" src="{$config->userFrameworkResourceURL}/extern/widget.php?cpageId={$cpageId}&widgetId={$widget_id}&format=3"></script>