templates/CRM/Wci/Page/wciwidget.tpl

   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;
  12         background-color: {/literal}{$wciform.color_widget_bg}{literal}; /* background color */
  13         border-color:{/literal}{$wciform.color_border}{literal}; /* border color */
  14     }
  15
  16     .crm-wci-widget.thin {
  17       width: 150px;
  18     }
  19
  20     .crm-wci-widget.normal {
  21       width: 200px;
  22     }
  23
  24     .crm-wci-widget.wide {
  25       width: 250px;
  26     }
  27
  28     h5 {
  29         font-size:14px;
  30         padding:3px;
  31         margin: 0px;
  32         text-align:center;
  33         -moz-border-radius:   4px;
  34         -webkit-border-radius:   4px;
  35         -khtml-border-radius:   4px;
  36         border-radius:      4px;
  37         color: {/literal}{$wciform.color_title}{literal};
  38         background-color: {/literal}{$wciform.color_title_bg}{literal};
  39     } /* title */
  40
  41     .crm-amounts {
  42         height:1em;
  43         margin:.8em 0px;
  44         font-size:13px;
  45     }
  46     .crm-amount-low {
  47         float:left;
  48     }
  49     .crm-amount-high {
  50         float:right;
  51     }
  52     .crm-percentage {
  53         margin:0px 30%;
  54         text-align:center;
  55     }
  56     .crm-amount-bar { /* progress bar */
  57         background-color:#FFF;
  58         width:100%;
  59         display:block;
  60         border:1px solid #CECECE;
  61         -moz-border-radius:   4px;
  62         -webkit-border-radius:   4px;
  63         -khtml-border-radius:   4px;
  64         border-radius:      4px;
  65         margin-bottom:.8em;
  66         text-align:left;
  67
  68         background-color:{/literal}{$wciform.color_bar}{literal};
  69         border-color:#CECECE;
  70     }
  71     .crm-amount-fill {
  72         background-color:#2786C2;
  73         height:1em;
  74         display:block;
  75         -moz-border-radius:   4px;
  76         -webkit-border-radius:   4px;
  77         -khtml-border-radius:   4px;
  78         border-radius:      4px;
  79         text-align:left;
  80         width: {/literal}{$wciform.pb_percentage}{literal}%; /* progress bar percentage */
  81     }
  82     .crm-amount-raised-wrapper {
  83         margin-bottom:.8em;
  84     }
  85     .crm-amount-raised {
  86         font-weight:bold;
  87         color:#000;
  88     }
  89
  90     .crm-logo {
  91         text-align:center;
  92     }
  93
  94     .crm-comments,
  95     .crm-donors,
  96     .crm-campaign {
  97         font-size:11px;
  98         margin-bottom:.8em;
  99         color:{/literal}{$wciform.color_description}{literal} /* other color*/
 100     }
 101
 102     .crm-wci-button {
 103         display:block;
 104         background-color:#CECECE;
 105         -moz-border-radius:       4px;
 106         -webkit-border-radius:   4px;
 107         -khtml-border-radius:   4px;
 108         border-radius:      4px;
 109         text-align:center;
 110         margin:0px 10% .8em 10%;
 111         text-decoration:none;
 112         color:#556C82;
 113         padding:2px;
 114         font-size:13px;
 115     }
 116
 117     .crm-home-url {
 118         text-decoration:none;
 119         border:0px;
 120         color:{/literal}{$wciform.color_homepage_link}{literal} /* home page link color*/
 121     }
 122
 123     a.crm-wci-button { /* button color */
 124         background-color:{/literal}{$wciform.color_button_bg}{literal};
 125     }
 126
 127     .crm-wci-button-inner { /* button text color */
 128         padding:2px;
 129         display:block;
 130         color:{/literal}{$wciform.color_button}{literal};
 131     }
 132     #crm_wci_image_container {
 133       text-align: center;
 134       padding: 10px 20px;
 135     }
 136     #crm_wci_image {
 137       margin: auto;
 138     }
 139 </style>
 140
 141 <style>
 142 {/literal}
 143   {$wciform.style_rules}
 144 {literal}
 145 </style>
 146 {/literal}
 147
 148 <div id="crm_wid_{$wciform.widgetId}" class="crm-wci-widget {$wciform.size_variant}">
 149   {if $wciform.title}
 150     <h5 id="crm_wid_{$wciform.widgetId}_title">
 151       {if $wciform.logo_image}
 152         <span class="crm-logo">
 153           <img src="{$wciform.logo_image}" alt={ts}Logo{/ts}>
 154         </span>
 155       {/if}
 156       {$wciform.title}
 157     </h5>
 158   {/if}
 159     {if $wciform.image}
 160       <div id="crm_wci_image_container">
 161         <img id="crm_wci_image" src='{$wciform.image}'/>
 162       </div>
 163     {/if}
 164     <div class="crm-amounts">
 165         <div id="crm_wid_{$wciform.widgetId}_amt_hi" class="crm-amount-high">${$wciform.goal_amount}</div>
 166         <div id="crm_wid_{$wciform.widgetId}_amt_low" class="crm-amount-low">${$wciform.starting_amount}</div>
 167         <div id="crm_wid_{$wciform.widgetId}_percentage" class="crm-percentage">{$wciform.pb_percentage}%</div>
 168     </div>
 169     <div class="crm-amount-bar">
 170         <div class="crm-amount-fill" id="crm_wid_{$wciform.widgetId}_amt_fill"></div>
 171     </div>
 172     <div id="crm_wid_{$wciform.widgetId}_donors" class="crm-donors">
 173     </div>
 174     <div id="crm_wid_{$wciform.widgetId}_comments" class="crm-comments">
 175       {$wciform.description}
 176     </div>
 177     <div id="crm_wid_{$wciform.widgetId}_campaign" class="crm-campaign">
 178     </div>
 179     <div class="crm-wci-button-wrapper" id="crm_wid_{$wciform.widgetId}_button">
 180         <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>
 181     </div>
 182
 183     {if $wciform.email_signup_group_id}
 184       {if $embed eq 1 }
 185         <form method="get" action="{$wciform.emailSignupGroupFormURL}" name="Subscribe">
 186       {/if}
 187         <p style="text-align:center; margin: 0;">
 188           Get the monthly newsletter
 189         </p>
 190         <p style="text-align:left;">email id:
 191           <input type="text" id="frmEmail" name="email" size="10">
 192         </p>
 193         <p style="text-align: center; margin-top: 10px;">
 194           {if $embed eq 1 }
 195             <input type="submit" name="_qf_Subscribe_next" value="Subscribe Me">
 196           {else}
 197             <input type="button" name="_qf_Subscribe_next" value="Subscribe Me">
 198           {/if}
 199         </p>
 200       {if $embed eq 1 }
 201         </form>
 202       {/if}
 203     {/if}
 204 </div>