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