Styleguide/Banner

The following is an example of banner code that is used to create a link to a donate.wiki Landing Page.

{{MediaWiki:Centralnotice-shared-common-style-2012}}
{{MediaWiki:Centralnotice-shared-button-2012}}
{{MediaWiki:Centralnotice-shared-urlrandomizer-2012}}

<style type="text/css">
/* Banner Image*/
#{{{utm-banner}}} {
  position: relative;
  background-image: url({{{image-url}}});
  background-repeat: no-repeat;
  background-color: #FFFFFF;
  border: solid 1px silver;
  margin-bottom: 0.5em !important;
  height: 172px;
  overflow: hidden;
}
body.ltr #{{{utm-banner}}} {
  background-position: 0px 0px;
}
body.rtl #{{{utm-banner}}} {
  background-position: 100% 0%;
} 

/* The bold, blue text */
#{{{utm-banner}}} #cn-bold-blue-text {
  padding: 1.5em 80px 0.8em 210px;
  text-align: center;
  text-direction: {{int:Centralnotice-2011translations-dir}};
  font-size: 2.5em;
  line-height: 1em;
  font-weight: bold;
  color: navy;
}
</style>
<script type="text/javascript">	
var countrySpecific = { {{Template:2011FR/Multicurrency2}} };

function getCountryValue(ii) {	
  return countrySpecific[Geo.country][ii];
}

function bannerRewriteUrl() {
  $('#variable_lp').attr('href', function() {
    var baseUrl = 'https://donate.wikimedia.org/wiki/Special:FundraiserLandingPage';
    var queryString = $.param( {
      // localisation components
      'uselang' : wgUserLanguage,
      'country' : Geo.country,
      // landing page components
      'template'              : 'Lp-layout-default',
      'appeal-template'       : bannerChooseRandom( '{{{lp-appeal-template}}}' ),
      'appeal'                : bannerChooseRandom( '{{{lp-appeal}}}' ),
      'form-template'         : bannerChooseRandom( '{{{lp-form-template}}}' ),
      'form-countryspecific'  : bannerChooseRandom( '{{{lp-form-countryspecific}}}' ),
      // utm tracking data
      'utm_medium'   : 'sitenotice',
      'utm_source'   : '{{{utm-banner}}}' + '_' + Geo.country,
      'utm_campaign' : '{{{utm-campaign}}}' + '_' + getCountryValue(0)
    } );
    var fullUrl = baseUrl + '?' + queryString;
    return fullUrl;
  } );
}

$(document).ready( function () {
  bannerRewriteUrl();
});
</script>

<div id="{{{utm-banner}}}">
  <a id="variable_lp" href="#">
    <div id="cn-bold-blue-text">
      {{{line 1}}}<br />{{{line 2}}}<br />{{{line 3}}}
    </div>
    <div class="cn-bottom-right-float">
      <div id="notice-button-2011-start"></div>
      <div id="notice-button-2011-label">{{int:Centralnotice-2011translations-read-now}}</div>
      <div id="notice-button-2011-end"></div>
    </div>
  </a>
 
  <div id="cn-toggle-box">
    <a href="#" onclick="hideBanner(); return false;"><img border="0" src="//bits.wikimedia.org/skins/common/images/closewindow19x19.png" alt="Close" /></a>
  </div>
</div>