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