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