article(s) dans votre panier VOIR

Appliquer un style à ces nouvelles zones de Widget

  • Vidéo 49 sur 54
  • 5h35 de formation
  • 54 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Appliquer un style à ces nouvelles zones de Widget
00:00 / 05:50
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
44,90€
  • Téléchargement + VOD à vie
  • Exercice / Validation des acquis
  • Accès uniquement à cette formation

Sommaire de la formation

Détails de la formation

Dans ce tutoriel pour personnaliser un Template WordPress avec le Framework Genesis, le formateur vous montre comment appliquer des styles aux nouvelles zones de Widget. L’objectif de cette vidéo consiste à personnaliser les zones de Widget. Pour ce faire, dans le site, vous choisissez l’élément à inspecter. L’élément choisi, vous effectuez un clic droit. Sur la liste qui apparaît, vous cliquez sur Procéder à l’inspection de l’élément. En faisant cette action, vous avez l’affichage de l’inspecteur du navigateur. Dans celle-ci, vous disposez de deux colonnes, l’une dédiée à l’HTML et l’autre au CSS. Pour continuer, dans la colonne HTML, vous repérez la zone dédiée aux Class. Dans cette zone figurent des sections correspondant à chaque Widget. Une fois que vous avez choisi une section, vous pouvez passer sur la colonne CSS pour la modification du style. L’étape suivante consiste à ajouter une nouvelle class. Pour ce faire, vous cliquez sur l’icône + à droite de la page. Vous pouvez par la suite reprendre votre class et vous appuyez sur la touche Tab pour l’édition du style. En partant de ce procédé, vous avez la possibilité d’éditer la largeur en insérant l’instruction Width. Il vous est aussi possible de varier la marge interne en tapant l’instruction Padding. Vous pouvez également réajuster la hauteur de votre texte en tapant Min-height et insérer un sélecteur de couleur en inscrivant Background-color. Si vous trouvez que votre style n’est pas assez spécifique, vous pouvez doubler la class. Dans ce cas-là pour adopter le même style, vous pouvez le reprendre en cliquant sur Inspector. Une fois dans cette option vous pouvez copier le style. Cette action faite vous entrez dans Sublime Text et vous ouvrez l’option fichiers style.CSS. Pour insérer votre style vous allez défiler jusqu’à la fin de la page. Ceci vous permet de consulter vos styles, supprimer ce qui ne vous sert pas et coller le nouveau style. Cette action faite vous pouvez enregistrer vos modifications. Pour conclure, vous savez maintenant ajouter du style à partir de CSS.