Share
Dans notre dernier article, nous avons expliqué comment configurer la structure de votre Thesis Skin. Ensuite, nous verrons comment styliser cette structure à l'aide de Thesis Packages.
Maintenant que nos boîtes sont entièrement configurées et prêtes pour le style, nous devons cliquer sur le bouton CSS situé en haut de notre éditeur de skin. Cela nous dirigera vers la zone où nous pouvons créer des paquetages et construire la feuille de style que cet habillage utilisera..
La section paquet de l'éditeur de peau de thèse est l'endroit où toutes vos modifications CSS auront lieu. La section paquet est composée de trois zones:
Un paquet, dans sa forme la plus simple, est une boîte qui contient CSS pour un sélecteur donné - ou une boîte de notre structure HTML. Pour ajouter des styles à chaque élément, nous devons créer un package pour celui-ci..
Une fois le package créé, vous devez ensuite l'appliquer à votre skin CSS en utilisant la référence de thèse pour le package dans votre fenêtre Skin CSS..
Pour créer un paquet, vous devez sélectionner le type de paquet à créer. Thesis dispose de huit options prédéfinies, mais pour ce que nous essayons d'accomplir, nous allons nous concentrer principalement sur les styles à élément unique, les liens et les widgets. et colonnes.
Chaque package est composé de trois sections, Détails du package, Options et CSS supplémentaire. L'onglet "package" contenu dans chaque package contient des champs de saisie permettant d'identifier le style du package..
Les options sont exactement cela, les options. Vous pouvez définir la largeur, la hauteur, la bordure, les marges, etc. en modifiant les options. Vous pouvez également utiliser l'onglet "CSS supplémentaire" et inclure toute autre mise en forme qui pourrait ne pas être disponible par défaut dans les options..
En commençant par notre #wrapper, commençons à construire les paquets.
Pour créer le package (en particulier le #wrapper paquet):
Accentsconagua
#wrapper paquet, alors tapez "#wrapper"et cliquez sur l'onglet" Options "en haut de l'invite contextuelle." et "#"lorsque vous remplissez le sélecteur CSS pour faire la distinction entre ID et classe dans le package. Maintenant que nous avons créé le paquet, nous devons l’appliquer à notre skin CSS. Pour ce faire, tapez la balise de référence dans la fenêtre Skin CSS. Chaque balise de référence commencera par un "Et"et être suivi de la référence que vous avez fournie.
Donc, pour inclure notre #wrapper nous devons taper & wrapper dans notre peau CSS. Lorsque nous avons fini de créer et d'appliquer nos packages, nous devons cliquer sur "Enregistrer le CSS" pour enregistrer nos styles..
N'oubliez pas que chaque paquet a son propre ensemble d'options. La plupart sont assez simples à utiliser. Cependant, le paquet de colonnes peut vous prendre au dépourvu. Voyons donc comment créer un paquet de colonnes et l'ajouter à notre skin..
Si vous vous en souvenez, notre mise en page est composée de deux colonnes. La colonne la plus grande contiendra nos publications récentes et la plus petite sera notre barre latérale de widgets. Pour créer un paquet de colonnes, nous devons suivre ces étapes:
.contenu principal boîte.colonne 1) et réglez la largeur sur 700 et l'alignement (à gauche dans notre cas).colonne 2) et définissez la largeur sur 220 et l'alignement (juste dans ce cas)Maintenant que notre style de colonne est en place, nous pouvons continuer à donner le reste de nos packages de structure HTML. Vous pouvez afficher le reste des styles CSS utilisés dans la création de chaque package en affichant la feuille de style dans les fichiers source..
Au cours de cette série, nous avons expliqué comment interagir avec Thesis 2.0 Framework, comment configurer les paramètres de votre site et créer la mise en page et le style de votre skin. Pour certains, Thesis peut sembler très «aller-retour», devoir changer d'un endroit à l'autre pour apporter des changements, mais pour ceux qui débutent avec le développement de thèmes WordPress, Thesis peut être un outil très facile à utiliser..
Une fois que vous vous familiariserez mieux avec le cadre Thesis, vous pourrez commencer à développer vos propres boîtes, fonctions, etc. personnalisés. Un des sujets non abordés dans cette série, mais qui mérite certainement d’être explorés, sont les crochets Thesis, qui peuvent être implémentés dans des boîtes pour offrir encore plus de dynamisme. des fonctionnalités telles que la corbeille à pain, la pagination, etc..
Bien que la peau créée pour ce didacticiel ne soit ni robuste, ni décorée, elle peut constituer un excellent point de départ..
