Share
Dans ce didacticiel, nous expliquerons comment effectuer cinq personnalisations CSS rapides permettant à votre blog de se démarquer. Même si vous ne savez pas ce qu'est le CSS, vous pourrez suivre les instructions et changer l'apparence standard de votre thème..
Si vous ne savez pas déjà comment, je vais vous montrer comment trouver et configurer ces éléments. De cette façon, vous pouvez modifier en toute sécurité la mise en page de votre site Web ou de votre blog. Si votre site Web est déjà en ligne et génère du trafic, il peut être judicieux d’utiliser un plug-in "Down for maintenance" afin que les visiteurs ne soient pas déroutés par la mise en page en constante évolution..
Une autre alternative serait de configurer un environnement de développement sur votre ordinateur local, puis de télécharger les modifications sur le serveur une fois celles-ci terminées..
En fin de compte, c'est à vous.
Certains thèmes ont déjà la possibilité de remplacer des parties de la feuille de style CSS, ce qui vous permet de créer votre propre mise en page sans installer de plug-ins ni créer de thème enfant. Ceci peut être trouvé sous le Apparence> Options de thème des menus.
Parfois, il se trouve dans l'une des sous-catégories, mais recherchez une zone contenant "Modifier le CSS" comme titre..
Si votre thème n'a pas cette option, le plugin Jetpack est livré avec une fonction d'édition CSS, mais pour l'utiliser, vous devez vous connecter au plugin avec votre compte WordPress.com ou en créer un nouveau..
Il enregistre vos révisions, ce qui permet de revenir facilement à une mise en page précédente si vous avez l’impression de vous perdre quelque part sur la route, mais si vous n’êtes pas intéressé par les autres fonctions du plugin Jetpack, une alternative plus rapide serait la simple plugin CSS personnalisé.
Une fois que vous avez installé et activé le plug-in, vous pouvez modifier le css à partir de Apparence> css personnalisé. (Dans Jetpack, il se trouve sous l'option de menu Apparence> Modifier CSS.)
Si vous êtes prêt à apporter des modifications importantes, la meilleure idée est de configurer un thème enfant. Le problème avec la personnalisation par substitution est que vous obtenez des lignes de code superflues et que, pour une modification en profondeur, le chargement du blog ou du site Web peut être plus lent..
De plus, il est beaucoup plus facile de garder la trace des choses lorsque vous modifiez le code en un seul endroit. Vous pouvez utiliser un plugin comme Orbisius Child Theme Creator ou un thème dupliqué pour créer instantanément un thème enfant..
Alternativement, vous pouvez simplement créer un nouveau dossier de thème, appelez-le THEMENAME enfant, crée style.css dans le nouveau dossier de thèmes et importe la feuille de style principale. (THEMENAME doit être remplacé par le thème que vous souhaitez modifier.)
Accentsconagua
@import url ("… /THEMENAME/style.css"); Pour plus d'informations sur la création d'un thème enfant, vous pouvez consulter notre guide. Maintenant que vous êtes tous prêts, il est temps de commencer à nous salir les mains. Nous allons commencer par quelque chose de très basique: changer le fond de votre blog / site web. Je vais également vous montrer comment ajouter une image de fond élégante.
Pour modifier l'arrière-plan de votre site Web, vous devez d'abord vous familiariser avec le style du thème. La couleur de fond est-elle simplement sous le corps ou est-elle intégrée à son propre cadre??
Certains thèmes ne sont pas aussi intuitifs que d'autres. Par conséquent, si celui que vous utilisez actuellement est intelligible, vous voudrez peut-être changer de thème avant de commencer à le modifier. (Celui que j'utilise dans l'exemple est le thème gratuit de Catchbox et un thème de départ très courant est vingt-neuf.)
Avec la plupart des thèmes non pleine largeur, la couleur d'arrière-plan est simplement sous le corps. Et passer outre c'est assez simple.
corps couleur de fond: # 477C67;
Vous pouvez utiliser le sélecteur de couleur HTML W3Schools pour obtenir vos couleurs ou installer une extension Chrome, un plugin aFirefox ou un plugin WordPress pour accélérer les choses lorsque vous effectuez des modifications en déplacement..
J'ai choisi une couleur de fond turquoise profonde: # 477C67:
Si cet extrait de code ne modifie pas la couleur d'arrière-plan de votre blog, il est probable qu'il utilise des conteneurs vides stylisés pour remplir l'arrière-plan..
Si vous souhaitez définir une image comme arrière-plan, commencez par la télécharger. Assurez-vous que la résolution est élevée, sinon cela ne sera pas très beau. Puis copiez l'URL. Vous n'avez besoin que de la partie après le blog, donc si vous avez chargé le fichier via WordPress, le chemin devrait ressembler à ceci: "wp-content / uploads / 2014/01 / IMAGE.jpg"
body background: url (emplacement / img.jpg) centre non répété centre fixe; -webkit-background-size: couverture; -moz-background-size: couverture; -o-background-size: couverture; taille du fond: couverture;
Le résultat final devrait ressembler à ceci:
La bonne chose est que l'image reste statique même lorsque vous faites défiler la page. Pour de superbes photos que vous êtes libre d’utiliser sans donner de crédit (bien que ce soit probablement le bienvenu), vous pouvez visiter unsplash.com..
Parfois, vous tombez sur un grand thème. Cela a l'air génial, mais il n'y a qu'un seul problème. La police est petite et grise, elle est donc presque illisible. Mais ne vous inquiétez pas, vous pouvez changer cela en une étape simple.
corps font-size: 16px; couleur: # 000
Ajoutez ce court extrait de code au CSS personnalisé pour résoudre le problème. (Mettez-le après le code sur l'arrière-plan si vous avez changé le vôtre.)
Une taille correcte pour la police standard de votre site Web ou de votre blog est de 14 à 16 pixels. Évitez les 12 pixels obligatoires dans les bulletins scolaires, par exemple, car votre objectif principal n'est pas d'économiser du papier. Vous voulez que votre contenu respire et le rende plus lisible. Si vous pensez que la police standard de votre thème ne semble pas professionnelle, vous pouvez ajouter cette ligne:
body font-family: Arial, Helvetica, sans serif;
Rendre le tout comme ceci:
body font-family: Arial, Helvetica, sans serif; taille de police: 16px; couleur: # 000
Si vous voulez changer la couleur des liens, vous pouvez le faire assez facilement. Tout ce que vous avez à faire est d’utiliser le paramètre pour les liens dans css "a" puis de changer la couleur comme vous le souhaitez.
a color: # BA2323;
J'ai décidé d'aller chercher un rouge (# BA2323) et ça a fini par ressembler à ça.
Il existe quelques options supplémentaires pour définir le style de vos liens. Par exemple, vous pouvez décider de la réaction du lien lorsque quelqu'un le survole. Le plus courant est souligné, mais vous pouvez le faire changer sa couleur primaire ou couleur de fond.
a: survol couleur: # 222; couleur de fond: # BA2323;
Par exemple, changer le texte en gris et changer la couleur de fond en couleur de texte habituelle. Ensuite, vous pouvez changer le style des liens visités. Le plus souvent, il y a un changement de couleur, mais vous pouvez également utiliser les modifications précédentes..
a: visité couleur: # 004A4A;
Le titre d'un article est généralement dans un élément h1 et le sous-titre utilisé dans les articles est généralement dans un élément h2 (bien que ce soit quelque chose que vous choisissez vous-même lors de la création d'un article). Mais si votre thème met spécifiquement en forme la couleur des titres des publications, changer le style des balises h1 ne vous aidera pas. Donc, vous devez savoir si le thème que vous utilisez fait cela.
Vous pouvez vérifier si votre thème utilise ou non un style spécifique pour les titres d'articles en ouvrant la source de la page et en effectuant une recherche (appuyez sur Contrôle-F) pour "titre du post". Si les résultats montrent ""alors vous ne stylisez pas h1, vous devez fournir un style dans l'attribut" du style ".
Si vous apportez plusieurs modifications, vous pouvez également installer une extension de navigateur indiquant le style CSS du texte sélectionné. Ce sera typiquement "entry-title" car c'est la norme pour le développement WordPress.
Pour ce faire, allez au Éditeur sous le Apparence menu. et rechercher "à la mode". Comme je l'ai mentionné, ce style est généralement "entry-title". Ensuite, voyez quelles lignes vous devez remplacer. Parfois, il existe un style spécifique pour le titre lié; vous devrez peut-être également le modifier. Ceci apparaît comme "h1 a " ou "quelque style a ".
Pour éditer la couleur et la taille de mon titre, je devrais ajouter ces lignes:
.entry-title color: #WANTEDCOLOR; taille de police: WANTEDSIZEpx; .entry-title a color: #WANTEDCOLOR;
J'ai choisi un bleu clair (# 5CBDBD).
Veuillez noter que j'utilise des couleurs éclatantes pour rendre évidentes les modifications apportées au thème. Vous voulez probablement être un peu plus subtile et trouver un meilleur jeu de couleurs.
Si vous souhaitez modifier le style des titres que vous utilisez dans votre contenu, utilisez plutôt .un peu de style, tu ouvres avec h1 ou h2 ou h3 .
S'il y a des coins embêtants qui, selon vous, devraient être arrondis, ou qui ont été trop arrondis, voici une solution rapide..
Localisez le conteneur du style de la question dans la feuille de style d'origine. (Ouvrez la feuille de style d'origine dans le tableau de bord WordPress ou dans un fichier texte, puis recherchez du texte propre au conteneur que vous souhaitez modifier. Vous pouvez également utiliser un plugin.) Les widgets sont généralement placés sous .widget, et le conteneur de courrier est généralement sous contenu.
Le code à utiliser ici est:
-moz-border-radius: SIZEpx; border-radius: SIZEpx;
Si vous souhaitez remplacer un coin incurvé actuel et le rendre à plat, définissez simplement la taille sur 0. Si vous souhaitez voir à quoi les courbes ressemblent pour un conteneur particulier, commencez avec 5 et voyez à quoi cela ressemble..
En règle générale, vous pouvez rechercher la page si vous souhaitez modifier les coins de la page entière. Vous pouvez généralement trouver le conteneur de contenu en recherchant .hentry si vous voulez éditer les coins du contenu. Vous devrez peut-être modifier l'en-tête et le pied de page séparément. Ou trouver le widget en recherchant un widget.
L'une des manières les plus simples de configurer un jeu de couleurs sympa pour vos widgets consiste à avoir une couleur d'arrière-plan différente pour le widget lui-même et son titre. Pour cela, vous identifiez la classe de style du titre du widget. (Si vous ne vous rappelez pas comment, copiez le titre d'un widget et recherchez-le dans la source de la page. h1 légende autour du titre, la classe est révélée.)
Il a tendance à être simplement Titre du Widget. Et si vous souhaitez modifier la couleur d'arrière-plan du widget lui-même, recherchez le style du widget, qui se trouve généralement sous .widget. Ensuite, vous choisissez une couleur et ajoutez ce code à votre thème CSS ou enfant personnalisé:
.widget background: #COLOR; .widget-title background-color: #COLOR;
J'ai choisi l'orange et la sarcelle d'hiver sans raison particulière. Comme vous pouvez le constater, s’il n’ya pas de titre, il n’inclut pas la partie titre du jeu de couleurs. Si vous souhaitez une cohérence, vous devez ajouter des titres à tous vos widgets..
Au début, il peut sembler extrêmement décourageant de commencer à jouer avec le code de votre site Web, mais la plupart des feuilles de style sont suffisamment intuitives pour que, si vous avez une connaissance de base des fonctionnalités de Wordpress, vous puissiez rester au courant..
Bien sûr, avec cela, nous venons à peine de gratter la surface, mais vous en savez suffisamment pour apporter des modifications de choix pour le meilleur.
