Dans ce petit tuto, on va voir comment font certains pour créer des one page originales, avec ce système de flèche séparant chaque section de la page: voici un exemple de ce qu’on veut faire : On définit un padding ou une height pour chaque bloc de contenu. On définit les règles pour les pseudos […]
Par menu ‘shrinked‘, j’entends les menus qui se rétractent au scroll. Le principe ici est d’utiliser jquery, pour qu’au delà d’une certaine limite au scroll, une nouvelle classe s’ajoute au menu.On part d’une certaine hauteur, ou d’un certain padding de base pour notre menu, et la nouvelle classe injectée par jquery et définie dans le […]
Sur de très nombreux sites on peut voir les menu par dessus une image, donnant une certaine homogénéité au visuel: un exemple plus parlant: Quand on débute on pense qu’il y a un élément flottant dans un autre, qu’il y a plusieurs blocs et que chacun à son background.En réalité, c’est vraiment tout bête, c’est […]
Voici un exemple tout simple de blocs d’infos, qu’on retrouve maintenant sur absolument tous les sites. See the Pen NPwdmp by yuyazz (@yuyazz) on CodePen. Le principe est de les aligner en float:left, avec une width définie. Les éléments à l’intérieur des blocs s’alignent naturellement les uns en dessous des autres. Le problème du float […]
Sur de nombreux sites, on voit souvent dans la partie témoigagne, ou sur certaines sidebar, des blocs coiffés d’une petite flèche, donnant l’impression d’une bulle comme dans une BD: un exemple avec une image en position absolute: See the Pen bNYgzg by yuyazz (@yuyazz) on CodePen. See the Pen PwOmpB by yuyazz (@yuyazz) on CodePen.
Dans le précédent tuto sur les widgets catégories et tags, j’ai montré un moyen pour afficher ses widgets et les listes habituelles de liens qu’elles contiennent,avec des images, pour rendre le site plus attrayant : voici un rendu possible : Un widget catégories qui m’affiche toutes mes catégories sous forme d’images, et en dessous, un deuxième […]
En terminant mon précédent tuto sur comment afficher une liste d’images à la place de l’habituelle liste de catégories, dans la sidebar, j’ai répliqué le code pour voir si ca marchait avec les tags et oui!!ca marche!! Donc je partage ici ce widget qui fonctionne de la même manière que le widget catégorie.. On doit […]
Après mon petit tuto sur « comment mettre des images en background de vos tags manuellement » , et après des heures de recherche, voici un bout de code, un widget qui permet de lister ses catégories, comme le fait le widget catégorie par défaut de wordpress. Ici, on ne vas pas afficher le nom de chaque […]
Dans ce petit tuto, on va voir comment on peut manuellement ajouter des images à ses widgets, en ciblant un widget en particulier , en l’occurrence les tags ou mots clés. Il nous faut éditer le fichier sidebar.php, qui sera appelé avec l’habituel get_sidebar();. Dans le fichier sidebar.php codé en dur, on retrouve souvent des […]
Voici un petit mémo et des bouts de code pour créer un triangle en css. C’est notamment utile pour des listes : Pour créer un triangle on peut utiliser le code suivant (tiré du site grafykart) Pour appliquer cet effet à une liste, il faut l’appliquer sur un pseudo élement: Voici le rendu: See the […]