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