[PBTV5.0] Background aleatoire sur chaque page

Introduction



Après test d'un script qui ne fonctionnait pas .. J'ai trouvé une autre solution que j'ai testé et celui-ci fonctionne parfaitement après test.
C'est du rand en php. C'est simple rapide et efficace.

Avertissement



Avant toutes modifications de votre site, pensez à faire une sauvegarde de votre thème.

le frame.tpl



Commençons .. Commencez par ouvrir le fichier qui se trouve à la racine du thème :

Sur cette ligne 36 :

Code TPL :
    <body itemscope="itemscope" itemtype="http://schema.org/WebPage">


Remplacer par :

Code TPL :
 
<body itemscope="itemscope" itemtype="http://schema.org/WebPage" class="b<?php echo rand(1, 3);?>">


Enregistrer et fermer.


Le design.css



Ensuite ouvrez le design.css qui se trouve dans le dossier "theme", ligne 1, modifier la balise body comme ceci.
Et ajouter le reste en dessous au passage.

Code CSS :
 
body {
    position: relative;
    height: auto;
    min-height: 100%;
    background-repeat: no-repeat;    
    background-position: center center;
    background-attachment:fixed;
    color: #555555;
    font-size: 1.3em;
    font-family: "Trebuchet MS", Verdana, 'Bitstream Vera Sans', Times, serif;
}
body.b1 {
    background:url('images/slide/1.jpg');
    background-repeat: no-repeat;    
    background-position: center center;
    background-attachment:fixed;
    }
body.b2 {
    background:url('images/slide/2.jpg');
    background-repeat: no-repeat;    
    background-position: center center;
    background-attachment:fixed;
    }
body.b3  {
    background:url('images/slide/3.jpg');
    background-repeat: no-repeat;    
    background-position: center center;
    background-attachment:fixed;
    }
 



Les images



- Crée un dossier "slide"dans le dossier "/templates/MON-THEME/theme/images/",
- Dans ce dossier, y ajouter les images nommés comme suit:
- 1.jpg
- 2.jpg
- 3.jpg


Attention : Les images doivent être de même dimension.

Et pour finir ...



Comme dit à chaque fois : Pensez à rafraichir vos caches dans 'l'administration/Outils/Cache ==> TPL et CSS ! Si la configuration est active. Et un CTRL+F5 ([size=10]Rafraichissement de cache du navigateur), dans votre navigateur devrait faire le reste ;)

Si vous avez des questions, n'hésitez pas à les poser sur le forum :)

Créé le 20/02/2017, par Swan

Cette page a été consultée 275 fois