#29759 - Changed the variable name to match the widget creation form.

diff --git a/templates/CRM/Wci/Page/Widget.tpl b/templates/CRM/Wci/Page/Widget.tpl
index a2e57ef5e2bf155ce516e02a0f2083c8e521154c..b5b5d9c4a782857d114662642a12aec86dfeb22b 100644 (file)
--- a/templates/CRM/Wci/Page/Widget.tpl
+++ b/templates/CRM/Wci/Page/Widget.tpl
@@ -1,6 +1,6 @@
 {literal}
 <style>
-    .crm-contribute-widget {
+    .crm-wci-widget {
         font-size:12px;
         font-family:Helvetica, Arial, sans;
         padding:6px;
@@ -9,9 +9,21 @@
         -khtml-border-radius:   4px;
         border-radius:      4px;
         border:1px solid #96C0E7;
-        width:200px;
     }
-    .crm-contribute-widget h5 {
+    
+    .crm-wci-widget.thin {
+      width: 150px;
+    }
+    
+    .crm-wci-widget.normal {
+      width: 200px;
+    }
+    
+    .crm-wci-widget.wide {
+      width: 250px;
+    }
+    
+    .crm-wci-widget h5 {
         font-size:14px;
         padding:3px;
         margin: 0px;
@@ -22,22 +34,22 @@
         border-radius:      4px;
     }
 
-    .crm-contribute-widget .crm-amounts {
+    .crm-wci-widget .crm-amounts {
         height:1em;
         margin:.8em 0px;
         font-size:13px;
     }
-    .crm-contribute-widget .crm-amount-low {
+    .crm-wci-widget .crm-amount-low {
         float:left;
     }
-    .crm-contribute-widget .crm-amount-high {
+    .crm-wci-widget .crm-amount-high {
         float:right;
     }
-    .crm-contribute-widget .crm-percentage {
+    .crm-wci-widget .crm-percentage {
         margin:0px 30%;
         text-align:center;
     }
-    .crm-contribute-widget .crm-amount-bar {
+    .crm-wci-widget .crm-amount-bar {
         background-color:#FFF;
         width:100%;
         display:block;
@@ -49,7 +61,7 @@
         margin-bottom:.8em;
         text-align:left;
     }
-    .crm-contribute-widget .crm-amount-fill {
+    .crm-wci-widget .crm-amount-fill {
         background-color:#2786C2;
         height:1em;
         display:block;
@@ -58,26 +70,27 @@
         -khtml-border-radius:   4px 0px 0px 4px;
         border-radius:      4px 0px 0px 4px;
         text-align:left;
+        width: {/literal}{$form.pb_amount_fill.value}{literal}%; /* progress bar percentage */
     }
-    .crm-contribute-widget .crm-amount-raised-wrapper {
+    .crm-wci-widget .crm-amount-raised-wrapper {
         margin-bottom:.8em;
     }
-    .crm-contribute-widget .crm-amount-raised {
+    .crm-wci-widget .crm-amount-raised {
         font-weight:bold;
     }
 
-    .crm-contribute-widget .crm-logo {
+    .crm-wci-widget .crm-logo {
         text-align:center;
     }
 
-    .crm-contribute-widget .crm-comments,
-    .crm-contribute-widget .crm-donors,
-    .crm-contribute-widget .crm-campaign {
+    .crm-wci-widget .crm-comments,
+    .crm-wci-widget .crm-donors,
+    .crm-wci-widget .crm-campaign {
         font-size:11px;
         margin-bottom:.8em;
     }
 
-    .crm-contribute-widget .crm-contribute-button {
+    .crm-wci-widget .crm-wci-button {
         display:block;
         background-color:#CECECE;
         -moz-border-radius:       4px;
@@ -92,73 +105,84 @@
         font-size:13px;
     }
 
-    .crm-contribute-widget .crm-home-url {
+    .crm-wci-widget .crm-home-url {
         text-decoration:none;
         border:0px;
     }
 
 </style>
 <style>
-    .crm-contribute-widget {
-        background-color: {/literal}{$form.color_main.value}{literal}; /* background color */
-        border-color:{/literal}{$form.color_bg.value}{literal}; /* border color */
+    .crm-wci-widget {
+        background-color: {/literal}{$form.color_widget_bg.value}{literal}; /* background color */
+        border-color:{/literal}{$form.color_border.value}{literal}; /* border color */
+        background:  {/literal}{if $form.image.value}url('{$form.image.value}'){else}none{/if}{literal}; /* background image */
     }
 
-    .crm-contribute-widget h5 {
+    .crm-wci-widget h5 {
         color: {/literal}{$form.color_title.value}{literal};
-        background-color: {/literal}{$form.color_main_bg.value}{literal};
+        background-color: {/literal}{$form.color_title_bg.value}{literal};
     } /* title */
 
-    .crm-contribute-widget .crm-amount-raised { color:#000; }
-    .crm-contribute-widget .crm-amount-bar  /* progress bar */
+    .crm-wci-widget .crm-amount-raised { color:#000; }
+    .crm-wci-widget .crm-amount-bar  /* progress bar */
         background-color:{/literal}{$form.color_bar.value}{literal};
         border-color:#CECECE;
     }
-    .crm-contribute-widget .crm-amount-fill { background-color:#2786C2; }
+    .crm-wci-widget .crm-amount-fill { background-color:#2786C2; }
 
-    .crm-contribute-widget a.crm-contribute-button { /* button color */
-        background-color:{/literal}{$form.color_button.value}{literal};
+    .crm-wci-widget a.crm-wci-button { /* button color */
+        background-color:{/literal}{$form.color_button_bg.value}{literal};
     }
 
-    .crm-contribute-widget .crm-contribute-button-inner { /* button text color */
+    .crm-wci-widget .crm-wci-button-inner { /* button text color */
         padding:2px;
         display:block;
-        color:{/literal}{$form.color_about_link.value}{literal};
+        color:{/literal}{$form.color_button.value}{literal};
     }
 
-    .crm-contribute-widget .crm-comments,
-    .crm-contribute-widget .crm-donors,
-    .crm-contribute-widget .crm-campaign {
-        color:{/literal}{$form.color_main_text.value}{literal} /* other color*/
+    .crm-wci-widget .crm-comments,
+    .crm-wci-widget .crm-donors,
+    .crm-wci-widget .crm-campaign {
+        color:{/literal}{$form.color_description.value}{literal} /* other color*/
     }
 
-    .crm-contribute-widget .crm-home-url {
+    .crm-wci-widget .crm-home-url {
         color:{/literal}{$form.color_homepage_link.value}{literal} /* home page link color*/
     }
 
 </style>
+<style>
 {/literal}
+  {$form.style_rules.value}
+{literal}
+</style>
+</literal>
 
-<div id="crm_cpid_{$cpageId}" class="crm-contribute-widget">
-    <h5 id="crm_cpid_{$cpageId}_title"></h5>
+<div id="crm_wid_{$widgetId}" class="crm-wci-widget {$form.size_variant.value}">
+    <h5 id="crm_wid_{$widgetId}_title">
+      {if $form.logo_image.value}
+        <span class="crm-logo">
+          <img src="{$form.logo_image.value}" alt={ts}Logo{/ts}>
+        </span>
+      {/if}
+      {$form.title.value}
+    </h5>
     <div class="crm-amounts">
-        <div id="crm_cpid_{$cpageId}_amt_hi" class="crm-amount-high"></div>
-        <div id="crm_cpid_{$cpageId}_amt_low" class="crm-amount-low"></div>
-        <div id="crm_cpid_{$cpageId}_percentage" class="crm-percentage"></div>
+        <div id="crm_wid_{$widgetId}_amt_hi" class="crm-amount-high"></div>
+        <div id="crm_wid_{$widgetId}_amt_low" class="crm-amount-low"></div>
+        <div id="crm_wid_{$widgetId}_percentage" class="crm-percentage"></div>
     </div>
     <div class="crm-amount-bar">
-        <div class="crm-amount-fill" id="crm_cpid_{$cpageId}_amt_fill"></div>
+        <div class="crm-amount-fill" id="crm_wid_{$widgetId}_amt_fill"></div>
+    </div>
+    <div id="crm_wid_{$widgetId}_donors" class="crm-donors">
+    </div>
+    <div id="crm_wid_{$widgetId}_comments" class="crm-comments">
+      {$form.description.value}
     </div>
-    <div class="crm-amount-raised-wrapper">
-        <span id="crm_cpid_{$cpageId}_amt_raised" class="crm-amount-raised"> -- placeholder -- </span>
+    <div id="crm_wid_{$widgetId}_campaign" class="crm-campaign">
     </div>
-    {if $form.url_logo.value}
-        <div class="crm-logo"><img src="{$form.url_logo.value}" alt={ts}Logo{/ts}></div>
-    {/if}
-    <div id="crm_cpid_{$cpageId}_donors" class="crm-donors"></div>
-    <div id="crm_cpid_{$cpageId}_comments" class="crm-comments"></div>
-    <div id="crm_cpid_{$cpageId}_campaign" class="crm-campaign"></div>
-    <div class="crm-contribute-button-wrapper" id="crm_cpid_{$cpageId}_button">
-        <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>
+    <div class="crm-wci-button-wrapper" id="crm_wid_{$widgetId}_button">
+        <a href='{crmURL p="civicrm/contribute/transact" q="reset=1&id=$form.button_link_to.value" h=0 a=1 fe=1}' class="crm-wci-button"><span class="crm-wci-button-inner" id="crm_wid_{$widgetId}_btn_txt">{$form.button_title.value}</span></a>
     </div>
 </div>
\ No newline at end of file