Une idée originale regroupant des playlists spécialement conçu pour les développeurs sur MusicForProgramming.
Dans notre exemple, nous souhaitons que la vidéo d’introduction de notre Home Page WordPress utilisant le thème Onetone se mette en pause lorsque que l’on clique sur l’un des éléments de menu inclut avec le thème.
Il vous suffit pour cela de modifier votre fichier header.php contenu dans votre répertoire du thème à la ligne 54.
Remplacer :
123 $onepage_menu .='<li class="onetone-menuitem"><a id="onetone-'.$sanitize_title.'" href="#'.$sanitize_title.'" ><span>'.$section_menu.'</span></a></li>';Par :
123 $onepage_menu .='<li class="onetone-menuitem"><a id="onetone-'.$sanitize_title.'" class="tubular-pause" href="#'.$sanitize_title.'" ><span>'.$section_menu.'</span></a></li>';
Notre exemple à pour but de centrer un texte de façon vertical sans connaitre le nombre de caractère.
HTML :
123 <div class="parent"><p class="enfant"></p></div>CSS :
123456789 .parent {transform-style: preserve-3d;}.enfant {position: relative;top: 50%;transform: translateY(-50%);}
Afficher une div ou un bloc de contenu sur une page unique
Dans votre fichier votre_thème/layout/theme.php
Afficher une div sur une page unique
1 2 3 |
<?php if( is_page('1026') ):?> <div class="ma-classe"></div> <?php endif; ?> |
Afficher un bloc de contenu sur une page unique
1 |
<?php echo do_shortcode('[content_block id=1940]') ?> |
Afficher un bloc de contenu et une div sur une page unique
1 2 3 4 5 |
<?php if( is_page('1026') ):?> <div class="teste"> <?php echo do_shortcode('[content_block id=1940]') ?> </div> <?php endif; ?> |
Par défaut, les svg sont des éléments en ligne.
1234 div {display: block;margin: auto;}Il suffit donc de changer leurs types et ainsi nous pouvons les centrer facilement.
Nous vous invitons à découvrir plus en détails cette solution novatrice sur le site officiel de CSS Sans.
Comparer deux fichiers dans Sublime Text
La création d’un site internet passe par la création, l’édition et la correction de nombreux fichiers. Il est souhaitable de toujours mettre en place un système de versioning (version de fichier). Cette bonne pratique de développement nous permet de revenir sur d’anciennes version de fichier et de les comparer avec ceux en ligne.
Une feuille HTML5 type :
123456789101112131415161718192021 <!doctype html><html lang="fr"><head><meta charset="utf-8"><title>Page HTML5</title><link rel="stylesheet" href="css/style.css"><script src="js/script.js"></script></head><body><header></header><nav></nav><section><article></article><aside></aside></section><footer></footer></body></html>Une feuille CSS3 type avec @media query :
12345678910111213141516171819202122232425262728293031 /* MOBILE PORTRAIT */@media only screen and (min-width: 320px) {}/* MOBILE LANDSCAPE */@media only screen and (min-width: 480px) {}/* SMALL TABLET */@media only screen and (min-width: 600px) {}/* TABLET/NETBOOK */@media only screen and (min-width: 768px) {}/* LANDSCAPE TABLET/NETBOOK/LAPTOP */@media only screen and (min-width: 1024px) {}/* LAPTOP Medium resolution*/@media only screen and (min-width: 1280px) {}/* LAPTOP Hight resolution */@media only screen and (min-width: 1400px) {}/* PRINT */@media print {}
Le filtre britghtness est une propriété introduite par le CSS3. Il faut donc appliquer le CSS correspondant pour chaque navigateurs.
1234567 img:hover {filter: brightness(50%);-webkit-filter: brightness(50%);-moz-filter: brightness(50%);-o-filter: brightness(50%);-ms-filter: brightness(50%);}