Vidéo: Editeur Simplifié : comment insérer un module exportable dans une page 2025
Le style. Le fichier css contient les règles pour la couleur, le style et la taille des polices pour votre thème Drupal. Voici un aperçu de certains des codes utilisés pour contrôler l'apparence des polices que vous voyez dans le style. css:
-
font: Cette balise n'apparaît qu'une seule fois dans le style. css et spécifie la police à utiliser pour l'ensemble du site.
-
font-size: contrôle la taille du texte.
-
font-weight: Utilisé pour mettre le texte en gras.
-
font-style: Principalement utilisé pour mettre le texte en italique.
-
text-decoration: Contrôle si un lien est souligné.
-
couleur: définit la couleur du texte.
Les lignes de code suivantes affichent quelques paramètres de texte importants dans le style. css que vous voudrez peut-être changer.
corps {font: 76% / 170% Verdana, Arial, Helvetica, sans-serif; color: # 000000;}
Deux choses se passent dans cette ligne. La couleur de l'attribut contrôle la couleur du texte pour l'ensemble du site, en le définissant en noir. Si aucune autre règle ne modifie la couleur plus tard dans ce fichier, elle apparaît en noir sur le site. Cette spécification contrôle la couleur de tout le texte du contenu sur le site.
Le paramètre de police, 76% / 170% Verdana, Arial, Helvetica, sans-serif, définit à la fois la taille du texte et la police. Si vous souhaitez utiliser une autre police et un texte plus grand, vous pouvez modifier cette ligne pour lire comme suit:
police: 100% Times New Roman, Georgia, Serif;
Cela change la police pour l'ensemble du site, comme vous pouvez le voir dans l'illustration suivante.
La police est plus grande - et est maintenant Times New Roman au lieu de Verdana. Dans l'exemple, la plus petite taille de police et Verdana pour le style, a été choisie, donc cette ligne a été changée en police: 76% / 170% Verdana, Arial, Helvetica, sans-serif;.
a {text-decoration: aucun; font-weight: bold;}
La text-decoration contrôle si les liens sur votre site sont soulignés. Dans ce cas, ils ne le sont pas. Le poids de la police rend les liens du site en gras.
a: hover {text-decoration: underline;}
Lorsque vous déplacez le pointeur de la souris sur l'un des liens du site, le soulignement apparaît. Lorsque vous déplacez votre curseur, il disparaît. Chaque fois que vous voyez un vol stationnaire, cela fait référence au déplacement du curseur sur quelque chose et à une pause.
#branding {color: # 000;}
Si la couleur est changée # 000, la couleur devient noire et semble mieux sur le fond jaune.
Lors de la modification du code CSS, veillez à conserver les signes de ponctuation exactement tels qu'ils sont. Par exemple, assurez-vous que chaque ligne du bloc de code se termine par un point-virgule.
Astuce "> L'essai et l'erreur sont un moyen de déterminer quels styles dans le style.css appartiennent à quels éléments sur votre site. Mais il y a un moyen plus facile. Vous pouvez utiliser le navigateur Web Firefox et installer le complément appelé Firebug. Cela ouvre un volet dans le navigateur Web et vous indique les styles utilisés par les éléments de votre page Web.
Dans l'illustration suivante, vous voyez quelle ligne dans le style. css contrôle l'apparence du nom du site dans l'en-tête. En bas à droite du navigateur, vous pouvez voir où le formatage est défini dans le code CSS. En savoir plus sur Firebug à Getfirebug. com.
Astuce "> Vous pouvez modifier beaucoup d'autres détails et apporter des modifications aux thèmes. Drupal. org / theme-guide est un guide extrêmement complet.
