templates/CRM/Wci/Page/Widget.tpl

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