AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-50%
Le deal à ne pas rater :
-50% sur les sacs à dos pour ordinateur portable Urban Factory ...
19.99 € 39.99 €
Voir le deal

    Design changeant selon l'heure (bannière, fond et autres)

    Neva
    Neva
    FémininAge : 32Messages : 18565

    Dim 22 Sep 2013 - 16:33


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    RAPPELS :
    - Si vous avez un problème avec ce tutoriel, n'hésitez pas à poser vos questions mais faîtes-le ici : https://www.never-utopia.com/f177-probleme-avec-mon-code  (relisez le tutoriel en entier avant de le faire et, lorsque vous ouvrez votre sujet, fournissez l'adresse de ce tutoriel, le lien de votre forum ainsi que les codes CSS/Javascript/template posant problème)

    Salut à tous !

    Je vous propose un tutoriel permettant de modifier l’apparence de votre forum selon l’heure (que ce soit pour faire un effet jour/nuit, matin/après-midi, un changement pour seulement une heure ou deux dans la journée...). Les deux exemples proposés se concentreront sur la modification du fond du forum et la modification de la bannière mais je vous invite à tenter vos propres personnalisations =)

    A SAVOIR :  
    - Le code utilise l’heure de votre ordinateur donc, une fois le code installé, vous pouvez changer l’heure sur votre ordinateur et recharger la page pour tester les différentes périodes.  
    - Les codes javascript sont à insérer dans panneau d'admin > modules > gestion des codes javascript
    - Sur la page "Gestion des codes javascript", pensez à activer les codes en cochant "oui" après "Activer la gestion des codes Javascript" et en enregistrant.




    MODIFIER LE FOND DU FORUM ENTRE LE JOUR ET LA NUIT


    Tout d’abord, commencez par mettre votre image de fond pour la nuit à l’endroit habituel (panneau d’administration > affichage > gestion des images > mode avancé > Image du fond de page : collez l’adresse sur cette ligne et validez) et vérifiez qu’elle apparaît bien.

    Ensuite, nous n’avons besoin que d’un peu de JavaScript.

    Voici le code en question :
    Code:
    jQuery(document).ready(function(){var date = new Date();
     Â       var heure = date.getHours();
     Â       if(heure >= 7 && heure < 18){
     Â         $("body").css("background-image", "url('ADRESSE FOND JOUR')");
     Â       }
    });

    PERSONNALISATION :
    Sur la troisième ligne, vous pouvez voir que j’ai défini le jour comme étant entre 7h et 18h. Vous pouvez modifier ces chiffres selon vos désirs (ne touchez qu’aux chiffres).
    Attention, nous travaillons sur une base de 24h : 3h ne peut être que 3h du matin, on utilisera 15h pour 3h de l’après-midi.

    Sur la quatrième ligne, pensez à remplacer ADRESSE FOND JOUR par l’adresse de ladite image (faites attention à ne pas supprimer les apostrophes, l’adresse doit être écrite entre).

    Juste pour bien résumer, l'image que vous avez mise dans vos images est celle qui apparaît normalement et l'image mise dans le javascript est celle qui apparaît pendant la plage de temps inscrite dans le javascript.

    INSTALLATION :
    Une fois complété, le code est à mettre dans panneau d'admin > modules > gestion des javascript. Cochez bien la case Sur toutes les pages

    Et voilà, c’est tout ce qu’il y a à faire ! =)




    MODIFIER LA BANNIERE


    Tout d’abord, commencez par mettre votre bannière pour la nuit à l’endroit habituel (panneau d’administration > affichage > gestion des images > mode avancé > logo : collez l’adresse sur cette ligne et validez) et vérifiez qu’elle apparaît bien.

    Ensuite, il nous faut nos quelques lignes de JavaScript :
    Code:
    jQuery(document).ready(function(){var date = new Date();
     Â       var heure = date.getHours();
     Â       if(heure >= 8 && heure < 19){
     Â         $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
     Â       }
    });


    PERSONNALISATION :
    Sur la troisième ligne, vous pouvez voir que j’ai défini le jour comme étant entre 7h et 18h. Vous pouvez modifier ces chiffres selon vos désirs (ne touchez qu’aux chiffres).
    Attention, nous travaillons sur une base de 24h : 3h ne peut être que 3h du matin, on utilisera 15h pour 3h de l’après-midi.

    Sur la quatrième ligne, pensez à remplacer ADRESSE FOND JOUR par l’adresse de ladite image (faites attention à ne pas supprimer les apostrophes, l’adresse doit être écrite entre).



    Si la taille de la bannière de jour diffère de celle de nuit, il vous faut compléter et utiliser ce code :
    Code:
    jQuery(document).ready(function(){var date = new Date();
     Â       var heure = date.getHours();
     Â       if(heure >= 8 && heure < 19){
     Â         $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
     Â         $("#pun-logo img,#i_logo,#logo img").css("width", "LARGEUR EN PX");
     Â         $("#pun-logo img,#i_logo,#logo img").css("height", "HAUTEUR EN PX");
     Â       }
    });

    INSTALLATION :
    Une fois complété, le code est à mettre dans panneau d'admin > modules > gestion des javascript. Cochez bien la case Sur toutes les pages




    COMBINER LES DEUX CODES


    Si vous souhaitez modifier votre bannière ET votre fond, lisez les deux explications plus haut et suivez la démarche pour le template et le CSS de la bannière mais utilisez ce JavaScript :
    Code:
    jQuery(document).ready(function(){var date = new Date();
     Â       var heure = date.getHours();
     Â       if(heure >= 8 && heure < 19){
     Â         $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
     Â         $("body").css("background-image", "url('ADRESSE FOND JOUR')");
     Â       }
    });




    RAJOUTER DES TRANCHES HORAIRES


    Pour rajouter des tranches horaires, il suffit de reproduire la partie de code qui suit (il s'agit du code pour changer le fond, je vous donne plus bas les parties pour les deux autres codes) en en changeant les infos et en collant  après le } de la précédente et avant le " }); " de fin :

    Code:
           if(heure >= 7 && heure < 18){
     Â         $("body").css("background-image", "url('ADRESSE FOND JOUR')");
     Â       }

    Voilà ce que ça donnerait en ajoutant un 19-23h :
    Code:
    jQuery(document).ready(function(){var date = new Date();
     Â       var heure = date.getHours();
     Â       if(heure >= 7 && heure < 18){
     Â         $("body").css("background-image", "url('ADRESSE FOND 7-18h')");
     Â       }
     Â       if(heure >= 19 && heure < 23){
     Â         $("body").css("background-image", "url('ADRESSE FOND 19-23h')");
     Â       }
    });

    Pour la bannière, c'est cette partie que vous devez copier/coller/remplir avec les nouvelles infos de la même façon :
    Code:
            if(heure >= 8 && heure < 19){
              $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
            }

    Et cette partie pour le code combinant les deux effets :
    Code:
            if(heure >= 8 && heure < 19){
              $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
              $("body").css("background-image", "url('ADRESSE FOND JOUR')");
            }




    AUTRES :


    Bien que cette astuce ait été fait avec la bannière et le fond en tête, il faut comprendre que cela peut fonctionner pour n'importe quoi.

    Petit exemple où je veux qu'un bloc avec l'id "bloc_bleu" devienne rouge de 8 à 19h :
    Code:
    /*Partie html*/
    <div id="bloc_bleu">Je suis un bloc bleu qui devient rouge de 8 à 19h.</div>

    /*Partie javascript*/
    jQuery(document).ready(function(){var date = new Date();
     Â       var heure = date.getHours();
     Â       if(heure >= 8 && heure < 19){
     Â         $("#bloc_bleu").css("background-color", "red");
     Â       }
    });

    Petit exemple où je veux qu'une image avec l'id "image_quelconque" change d'images de 8 à 19h :
    Code:
    /*Partie html*/
    <img id="image_quelconque" src="ADRESSE FOND NUIT" />

    /*Partie javascript*/jQuery(document).ready(function(){var date = new Date();
     Â       var heure = date.getHours();
     Â       if(heure >= 8 && heure < 19){
     Â         $("#image_quelconque").attr("src", "ADRESSE FOND JOUR");
     Â       }
    });

    Bref, on sélectionne notre "id" avec le $("#JeSuisUnId") au début en changeant le "JeSuisUnId" par le nom de l'id de notre bloc/image.
    Ensuite, on utilise .attr("src", "ADRESSE FOND JOUR"); pour changer l'adresse de l'image (seulement pour les images).
    Ou, on utilise .css("propriété", "valeur"); pour changer une valeur dans le css, que cela soit le background-image, la couleur de l'écriture, etc.




    CONSEILS SUPPLEMENTAIRES :
    - En cas de problème, vérifiez bien tous les signes de ponctuation
    - Pour faire apparaître/disparaître un élément, jouez sur la propriété display (je pense notamment à display: none; pour faire disparaître votre bannière)


    Dernière édition par Neva le Dim 19 Oct 2014 - 0:55, édité 4 fois
    Hana Evali
    Hana Evali
    FémininAge : 33Messages : 195

    Dim 6 Oct 2013 - 22:38

    trop bien ! merci !



     - Design changeant selon l'heure (bannière, fond et autres) Ye49
    Capouccino
    Capouccino
    FémininAge : 26Messages : 204

    Mar 8 Oct 2013 - 22:07

    merci chef o/



    "Espérer l'inespérable c'est croire en l'impossible."
    poussette59
    poussette59
    FémininAge : 39Messages : 178

    Lun 14 Oct 2013 - 11:32

    wahoo originale j'adooooooore
    poussette59
    poussette59
    FémininAge : 39Messages : 178

    Lun 14 Oct 2013 - 13:25

    je vais posté une demande d'aide car j'ai un soucis avec les banniére
    Doupi
    Doupi
    FémininAge : 35Messages : 63

    Lun 14 Oct 2013 - 13:39

    J4adore !!! voilà une superbe idée pour Halloween et surprendre un peu nos membres.
    Eerie Ange's
    Eerie Ange's
    FémininAge : 22Messages : 166

    Lun 14 Oct 2013 - 19:23

    OOH ça a l'air cool *o*
    teck
    teck
    MasculinAge : 32Messages : 63

    Dim 27 Oct 2013 - 13:41

    merci



     - Design changeant selon l'heure (bannière, fond et autres) Signa113
    Kassou
    Kassou
    FémininAge : 24Messages : 43

    Lun 28 Oct 2013 - 16:41

    Merci C:
    Sparkman
    Sparkman
    MasculinAge : 27Messages : 5032

    Lun 4 Nov 2013 - 11:20

    Merci beaucoup Neva, à un moment je cherchais ce code partout mais en vain. XD
    Merci de ton partage ça pourrais se montrer utile plus tard :p



     - Design changeant selon l'heure (bannière, fond et autres) 1474840621-sign
    Bambi's logic
    Bambi's logic
    FémininAge : 27Messages : 25

    Sam 9 Nov 2013 - 15:07

    ça m'intéresse beaucoup, merci !
    Neva
    Neva
    FémininAge : 32Messages : 18565

    Sam 9 Nov 2013 - 20:46

    Contente de voir que ça sert à quelques-uns :)
    Suite à une demande, j'ai rajouté une partie "RAJOUTER DES TRANCHES HORAIRES"



     
    Arkaline
    Arkaline
    FémininAge : 33Messages : 195

    Lun 18 Nov 2013 - 18:15

    Je n'y avais jamais pensé!

    Merci pour le tuto :)



    Arkaline
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mar 19 Nov 2013 - 9:11

    J'avais trouvé un code pour ça mais il ne fonctionnait pas, ou alors je m'y prenais mal xD donc merci ! ^^



    sign
    LinaK
    LinaK
    FémininAge : 33Messages : 53

    Mar 19 Nov 2013 - 16:16

    Génial !!



     - Design changeant selon l'heure (bannière, fond et autres) J9ko

    Immortal
    Immortal
    FémininAge : 37Messages : 631

    Jeu 21 Nov 2013 - 17:51

    Super merci beaucoup **




    Besoin d'avis pour un futur forum multi-univers.
    Promis je suis ouverte aux critiques comme aux solutions
    :love:
    CLICK
    Babiroussa
    Babiroussa
    MasculinAge : 34Messages : 33

    Lun 25 Nov 2013 - 10:56

    Classe, merci :)
    Deviliar
    Deviliar
    FémininAge : 35Messages : 44

    Dim 8 Déc 2013 - 16:18

    merci beaucoup !
    Pony62
    Pony62
    FémininAge : 28Messages : 61

    Sam 14 Déc 2013 - 12:00

    OOoooh voilà qui est intéressant, je garde de côté , je veux lire ça !
    MERCIII ♥



    Underconstruction ♫
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Lun 16 Déc 2013 - 2:43

    Merci ^^
    Anonymous
    Invité

    Dim 22 Déc 2013 - 14:00

    Merci beaucoup !
    Toshiki
    Toshiki
    FémininAge : 27Messages : 56

    Jeu 9 Jan 2014 - 16:54

    Merci
    Aoi Kiseki
    Aoi Kiseki
    FémininAge : 32Messages : 105

    Mer 15 Jan 2014 - 14:44

    merciii
    Livia666
    Livia666
    FémininAge : 36Messages : 61

    Sam 18 Jan 2014 - 0:02

    une super idée, merci !
    Kruzoé
    Kruzoé
    FémininAge : 29Messages : 30

    Mar 21 Jan 2014 - 21:56

    merci! C'est vraiment la cerise sur le gâteau :)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 19:47