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