Fond changeant selon l'heure ( Wordpress)

Fond changeant selon l'heure ( Wordpress) - Web design - Graphisme

Marsh Posté le 27-05-2010 à 16:47:14    

Coucou,  
 
Je suis à la recherche d'un module qui me permettrait soit d'assombrir soit de changer le background de mon site en fonction de l'heure?  (genre couché ou lever de soleil ;) ).
 
Vous savez ou je peux trouver ca, déjà si c'est faisable? c'est dur à mettre en place?

Reply

Marsh Posté le 27-05-2010 à 16:47:14   

Reply

Marsh Posté le 27-05-2010 à 21:06:07    

Du Javascript qui va changer ta feuille de style. C'est pas très compliqué mais je suis pas assez calé pour t'en dire + :/

Message cité 1 fois

---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks
Reply

Marsh Posté le 27-05-2010 à 23:20:58    

Zedlefou a écrit :

Du Javascript qui va changer ta feuille de style. C'est pas très compliqué mais je suis pas assez calé pour t'en dire + :/


Merci quand même  :jap:  
 
Quelqu'un d'autre?
 
Skopos?

Reply

Marsh Posté le 28-05-2010 à 09:58:33    

Tu veux que ça change tous les combien ? Toutes les heures ? Toutes les minutes ? Toutes les secondes ?  
Tu veux des couleurs que tu auras définies toi même en fonction de l'heure ? Ex: 8H = rouge, 9H = bleu etc
Ou tu veux un truc qui dégrade les couleurs en fonction des minutes et tout ?  
Je demande car ça peut varier la difficulté du problème :D


---------------
Free Daweed - "The game might crash, but at least the trains will run on time" - Chris Roberts 2018 - Je fais ma pute pour un Dragonfly : STAR-V6VM-MD7X
Reply

Marsh Posté le 28-05-2010 à 11:12:52    

un changement a 8h - 1éh 18h et 00H ... et l'image s'assombrit

Reply

Marsh Posté le 28-05-2010 à 11:13:06    

Pour un changement simple de l'image de fond (ou d'une couleur de fond) à mon niveau je ferais un truc du style (en JS)
 
d = nouvel objet Date (cf objet Date() )
h = propriété Heure de d (cf prop d.getHours() )
elem = élément ayant l'id qui va bien (cf getElementById)
Si h>=8 et h<21 alors background-image de elem = trucJour (cf elem.style.backgroundImage)
sinon
background-image de elem = machinNuit
 
Je te mets pas de code directement car :
- t'as qu'à chercher à partir des éléments données et t'apprendra plus :o
- je veux pas montrer que je suis une quiche en syntaxe :whistle:

Message cité 2 fois
Reply

Marsh Posté le 28-05-2010 à 11:16:33    

Skopos a écrit :

Pour un changement simple de l'image de fond (ou d'une couleur de fond) à mon niveau je ferais un truc du style (en JS)
 
d = nouvel objet Date (cf objet Date() )
h = propriété Heure de d (cf prop d.getHours() )
elem = élément ayant l'id qui va bien (cf getElementById)
Si h>=8 et h<21 alors background-image de elem = trucJour (cf elem.style.backgroundImage)
sinon
background-image de elem = machinNuit
 
Je te mets pas de code directement car :
- t'as qu'à chercher à partir des éléments données et t'apprendra plus :o
- je veux pas montrer que je suis une quiche en syntaxe :whistle:


 
Effectivement, pour un truc aussi simple, y'a pas besoin de plus :)


---------------
Free Daweed - "The game might crash, but at least the trains will run on time" - Chris Roberts 2018 - Je fais ma pute pour un Dragonfly : STAR-V6VM-MD7X
Reply

Marsh Posté le 28-05-2010 à 12:01:46    

Skopos a écrit :

Pour un changement simple de l'image de fond (ou d'une couleur de fond) à mon niveau je ferais un truc du style (en JS)
 
d = nouvel objet Date (cf objet Date() )
h = propriété Heure de d (cf prop d.getHours() )
elem = élément ayant l'id qui va bien (cf getElementById)
Si h>=8 et h<21 alors background-image de elem = trucJour (cf elem.style.backgroundImage)
sinon
background-image de elem = machinNuit
 
Je te mets pas de code directement car :
- t'as qu'à chercher à partir des éléments données et t'apprendra plus :o
- je veux pas montrer que je suis une quiche en syntaxe :whistle:


 
Sauf que ma remise de projet pour les cours c'est la semaine prochaine ...
 
Mais merci quand même

Reply

Marsh Posté le 28-05-2010 à 12:32:27    

Le script aura la même gueule que cet algorithme.  
T'as les ref à chercher et t'as plus qu'à transposer ça en JS c'est pas la mort. Même si t'y connais rien en 1h c'est fait.

Reply

Marsh Posté le 28-05-2010 à 12:33:40    

ok cool merci :)

Reply

Marsh Posté le 28-05-2010 à 12:33:40   

Reply

Marsh Posté le 28-05-2010 à 12:36:11    

Essaye de le faire toi-même et aubesoin tu mets le code ici si ça merdoit.
 
Tu fais pas du JS dans ton cours ?

Reply

Marsh Posté le 28-05-2010 à 12:45:56    

non pas en 1ere on apprends juste le CMS et les bases du HTML ainsi que le CSS

Reply

Marsh Posté le 28-05-2010 à 13:05:04    

Code :
  1. var d = new date();
  2. var h = d.getHours();
  3. if ( h >= 8 && h < 18 )
  4. {
  5.     document.body.style.backgroundColor = "#000000";
  6. }
  7. else if ( h >=18 && h < 24 )
  8. {
  9.     document.body.style.backgroundColor = "#111111";
  10. }
  11. else
  12. {
  13.     document.body.style.backgroundColor = "#222222";
  14. }
 

Pas testé, il est possible qu'il y ait des erreurs de syntaxe.
Je te conseille néanmoins d'aborder les bases du Javascript :)


Message édité par Fenston le 28-05-2010 à 13:06:15

---------------
Free Daweed - "The game might crash, but at least the trains will run on time" - Chris Roberts 2018 - Je fais ma pute pour un Dragonfly : STAR-V6VM-MD7X
Reply

Marsh Posté le 28-05-2010 à 13:22:38    

L'est trop gentil ce Fens en fait :o
 
(au passage Leserigraphe, un article nommé "Identitée" ça le fait pas trop :D )

Reply

Marsh Posté le 28-05-2010 à 13:58:15    

cool fenston :) merci  
 
 
Oui skopos tu as raison tu as raison je vais trouver mieux :)

Reply

Marsh Posté le 28-05-2010 à 13:59:50    

Commence par trouver la faute surtout :D

Reply

Marsh Posté le 28-05-2010 à 14:32:52    

ouille je m'y connais pas assez encore que pour trouver la faute lol
je demanderai a mon binome si je ne trouve pas ;)

Reply

Marsh Posté le 28-05-2010 à 14:33:38    

&& pour 11h ? c'est ca la faute?

Reply

Marsh Posté le 28-05-2010 à 15:36:37    

[:popol]

Reply

Marsh Posté le 28-05-2010 à 16:42:34    

je sais pas alors j'ai beau tester...
enfin je regarder tanquillou


Message édité par leserigraphe le 28-05-2010 à 16:45:08
Reply

Marsh Posté le 28-05-2010 à 16:46:02    

relis mon message et demande au copain robert :D

Spoiler :

http://platon.lacitec.on.ca/~journalisme/images/le_robert.jpg

Reply

Marsh Posté le 29-05-2010 à 10:51:24    

et ca vous en pensez quoi ?

 

<html>
<head>
<title>Background Colors change based on the day of the week</title>
</head>
<?
$today = date("l" );
print("$today" );
  if($today == "Sunday" )
  {
     $bgcolor = "#2340C5";
  }
  elseif($today == "Monday" )
  {
     $bgcolor = "#FFFFFF";
  }
  elseif($today == "Tuesday" )
  {
     $bgcolor = "#FBFFC4";
  }
  elseif($today == "Wednesday" )
  {
     $bgcolor = "#FFE0DD";
  }
  elseif($today == "Thursday" )
  {
     $bgcolor = "#E6EDFF";
  }
  elseif($today == "Friday" )
  {
     $bgcolor = "#E9FFE6";
  }
  else
  {
     // Since it is not any of the days above it must be Saturday
     $bgcolor = "#F0F4F1";
  }
print("<body bgcolor=\"$bgcolor\">\n" );
?>

 

Vais le tester demain


Message édité par leserigraphe le 29-05-2010 à 10:51:57
Reply

Marsh Posté le 29-05-2010 à 10:53:57    

bon apres faut adapter les jour en heure ...

Reply

Marsh Posté le 29-05-2010 à 12:48:24    

C'est du php mais ça marche tout aussi bien je pense :D
Je sais plus comment fonctionne la déclaration / initialisation des variables en php mais perso j'aurais déclaré $bgcolor avant ton if(). Mais si ça fonctionne ainsi, c'est tout aussi bien.
De mémoire, pour récupérer l'heure, c'est $heure = date("H" );
ensuite  if ( $heure == "18" ) etc


---------------
Free Daweed - "The game might crash, but at least the trains will run on time" - Chris Roberts 2018 - Je fais ma pute pour un Dragonfly : STAR-V6VM-MD7X
Reply

Marsh Posté le 29-05-2010 à 12:51:05    

Si tu veux être sur que ça marche, faut remplacer <? par <?php
 
Fenston, pour la déclaration de variable, il suffit de faire $bgcolor;
Mais en php ça se fait pas trop du coup ...


---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks
Reply

Marsh Posté le 29-05-2010 à 13:52:36    

Je peux pas aider je suis pas calée. Mais juste pour dire que ce genre de chose risque d'être sympa avec le html5.
http://html5demos.com/canvas-grad

Reply

Marsh Posté le 28-06-2010 à 17:21:21    

MOi je serais plus de l'avis de Zedlefou, mais en php :
Tu récuperes l'heure, et en fonction de l'heure tu charges un css différent (avec une fonction switch, ca convient mieux que le if).
 
Parce que la vous changer juste le fond, ou les propriétés d'un bloc.
Le gros avantage du css, c'est qu'on pourra changer plein de choses (couleur des textes dans plusieurs div, éventuellement des images background etc). Ca sera beaucoup plus leger et puissant que se taper toutes les propriétés des blocs dans des if !
 
Pour le css, tu fais un copier / coller de ton css de base et t'as juste a modifier les éléments que tu veux, et a appelé le bon css.
 
Bon c'est mon avis apres .. (je ne dis plus "je dis ca je dis rien" pour ne pas tenté quelqu'un de repondre "ben tais toi alors" :D)


---------------
Hotel Annecy | Vin et Chateau | Menuisier Haute-Savoie
Reply

Marsh Posté le 28-06-2010 à 17:38:10    

c'est ce qu'on a fait au final une commande qui dis que de tel a tel heure c'est fond et de tel a tel c'est un autre ;)
 
quand ca sera en ligne je vous filerai le lien :)

Message cité 1 fois
Reply

Marsh Posté le 28-06-2010 à 17:55:50    

Bon j'ai fait un truc un peu rapide pour montrer ce que je disais (ca marche j'ai testé).
 

Citation :

<?php
$heure = date('G');  
switch ($heure) {
case $heure < 16 : echo "<link href=\"css/style-matin.css\" rel=\"stylesheet\" type=\"text/css\" />" ; break;  
case $heure >= 16 : echo "<link href=\"css/style-soir.css\" rel=\"stylesheet\" type=\"text/css\" />" ; break; }
?>


 
Apres tu peux y agrémenter en spécifiant pour chaque heure etc..  
case 1 : echo ... style-01.css ...; break;
case 2 : echo ... style-02.css ...; break;
case 3 : echo ... style-03.css ...; break;
case 4 : echo ... style-04.css ...; break;
 
etc..
 
C'est plus simple qu'un if, et charger le css est beaucoup plus puissant et rapide que changer les propriétés des elements de la page.
 
Je dis ca..  :D


---------------
Hotel Annecy | Vin et Chateau | Menuisier Haute-Savoie
Reply

Marsh Posté le 28-06-2010 à 18:00:28    

leserigraphe a écrit :

c'est ce qu'on a fait au final une commande qui dis que de tel a tel heure c'est fond et de tel a tel c'est un autre ;)
 
quand ca sera en ligne je vous filerai le lien :)


 
Ben je ne dis pas que ca marche pas, ca va si tu veux juste le fond.
L'avantage du css, deja c'est fait un peu pour ca lol, et puis si tu veux changer les couleurs de polices en fonction de l'heure ca se fera facilement en css, qu'avec votre commande..  :sweat:  
Tu peux changer tous les éléments facilement quoi.
 


---------------
Hotel Annecy | Vin et Chateau | Menuisier Haute-Savoie
Reply

Marsh Posté le 28-06-2010 à 18:01:32    

Effectivement, un switch/case, c'est radicalement différent d'un if/else [:petrus75]

Message cité 1 fois

---------------
Free Daweed - "The game might crash, but at least the trains will run on time" - Chris Roberts 2018 - Je fais ma pute pour un Dragonfly : STAR-V6VM-MD7X
Reply

Marsh Posté le 28-06-2010 à 18:16:15    

Fenston a écrit :

Effectivement, un switch/case, c'est radicalement différent d'un if/else [:petrus75]


voilà le code
 

Citation :

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>            
            <script type="text/javascript">
                $(function() {
                    var d = new Date();
                     
                    if(d.getHours()>=6 && d.getHours()<=9) {
                     $('body').css({background: "#bb8d31 url(<?php bloginfo('template_url'); ?>/img/headermatin.png) repeat-x"});
                        $('body #footer').css({background: "url(<?php bloginfo('template_url'); ?>/img/footerbgmatin.png) repeat-x"});
                        $('body #footerimg').css({background: "url(<?php bloginfo('template_url'); ?>/img/footermatin.png)"});  
                        $('body .date_post').css({color: "#ffe05f"});    
                                         
                    }
                     
                    else if(d.getHours()>=10 && d.getHours()<=17) {
                     $('body').css({background: "#33abff url(<?php bloginfo('template_url'); ?>/img/header.png) repeat-x"});
                        $('body #footer').css({background: "url(<?php bloginfo('template_url'); ?>/img/footerbg.png) repeat-x"});
                        $('body #footerimg').css({background: "url(<?php bloginfo('template_url'); ?>/img/footer.png)"});  
                         $('body .date_post').css({color: "#349dc7"});                    
                    }
                     
                    else if(d.getHours()>=18 && d.getHours()<=19) {
                     $('body').css({background: "#bb8d31 url(<?php bloginfo('template_url'); ?>/img/headermatin.png) repeat-x"});
                        $('body #footer').css({background: "url(<?php bloginfo('template_url'); ?>/img/footerbgmatin.png) repeat-x"});
                        $('body #footerimg').css({background: "url(<?php bloginfo('template_url'); ?>/img/footermatin.png)"});
                        $('body .date_post').css({color: "#ffe05f"});
                     
                    }
                     
                    else {
      $('body').css({background: "#6293ff url(<?php bloginfo('template_url'); ?>/img/headernuit.png) repeat-x"});
                        $('body #footer').css({background: "url(<?php bloginfo('template_url'); ?>/img/footerbgnuit.png) repeat-x"});
                        $('body #footerimg').css({background: "url(<?php bloginfo('template_url'); ?>/img/footernuit.png)"});
                         $('body .date_post').css({color: "#4475fc"});


 
Bon je suis pas codeur l'important c'est que ca marche bien :)

Message cité 1 fois
Reply

Marsh Posté le 28-06-2010 à 18:38:36    

leserigraphe a écrit :


voilà le code
 

Citation :

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>            
            <script type="text/javascript">
                $(function() {
                    var d = new Date();
                     
                    if(d.getHours()>=6 && d.getHours()<=9) {
                     $('body').css({background: "#bb8d31 url(<?php bloginfo('template_url'); ?>/img/headermatin.png) repeat-x"});
                        $('body #footer').css({background: "url(<?php bloginfo('template_url'); ?>/img/footerbgmatin.png) repeat-x"});
                        $('body #footerimg').css({background: "url(<?php bloginfo('template_url'); ?>/img/footermatin.png)"});  
                        $('body .date_post').css({color: "#ffe05f"});    
                                         
                    }
                     
                    else if(d.getHours()>=10 && d.getHours()<=17) {
                     $('body').css({background: "#33abff url(<?php bloginfo('template_url'); ?>/img/header.png) repeat-x"});
                        $('body #footer').css({background: "url(<?php bloginfo('template_url'); ?>/img/footerbg.png) repeat-x"});
                        $('body #footerimg').css({background: "url(<?php bloginfo('template_url'); ?>/img/footer.png)"});  
                         $('body .date_post').css({color: "#349dc7"});                    
                    }
                     
                    else if(d.getHours()>=18 && d.getHours()<=19) {
                     $('body').css({background: "#bb8d31 url(<?php bloginfo('template_url'); ?>/img/headermatin.png) repeat-x"});
                        $('body #footer').css({background: "url(<?php bloginfo('template_url'); ?>/img/footerbgmatin.png) repeat-x"});
                        $('body #footerimg').css({background: "url(<?php bloginfo('template_url'); ?>/img/footermatin.png)"});
                        $('body .date_post').css({color: "#ffe05f"});
                     
                    }
                     
                    else {
      $('body').css({background: "#6293ff url(<?php bloginfo('template_url'); ?>/img/headernuit.png) repeat-x"});
                        $('body #footer').css({background: "url(<?php bloginfo('template_url'); ?>/img/footerbgnuit.png) repeat-x"});
                        $('body #footerimg').css({background: "url(<?php bloginfo('template_url'); ?>/img/footernuit.png)"});
                         $('body .date_post').css({color: "#4475fc"});


 
Bon je suis pas codeur l'important c'est que ca marche bien :)


 
Ca a l'air tout ce qu'il y a de plus correct à vu de nez. Le principal est que ça fonctionne. L'utilisation d'un "if/else" est de plus justifié par les intervalles, bien moins pratiques à faire avec un "switch/case".
Après, y'aura toujours un pseudo barbu pour te dire que c'était mieux si t'avais blablabla mais comme ça a déjà été dis, le principal, c'est que ça fonctionne :)


---------------
Free Daweed - "The game might crash, but at least the trains will run on time" - Chris Roberts 2018 - Je fais ma pute pour un Dragonfly : STAR-V6VM-MD7X
Reply

Marsh Posté le 28-06-2010 à 19:33:05    

ouais c'est une connaissance qui lui est codeur qui me l'a fait.  
 
Je l'en remercie ( on sait jamais qu'il soit sur le forum ) :jap:

Reply

Marsh Posté le 20-07-2010 à 00:42:47    

mais pourquoi faire ça en JS ?

Message cité 2 fois
Reply

Marsh Posté le 20-07-2010 à 11:00:38    


Bah pourquoi pas ? Moi j'y vois quasiment que des avantages.


---------------
Free Daweed - "The game might crash, but at least the trains will run on time" - Chris Roberts 2018 - Je fais ma pute pour un Dragonfly : STAR-V6VM-MD7X
Reply

Marsh Posté le 20-07-2010 à 11:44:10    

Tout le monde n'active pas javascript  [:mr marron derriere]

Message cité 1 fois
Reply

Marsh Posté le 20-07-2010 à 12:47:51    

C'est vrai que dans l'état actuel, PHP peut faire la même chose (encore faut-il pouvoir en foutre au bon endroit, je ne connais pas WP)
Yateech t'avais donner une bonne soluce en plus :o


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 20-07-2010 à 13:32:09    


1% de la population à tout casser.  
Au pire ces gens là auront le fond par défaut. Trop dur.


---------------
Free Daweed - "The game might crash, but at least the trains will run on time" - Chris Roberts 2018 - Je fais ma pute pour un Dragonfly : STAR-V6VM-MD7X
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed