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