Wikimedia Meta-Wiki

Fundraising 2011/Styleguide/Banners

< Fundraising 2011‎ | Styleguide

The following guide is a technical guide to the banners a break down of the code that is used in them as well as general descriptions of the functionality of the code. It must be remembered that this is a technical guide. Some of the variations of banner can get very complex and although simple changes can be made on the fly such as changing text or changing images, changing the structure or layout of the banners can have real and significant consequences and should only be done with great care and should be thoroughly tested in IE6-10, back to Firefox 3.6, back to chrome 10, and back several versions of safari :)

Clean banners have been created for plain, fader, thermometer as well as the plain top banner and should be used as the starting point for subsequent banners as well as any variation thereof.

General Design edit

Central Notice banners are composed of four different pieces.

  1. CSS
  2. JS
  3. HTML
  4. MW (MediaWiki) Messages

CSS edit

When setting up any new banner it is vital that whatever CSS is used has to be isolated to just that banner. All of its CSS is prefaced with specific identifiers like .notice-all for cross banner settings and .notice for banner specific settings. A bad example of used CSS are additions like a' and p which would affect all text within the body of the page.

JS edit

Use of document.write() discouraged

Because CentralNotice banners are often not written into the page until after the page has finished loading, document.write() or document.writeln() statements within banners will sometimes overwrite the entire page rather than just inserting content within the page. To avoid this problem, insert dynamic content using the DOM rather than document.write().

For example, instead of doing:

Hello <script type="text/javascript">document.write( wgUserName );</script>!

Welcome to <script type="text/javascript">document.write( wgSiteName );</script>.


Use DOM insertion instead:

Hello <span id="cn-username"></span>! Welcome to <span id="cn-sitename"></span>.
<script type="text/javascript">
jQuery('#cn-username').prepend(wgUserName);
jQuery('#cn-sitename').prepend(wgSiteName);
</script>

HTML edit

When creating the actual structure of the banner, pay particular attention to keeping the design as simple as possible. Design them as if it was 1998 and use the lowest amount of complexity possible. 2010_JA1_Banner2 is a good example of very simple layout. All items are controlled through their own divs to allow for maximum customization while keeping the HTML simple.

MW (MediaWiki) Messages edit

We utilize triple bracket MediaWiki messages in order to allow for translations. In order to add a new message you simply add:
{{{varname}}}

and after submitting the form you will see the new message show up in the template translation window. To add a new language translation, change the language option under "Language" to the desired setting and add the new translation.

Shared Message Namespace

A convenient reuse available in the system is the ability to re-use messages from other banners. This allows us to not have to re-input the exact same message set that a collection of banners might use. A current example of this includes 2010_JA1_Banner2 which has messages like:
{{int:Centralnotice-2010_Jimmy_trans-donate-text2}}

What this means is that we are pulling the donate-text2 variable from the 2010_Jimmy_trans banner and re-using its content. This is very helpful when you have multiple banners all needing to point to one url. By keeping it set on one banner you only have to change it in one place. During the 2010 Fundraiser, we began to make use of this technique for most of our banners and it worked out great. We had two main “shared” banners, the Jimmy one and the “non-Jimmy” one. This reduced a lot of work for the people who published these notices, and made it much more likely that the translations would all be in sync.

We also began to make use of the “shared messages” system with the CSS. This gave the banners a consistent style and made it very easy for us to fix errors quickly on all of the banners. An example of this would be:
{{MediaWiki:Centralnotice-shared-common-style-2010}}
This shared message contains all of the standard CSS that we are using in our banners. Such as the color of the banner, background, and the X in the corner.

Creating a new banner edit

If you're lucky, the banner you are trying to add already has a close approximate in the system. Copy the existing body into a new banner by following the link at the bottom of the Banners tab labeled 'Add a new banner'. Add the appropriate new messaging and load the inline preview to validate that all is well.
Note: The "Create a copy of the banner"/"clone" option at the bottom of the page duplicates the banner entirely, including all of the translations. This may be easier, or it may not be what you want. If you do use it remember to change the {{{utm-banner}}} variable in the new banner

QAing and Testing New Banners edit

Once a banner is configured in the CentralNotice system, it is up to the user to make sure it looks correct across all of our supported browsers. There are currently four steps to verifying any one banner.

  1. After saving your HTML/CSS/js use the inline preview to verify that the content is as it should be. Having multiple browsers to test with is extremely important as we have a diverse set of users who use both IE6+, Firefox2+ and many others.
  2. If the inline preview looks okay, then select the option labeled "Preview" all available translations of banner. If you have any translations other than English, you should see them now. Pay close attention to spacing and text that is too long and adjust either the messaging or HTML/CSS to accommodate it as best as possible.
  3. Add the banner to the rotation on test.wiki by taking your creation and adding it to the test campaign
  • You should then be able to see your new banner on test.wiki. (You may need to do a hard refresh to see the new banner since the banner list is cached.) Just as before, test with a full suite of browsers to see how the notice does with actual page content. Make sure that no styling within the body of the message overrides the styling of the page text.
4. If all has gone well, you're likely ready to push it into production. Please clear any messaging that is to go out with their respective communities before enabling anything. Having gotten the correct approval, add your banner to the correct campaign and load it on the project in question. While it may seem like you have already validated your banner both in preview and on test, there are still CSS quirks that show up in each project. These have to be dealt with on a case by case basis.

Do not rely on the NoticeTemplate view to be an accurate representation of the banner. The only way to see a correct preview is to use the banner force mechanism on the project in question (add ?banner=bannername to the end of any page url. If the page url already has a ? in it use & instead "&banner=bannername" )

Checklist edit

Pre-launch
  • If possible, launch campaign on testwiki (“test”) first
  • Verify each banner using force banner (?banner=bannername) on a local project that it is going to be running on. Be sure to check the look and click on links.
  • Using force banner, check all banners noticing and/or fixing any differences
  • If you are only displaying notices to anonymous users, verify that they aren't displaying to logged in users. (And vice versa.)
  • Test hide button on all banners
Check banners on the following browsers
  • IE 6/7/8
  • Chrome (Current)
  • Firefox (Current)
  • IE (Current)
  • Safari (Current)
  • Opera (Current)
  • iPhone/Pad and related i-gadgets
Post-launch

Regardless of where banner is targeted:

  • Check enwiki - flagship product, don't break it
  • Check dewiki - hauptprodukt, nicht brechen =) Also, their layout is sometimes different
  • Check arwiki - RTL
  • Check hewiki - RTL
  • Check ruwiki - occasionally different layout

The basic banner edit

CSS edit

The following css should remain in banner since it is typically the most edited. {{{utm-banner}}} should ideally be the name of the banner. Images as well as the size, and other banner attributes used to create the banner are set in #{{{utm-banner}}} and for ease of changing the image the html variable for the image can be set via the central notice interface rather than editing the css directly. If an image with a significantly different size is used, then the padding values for #cn-bold-blue-text may need to be changed to prevent overlap. 

<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 {
  text-align: center;
  direction: {{int:Centralnotice-2011translations-dir}};
  font-size: 2.5em;
  line-height: 1em;
  font-weight: bold;
  color: navy;
}
body.ltr #{{{utm-banner}}} #cn-bold-blue-text {
  padding: 1.5em 80px 0.8em 210px;
}
body.ltr #{{{utm-banner}}} #cn-bold-blue-text {
  padding: 1.5em 80px 0.8em 210px;
}
</style>

HTML edit 

<div id="{{{utm-banner}}}">
  <a id="variable_lp" href="#">
    <div id="cn-bold-blue-text">
      {{int:Centralnotice-2011translations-brandon-1}}<br />{{int:Centralnotice-2011translations-brandon-2}}<br />{{int:Centralnotice-2011translations-brandon-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>

The div with id "cn-bold-blue-text" consists of the main banner message. In this case mediawiki interface messages are being used for multilingual text. "cn-bottom-right-float" makes up the button that appears in the bottom left hand corner of the banner. The button is made up of three images and an interface message which can be replaced. The final major component is "cn-toggle-box" which is the close X button that is in the top right corner of the banner. This sends the user a cookie which hides a banner typically for a period of two weeks.

Javascript edit

MediaWiki:Centralnotice-shared-urlrandomizer-2012 edit 

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

This script is used during the building of the target url. Rather than LP content being fixed on donate wiki, it is instead decided by html variables which are set within the central notice interface. This function randomises the target urls to equally split traffic to various LP targets.

Within the banner edit 

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

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

$(document).ready( function () {
  bannerRewriteUrl();
});
  • This javascript code is currently used in all fundraising banners. As a result of current, albeit temporary limitations with our analytics, it was necessary to append the country/region to the campaign name to banners and campaign names. This is this codes most common usage however using the javascript arrays it becomes particularly to allow localistion that is specific at a country level rather than a language level which is provided by the interface language localisation. This is for things like currency conversions, symbols and symbol position. The mediawiki template "2011FR/Multicurrency2" is the main array currently used. This includes functionality for banners such as the thermometer banner and a javascript array containing a variety of different variables. These are used in different ways including the use of single campaigns across multiple geographies. The variables used throughout the document are called based on Geo.country, a javascript variable set by geoiplookup and used by central notice to select.

Url creation edit

edit 

function bannerRewriteUrl() {
  $('#variable_lp').attr('href', function() {
    var baseUrl = 'https://donate.wikimedia.org/wiki/Special:FundraiserLandingPage'; // [4]
    var queryString = $.param( {
      // localisation components [5]
      'uselang' : wgUserLanguage,
      'country' : Geo.country,
      // landing page components [6]
      '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 [7]
      'utm_medium'   : 'sitenotice',
      'utm_source'   : '{{{utm-banner}}}' + '_' + Geo.country,
      'utm_campaign' : '{{{utm-campaign}}}' + '_' + getCountryValue(0)
    } );
    var fullUrl = baseUrl + '?' + queryString;
    return fullUrl;
  } );
}
  • 4 The base url should typically be donate wiki although it should noted that paymentswiki and foundationwiki are also used for landing pages
  • 5 These two variables are both used by the landing page to localise the donate.wiki interface and appeal
  • 6 These url string variables control the landing page content and layout. The bannerChooseRandom function can be seen here to split traffic for A/B tests.
  • 7 These url string variables are used in the fundraising analytics.

Foundation edit

These can be set up automatically using CentralNotice. See Fundraising_2011/Styleguide/CentralNotice#Banner_settings

Button edit

CSS edit

Buttons used on fundraising banners consist of a single image but consisting of three parts:

 

This was then inserted into the CSS code for the 3 parts which used the upper, middle and lower sections to put it together into 1 button. The middle section gets repeated so that it can fill to fit whatever text you give it. 

#notice-button-2012-start {
   float: right;
   background-image: url(//upload.wikimedia.org/wikipedia/foundation/a/a7/CNtranslatebutton2.png);
   background-position: right bottom;
   width: 4px;
   height: 30px;
 }

 #notice-button-2012-end {
   float: right;
   background-image: url(//upload.wikimedia.org/wikipedia/foundation/a/a7/CNtranslatebutton2.png);
   background-position: left top;
   width: 4px;
   height: 30px;
 }
  
 #notice-button-2012-label {
   float: right;
   background-image: url(//upload.wikimedia.org/wikipedia/foundation/a/a7/CNtranslatebutton2.png);
   background-position: center center;
   background-repeat: repeat-x;
   font-family: sans-serif;
   font-size: 1em;
   font-weight: bold;
   color: black;
   line-height: 30px;
   height: 30px;
   padding: 0 4px;
   white-space: nowrap;
   text-decoration: none;
   cursor: pointer;
 }

You also want a wrapper for the button that sets the final positioning. Either the 3 pieces above can be placed into a shared space it may be necessary to use a wrapper that was unique for each banner. For example: 

#notice-button-2012-Editor{
   position:relative;
   text-align: center;
   background-color: transparent;
   right:10px;
   bottom:40px;
 }

This allows you to control it for variables of the text or other adjustments to the banners.

You would then put them all together into the text like you did the image button. 

 <div id="notice-button-2012-Editor">
      <div id="notice-button-2012-start"></div>
      <div id="notice-button-2012-label">{{int:Centralnotice-2011translations-read-now}}</div>
      <div id="notice-button-2012-end"></div>
   </div>

The text or the button is inside the ‘label’ div. In this case it is getting pulled from an the interface message. It could also be a variable such as {{{button}}} that you could set directly within the central notice interface.

Javascript edit 

 function fixButton(){
  if(getCountryValue(1) == 'CAD' || getCountryValue(1) =='AUD' || getCountryValue(1) =='GBP' || getCountryValue(1) =='JPY')
    buttonText = "{{int:Centralnotice-2011translations-currency-2}}";
  else
    buttonText = "{{int:Centralnotice-2011translations-currency-1}}";
  buttonText = buttonText.replace('%CURRENCY%',getCountryValue(2) + ' ' + '(' + getCountryValue(1) +')' );
  document.getElementById('notice-button-2011-label').innerHTML = buttonText;
  if(getCountryValue(1) == 'USD' || getCountryValue(1) == 'EUR')
    document.getElementById( 'notice-button-2011-label').innerHTML = '{{int:Centralnotice-2011translations-read-now}}';
 }

This script is used to localise the banner button often in the bottom right hand corner of a banner. It pulls values from the javascript array, and based on the currency pulled decides the message show in the button. These messages are localised dependent on language in addition to currency.

Fader Banner edit

Javascript edit

This javascript controls the fading between any number of messages. It works by fading out the first line. When that function is completed the second line fades in and the first line is appended to the bottom and this can be used for any number of fading lines. This was previously contained within the banner code in its raw form however for the sake of cleaning up the code it can now be added via a media wiki template. The periodicity of the fade is controlled by a template variable which can be changed from the central notice banner interface.

Mediawiki Template edit

{{MediaWiki:Centralnotice-shared-faderscript-2012|delay={{{delay}}}}}

Raw code edit 

<!-- Fader code start -->
<script type="text/javascript">
(function($){
  $.fn.list_fader = function(){
    return this.each(function(){
      var obj = $(this);
      var list = obj.children();
      list.not(':first').hide();
      setInterval(function(){
        list = obj.children();
        list.not(':first').hide();
        var first_li = list.eq(0);
        var second_li = list.eq(1);
        first_li.fadeOut(function(){
          second_li.fadeIn();
          first_li.remove().appendTo(obj);
        });
      }, {{{) <!-- fader delay in ms -->
    });
  };
})(jQuery);
(function($){
  $(document).ready(function(){
    $('.fadein').list_fader();    
  });
})(jQuery);
</script>
<!-- Fader code end -->

HTML edit 

<div id="{{{utm-banner}}}">
  <a id="variable_lp" href="#">
    <div id="cn-bold-blue-text">
      <div class="fadein">
        <div id="first-message-text">
          <span id="first-message-1">{{{first-message-1}}}</span><br />
          <span id="first-message-2">{{{first-message-2}}}</span><br />
          <span id="first-message-3">{{{first-message-3}}}</span>
        </div>
        <div id="second-message-text">
          <span id="second-message-1">{{{second-message-1}}}</span><br />
          <span id="second-message-2">{{{second-message-2}}}</span><br />
          <span id="second-message-3">{{{second-message-3}}}</span>
        </div>
      </div>
    </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>

Multiple messages edit

To have multiple fading messages you simply add a third div and a fourth and so on replacing foo with the appropriate position 

      <div id="foo-message-text">
        <span id="foo-message-1">{{{foo-message-1}}}</span><br /><span id="foo-message-2">{{{foo-message-2}}}</span><br /><span id="foo-message-3">{{{foo-message-3}}}</span>
      </div>

Thermometer Banner edit

CSS edit 

/* Start of thermometer styles */
#{{{utm-banner}}} #thermo-caption {
  font-size: 1.2em;
  font-weight: bold;
  color: navy;
  padding-top: 6px;
  line-height: 1.2em;
  text-align:center;
} 

#{{{utm-banner}}} #thermometer-wrapper {
  position: relative;
  height: 21px;
  width: 800px;
  margin: 0 auto;
  padding: 0;
}
#{{{utm-banner}}} #notice-thermometer,  #{{{utm-banner}}} #notice-thermometer-daily {
  position: relative;
  height: 21px;
  width: 800px;
  margin: 0.75em 0.75em 0.25em 180px;
}
#{{{utm-banner}}} #notice-thermometer-start, #{{{utm-banner}}} #notice-thermometer-daily-start {
  float: left;
  background-image: url(//upload.wikimedia.org/wikipedia/foundation/3/3d/Fundraising-2010-thermometer2.png);
  background-position: left top;
  width: 10px;
  height: 21px;
}
#{{{utm-banner}}} #notice-thermometer-base, #{{{utm-banner}}} #notice-thermometer-daily-base {
  float: left;
  background-image: url(//upload.wikimedia.org/wikipedia/foundation/3/3d/Fundraising-2010-thermometer2.png);
  background-position: left 63px;
  height: 21px;
  color: #3474b5;
  font-weight: bold;
  text-align: right;
  line-height: 23px;
  overflow: hidden;
}
#{{{utm-banner}}} #notice-thermometer-togo, #{{{utm-banner}}} #notice-thermometer-daily-togo {
  float: left;
  height: 21px;
  font-weight: bold;
  line-height: 23px;
  overflow: hidden;
  margin-left: 1em;
}
#{{{utm-banner}}} #notice-thermometer-end, #{{{utm-banner}}} #notice-thermometer-daily-end {
  float: left;
  background-image: url(//upload.wikimedia.org/wikipedia/foundation/3/3d/Fundraising-2010-thermometer2.png);
  background-position: right -63px;
  width: 10px;
  height: 21px;
}
#{{{utm-banner}}} #notice-thermometer-mercury, #{{{utm-banner}}} #notice-thermometer-daily-mercury {
  position: absolute;
  left: 10px;
  height: 21px;
}
#{{{utm-banner}}} #notice-thermometer-fill, #{{{utm-banner}}} #notice-thermometer-daily-fill {
  float: left;
  background-image: url(//upload.wikimedia.org/wikipedia/foundation/3/3d/Fundraising-2010-thermometer2.png);
  background-position: left -21px;
  height: 21px;
  color: #E8E8E8;
  font-weight: bold;
  text-align: right;
  line-height: 23px;
  overflow: hidden;
}
#{{{utm-banner}}} #notice-thermometer-arrow, #{{{utm-banner}}} #notice-thermometer-daily-arrow {
  float: left;
  background-image: url(//upload.wikimedia.org/wikipedia/foundation/d/d6/2010-thermometer2-transition.png);
  height: 21px;
  width: 23px;
}
#{{{utm-banner}}} #notice-thermometer-recieve, #{{{utm-banner}}} #notice-thermometer-daily-recieve {
  float: left;
  background-color: #CCCCCC;
  height: 21px;
  width: 23px;
}
/* End of Thermometer styles */

Javascript edit 

// Thermometer code
var maxPixels = 450;
var range = parseFloat( '{{MediaWiki:Centralnotice-shared-2011-fundraising-daily-goal}}' ) / 1000;
var value = parseFloat( '1405' );
if ( value < 100 ) {
  value = value + parseFloat( '{{MediaWiki:Centralnotice-shared-2011-daily-extra}}' ) / 1000;
}
var left = range - value;
var fill = Math.round( maxPixels * ( ( 1 / range ) * value ) );

$(document).ready( function () {
  $('#notice-thermometer-fill').html( '$' + value.toFixed(0) + 'K raised' );
  $('#notice-thermometer-togo').html( '$' + left.toFixed(0) + 'K left' );
  $('#notice-thermometer-fill').animate( { width: fill }, 3000 );
} );

HTML edit 

<div id="{{{utm-banner}}}">
  <a id="variable_lp" href="#">
 
  <div id="cn-bold-blue-text">
    <span id="text-line-1">{{{text-1}}}</span><br />
    <span id="text-line-2">{{{text-2}}}</span><br />
    <span id="text-line-3">{{{text-3}}}</span>
  </div>
 
  <div id="thermometer-wrapper">
    <div id="notice-thermometer">
      <div id="notice-thermometer-start"></div>
      <div style="width: 450px;" id="notice-thermometer-base"></div>
      <!-- <div id="notice-thermometer-recieve"></div> -->
      <div id="notice-thermometer-end"></div>
      <div id="notice-thermometer-mercury">
        <div style="width: 60px;" id="notice-thermometer-fill">&nbsp;</div>
        <div id="notice-thermometer-arrow"></div>
      </div>
      <div id="notice-thermometer-togo">&nbsp;</div>
    </div>
    <span id="thermo-caption">{{{caption}}}</span>
  </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-label"></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>

Common central notice styles edit

MediaWiki:Centralnotice-shared-common-style-2012 edit 

<style type="text/css">
  /* Common style for 2012 banners */
  
  /* Suppress lock icon for secure links in the banner */ 
  #centralNotice a[href^="https://"], .link-https {
    background-image: none !important;
    padding: 0 !important;
  }
  
  /* Set a grey border, grey background, etc. */
  .cn-fundraiser-banner {
    position: relative;
    border: 1px solid silver;
    background-color: #fbfbfb;
    margin-bottom: 0.5em !important;
    padding-top: 1em;
    padding-bottom: 1em;
    text-align:center;
  }
  
  /* Put the little X in the top-right (ltr) or top-left (rtl) corner */
  #cn-toggle-box {
    position: absolute;
    z-index: 51;
    top: 7px;
  }
  body.ltr #cn-toggle-box {
    right: 7px;
  }
  body.rtl #cn-toggle-box {
    left: 7px;
  }
  #cn-toggle-box img {
    display: block;
  }
  
  /* Put the big X in the top-right (ltr) or top-left (rtl) corner */
  #cn-close-box {
    position: absolute;
    z-index: 51;
    top: 5px;
  }
  body.ltr #cn-close-box {
    right: 5px;
  }
  body.rtl #cn-close-box {
    left: 5px;
  }
  #cn-close-box img {
    display: block;
  }
  
  /* For buttons in the lower right (ltr) or left (rtl) corner */
  .cn-bottom-right-float {
    position: absolute;
    z-index: 50;
    bottom: 1em;
  }
  body.ltr .cn-bottom-right-float {
    right: 1em;
  }
  body.rtl .cn-bottom-right-float {
    left: 1em;
  }
  
  /* For buttons in the upper left (ltr) or right (rtl) corner */
  .cn-top-left-float {
    position: absolute;
    z-index: 50;
    top: 1em;
  }
  body.ltr .cn-top-left-float {
    left: 1em;
  }
  body.rtl .cn-top-left-float {
    right: 1em;
  }

To make the entire banner clickable make sure all banner html is within the link wrapper (<div id=”BannerName”> <a id=”cn-full-banner-click”> BANNER HTML </a></div>) This expands the url llink it to fill the whole div it is within.

  /* To make the entire banner clickable */
  a.cn-full-banner-click {
    display: block;
    position: relative;
    height: 100%;
    width: 100%;
  }
  
  /* Only cn-bold-blue-text should be underlined, and only on hover */
  #{{{utm-banner}}} a {
    text-decoration: none;
  }
  #{{{utm-banner}}} a:hover {
    text-decoration: none;
  }
  #cn-bold-blue-text:hover {
    text-decoration: underline;
  }
  
  #centralNotice.collapsed #{{{utm-banner}}} {
    display: none;
  }
</style>

Top of page green banner edit

CSS edit

Minor changes that were used in these banners were the smaller height and different background colour in {{{utm-banner}}}, inclusion of #cn-blue, #cn-blue-underline, and #inlineblue to differentiate some difference text styles and the change of the font colour to grey and some padding changes into the incorrectly named #cn-bold-blue-text.

The biggest addition that has impacts on the banner layout is the addition of the .banner-column and #banner-column-last used to contain the three column text. 

<style type="text/css">
#{{{utm-banner}}} {
  display: none; // defaulting to none, setting visible when the margins are added as fail-safe and no-go-nuts-safe
  position: relative;
  background-color: #CCE7CD;
  border: none;
  height:100px;
  overflow: hidden;
}

#cn-blue {
  color: blue; 
}
#cn-blue-underline {
  text-decoration: underline;
}

#inlineblue {
  text-decoration: underline;
  color: blue; 
}

//Dark black/grey text//
#{{{utm-banner}}} #cn-bold-blue-text {
  font-size: 1em;
  color: #111111;
  padding: 1em;
  line-height: 1em;
  text-align:left;
  text-direction:{{int:Centralnotice-2011translations-dir}};
  padding-bottom: 1.5em;
  padding-top: 0.5em;
}

body.ltr #{{{utm-banner}}} #cn-bold-blue-text{
  padding-right: 20px;
}
body.rtl #{{{utm-banner}}} #cn-bold-blue-text{
  padding-left: 20px;
}

.banner-column{
  padding: 0.5em;
  max-width: 28%;
}

#banner-column-last{
}

</style>

Javascript edit

The javascript below is utilised to make the banner appear at the top of the page rather that inserted into the article area, as is typical with central notice banners.

This modifies the css of the page itself and so great care must be taken when using these banners. Currently there is not set agreement with engineering as to the size that banners like this should be used. Currently the largest banner used in this way was 130px in height however the standard is 100px. It is currently uncertain as to whether we would be able to use the full 172px height.

Those reading this should also be aware that this style of banner is relatively untested and was only really utilised on the last day of the fundraiser. 

<script type="text/javascript">

function addBannerSpace()
{
    $('#mw-panel').css('top', '260px');
    $('#mw-head').css('top', '100px');
    $('#{{{utm-banner}}}').css('display', 'block');
}

function removeBannerSpace()
{
    $('#mw-panel').css('top', '160px');
    $('#mw-head').css('top', '0px');
}

$('body').prepend($('#centralNotice'));

$(document).ready( function () {
  if ( wgCanonicalSpecialPageName != "CentralNotice" && wgCanonicalSpecialPageName != "NoticeTemplate" ){
    addBannerSpace();
  }
});

</script>

HTML edit

  • Once of the main differences with this banner is the use of tables within the banner. This is not normally recommended however it is the only way to get this style of banner to work in IE6. The below text replaces what is typically the simple three line banner message.
<table>
<tbody>
<tr valign="top">
  <td class="banner-column">
    <li>Wikipedia is non-profit, but it's the #5 website in the world, serving 470 million people every month. To protect our independence, we'll never run ads.
  </td>
  <td class="banner-column">
    <li>Google might have close to a million servers. Yahoo has something like 13,000 staff. We have 679 servers and 95 staff.
  </td>
  <td class="banner-column" id="banner-column-last">
    <li>If you rely on Wikipedia, please consider <span id="inlineblue">donating $5, $20, $50</span> or whatever you can to keep it free.
  </td>
  <td style="width: 120px;">
////////////////////////BUTTON/////////////////////////////
  </td>
</tr>
</tbody>
</table>

External banner linking for chapters edit

Some of the chapters host their landing pages on their own sites. This year, they will be required to offer multiple translations of these pages (usually their local language, plus English). So we need a way to direct banners to the correct language, and unfortunately the LandingCheck extension won't work for external sites.

Luckily there's an easy way to do it: Use a localizable message e.g. {{{landing-page}}}. The href of the banner link is set to this message, plus whatever tracking codes need to be passed.

Example code from a WM Sweden banner: 

<div id="WMSE-systemtest"></div>
<a id="cn_chapter_link" href="{{{landing-page}}}?utm_medium=sitenotice&utm_campaign={{{campaign}}}&utm_source={{{banner}}}">
<div id="cn-bold-blue-text">
  {{int:Centralnotice-2010_Jimmy_trans-donate-text1}}<br /> {{int:Centralnotice-2010_Jimmy_trans-donate-text2}} <br /> {{int:Centralnotice-2010_Jimmy_trans-donate-text3}}
</div>
</a>

Then in the banner settings, the English translation of landing-page is set to http://wikimedia.se/en/donate, and the Swedish translation to http://wikimedia.se/sv/donera. (Remember not to tick the "This is a fundraising banner" box, as that uses LandingCheck which doesn't work here)

Banners to Single Steps edit

Banners pointing to single-step forms on payments must use a different link structure than the traditional two-step landing pages. RapidHTML forms existing on the Payments cluster generally have a URL in the form 

https://payments.wikimedia.org/index.php/Special:PayflowProGateway?uselang=en&masthead=none&form_name=RapidHtml&ffname={{{ffname}}}&utm_medium=sitenotice
  &utm_campaign={{{campaign}}}&utm_source={{{banner}}}&country_code={{{country_code}}}&_cache_=true

In addition to the RapidHTML form name, the ffname variable also must include a utm_source_id, which is unique for each form and required for analytics on the payments cluster. These id's can be requested from fr-tech.

An example banner can be found at B_BR_0923_US_1S

Note: The use of the "This is a fundraising banner" is not supported for single-step banners. The "Close" button must coded with the following 

<div id="cn-toggle-box">
  <a href="#" onclick="hideBanner();return false;"><img border="0" src="//bits.wikimedia.org/skins-1.17/common/images/closewindow.png" alt="Close" /></a>
</div>

Note: DO NOT USE {{{targets}}} as a variable name. It will be clobbered by the underlying variable in the "This is a fundraising banner" form.

Redirecting IE6 in the Banner edit

When in the course of testing new landing pages, it becomes necessary for one PC to redirect all IE6 users, a decent respect to the opinions of internet users requires that they should declare the causes which impel them to the redirection.

We hold these truths to be self-evident, that tests are purely tests and that development resources should be prioritized on tasks affecting large portions of our user base. That to provide the best experience for the vast majority of our visitors, we must abandon browser versions whose implementations are not proportional to the users affected.

Such has been the patient sufferance of web developers for many years

  • IE6 refuses to be compliant with standards
  • IE6 has been sunset for many years now
  • IE6 provides a terrible UX
  • Microsoft has publicly advocated for users to abandon IE6

We, therefore, the members of fr-production, fr-tech, and fr-creative send IE6 users to a landing page that we know works for them with the following code. 

var cn_rewrite_url = function() {

    var url = 'https://payments.wikimedia.org/index.php/Special:PayflowProGateway?uselang=en&masthead=none&form_name=RapidHtml&ffname=';
    var targets = String ( '{{{targets}}}' ).split ( ',' );
    if ( targets.length ) {
        url += "" + targets[Math.floor ( Math.random () * targets.length )].replace ( /^\s+|\s+$/, '' );
    }
    url += '&utm_medium=sitenotice&utm_campaign={{{campaign}}}&utm_source={{{banner}}}&country_code=' + Geo.country;

    if ( jQuery.browser.msie && jQuery.browser.version.substr ( 0, 1 ) < 7 ) {
        // redirect incompatible browsers to another form
        url = 'https://wikimediafoundation.org/wiki/Special:LandingCheck?language=en&landing_page={{{redirect_LP}}}';
        url += '&utm_campaign={{{campaign}}}&utm_source={{{banner}}}&country_code=' + Geo.country;
    }

    $( 'div#B_BR_overlapfixed a.variable_lp' ).attr ( 'href', url );
};

$(document).ready( cn_rewrite_url );

Note: The use of the "This is a fundraising banner" is not supported with the redirect in place. The "Close" button must coded with the following 

<div id="cn-toggle-box">
  <a href="#" onclick="hideBanner();return false;"><img border="0" src="//bits.wikimedia.org/skins-1.17/common/images/closewindow.png" alt="Close" /></a>
</div>
Retrieved from "https://meta.wikimedia.org/w/index.php?title=Fundraising_2011/Styleguide/Banners&oldid=24932632"