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-2011}}
{{MediaWiki:Centralnotice-shared-button-2011}}
<style type="text/css">

#centralNotice.collapsed #{{{utm-banner}}}{
  display: none;
}

#{{{utm-banner}}} {
  position: relative;
  background-image: url({{{image-url}}});
  background-repeat: no-repeat;
  margin-bottom: 0.5em !important;
  background-color:#FFFFFF;
  border: solid 1px silver;
  height:166px;
  overflow: hidden;
}
body.ltr #{{{utm-banner}}} {
  background-position: 0px 0px;
}
body.rtl #{{{utm-banner}}} {
  background-position: 100% 0%;
}

#{{{utm-banner}}} a {
  text-decoration: none;
}

#{{{utm-banner}}} a:hover {
  text-decoration: none;
}

#cn-bold-blue-text:hover {
  text-decoration: underline;
}

/* Bigger bold, blue text */
#{{{utm-banner}}} #cn-bold-blue-text {
  font-size: 2em;
  font-weight: bold;
  font-family: Helvetica, Arial, sans-serif;
  color: navy;
  padding: 2em 90px 0.3em 185px;
  line-height: 1em;
  text-align:center;
  text-direction:{{int:Centralnotice-2011translations-dir}};
}

</style>
	
<script type="text/javascript">	

var countrySpecific = { {{Template:2011FR/Multicurrency2}} };

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

</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-close-box">
    <a href="#" title="Close" onclick="hideBanner();return false;"><img border="0" src="//bits.wikimedia.org/skins/common/images/closewindow19x19.png" alt="Close" /></a>
  </div> 
</div>

<script type="text/javascript">

var bannerRewriteUrl = function() {
  $('#variable_lp').attr('href', function() {
    var baseUrl = 'https://donate.wikimedia.org/wiki/Special:FundraiserLandingPage';
    var queryString = $.param( {
      'uselang' : wgUserLanguage,
      'country' : Geo.country,
      'template' : 'Lp-layout-default',
 // landing page components
      '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
  } );
};

var bannerChooseRandom = function(choiceString) {
  var choices = choiceString.split(',');
  if ( choices.length ) {
    return choices[Math.floor( Math.random() * choices.length )].replace(/^\s+|\s+$/, '');
  }
}

$(document).ready( function () {
  bannerRewriteUrl();
});

</script>