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