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