MediaWiki:Centralnotice-template-WikiMOOC test banner

From Meta, a Wikimedia project coordination wiki

<style> .frbanner {

   position: relative;
   overflow: hidden;
   background: transparent;
   border: 1px solid rgba(0, 0, 0, 0.3);
   margin-bottom: 1em;
   cursor: pointer;
   color: #222;
   font-weight: 500;
   box-shadow: 0.1em 0.1em 0.6em 0 rgba(0, 0, 0, 0.4);

}

  1. frbanner-main {
   display: table;
   width: 100%;
   height: 80px; /* need to set height for height 100% to work on elements within it */

}

.frbanner-message-container, .frbanner-form-container {

   display: table-cell;
   height: 100%;
   vertical-align: middle;

}

/* --- Main message --- */ .frbanner-message-container img {

   position: absolute;
   right: .0em;
   top: .0em;
   opacity: 0.9;
   height: 90px;
   z-index: 0;

}

.frbanner-message {

   position: relative;
   margin: 0;
   z-index: 1;
   color: #4D4D4D;
   line-height: 1.2;
   font-weight: bold;
   padding: 11px 130px 11px 10px;

}

body.rtl .frbanner-message {

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

}

@media (min-width: 1100px) { .frbanner-message { font-size: 18px; } } @media (min-width: 1200px) { .frbanner-message { line-height: 1.3em; } }

.frbanner-message p {

   margin: 0;
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 20px;
   opacity: 1;

}

.frbanner-greeting {

   font-style: italic;

}

/* --- Main banner text --- */ .frbanner-form-container {

   width: 13%;
   background: white;
   padding: .35em 1.25em .35em 1.5em;

}

body.rtl .frbanner-form-container {

   padding: 1.65em .5em .35em .2em;

}

.frbanner-form-container img {

   opacity: .70;
   display: block;
   margin: 0 auto;

}

/* --- Close Options --- */

  1. {{{banner}}} div#cn-toggle-box {
position: absolute;
top: 2px;
right: 6px;
z-index: 999;

}

/* --- Full Banner Link --- */

  1. {{{banner}}} a.cn-full-banner-click {
display:block;
height:100%;
width:100%;
cursor: pointer;
text-decoration: none;

}

.button {

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

}

/* --- Buttons --- */

  1. {{{banner}}} a.buttonlink {
 cursor: pointer;
 text-decoration: none;
 color: black;

}

  1. {{{banner}}} a.buttonlink:hover {
 color: white;

}

.button1 {

   background-color: #14866D;
   color: white;
   position: absolute;
   top: 20px;
   right: 30px;

}

.button1:hover {

background-color: #00AF89;

} </style>

 <a class="cn-full-banner-click" href="//blog.wikimedia.org/2016/12/15/seventh-annual-wiki-loves-monuments/?utm_source=greenbanner1&pk_campaign=greenbanner1">
         <img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/88/Logo_WikiMooc_2017.svg/200px-Logo_WikiMooc_2017.svg.png" alt="Wikimedia Blog">

Fan de cinéma, de sport, d'histoire, de science... ?
Apprenez à enrichir Wikipédia sur vos centres d'intérêt avec notre cours en ligne gratuit, le WikiMOOC.

</a>

<a class="buttonlink" href="//blog.wikimedia.org/2016/12/15/seventh-annual-wiki-loves-monuments/?utm_source=greenbanner1&pk_campaign=greenbanner1">
Lire la suite
</a>
     <a href="#" title="Cerrar" onclick="hideBanner();return false;"><img border="0" src="//upload.wikimedia.org/wikipedia/foundation/2/20/CloseWindow19x19.png" alt="Cerrar" /></a>