Styleguide/Banner: Difference between revisions

Content deleted Content added
Cbarr (talk | contribs)
Created page with "The following is an example of banner code that is used to create a link to a donate.wiki Landing Page. <pre> {{MediaWiki:Centralnotice-shared-common-style-2011}} {{MediaWiki..."
 
incorporate some fixes
 
Line 1:
The following is an example of banner code that is used to create a link to a donate.wiki Landing Page.
 
<syntaxhighlight lang="html4strict">
<pre>
{{MediaWiki:Centralnotice-shared-common-style-20112012}}
{{MediaWiki:Centralnotice-shared-button-20112012}}
{{MediaWiki:Centralnotice-shared-urlrandomizer-2012}}
 
<style type="text/css">
/* Banner Image*/
 
#centralNotice.collapsed #{{{utm-banner}}}{
display: none;
}
 
#{{{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;
background-color:#FFFFFF;
border: solid 1px silver;
height:166px;
overflow: hidden;
}
Line 25 ⟶ 23:
body.rtl #{{{utm-banner}}} {
background-position: 100% 0%;
}
 
/* The bold, blue text */
#{{{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 {
padding: 1.5em 80px 0.8em 210px;
font-size: 2em;
text-align: center;
text-direction: {{int:Centralnotice-2011translations-dir}};
font-size: 2.5em;
line-height: 1em;
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];
{
}
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">
 
varfunction bannerRewriteUrl = function() {
$('#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',
'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+$/, '');
}
}
 
Line 117 ⟶ 69:
bannerRewriteUrl();
});
</script>
 
<div id="{{{utm-banner}}}">
</script>
<a id="variable_lp" href="#">
</pre>
<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>
 
</syntaxhighlight>