Bonjour tout le monde,
Voici mon premier LS de PA suite à la demande de Madii-x, faite ici. Vous avez également le qeel ainsi que les catégories qui vont avec cette PA.
Ce code-ci est à insérer dans une page html (PA>Modules>Pages HTML>Créer)
Une fois que tu as enregistré ta page web (copie/colle l'adresse internet de celle-ci quelque part, car tu vas en avoir besoin), il te suffit de te rendre sur ta page d'accueil, et de coller le code pour insérer une iframe, à savoir :
Et tu auras ainsi ta belle Page d'accueil toute fonctionnelle :)
LS ~ PA gris/rose :
Voici mon premier LS de PA suite à la demande de Madii-x, faite ici. Vous avez également le qeel ainsi que les catégories qui vont avec cette PA.
Découvrez un aperçu de cette PA en ligne:
www (avec intéractions)
Et découvrez celle-ci en images :
Normale- Infobulles- Survol nouveautés
www (avec intéractions)
Et découvrez celle-ci en images :
Normale- Infobulles- Survol nouveautés
La PA contient en elle-même :
- Une zone concours avec infobulles (peut être adaptée en membre du mois.
- Une zone staff avec informations apparaissant au survol...
- Une zone "nouveautés" scrollable et cliquable.
- Un système de masquage automatique sur les images (effet déchiré).
- Une zone "partenaires" défilante, aux normes du W3C + arrêt au survol.
Les codes à insérer !
Ce code-ci est à insérer dans une page html (PA>Modules>Pages HTML>Créer)
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>PA grise/rose + scrollbar personnalisée.</title>
<link href='http://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css'>
<style>
body {
background: #e4e1e2;
}
#pa h1, #pa h2, #pa h3, #pa h4, #pa h5, #pa h6, #pa p {
margin: 0; padding: 0; font-weight: normal;
}
#pa {
width: 800px;
min-height: 400px;
border-radius: 10px;
background: #fff;
margin: 75px auto 20px;
position: relative;
padding-top: 50px;
font-family: "abeatbykai", sans-serif;
font-size: 12px;
letter-spacing: 1px;
color: gray;
}
#pa a {
color: darkgray;
text-decoration: none;
}
#pa a, #pa h2, .news p {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#pa a:hover {
color: #d74e77;
}
#pa h1 {
width: 347px;
height: 70px;
background: url("http://i39.servimg.com/u/f39/19/07/10/81/titre-10.png") no-repeat;
position: absolute;
top: -55px;
left: 50%;
margin-left: -173.5px;
text-indent: -9999px;
}
ul#ticker01, ul#concours, ul.groupes, ul#staff
{
list-style-type: none;
margin: 0;
padding: 0;
}
#pa h2 img {
position: absolute; top:0;
}
#pa table td {
min-height: 50px;
border-radius: 10px;
position: relative;
padding-top: 25px;
}
#pa table td.withbg {
background: #e4e1e2;
}
#pa h2 {
height: 34px;
position: absolute;
top: -12.5px;
z-index: 3;
font-size: 34px;
font-family: 'Covered By Your Grace', cursive;
}
#pa h2:hover {
color: rgba(209,42,97,1);
}
/* CONCEPT */
.concept {
height: 192px; max-height: 192px;
overflow-y: scroll;
padding: 1px;
}
.concept p {
margin-bottom: 20px !important;
padding-right: 20px !important;
}
.concept p:last-child {
margin-bottom: 0px !important;
}
/* GROUPES */
.groupes {
height: 60px; max-height: 60px;
text-align: center;
}
.groupes li {
display: inline-block;
margin: 0 10px;
}
/* NEWS */
.news {
height: 87px; max-height: 87px;
overflow-y: scroll;
}
.news strong {
color: #d74e77;
font-family: sans-serif;
text-transform: uppercase;
font-weight: normal;
}
.news p {
border-bottom: 1px solid lightgray;
padding: 2px 0 !important; margin: 2px 0 !important;
}
.news p:hover {
border-bottom: 1px solid lightgray;
padding: 2px 0 2px 20px !important; margin: 2px 0 !important;
}
/* CONCOURS */
ul#concours {
width: 280px;
height: 114px; max-height: 114px;
margin: 0px auto 0;
text-align: center;
}
ul#concours li {
width: 84px;
margin: 0 5px;
display: inline-block;
position: relative;
z-index: 4;
}
ul#concours li span {
display: none;
width: 150px;
padding: 10px;
position: absolute;
bottom: 60px; right: 50%; margin-right: -75px;
background: #fff;
color: #fff;
z-index: 5;
border-radius: 10px;
border-bottom: 1px solid #d74e77;
}
ul#concours li:hover span {
display: block;
}
ul#concours li span img {
max-width: 150px;
height: auto;
}
.fleche {
width: 26px;
height: 12px;
background: url("http://i39.servimg.com/u/f39/19/07/10/81/fleche11.png");
position: absolute;
bottom: -12px;
left: 50%;
margin-left: -13px;
}
/* STAFF */
#staff img, ul#concours li img.mini {
-webkit-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
-moz-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
-ms-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
-o-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
}
#staff li {
display: inline-block;
width: 80px; max-width: 80px;
}
#staff li:hover {
cursor: help;
}
.staff p {
padding: 10px 0 10px !important;
}
.staff{
text-align: center;
}
.staff .pseudo
{
display: inline-block;
color: #d74e77;
}
/* PARTENAIRES */
td.partenaires {
padding-top: 15px !important;
}
.tickercontainer { /* the outer div with the black border */
width: 750px;
height: 31px;
margin: 0 auto;
padding: 0;
overflow: hidden;
position: relative;
z-index: 2;
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 0px;
top: 0px;
width: 750px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 750px;
}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
width: 88px;
margin: 0 2px;
padding: 0;
}
/* CREDITS */
#credits {
position: absolute;
padding: 0px 10px;
bottom: -20px;
right: 0px;
height: 20px;
line-height: 20px;
font-size: 8px;
color: gray;
text-transform: uppercase;
text-shadow: 1px 1px 0px #ffffff;
}
/* SCROLLBAR */
::-webkit-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
::-webkit-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
::-webkit-scrollbar-corner{background:none;}
::-moz-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
::-moz-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
::-moz-scrollbar-corner{background:none;}
::-ms-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
::-ms-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
::-ms-scrollbar-corner{background:none;}
::-o-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
::-o-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
::-o-scrollbar-corner{background:none;}
::-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
::-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
::-scrollbar-corner{background:none;}
</style>
</head>
<body>
<div id="pa">
<h1>Bienvenue !</h1>
<table width="800px" cellspacing="15px" cellpadding="10px" id="contenu-general">
<tr>
<td rowspan="2" valign="top" class="withbg" width="300px">
<h2>Le concept</h2>
<div class="concept">
<p>Bien le bonjour</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, itaque, cum veniam vel sed dicta <a href="">quaerat modi</a> ab soluta molestias voluptas ipsam sit omnis. Nemo, natus facilis suscipit sequi ratione. Lorem ipsum dolor sit amet, consectetur adipisicing </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, ab, voluptates, porro totam omnis eos hic mollitia beatae quia dolores corrupti delectus sequi recusandae molestiae sit. Magni saepe repellendus voluptas.</p>
</div>
</td>
<td valign="top" width="450px">
<ul class="groupes">
<li><a href="" style="color: red;">groupe 1</a></li>
<li><a href="" style="color: green;">groupe 2</a></li>
<li><a href="" style="color: orange;">groupe 3</a></li>
<li><a href="" style="color: blue;">groupe 4</a></li>
<li><a href="" style="color: magenta;">groupe 5</a></li>
</ul>
</td>
</tr>
<tr>
<!-- <td>lol</td> on supprime cette ligne, car rowspan -->
<td valign="top" class="withbg">
<h2>Les nouveautés</h2>
<div class="news">
<p><strong>News 1 :</strong> <a href="">Les fourmis ont des pattes!</a></p>
<p><strong>News 2 :</strong> Quoi, une news sans lien ? </p>
<p><strong>News 3 :</strong> <a href="">Pas touche la mouche</a></p>
<p><strong>News 4 :</strong> <a href="">T'as pas pris ta douche</a></p>
<p><strong>News 5 :</strong> The style for news</p>
<p><strong>News 6 :</strong> The style for news</p>
<p><strong>News 7 :</strong> The style for news</p>
<p><strong>News 8 :</strong> The style for news</p>
</div>
</td>
</tr>
<tr>
<td valign="top" class="withbg">
<h2>Concours</h2>
<ul id="concours">
<li>
<img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="AOTM" class="mini"> <!-- miniature concours 84*37px -->
<div class="titre-concours">AOTM</div> <!-- titre concours -->
<span>
<img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt=""> <!-- infobulle -->
<div class="fleche"></div> <!-- tite fleche -->
</span>
</li>
<li>
<img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="AOTM" class="mini"> <!-- miniature concours 84*37px -->
<div class="titre-concours">AOTM</div> <!-- titre concours -->
<span>
<img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt=""> <!-- infobulle -->
<div class="fleche"></div> <!-- tite fleche -->
</span>
</li>
<!--
BLOC A DUPLIQUER SI 3 OU 4 CONCOURS :
<li>
<img src="staff.png" alt="AOTM" class="mini">
<div class="titre-concours">AOTM</div>
<span>
<img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt="">
<div class="fleche"></div>
</span>
</li> -->
</ul>
</td>
<td valign="top" class="withbg">
<h2>Le staff</h2>
<ul id="staff">
<li onMouseOver="javascript:staff1()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
<li onMouseOver="javascript:staff2()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
<li onMouseOver="javascript:staff3()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
<li onMouseOver="javascript:staff4()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
<li onMouseOver="javascript:staff5()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
</ul>
<div class="staff">
<div id="staff1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, sapiente, quos, qui corporis soluta optio aspernatur harum minus asperiores ipsum repudiandae placeat ipsam.</p>
<div class="pseudo">PSEUDO</div> • <a href="">PROFIL</a> • <a href="">MP</a>
</div>
<div id="staff2" style="display:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, aliquid, laudantium, neque eius nemo amet dolores velit esse voluptas dicta quisquam quos consequuntur provident</p>
<div class="pseudo">PSEUDO</div> • <a href="">PROFIL</a> • <a href="">MP</a>
</div>
<div id="staff3" style="display:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, illo, assumenda, pariatur reprehenderit nam vero tempore nostrum laboriosam molestiae maxime incidunt.</p>
<div class="pseudo">PSEUDO</div> • <a href="">PROFIL</a> • <a href="">MP</a>
</div>
<div id="staff4" style="display:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, autem, dolor in quaerat quas quos pariatur iusto aliquid laudantium et ipsum nulla dignissimos.</p>
<div class="pseudo">PSEUDO</div> • <a href="">PROFIL</a> • <a href="">MP</a>
</div>
<div id="staff5" style="display:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, voluptate rerum ipsam incidunt magni temporibus voluptatibus voluptas labore praesentium nemo deserunt.</p>
<div class="pseudo">PSEUDO</div> • <a href="">PROFIL</a> • <a href="">MP</a>
</div>
</div>
</td>
</tr>
<tr>
<td valign="top" colspan="2" class="withbg partenaires">
<h2>Partenaires</h2>
<ul id="ticker01">
<li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt=""></a></li>
<li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt=""></a></li>
<li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt=""></a></li>
<!-- eccetera -->
</ul>
</td>
</tr>
</table>
<div id="credits">
PA réalisée par Henrykiki sur <a href="http://www.never-utopia.com/t52871-henrykiki-pa-grise-rose-pale" target="_blank">Never-Utopia</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
/*!
* liScroll 1.0
* Examples and documentation at:
* http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
* 2007-2010 Gian Carlo Mingati
* Version: 1.0.2.1 (22-APRIL-2011)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* Requires:
* jQuery v1.2.x or later
*
*/
jQuery.fn.liScroll = function(settings) {
settings = jQuery.extend({
travelocity: 0.07
}, settings);
return this.each(function(){
var $strip = jQuery(this);
$strip.addClass("newsticker")
var stripWidth = 1;
$strip.find("li").each(function(i){
stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
});
var $mask = $strip.wrap("<div class='mask'></div>");
var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
var containerWidth = $strip.parent().parent().width(); //a.k.a. 'mask' width
$strip.width(stripWidth);
var totalTravel = stripWidth+containerWidth;
var defTiming = totalTravel/settings.travelocity; // thanks to Scott Waye
function scrollnews(spazio, tempo){
$strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
}
scrollnews(totalTravel, defTiming);
$strip.hover(function(){
jQuery(this).stop();
},
function(){
var offset = jQuery(this).offset();
var residualSpace = offset.left + stripWidth;
var residualTime = residualSpace/settings.travelocity;
scrollnews(residualSpace, residualTime);
});
});
};
</script>
<script>
$(function(){
$("#ticker01").liScroll();
});
function staff1() {
document.getElementById('staff1').style.display='block';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='none';}
function staff2() {
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='block';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='none';}
function staff3() {
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='block';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='none';}
function staff4() {
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='block';
document.getElementById('staff5').style.display='none';}
function staff5() {
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='block';}
</script>
</body>
</html>
Insertion sur la page d'accueil :
Une fois que tu as enregistré ta page web (copie/colle l'adresse internet de celle-ci quelque part, car tu vas en avoir besoin), il te suffit de te rendre sur ta page d'accueil, et de coller le code pour insérer une iframe, à savoir :
- Code:
<iframe style="width: 850px; height: 650px;" scrolling="no" frameborder="0" src="HTTP://ADRESSE-DE-TA-PAGE-HTML-RECEMMENT-CREE"></iframe>
Et tu auras ainsi ta belle Page d'accueil toute fonctionnelle :)
Attention: cette PA fonctionne avec du Javascript. Il est donc obligatoire de passer via une page html & un iframe!
Merci de ne pas toucher aux crédits envers Never-Utopia.
Merci de ne pas toucher aux crédits envers Never-Utopia.
Une question ?
Je serai ravi de vous y répondre là-bas : problème avec votre code.
Dernière édition par Henrykiki le Sam 27 Déc 2014 - 22:49, édité 3 fois
