Jump to content

MediaWiki:Centralnotice-template-CommunityBanner Slimline bottom

From Meta, a Wikimedia project coordination wiki

<style type="text/css">

 #centralNotice.collapsed #{{{banner}}}{
   display: none;
 }
 div#{{{banner}}} {
   background: #fff;
   font-family: Arial, Helvetica, Verdana, sans-serif;
   overflow: hidden;
   z-index: 9999;
   left: 0;
   position: fixed;
   bottom: 0;
   width: 100%;
   padding-right: 6px;
 }
 div#{{{banner}}}.sticky {
   background: transparent;
   left: 0;
   position: fixed;
   top: 0;
   width: 100%;
   padding-right: 6px;
 }
 div#{{{banner}}} div#{{{banner}}}-facts {
   background: #f8f9fa;
   cursor: pointer;
   position: relative;
   width: 100%;
   border: 3px solid #900;
 }
 div#{{{banner}}} div#{{{banner}}}-facts:hover {
   text-decoration: underline;  }
 div#{{{banner}}} span#{{{banner}}}-tab {
   background: #900;
   background-position: 115px 10px;
   border: 1px solid #a7a7a7;
   border-top: none;
   border-radius: 0 0 5px 5px;
   color: #fff;
   cursor: pointer;
   display: block;
   font-size: 12px;
   padding: 3px 6px 3px 9px;
   font-weight: bold;
   height: 25px;
   line-height: 25px;
   margin: 0 auto;
   position: relative;
   text-align: center;
   text-transform: uppercase;
   width: 130px;
   z-index: 100;
   -moz-border-radius: 0 0 5px 5px;
   -webkit-border-radius: 0 0 5px 5px;
 }
 div#{{{banner}}} span#{{{banner}}}-tab.close {
   background-position: 115px -40px;
 }
 div#{{{banner}}} span#{{{banner}}}-close {
   background: url(//upload.wikimedia.org/wikipedia/donate/1/1e/Small-black-close.png) no-repeat center center;
   cursor: pointer;
   display: block;
   height: 11px;
   position: absolute;
   text-indent: -9999px;
   right: 10px;
   top: 12px;
   width: 11px;
 }
  1. cnotice-main {
   display: table;
   width: 100%;
   height: 30px; /* need to set height for height 100% to work on elements within it */

}

.cnotice-message-container, .cnotice-logo-container {

   display: table-cell;
   height: 100%;

}

/* --- Main message --- */ .cnotice-message-container {

   vertical-align: middle;

}

.cnotice-message {

   position: relative;
   margin: 0;
   color: #000;
   line-height: 1.2;
   padding: 11px 10px 11px 10px;

}


body.rtl .cnotice-message {

   padding: 11px 40px 11px 140px;
   background-position: right 10px top 10px;

}

.cnotice-message p {

   margin: 0;
   font-family: "Linux Libertine", Georgia, Times, serif;
   font-size: 1.0em;
   line-height: 1.4;
   opacity: 1;
   text-align: center;

}

@media (min-width: 1200px) {

   .cnotice-message p { font-size: 1.0em; }

}


/* --- Logo Image text --- */

.cnotice-logo-container {

   width: 103px;
   vertical-align: top;

}

@media (min-width: 1200px) {

    .cnotice-logo-container { width: 140px; }

}

body.rtl .cnotice-logo-container { }

  1. cnotice-logo-img {
   background-image: url(//upload.wikimedia.org/wikipedia/foundation/thumb/9/9c/MokaHands_CN.png/140px-MokaHands_CN.png);
   background-repeat: no-repeat;
   background-size: contain;
   opacity: 0.6;
   width: 100%;
   height: 100%;

}

 div#{{{banner}}} div#{{{banner}}}-landing {
   background: #fff;
   border-bottom: 1px solid #a7a7a7;
   display: none;
   font-family: Arial, Helvetica, Verdana, sans-serif;
   padding: 5px 0 1px 0;
   position: relative;
   width: 100%;
   z-index: -2;
 }
 div#{{{banner}}} div#{{{banner}}}-landing:after {
   clear: both;
   content: ;
   display: block;
   height: 0;
   visibility: hidden;
 }
 div#{{{banner}}} div#{{{banner}}}-landing span.landing-close {
   color: #3f3f3f;
   cursor: pointer;
   font-size: 12px;
   position: absolute;
   right: 10px;
   top: 10px;
 }
  1. cnotice-landing-main {
   display: table;
   width: 100%;
   height: 200px; /* need to set height for height 100% to work on elements within it */

}

  1. cnotice-landing-header {
    width: 100%;
    text-align: center; 
    font-family:Linux Libertine, Georgia, Times Roman; 
    line-height: 1.5em;
    font-size: 250%;

}

  1. smallwikilogo {

background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/6a/Wikipedia-logo-textonly.svg);

   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   width: 100%;
   height: 40px;
   position: relative;
   margin: 0 auto;

}

.cnotice-landing-img-container, .cnotice-landing-text-container {

   display: table-cell;
   height: 100%

}

.cnotice-landing-img-container {

   width: 500px;
   vertical-align: top;

}

  1. cnotice-landing-img {
   background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Wikipedia_SOPA_Blackout_Design-White.PNG/400px-Wikipedia_SOPA_Blackout_Design-White.PNG);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   opacity: 0.6;
   width: 100%;
   height: 100%;

}

.cnotice-landing-text-container img {

   opacity: 0.3;
   position: absolute;
   margin-left: 4em;
   z-index: -1;

}

  1. cnotice-landing-text {
    text-align: center; 
    font-family:Linux Libertine, Georgia, Times Roman; 
    line-height: 1.5em;
    font-size: 126%;

}

  1. cnotice-landing-text p {
    margin-right: auto; 
    margin-left: auto;
    max-width: 400px;

}

  1. cnotice-button-container {
    display: table;
    margin: 0 auto;

}

  1. cnotice-button-read {
    display: table-cell;

}

cnotice-button-action {

    display: table-cell;

}

.cnotice-button {

   border: none;
   display: inline-block;
   border-radius: 4px;
   color: white;
   padding: 10px 15px;
   text-align: center;
   font-weight: bold;
   text-decoration: none;
   font-size: 17px;
   margin: 4px 2px;
   -webkit-transition-duration: 0.4s; /* Safari */
   transition-duration: 0.4s;
   cursor: pointer;
   z-index: 999;

}

/* --- Buttons --- */ .cnotice a.cnotice-buttonlink {

   cursor: pointer;
   text-decoration: none;
   color: black;

}

.cnotice a.cnotice-buttonlink:hover {

   color: white;

}

.cnotice-button1 {

   background-color: #0063BF;
   color: white;
   position: static;
   min-width: 110px;
   margin-bottom: 20px;
   margin-left: 10px;
   margin-right: 10px;

}

.rtl .cnotice-button1 {

   left: 23px;
   right: auto;

}

.cnotice-button1:hover {

   background-color: #447FF5;

} </style>

Photograph a monument, help Wikipedia and win! #wikilovesmonuments

<script type="text/javascript">

 $(document).ready( function () {
   $('body').prepend($('#centralNotice'));
   if ( wgCanonicalSpecialPageName != "CentralNotice" && wgCanonicalSpecialPageName != "NoticeTemplate" ){
     addBannerSpace();
     $(window).resize(function() {
       addBannerSpace();
     })
     stickBanner();
     $(window).scroll(function(){
       stickBanner();
     })
     $('span#{{{banner}}}-close').click(function() {
       hideBanner();
       $('#mw-panel').css('top', '160px');
       $('#mw-head').css('top', '0px');
       return false;
     })
   }
 });

</script> <script type="text/javascript" language="javascript"> var getQuerystring = function(key) {

   key = key.replace( /[\[]/, '\\\[' ).replace( /[\]]/, '\\\]' );
   var regex = new RegExp( '[\\?&]' + key + '=([a-zA-Z0-9\_\-]*)' );
   var qs = regex.exec( window.location.search );
   return qs == null ?  : qs[1];

};

var bannerChooseRandom = function(choiceString) {

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

};

$(document).ready( function () {

   if(getQuerystring('country') != ){
       Geo.country = getQuerystring('country');
   }
   
   $("a.localize").each(
       function(index){
           var url = $(this).attr("href");
           if( url.indexOf("?") == -1 ){
               url = url + "?"
           } else {
               url = url + "&"
           }
           $(this).attr("href", url + "country=" + Geo.country + "&language=" + mw.config.get('wgUserLanguage')
               + "&uselang=" + mw.config.get('wgUserLanguage'));
       }
   );
   
   if ( wgCanonicalSpecialPageName != "CentralNotice" && wgCanonicalSpecialPageName != "NoticeTemplate" ){
       var currencySymbol = '$';
       switch(Geo.country){
           case 'GB':
               currencySymbol = '£'; break;
           case 'IT':
               currencySymbol = '€'; break;
           default:
               currencySymbol = '$';
       }
       if(currencySymbol != '$'){
           $("div#{{{banner}}} p").each(function(index){
               $(this).html( $(this).html().replace(/\$/g, currencySymbol) );
           });
       }
   }
   

}); </script> <script type='text/javascript'> function validateForm(form) {

   var minimums = {
       'USD':1,
       'GBP':1, // $1.26
       'EUR':1, // $1.26
       'AUD':2, // $1.35
       'CAD':1, // $0.84
       'CHF':1, // $0.85
       'CZK':20, // $1.03
       'DKK':5, // $0.85
       'HKD':10, // $1.29
       'HUF':200, // $0.97
       'JPY':100, // $1
       'NZD':2, // $1.18
       'NOK':10, // $1.44
       'PLN':5, // $1.78
       'SGD':2, // $1.35
       'SEK':10, // $1.28
       'ILS':5 // $1.39
   };
   var error = true;
   // Get amount selection
   var amount = null;
   for (var i = 0; i < form.amount.length; i++) {
       if (form.amount[i].checked) {
           amount = form.amount[i].value;
       }
   }
   if (form.amountGiven.value != "") {
       var otherAmount = form.amountGiven.value;
       otherAmount = otherAmount.replace(/[,.](\d)$/, '\:$10');
       otherAmount = otherAmount.replace(/[,.](\d)(\d)$/, '\:$1$2');
       otherAmount = otherAmount.replace(/[\$,.]/g, );
       otherAmount = otherAmount.replace(/:/, '.');
       form.amountGiven.value = otherAmount;
       amount = otherAmount;
   }
   // Check amount is a real number
   error = ( amount == null || isNaN(amount) || amount.value <= 0 );
   // Check amount is at least the minimum
   var currency = form.currency_code.value;
   if (typeof( minimums[currency] ) == 'undefined') {
       minimums[currency] = 1;
   }
   if (amount < minimums[currency] || error) {
       alert('You must contribute at least $1'.replace('$1', minimums[currency] + ' ' + currency));
       error = true;
   }
   return !error;

} function redirectPayment(i) {

   var ccforms = {
       'US' : 'cc-vmad',
       'AU' : 'cc-vmaj,email-cc-vmaj',
       'CA' : 'cc-vm',
       'GB' : 'cc-vma',
       'NZ' : 'cc-vma',
       'IT' : 'cc-vma'
   };
   var ccformName = bannerChooseRandom( ccforms[Geo.country] );
   var language = mw.config.get('wgUserLanguage');
   var rccforms = {
       'US' : 'rcc-vmad',
       'AU' : 'rcc-vmaj',
       'CA' : 'rcc-vm',
       'GB' : 'rcc-vma',
       'NZ' : 'rcc-vma',
       'IT' : 'rcc-vma'
   };
   var rccformName = bannerChooseRandom( rccforms[Geo.country] );
   var frequency = $("input[name='frequency']:checked").val();
   if( frequency != "monthly" ){
       frequency = "onetime";
   }
   //if i == 1
   var paymentType = "cc";
   var action_url = "https://payments.wikimedia.org/index.php/Special:GlobalCollectGateway?uselang=" + language + "\x26appeal=JimmyQuote\x26form_name=RapidHtml\x26ffname=";
   if( frequency == "monthly"){
       action_url += rccformName;
       paymentType = "rcc";
   } else {
       action_url += ccformName;
   }
   if (i == 2) {
       action_url = "https://foundation.wikimedia.org/wiki/Special:ContributionTracking/" + language;
       paymentType = "pp";
       if( frequency == "monthly"){
           $('<input>').attr({
               type : 'hidden',
               id : 'recurring-hidden',
               name : 'recurring_paypal',
               value : "true"
           }).appendTo( $("form[name='paypalcontribution']") );
           paymentType = "rpp";
       }
   }
   if (i == 3) {
       action_url = "https://payments.wikimedia.org/index.php/Special:AmazonGateway?redirect=1\x26uselang=" + language;
       paymentType = "amazon";
   }
   if (i == 4) {
       formName = "obt-bpay";
       action_url = "https://payments.wikimedia.org/index.php/Special:GlobalCollectGateway?uselang=" + language + "\x26form_name=RapidHtml\x26ffname=" + formName + "\x26appeal=JimmyQuote";
       paymentType = "bpay";
   }
   if (i == 5) {
       formName = "ew-webmoney";
       action_url = "https://payments.wikimedia.org/index.php/Special:GlobalCollectGateway?uselang=" + language + "\x26form_name=RapidHtml\x26ffname=" + formName + "\x26appeal=JimmyQuote";
       paymentType = "ew";
   }
   document.paypalcontribution.action = action_url;
   document.paypalcontribution.utm_source.value = '{{{banner}}}.no-LP' + '.' + paymentType;
   document.paypalcontribution.payment_method.value = paymentType;
   if (validateForm(document.paypalcontribution)) {
       document.paypalcontribution.submit();
   }

}

$(document).ready( function () {

   if ( wgCanonicalSpecialPageName != "CentralNotice" && wgCanonicalSpecialPageName != "NoticeTemplate" ){
       // append the banner count in utm-key
       var cookieName = 'centralnotice_bannercount_fr12';
       var count = $.cookie(cookieName);
       $('[name="paypalcontribution"]').append(
           $('<input type="hidden" name="utm_key" />').attr('value', count));
       // do country-specific things
       var currency = "USD";
       var symbol = "$";
       switch(Geo.country){
           case 'AU':
               $(".paymentmethod-bpay").css("display", ""); //do not set to block
               currency = "AUD";
               break;
           case 'CA':
               currency = "CAD";
               break;
           case 'GB':
               currency = "GBP";
               symbol = "£";
               break;
           case 'IT':
               currency = "EUR";
               symbol = "€";
               break;
           case 'NZ':
               currency = "NZD";
               break;
           case 'US':
               $(".us-only").css("display", "");
               $(".paymentmethod-amazon").css("display", ""); //do not set to block
               break;
           default:
       }
       // set the form fields
       $("input[name='country']").val(Geo.country);
       $("input[name='currency_code']").val(currency);
       $("input[name='language']").val(mw.config.get('wgUserLanguage'));
       $("input[name='return_to']").val("Thank_You/" + mw.config.get('wgUserLanguage'));
       // do fun things to localize currency in the banner and form
       $("input[name='amount']").each(function(index){
           var id = $(this).attr("id");
           var label = $("label[for='" + id + "']");
           label.text(label.text().replace(/\$/, symbol));
       });
   }

});

function toggleMonthly( monthly ){

   if( monthly.type == "checkbox" ){
       monthly = monthly.checked;
   }
   var onetimeonly = $(".no-monthly");
   if( monthly ){
       onetimeonly.css("display", "none");
   } else {
       onetimeonly.css("display", "");
       if( Geo.country != "US" ){
           $(".paymentmethod-amazon").css("display", "none");
       }
       if( Geo.country != "AU" ){
           $(".paymentmethod-bpay").css("display", "none");
       }
   }

} </script> <script type='text/javascript'> var cookieName = 'centralnotice_bannercount_fr12'; var count = $.cookie(cookieName); if( count == null ){

 count = 1;

} else {

 count = parseInt( count ) + 1;

} $.cookie( cookieName, count, { expires: 30, path: '/' } ); </script>