Accentsconagua

Comment créer un sélecteur de feuilles de style CSS basé sur le temps

Code
Share

Les changeurs de style sont devenus une fonctionnalité populaire sur les sites Web de nos jours. Les feuilles de style CSS permettent à un concepteur Web de modifier l'aspect et la convivialité d'un site Web avec peu d'effort. Certains sites utilisent des sélecteurs de style de type "Jour" et "Nuit" qui changent automatiquement le thème du site en fonction de l'heure..

Ce didacticiel explique comment créer un sélecteur de feuille de style CSS basé sur le temps à l'aide de PHP, qui vous permet de modifier plusieurs feuilles de style à la fois et à des heures précises de la journée. Il y a aussi un peu de jQuery UI jeté dans juste pour le plaisir!

Pourquoi PHP au lieu de JavaScript?

L’inconvénient d’utiliser PHP pour un sélecteur de feuilles de style CSS basé sur le temps est que l’heure est basée sur le serveur d’hébergement Web ou sur un "fuseau horaire" défini dans le script..

Lorsque je construisais mon site de portfolio personnel, j'ai créé un commutateur de feuille de style basé sur le temps utilisant JavaScript et jQuery. La fonction de temps du script a fonctionné correctement. Cependant, il y avait toujours un bref "flash" de la feuille de style par défaut lorsque les pages Web chargées.

Les sites Web très chargés en JavaScript peuvent avoir des problèmes de conflits entre divers scripts JavaScript. J'ai décidé d'utiliser plutôt PHP pour le sélecteur de feuilles de style CSS. Comme PHP est côté serveur, il n’ya pas eu de conflits JavaScript et le script a fonctionné comme prévu..

L’inconvénient d’utiliser PHP pour un sélecteur de feuilles de style CSS basé sur le temps est que l’heure est basée sur le serveur d’hébergement Web ou sur un "fuseau horaire" défini dans le script. Avec JavaScript, vous pouvez définir des fonctions de temps basées sur l'ordinateur de l'utilisateur..

Avant que nous commencions

Si vous débutez en PHP, vous devez configurer et configurer un environnement de serveur sur votre ordinateur local (les fichiers PHP ne peuvent pas être visualisés dans un navigateur Web). Ma préférence personnelle est XAMPP. Cet article contient quelques options logicielles et des instructions de base sur la configuration d’un serveur local..

Bien que vous puissiez utiliser Notepad pour créer et modifier des fichiers PHP, un éditeur de code peut s'avérer très utile lors de la création de pages Web en PHP et dans d'autres langages de programmation. Veuillez vous référer à ces articles pour plus d'informations sur le choix d'un éditeur de code:

  • 22 éditeurs de code soignés pour Windows
  • 10 éditeurs de texte polyvalents pour OS X

Le code utilisé dans le didacticiel crée un commutateur de feuille de style CSS de base. Vous pouvez voir la démonstration ici. Les fichiers source incluent deux démos supplémentaires.

Maintenant, commençons!

Étape 1: Créez la première feuille de style CSS (nuit)

Créez une feuille de style CSS appelée style-1.csset inclure le code suivant:

 / * Styles par défaut -------------------------------------------------- ----- * / body margin: 0px; remplissage: 0px; background: url ("… /images/bokeh_2.jpg"); position de fond: en haut à gauche; répétition de fond: non répétée; attachement de fond: fixe; couleur de fond: # 666; taille de police: 20px; font-family: Arial, Helvetica, sans serif; couleur: #fff; text-align: left;  #wrapper width: 965px; marge: 0 auto; position: relative;  a: lien, a: visité, a: actif color: # 99ccff;  a: hover color: # 0073ea;  .content_container_1 float: left; largeur: 650px; marge: 0px 0px 60px 0px;  p.main_description margin: 5px 0px 50px 0px; text-align: center;  / * Main Image --------------------------------------------- ------ * / .main_image background: url ("… /images/images_26/how-to-create-a-time-based-css-style-sheet-switcher_7.jpg"); répétition de fond: non répétée; largeur: 630px; hauteur: 425px; bordure: #fff solide 10 px; marge: 40px 0px 10px 0px;  / * Onglets ---------------------------------------------- ----- * / #tabs p font-family: Arial, Helvetica, sans-serif; taille de police: 20px;  a.tabs_link_1: lien, a.tabs_link_1: visité, a.tabs_link_1: actif text-decoration: underline; couleur: # 0073ea; poids de police: gras;  a.tabs_link_1: survolez text-decoration: underline; couleur: # ff0084; poids de police: gras;  #tabs .tabs_img float: left; couleur de fond: #ddd; rembourrage: 8px; marge: 0px 12px 0px 0px;

Étape 2: Créez la deuxième feuille de style CSS (matin)

Ouvrir style-1.css et enregistrez-le sous style-2.css. Changer l'image de fond du corps de bokeh_2.jpg à bokeh_4.jpg. Changement images_26 / css-style-sheet-switcher_7.jpg à main_image_4.jpg.

Étape 3: Créez la 3ème feuille de style CSS (après-midi)

Utilisation style-1.css ou style-2.css créer une 3ème feuille de style style-3.css. Changer l'image de fond du corps en bokeh_3.jpg et l'image principale à main_image_5.jpg

Étape 4: Créez la 4ème feuille de style CSS (Soirée)

Créer une 4ème feuille de style style-4.css. Changer l'image de fond du corps en bokeh_1.jpg et l'image principale à main_image_8.jpg

Pour les étapes 2 à 4, n'hésitez pas à modifier d'autres éléments tels que les couleurs de police et les bordures de l'image. Au lieu d'utiliser les images fournies dans les fichiers source, vous pouvez utiliser vos propres images pour créer des styles CSS personnalisés..

Étape 5: Téléchargez les interfaces utilisateur jQuery et jQuery

Pour montrer comment le script PHP modifie simultanément plusieurs feuilles de style, les thèmes jQuery Themeroller sont utilisés pour styliser la zone de contenu à onglets de la page Web..

Allez sur la page de téléchargement de l'interface utilisateur jQuery et téléchargez les thèmes "Flick" et "Démarrer".

Ensuite, allez sur le site officiel de jQuery et téléchargez jQuery.

Étape 6: le balisage

Créez un fichier PHP contenant le code suivant:

             Commutateur de feuilles de style CSS basé sur le temps simple    
  
  
 
 Changements de l'image principale aux heures définies dans PHP Script (Australie / Melbourne). 
  
 
     
  • À propos d'Envato
    •  
  • Marchés
    •  
  • Tuts + Réseau
    •  
 
 
 À propos d'Envato Envato est une startup basée en Australie, qui compte des personnes du monde entier et des sites servant des pages à la seconde. Nous avons commencé dans un salon en 2006 et nous travaillons sans relâche pour faire de notre société un concurrent de classe mondiale. Notre arrière-plan est créatif, nous aimons l'open source, nous pensons que travailler ne consiste pas uniquement à gagner de l'argent, et nous sommes totalement déterminés à créer des produits exceptionnels.! 
 
 Visitez le site Web d'Envato 
 
 
 
 Marchés Les marchés Envato permettent à quiconque d'acheter ou de vendre des produits numériques tels que des thèmes WordPress, une musique de fond, des fichiers de projet After Effects, des modèles Flash, etc. Les marchés accueillent une communauté florissante de plus de 500 000 utilisateurs, auteurs et acheteurs, et chaque jour des centaines de nouveaux fichiers sont ajoutés.. 
 
 Visitez le marché à thème 
 
 
 
 Tuts + Réseau Chez Envato, nous sommes très passionnés par l'éducation. C'est pourquoi nous avons créé l'un des réseaux de blogs éducatifs les plus populaires. Tuts + propose plus de 18 millions de pages vues par mois sur ses nombreux sous-sites consacrés aux graphiques, au développement Web, à la production audio, au développement pour iPhone et aux graphiques animés.. 
 
 Visitez Tuts + Hub

Étape 7: Code de changement de feuille de style CSS CSS

Créez un fichier PHP contenant le code suivant:

 ';  elseif (07 <= $time && $time < 12) // 7:00am to 12:00pm Morning  echo '';  elseif (12 <= $time && $time < 18) // 12:00pm to 6:00pm Afternoon  echo '';  else // toutes les autres heures Evening echo ''; ?>

Répartition du balisage

PHP Include pour rel = "stylesheet" Liens

Le script de la feuille de style CSS Switcher sera contenu dans un fichier include PHP appelé stylesheets.php.

Un PHP comprendre() instruction inclut et évalue un fichier spécifié. le stylesheets.php Le fichier include est référencé par ce code:

Parce que nous utilisons un script PHP pour modifier les feuilles de style CSS à des heures précises, les liens rel = "stylesheet" seront générés par le script PHP..

Référence des bibliothèques jQuery et jQuery UI

Nous devons nous assurer que la page Web fait référence aux bibliothèques d’interface utilisateur jQuery et jQuery..

Entre les balises de tête de la page Web, le code suivant a été ajouté:

Initialiser les onglets de l'interface utilisateur jQuery

Ce didacticiel comprend les onglets de l'interface utilisateur jQuery utilisant la fonctionnalité par défaut. Le code suivant initialise les onglets:

Container Div pour les onglets de l'interface utilisateur jQuery

(Fin

les balises pour Wrapper et Content Container 1 sont indiquées dans le bloc Code pour le balisage des onglets de l'interface utilisateur jQuery)

La plupart des widgets jQuery UI sont programmés pour s’étendre sur 100% de la largeur de la zone de contenu où ils sont placés..

Le conteneur div content_container_1 a été défini sur une largeur fixe de 650 px dans le CSS afin que la zone de contenu à onglets ne déploie pas toute la largeur de l'écran.

Marquage de l'image principale

Pour que l'image principale puisse également être modifiée à des heures définies à l'aide du script PHP, elle devait être incluse sur la page Web en tant qu'image d'arrière-plan CSS..

Donc, au lieu d’ajouter l’image à la page Web en utilisant un balisage comme ceci:

 Image

Il a été ajouté à la page Web en tant qu'image d'arrière-plan CSS d'un

avec la classe "main_image", comme ceci:

  
 
 L'image principale change aux heures indiquées.

Balisage pour les onglets de l'interface utilisateur jQuery

Le balisage ci-dessous ajoute la zone de contenu à onglets optimisée par l'interface utilisateur de jQuery et conçue avec les thèmes jQuery Themeroller..

  
 
     
  • À propos d'Envato
    •  
  • Marchés
    •  
  • Tuts + Réseau
    •  
 
 
 À propos d'Envato Envato est une startup basée en Australie, qui compte des personnes du monde entier et des sites servant des pages à la seconde. Nous avons commencé dans un salon en 2006 et nous travaillons sans relâche pour faire de notre société un concurrent de classe mondiale. Notre arrière-plan est créatif, nous aimons l'open source, nous pensons que travailler ne consiste pas uniquement à gagner de l'argent, et nous sommes totalement déterminés à créer des produits exceptionnels.! 
 
 Visitez le site Web d'Envato 
 
 
 
 Marchés Les marchés Envato permettent à quiconque d'acheter ou de vendre des produits numériques tels que des thèmes WordPress, une musique de fond, des fichiers de projet After Effects, des modèles Flash, etc. Les marchés accueillent une communauté florissante de plus de 500 000 utilisateurs, auteurs et acheteurs, et chaque jour des centaines de nouveaux fichiers sont ajoutés.. 
 
 Visitez le marché à thème 
 
 
 
 Tuts + Réseau Chez Envato, nous sommes très passionnés par l'éducation. C'est pourquoi nous avons créé l'un des réseaux de blogs éducatifs les plus populaires. Tuts + propose plus de 18 millions de pages vues par mois sur ses nombreux sous-sites consacrés aux graphiques, au développement Web, à la production audio, au développement pour iPhone et aux graphiques animés.. 
 
 Visitez Tuts + Hub

Les "Onglets" du menu sont générés par une liste non ordonnée. Les sections de contenu sont générées par

les balises qui ont des identifiants uniques qui correspondent aux liens d'ancrage dans le Mots clés.

Par exemple:

correspond avec

Répartition du code de changement de feuille de style PHP

Définir le fuseau horaire par défaut: 

 date_default_timezone_set ("Australie / Melbourne"); // Définir le fuseau horaire par défaut

Le code date_default_timezone_set définit le fuseau horaire par défaut utilisé par toutes les fonctions de date / heure dans un script..

Si le script n'inclut pas date_default_timezone_set, l'heure du serveur d'hébergement Web sera utilisée pour toutes les fonctions de date / heure du script..

Veuillez vous reporter à la liste des fuseaux horaires pris en charge pour trouver le fuseau horaire correspondant à votre emplacement..

Les nouvelles versions de PHP intègrent "Heure avancée" dans les fonctionnalités de date_default_timezone_set. Certaines versions plus anciennes de PHP ne prennent pas en compte "Heure avancée".

Définir l'heure au format 24 heures: 

 $ time = date ("H"); // Définir l'heure au format 24 heures

date ("H") formate l'heure locale / la date au format d'une heure sur 24 heures, avec les zéros non significatifs. Cliquez ici pour afficher des informations sur l'horloge 24 heures.

Ventilation de la déclaration If, Elseif, Else

J'ai décomposé le reste du code PHP pour montrer comment le script PHP fonctionnera ligne par ligne. Plusieurs fonctions sont utilisées dans le code, notamment:

  • Si, sinon, autre déclaration.
  • Écho
  • Opérateurs de comparaison
  • Opérateurs logiques

si 

 si (00 <= $time && $time < 07) // 12:00am to 7:00am Night  echo '';

Si 00 (minuit) est Inférieur ou égal à heure actuelle ET l'heure actuelle est Moins à partir de 07h00 ensuite le script va s'appliquer style-1.css et feuilleter Feuilles de style CSS.

sinon 

 elseif (07 <= $time && $time < 12) // 7:00am to 12:00pm Morning  echo '';

Si 07 (07:00) est Inférieur ou égal à heure actuelle ET l'heure actuelle est Moins à partir de 12h00 ensuite le script va s'appliquer style-2.css et début Feuilles de style CSS.

sinon 

 elseif (12 <= $time && $time < 18) // 12:00pm to 6:00pm Afternoon  echo '';

Si 12 (12:00) est Inférieur ou égal à heure actuelle ET l'heure actuelle est de moins de 18 heures (18:00) ensuite le script va s'appliquer style-3.css et début Feuilles de style CSS.

autre 

 else // toutes les autres heures Evening echo '';

Si AUCUN des conditions sont remplies dans les déclarations "if ... elseif", ensuite le script va s'appliquer style-4.css et feuilleter Feuilles de style CSS.

Conclusion

Avec CSS, vous pouvez créer de nombreux styles différents pour vos pages Web. En utilisant PHP, vous pouvez appliquer ces styles de manière dynamique à votre site Web. Ajoutez une petite interface utilisateur jQuery et vos pages Web seront non seulement amusantes à créer, mais amusantes aussi pour vos visiteurs.!

Si vous avez des questions sur ce tutoriel, posez-les ci-dessous, merci beaucoup de votre lecture!

Code
×