Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
939 connectés 

  FORUM HardWare.fr
  Graphisme
  Web design

  Fond changeant selon l'heure ( Wordpress)

 
 


 Mot :   Pseudo :  
 
 Page :   1  2
Page Suivante
Page Précédente
Bas de page 
Auteur Sujet :

Fond changeant selon l'heure ( Wordpress)

n°1106278
leserigrap​he
Stop the music and go home
Posté le 27-05-2010 à 16:47:14  profilanswer
 

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?

mood
Publicité
Posté le 27-05-2010 à 16:47:14  profilanswer
 

n°1106322
Zedlefou
In cabbage we trust !
Posté le 27-05-2010 à 21:06:07  profilanswer
 

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
n°1106333
leserigrap​he
Stop the music and go home
Posté le 27-05-2010 à 23:20:58  profilanswer
 

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?

n°1106348
Fenston
★ Tartuffe
Posté le 28-05-2010 à 09:58:33  profilanswer
 

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
n°1106359
leserigrap​he
Stop the music and go home
Posté le 28-05-2010 à 11:12:52  profilanswer
 

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

n°1106360
Skopos
Posté le 28-05-2010 à 11:13:06  profilanswer
 

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
n°1106361
Fenston
★ Tartuffe
Posté le 28-05-2010 à 11:16:33  profilanswer
 

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
n°1106374
leserigrap​he
Stop the music and go home
Posté le 28-05-2010 à 12:01:46  profilanswer
 

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

n°1106383
Skopos
Posté le 28-05-2010 à 12:32:27  profilanswer
 

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.

n°1106384
leserigrap​he
Stop the music and go home
Posté le 28-05-2010 à 12:33:40  profilanswer
 

ok cool merci :)

mood
Publicité
Posté le 28-05-2010 à 12:33:40  profilanswer
 

n°1106386
Skopos
Posté le 28-05-2010 à 12:36:11  profilanswer
 

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 ?

n°1106388
leserigrap​he
Stop the music and go home
Posté le 28-05-2010 à 12:45:56  profilanswer
 

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

n°1106393
Fenston
★ Tartuffe
Posté le 28-05-2010 à 13:05:04  profilanswer
 

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
n°1106397
Skopos
Posté le 28-05-2010 à 13:22:38  profilanswer
 

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

n°1106405
leserigrap​he
Stop the music and go home
Posté le 28-05-2010 à 13:58:15  profilanswer
 

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

n°1106406
Skopos
Posté le 28-05-2010 à 13:59:50  profilanswer
 

Commence par trouver la faute surtout :D

n°1106412
leserigrap​he
Stop the music and go home
Posté le 28-05-2010 à 14:32:52  profilanswer
 

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

n°1106413
leserigrap​he
Stop the music and go home
Posté le 28-05-2010 à 14:33:38  profilanswer
 

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

n°1106434
Skopos
Posté le 28-05-2010 à 15:36:37  profilanswer
 

[:popol]

n°1106459
leserigrap​he
Stop the music and go home
Posté le 28-05-2010 à 16:42:34  profilanswer
 

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


Message édité par leserigraphe le 28-05-2010 à 16:45:08
n°1106460
Skopos
Posté le 28-05-2010 à 16:46:02  profilanswer
 

relis mon message et demande au copain robert :D

Spoiler :

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

n°1106523
leserigrap​he
Stop the music and go home
Posté le 29-05-2010 à 10:51:24  profilanswer
 

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
n°1106524
leserigrap​he
Stop the music and go home
Posté le 29-05-2010 à 10:53:57  profilanswer
 

bon apres faut adapter les jour en heure ...

n°1106531
Fenston
★ Tartuffe
Posté le 29-05-2010 à 12:48:24  profilanswer
 

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
n°1106532
Zedlefou
In cabbage we trust !
Posté le 29-05-2010 à 12:51:05  profilanswer
 

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
n°1106538
Chipo
Posté le 29-05-2010 à 13:52:36  profilanswer
 

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

n°1109010
Yateech
Posté le 28-06-2010 à 17:21:21  profilanswer
 

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
n°1109011
leserigrap​he
Stop the music and go home
Posté le 28-06-2010 à 17:38:10  profilanswer
 

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
n°1109013
Yateech
Posté le 28-06-2010 à 17:55:50  profilanswer
 

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
n°1109015
Yateech
Posté le 28-06-2010 à 18:00:28  profilanswer
 

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
n°1109016
Fenston
★ Tartuffe
Posté le 28-06-2010 à 18:01:32  profilanswer
 

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
n°1109017
leserigrap​he
Stop the music and go home
Posté le 28-06-2010 à 18:16:15  profilanswer
 

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
n°1109018
Fenston
★ Tartuffe
Posté le 28-06-2010 à 18:38:36  profilanswer
 

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
n°1109021
leserigrap​he
Stop the music and go home
Posté le 28-06-2010 à 19:33:05  profilanswer
 

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:

n°1110003
Profil sup​primé
Posté le 20-07-2010 à 00:42:47  answer
 

mais pourquoi faire ça en JS ?

Message cité 2 fois
n°1110007
Fenston
★ Tartuffe
Posté le 20-07-2010 à 11:00:38  profilanswer
 


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
n°1110010
Profil sup​primé
Posté le 20-07-2010 à 11:44:10  answer
 

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

Message cité 1 fois
n°1110015
abais
Posté le 20-07-2010 à 12:47:51  profilanswer
 

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.
n°1110022
Fenston
★ Tartuffe
Posté le 20-07-2010 à 13:32:09  profilanswer
 


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
mood
Publicité
Posté le   profilanswer
 

 Page :   1  2
Page Suivante
Page Précédente
Haut de page 

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Graphisme
  Web design

  Fond changeant selon l'heure ( Wordpress)

 

Sujets relatifs
3dsmax : Rendu à fond transparent avec ombre Fond noir design site web?
fond de siteGimp : comment créer un fond sous une image ?
Est ce courant de se faire payer à la prestation et non à l'heure?Objet sur fond blanc
[Dreamweaver] Insertion texte par dessus image de fond de cellulefond d'écrans site web
comment mettre une image en fond sur mon forum[InDesign] Fond perdu trop tard ?
Plus de sujets relatifs à : Fond changeant selon l'heure ( Wordpress)

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.065 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR