Création Thème Wordpress | Tutorial #19: CSS: placement des différentes parties du thème. Ce tutoriel est le dix-neuvième d’une série d’articles sur la création d’un thème pour WordPress de A à Z. Si vous prenez le train en cours et si vous souhaitez créer votre propre thème de A à Z, je vous conseille fortement de commencer par le premier tutoriel de la série. Aujourd’hui, on va commencer à remplir notre feuille de style pour que notre thème ressemble à quelque chose de lisible… Dans un premier temps, on va uniquement se concentrer sur l’organisation du thème.
On va juste définir quelques attributs principaux pour avoir nos blocs placés comme il le faut. Par la suite, on regardera l’habillage de plus près. Attributs pour l’élément “body”: Tout d’abord, on va définir des attributs simples pour la balise “body”, cette balise qui enveloppe l’ensemble de notre thème. Ouvrez donc votre fichier style.css que l’on a créé au début des tutos, et sous la présentation du thème, insérer le code suivant: Enregistrez votre feuille de style et allez voir dans le navigateur ce que ça donne. Raphaël—JavaScript Library. Web Design Blog | Web Design Standards | Viget Inspire. One of the neatest things about CSS Transforms is that they change the hit area of an element to whatever transformed value we set. So, if we rotate an element, the hit area for that element doesn’t stay a box in the defined X and Y plane; it changes to the transformed shape. CSS Transformed Hit Box With that in mind, when I was handed a design comp with a skewed design element and links with angled edges within it, I realized for great justice it was achievable by skewing an element and applying overflow: hidden to the container.
The markup for this demo is really simple: <div class="container"> <div class="inner"> <ul> <li> <a href="#">Something Awesome</a> </li> <li> <a href="#">Something Awesome</a> </li> <li> <a href="#">Something Awesome</a> </li> </ul> </div></div> Based on that markup, we first transform the .container element and skew it 18 degrees on the X-axis, then undo that skew on the .inner container so our links display properly instead of at an angle (Using SASS). Alsacréations : Tutoriels XHTML, CSS, actualités et articles sur les standards web.