Messages recommandés

PeterRabbit    371

Random banner

Voir le fichier

A la demande de @creatifmen, voici un petit script tout simple, trouvé sur le forum d'Alsacréations, qui  affichera une bannière choisie de façon aléatoire à chaque rafraîchissement de page ou à chaque changement de rubrique. 

 

Avertissement
Le script d'installation modifie deux lignes dans "core/layout/main.php" et en ajoute six à la fin de "site/data/custom.css". Si vous avez personnalisé ces fichiers, faites-en une copie de sécurité, même si le module de désinstallation vous les restitue dans leur état initial. 

 

Installation

  • Dézippez l'archive. Ouvrez le dossier "random_banner_install".
  • Téléversez le fichier "index.php" et le dossier "site" qu'il contient à la racine du répertoire d'installation de votre site.
  • Acceptez le remplacement du fichier "index.php".
  • Connectez-vous à votre site ou rafraîchissez la page.

 

C'est fait.

 

Utilisation et personnalisation

  • Cliquez sur "Personnaliser le thème" (icone "Pinceau") dans la barre d'outils de l'interface d'administration, puis sur "Mode avancé" dans la zone correspondant à la page pour accéder à la feuille de style personnalisée "site/data/custom.css".
  • Editez le chemin des images à votre convenance.

 

random_banner1.jpg.e371d27c9c822642a48170aae0601f95.jpg

 

Pour ajouter ou supprimer des bannières, il ne suffit pas de copier ou supprimer des lignes dans la feuille de style.
Il faut aussi régler le tirage aléatoire en fonction du nombre de bannières souhaité :

  • Editez "core/layout/main.php".
  • Recherchez "<header" avec CTRL F ou rendez-vous aux lignes 30 et 71.
  • Remplacez "6" par le nombre de bannières souhaité :
<header class="img<?php echo rand(1, 6);?>">
  • Enregistrez la modification.

 

C'est tout !

 

Conseil

Mettez le texte du titre en blanc ou dans une couleur claire, on le verra mieux.

 

random_banner2.jpg.e37380d26e5381fd878e2b454d05e490.jpg

 

Désinstallation éventuelle
Procédez comme pour l'installation, mais avec le module "random_banner_restaure"... et effacez les lignes inutiles dans le css personnalisé de Zwii. o.O

 


 

  • Thanks 1

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    371

Merci @Rémi ! :) Puisque ça te plaît, il va falloir que je rende les bannières responsives — mais il faut que je retrouve comment Roger s'y prenait... J'avoue que je ne me suis jamais véritablement intéressé à cette question. o.O 

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • Contenu similaire

    • Par PeterRabbit
      Label.css
      Voir le fichier Parmi les scripts que j'avais publiés pour la version 8.10, j'ai retrouvé celui-ci, toujours très actuel et qui s’adaptera sans problème aux prochaines évolutions de Zwii, vu qu'il ne s'agit que de quelques lignes de css.
       

       
      Les scripts qui affichent une légende au bas d'une image au survol de la souris sont nombreux, tous plus spectaculaires et imaginatifs les uns que les autres. Si j'ai choisi celui-ci, c'est pour sa légèreté, sa sobriété et sa facilité d'intégration qui me semblent bien en phase avec l'esprit de Zwii.
      Et si j'ajoute qu'il est responsive, qu'il s'adapte automatiquement à la longueur de la légende et que son fond clair se démarque agréablement de ce qui se fait sur les sites d'information, que demander de plus ?
      Pour vous convaincre de l'adopter, je vous invite à essayer la démontration en ligne sur le site de son auteur, Hossein Emrani.
       
      L'éditeur TinyMCE de Zwii intégrant désormais le plugin "Templates" qui permet, comme son nom l'indique, de créer des modèles à la demande, mon plugin exploite cette fonctionnalité qui vous épargnera de manipuler du code par la suite.
      Il se compose de deux modules, "labelcss_install" et "labelcss_restaure". Le premier installera en deux clics le css nécessaire ainsi que le modèle qui affichera votre légende tout en l’intégrant à TinyMCE. Quant au second, il procédera à une désinstallation complète si le résultat n'est pas à la hauteur de vos attentes.
      Dans les deux cas, un script procède à des écritures ponctuelles sans écraser aucun fichier. Vous n'avez donc rien à craindre par rapport à d'éventuelles personnalisations que vous auriez apportées.
       
      Installation :
      Après avoir décompressé l'archive, copiez le contenu du dossier "labelcss_install" (les deux répertoires "core" et "site" ainsi que le fichier "index.html") à la racine de votre site. Acceptez le remplacement du fichier "index.php". Connectez-vous à votre site ou rafraîchissez la page. C'est fait.
       
      Désinstallation :
      Procédez de même avec le module "labelcss_restaure".
       
      Utilisation :
      Éditez la page dans laquelle vous voulez intégrer une image et sa légende. Cliquez sur le bouton "+" à droite de la barre d'outils. Choisissez "Modèle". Dans la liste déroulante, cliquez sur "Label css".           Si le modèle ne figure pas dans la liste, videz le cache de votre navigateur et rechargez la page.
      Validez avec "OK".  

       
      Une image provisoire, fournie par Lorem Picsum s'affiche dans votre page, intégrant la balise de la légende sans que vous ayez rien à faire.
       
      Cliquez sur cette image. Elle se colore en bleu. Dans le menu "+", choisissez "Image". Chargez votre propre image depuis le gestionnaire de fichiers. Éditez le code (bouton "<>") pour modifier la légende.  
      Voilà. Comme d'habitude, c'est plus long à expliquer qu'à faire. 
       
      Réglages :
      Modifiez l'emplacement de la légende en jouant sur ces paramètres dans le sélecteur class="label" :
      outside : à l'extérieur de l'image               - bottom : en bas 
                   - top : en haut
      inside : à l'intérieur de l'image             - bottom : en bas
                  - middle : au milieu
                  - top : en haut
                  - left : à gauche
                  - right : à droite
       
      Idem pour l'effet d'affichage :
                 - none : la légende s'affiche en même temps que la page.
                 - fade : la légende se révèle au survol de l'image.
                 - float : la légende entre dans le cadre au survol de l'image. 
       
      Enfin, comme l'auteur est iranien, il a également prévu que la légende puisse se lire de droite à gauche en ajoutant "rtl" au sélecteur "class".
       
      Personnalisation :
      Les bricoleurs pourront exercer leurs talents sur le css, accessible en ligne : "Personnaliser le thème > Personnalisation du thème > Mode avancé".
       
      Enjoy ! 
       
       
      Contributeur PeterRabbit Soumis 11/10/2018 Catégorie Modifications et astuces  
    • Par PeterRabbit
      Parmi les scripts que j'avais publiés pour la version 8.10, j'ai retrouvé celui-ci, toujours très actuel et qui s’adaptera sans problème aux prochaines évolutions de Zwii, vu qu'il ne s'agit que de quelques lignes de css.
       

       
      Les scripts qui affichent une légende au bas d'une image au survol de la souris sont nombreux, tous plus spectaculaires et imaginatifs les uns que les autres. Si j'ai choisi celui-ci, c'est pour sa légèreté, sa sobriété et sa facilité d'intégration qui me semblent bien en phase avec l'esprit de Zwii.
      Et si j'ajoute qu'il est responsive, qu'il s'adapte automatiquement à la longueur de la légende et que son fond clair se démarque agréablement de ce qui se fait sur les sites d'information, que demander de plus ?
      Pour vous convaincre de l'adopter, je vous invite à essayer la démontration en ligne sur le site de son auteur, Hossein Emrani.
       
      L'éditeur TinyMCE de Zwii intégrant désormais le plugin "Templates" qui permet, comme son nom l'indique, de créer des modèles à la demande, mon plugin exploite cette fonctionnalité qui vous épargnera de manipuler du code par la suite.
      Il se compose de deux modules, "labelcss_install" et "labelcss_restaure". Le premier installera en deux clics le css nécessaire ainsi que le modèle qui affichera votre légende tout en l’intégrant à TinyMCE. Quant au second, il procédera à une désinstallation complète si le résultat n'est pas à la hauteur de vos attentes.
      Dans les deux cas, un script procède à des écritures ponctuelles sans écraser aucun fichier. Vous n'avez donc rien à craindre par rapport à d'éventuelles personnalisations que vous auriez apportées.
       
      Installation :
      Après avoir décompressé l'archive, copiez le contenu du dossier "labelcss_install" (les deux répertoires "core" et "site" ainsi que le fichier "index.html") à la racine de votre site. Acceptez le remplacement du fichier "index.php". Connectez-vous à votre site ou rafraîchissez la page. C'est fait.
       
      Désinstallation :
      Procédez de même avec le module "labelcss_restaure".
       
      Utilisation :
      Éditez la page dans laquelle vous voulez intégrer une image et sa légende. Cliquez sur le bouton "+" à droite de la barre d'outils. Choisissez "Modèle". Dans la liste déroulante, cliquez sur "Label css".           Si le modèle ne figure pas dans la liste, videz le cache de votre navigateur et rechargez la page.
      Validez avec "OK".  

       
      Une image provisoire, fournie par Lorem Picsum s'affiche dans votre page, intégrant la balise de la légende sans que vous ayez rien à faire.
       
      Cliquez sur cette image. Elle se colore en bleu. Dans le menu "+", choisissez "Image". Chargez votre propre image depuis le gestionnaire de fichiers. Éditez le code (bouton "<>") pour modifier la légende.  
      Voilà. Comme d'habitude, c'est plus long à expliquer qu'à faire. 
       
      Réglages :
      Modifiez l'emplacement de la légende en jouant sur ces paramètres dans le sélecteur class="label" :
      outside : à l'extérieur de l'image               - bottom : en bas 
                   - top : en haut
      inside : à l'intérieur de l'image             - bottom : en bas
                  - middle : au milieu
                  - top : en haut
                  - left : à gauche
                  - right : à droite
       
      Idem pour l'effet d'affichage :
                 - none : la légende s'affiche en même temps que la page.
                 - fade : la légende se révèle au survol de l'image.
                 - float : la légende entre dans le cadre au survol de l'image. 
       
      Enfin, comme l'auteur est iranien, il a également prévu que la légende puisse se lire de droite à gauche en ajoutant "rtl" au sélecteur "class".
       
      Personnalisation :
      Les bricoleurs pourront exercer leurs talents sur le css, accessible en ligne : "Personnaliser le thème > Personnalisation du thème > Mode avancé".
       
      Enjoy ! 
       
       
    • Par PeterRabbit
      A la demande de @creatifmen, voici un petit script tout simple, trouvé sur le forum d'Alsacréations, qui  affichera une bannière choisie de façon aléatoire à chaque rafraîchissement de page ou à chaque changement de rubrique. 
       
      Avertissement
      Le script d'installation modifie deux lignes dans "core/layout/main.php" et en ajoute six à la fin de "site/data/custom.css". Si vous avez personnalisé ces fichiers, faites-en une copie de sécurité, même si le module de désinstallation vous les restitue dans leur état initial. 
       
      Installation
      Dézippez l'archive. Ouvrez le dossier "random_banner_install". Téléversez le fichier "index.php" et le dossier "site" qu'il contient à la racine du répertoire d'installation de votre site. Acceptez le remplacement du fichier "index.php". Connectez-vous à votre site ou rafraîchissez la page.  
      C'est fait.
       
      Utilisation et personnalisation
      Cliquez sur "Personnaliser le thème" (icone "Pinceau") dans la barre d'outils de l'interface d'administration, puis sur "Mode avancé" dans la zone correspondant à la page pour accéder à la feuille de style personnalisée "site/data/custom.css". Editez le chemin des images à votre convenance.  

       
      Pour ajouter ou supprimer des bannières, il ne suffit pas de copier ou supprimer des lignes dans la feuille de style.
      Il faut aussi régler le tirage aléatoire en fonction du nombre de bannières souhaité :
      Editez "core/layout/main.php". Recherchez "<header" avec CTRL F ou rendez-vous aux lignes 30 et 71. Remplacez "6" par le nombre de bannières souhaité : <header class="img<?php echo rand(1, 6);?>"> Enregistrez la modification.  
      C'est tout !
       
      Conseil
      Mettez le texte du titre en blanc ou dans une couleur claire, on le verra mieux.
       

       
      Désinstallation éventuelle
      Procédez comme pour l'installation, mais avec le module "random_banner_restaure"... et effacez les lignes inutiles dans le css personnalisé de Zwii.