Welcome

Halloween Page d'accueil

Caelesti

Halloween, LS codage Forumactif Templates & Eléments Page d'accueil Page d'accueil Caelesti

PHPBB2

Optimisé Le staff fonctionne sous forme d'onglets. Les news défilent automatiquement (image sous le staff). Chaque illustration est redimensionnée automatiquement.

Retour

Codage page d'accueil Caelesti Halloween Forumactif

CSS

/******************************************************* PAGE ACCUEIL *******************************************************/
.page_accueil ::-webkit-scrollbar {
        width: 7px;
        height: 14px;
        background: #cccbcb;
        border: 1px solid #a9a6a6;
}

.page_accueil ::-webkit-scrollbar-thumb {
        border: solid 0 transparent;
        border-right-width: 2px;
        -webkit-border-radius: 5px;
        -webkit-border-top-right-radius: 9px 5px;
        -webkit-border-bottom-right-radius: 9px 5px;
        -webkit-box-shadow: inset 0 0 0 1px #000, inset 0 0 0 6px #000;
        border-left-width: 2px;
}
.page_accueil ::-webkit-scrollbar-track-piece {
        background: transparent none;
        border: solid 4px transparent;
        border-right-width: 8px;
        margin: 4px;
        -webkit-box-shadow: inset 1px 1px 0 0 rgb(137,131,117), inset -1px -1px 0 0 rgb(224,220,210);
}

.page_accueil {
        background: #1b0a1c;
        color: #fff;
        font-family: Rajdhani, sans-serif;
        font-size: 12px;
        margin: auto;
        width: 820px;
        padding: 2% 2% 1% 2%;
        box-sizing: border-box;
}

.page_accueil .content {
    	background: rgba(255,255,255,.3);
  	padding: 0 0 1%;
}

.page_accueil .content::after {
        content: "";
        clear: both;
        display: block;
}

.page_accueil .gauche {
        float: left;
        width: 33%;
}

.page_accueil .milieu {
        float: left;
        width: 30%;
  	margin: 0 1%;
}

.page_accueil .droite {
        float: left;
        width: 34%;
}

/* TITRES */
.page_accueil h2 {
        color: #332c3d;
        font-size: 20px;
        font-family: 'Petit Formal Script', cursive;
        margin: 5% 0 0;
}

.page_accueil h3 {
        color: #939197;
        text-transform: uppercase;
        width: 90%;
        margin: 0 0 10%;
}

/* CONTEXTE */
.page_accueil .contexte img {
        width: 150px;
        height: 100px;
        object-fit: cover;
  	margin: 0 3% 0 0;
        float: left;
}

.page_accueil .contexte {
        text-align: justify;
        width: 100%;
        height: 200px;
        overflow: auto;
        padding: 0 2% 0 0;
        box-sizing: border-box;
}

.page_accueil .topsites::before {
        border-bottom: 5px solid #686464;
        content: "";
        width: 100%;
        display: block;
        margin: 3% 0;
}

/* TOPSITES */
.page_accueil .topsites img {
        width: 20px;
        height: 20px;
        object-fit: cover;
        margin: 0 2%;
}

.page_accueil .topsites h4 {
        float: right;
        display: inline-block;
        text-transform: uppercase;
        margin: 0 10% 0 0;
        font-weight: normal;
        font-size: 16px;
}

/* LIENS UTILES */
.page_accueil .liens_utiles a {
        display: inline-block;
        width: 49.8%;
        background: #332c3d;
        text-transform: uppercase;
        color: #fff;
        font-weight: bold;
        font-size: 14px;
        padding: 1% 0;
        margin: .1%;
        border: 1px solid #000;
        box-sizing: border-box;
}

/* PV */
.page_accueil .pv {
    	margin: 5% 0;
}

.page_accueil .pv img {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 40px;
        margin: 0 2% 0 0;
}

.page_accueil .pv a.plus {
        display: inline-block;
        color: #000 !important;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 14px;
        line-height: 1;
}

/* NEWS */
.page_accueil .news {
        text-align: justify;
        width: 100%;
        height: 150px;
        overflow: auto;
        padding: 0 2% 0 0;
        box-sizing: border-box;
}

.page_accueil .news span {
        background: #686464;
        float: left;
        width: 50px;
        text-align: center;
}

/* STAFF */
.paonglet {
        display: inline-block;
        cursor: pointer;
}

.paonglet img {
        width: 50px;
        height: 50px;
        object-fit: cover;
}
           
.contenu_paonglet {
        display: none;
        color: #fff;
        background: #2a292c;
        width: 100%;
        margin-top: -5%;
        height: 60px;
        box-sizing: border-box;
}

.contenu_paonglet .gif_staff {
        width: 100px;
        height: 50px;
        border: 5px solid #686464;
        float: left;
}

.contenu_paonglets h2 {
        font-family: 'Petit Formal Script', cursive;
        color: #fff !important;
        text-align: right;
        display: block;
        background: none;
        -webkit-text-fill-color: inherit;
        font-size: 14px;
        padding: 2%;
}

.contenu_paonglets h3 {
        color: #fff;
        text-align: right;
        font-size: 18px;
        padding: 0 2% 3.5% 0;
}

/* SLIDER */
.slideshow, .slide {
        width: 264px;
        height: 140px;
  	margin: auto;
        display: inline-block;
        vertical-align: middle;
}

.slideshow {
        margin: 8% 0 0;
        overflow: hidden;
        position: relative;
        font-size: 12px;
        letter-spacing: 2px;
}

.slideshow div {
        position: relative;
        top: 0;
        left: 0;
}

/* PARTENAIRES */
.page_accueil .partenaires {
    	text-align: center;
}

.page_accueil .partenaires img {
        width: 20px;
        height: 20px;
        border-radius: 20px;
        object-fit: cover;
        margin: 2% 1%;
}

a.liens_partos {
        color: #332c3d !important;
        font-family: 'Petit Formal Script', cursive;
        font-size: 14px;
        font-weight: bold;
}
                
a.pa_credits {
        text-align: right;
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        margin: .5% 0 0 0;
}

HTML

Javascript

Direction "Modules", "Gestion des pages javascript". On active le JS en cochant "Oui". Créer un nouveau code (nommé "Slider PA" par exemple) contenant les lignes suivantes :

$(function () {
    //VARIABLES MODIFIABLES
    var delaiSwitch    = 5000;                    // Délai (en ms) d'affichage d'un slide
    var delaiTransition = 1000;                    // Délai (en ms) de l'animation de transition
    var direction      = 'left';                  // Sens (left ou right) du défilement
    var idSlideshow    = '#slideshow';            // ID du slideshow
    var idContainer    = '#slideshow-container';  // ID du container
  
    //VARIABLES SYSTEME
    var slideshowWidth  = parseInt($(idSlideshow).css('width'));
    var slideshowHeight  = parseInt($(idSlideshow).css('height'));
    var nbSlides        = $(idContainer+' > .slide').length;
  
    //ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT
    $(idContainer).css('width', slideshowWidth*nbSlides+'px');

//REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS
    if(direction==='right') {
        var decalageLeft = -slideshowWidth*(nbSlides-1);
        $(idContainer).css('left', decalageLeft+'px');
      
        $(idContainer+' > .slide').each(function() {
            var el = $(this).remove();
            $(idContainer).prepend(el);
        }, this);
    } else {
        $(idContainer+' > .slide').each(function() {
            var el = $(this).remove();
            $(idContainer).append(el);
        }, this);
    }
  
    //ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW
    $(idSlideshow+' img').css('max-width', slideshowWidth);
    $(idSlideshow+' img').css('max-height', slideshowHeight);
  
    //LANCEMENT DE L'ANIMATION
    setInterval(function() {
        slideshow()
    }, delaiSwitch);
  
    //FONCTION DE DEFILEMENT
    function slideshow() {
        var compteur = 0;      // Compte les slides ayant bougé
      
        if(direction==='right') {
            $(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() {
                compteur++;
              
                // Lorsque le dernier slide à bougé, on crée la boucle
                if(compteur===nbSlides) {
                    var el = $(idContainer+' > .slide:last').remove();
                    $(idContainer).prepend(el);
                    $(idContainer+' > .slide').css('left', '0');
                  
                    compteur = 0;
                }
            });
        } else {
            $(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() {
                compteur++;
              
                // Lorsque le dernier slide à bougé, on crée la boucle
                if(compteur===nbSlides) {
                    var el = $(idContainer+' > .slide:first').remove();
                    $(idContainer).append(el);

$(idContainer+' > .slide').css('left', '0');
                  
                    compteur = 0;
                }
            });
        }      
    }
});

Dernière modification : 25 April 2020 23 : 33.

#caelesti #pageaccueil #forumactif #codage #libreservice

Halloween