Table des matières
La fonctionnalité CSS personnalisé est intégrée à l’outil de personnalisation. Elle est disponible avec les plans WordPress.com Premium, Business et eCommerce. Vous pouvez ajouter des CSS personnalisés à votre blog WordPress.com au moyen de l’éditeur de CSS dans Mes sites → Design → Personnaliser → CSS dans le tableau de bord de votre blog.
Remarque : pour les sites utilisant nos plans WordPress.com Business et eCommerce, ainsi que des extensions, la section CSS personnalisé est accessible sous Mes sites → Design → Personnaliser → CSS supplémentaire dans le tableau de bord de votre blog.
CSS signifie Cascading Style Sheets (feuilles de style en cascade). Il s’agit d’un langage de balisage qui contrôle l’apparence des éléments HTML sur une page Web. Les CSS offrent un potentiel infini de modification du design d’un site Web, comme le démontre le projet CSS Zen Garden très populaire. Il s’agit d’une vitrine illustrant comment vous pouvez modifier l’apparence d’un seul fichier HTML en n’utilisant que des CSS.
Pour utiliser cette fonctionnalité de manière optimale, vous devez posséder quelques connaissances du fonctionnement des CSS et du code HTML ou au moins avoir la volonté d’apprendre. Consultez la section Aide CSS ci-après pour en savoir plus.
Si vous souhaitez personnaliser l’un des nombreux thèmes WordPress.com mais que vous ne voulez pas apprendre à utiliser les CSS, nous vous conseillons de faire appel à un concepteur pour effectuer les modifications dont vous avez besoin.
Besoin d’aide avec les CSS ? Nous proposons une assistance limitée sur les CSS par e-mail ou sur notre live chat. N’hésitez pas à nous contacter. Nous vous dirons si nous pouvons satisfaire votre requête concernant les CSS. Sinon, nous pourrons vous indiquer à qui vous adresser !
Pour savoir comment fonctionnent les CSS sur WordPress.com, consultez Modification des CSS. Si vous découvrez les CSS, vous pouvez consulter un didacticiel sur les CSS en commençant par le didacticiel pour débutants de HTML Dog.
Si vous n’en êtes qu’à vos premiers pas, vous suivrez une courbe d’apprentissage. Notez que les CSS constituent une compétence très utile et réutilisable. Une MULTITUDE de ressources sont disponibles sur le Web pour vous permettre d’en apprendre davantage sur le code HTML et les CSS.
Voici quelques conseils qui peuvent vous aider :
- Exploitez les outils de développement de votre navigateur pour examiner le code CSS de votre site. Sous Firefox, utilisez les outils de développement de Firefox. Sous Internet Explorer, installez la barre d’outils Développeur. Sous Google Chrome, utilisez Chrome DevTools.
- Utilisez un validateur de CSS.
Suggestions de didacticiels sur les CSS
- Didacticiel pour débutant sur les CSS de HTML Dog
- Guide de Web Design Group sur les CSS
- Guide complet sur les CSS de WestCiv
- Articles sur les CSS de Sitepoint
Suggestions d’ouvrages sur les CSS
- Eric Meyer présente les CSS
- Eric Meyer présente les CSS suite
- Web Standards Solutions (en anglais uniquement)
- Design Web : utiliser les standards
La fonctionnalité CSS personnalisé me permet-elle de modifier le code HTML ?
Non. La fonctionnalité CSS personnalisé vous permet d’ajouter ou de remplacer le code CSS des thèmes uniquement. Elle ne vous donne pas la possibilité de modifier le code HTML ou PHP. Vous pouvez transformer votre thème WordPress.com en trame vide en désactivant la fonctionnalité CSS de ce dernier dans vos paramètres CSS personnalisé.
La fonctionnalité CSS personnalisé me permet-elle de charger des thèmes ?
Non. Le chargement des thèmes personnalisés est pris en charge par les plans WordPress.com Business et eCommerce uniquement. En savoir plus à ce sujet ici.
Puis-je supprimer des liens de crédit comme « Blog sur WordPress.com », le thème, la police ou les liens de la barre d’outils ?
Tous les utilisateurs de WordPress.com doivent conserver la barre d’administration (la barre noire qui apparaît en haut des sites WordPress.com lorsqu’ils sont connectés). Les clients possédant les plans WordPress.com Business et eCommerce peuvent contacter l’assistance pour obtenir une aide à la suppression de la barre d’administration, au besoin.
Il est possible de masquer le crédit de pied de page si WordPress.com Business ou eCommerce est actif sur un site. N’utilisez pas de CSS pour masquer ou modifier les crédits si vous ne possédez pas l’un de ces plans.
Tous les utilisateurs de WordPress.com ont le choix entre plusieurs options pour le crédit de pied de page, d’un logo WordPress.com minimaliste aux options de texte comme « Un site Web WordPress.com » ou « Propulsé par WordPress.com ». Veuillez consulter cette documentation pour en savoir plus.
La modification du style du texte du pied de page (comme la couleur ou la taille de la police) ne pose aucun problème tant que le texte reste lisible. Avec les CSS, vous pouvez également modifier le contenu comme un avis de droit d’auteur dans le pied de page existant.
Puis-je utiliser la fonctionnalité CSS personnalisé pour apporter des modifications mineures à un thème existant ?
Oui. Il s’agit de l’option la plus populaire et la plus simple à mettre en œuvre. Si vous ajoutez seulement de petits snippets de CSS pour les modifications que vous aimeriez apporter à un thème existant, ces derniers seront appliqués après le chargement du CSS du thème. Par conséquent, ils écrasent le CSS du thème sans nécessiter de gérer un ensemble complet et distinct de CSS. Il est ainsi possible d’apporter rapidement et facilement des modifications mineures en seulement quelques lignes de codes dans l’éditeur de CSS.
Puis-je utiliser la fonctionnalité CSS personnalisé pour apporter des modifications majeures à la mise en page de mon blog ?
Des modifications majeures sont sans doute possibles avec la fonctionnalité CSS personnalisé la facilité dépendra du thème et de vos compétences en langage CSS. Au lieu d’ajouter vos styles au CSS existant du thème, vous pouvez l’écraser complètement et tout reprendre depuis le début, principalement en transformant un thème WordPress.com en trame vide. Certains thèmes sont plus flexibles que d’autres et le meilleur moyen de découvrir les possibilités offertes consiste à faire des essais.
Puis-je utiliser les règles CSS comme @import et @font-face ?
WordPress.com Premium ne permet pas encore de charger des fichiers externes via le CSS mais cela est possible avec les plans WordPress.com Business et eCommerce.
Puis-je utiliser des polices Web dans le CSS ?
Le panneau Police sous Mes sites → Design → Personnaliser → Polices vous permet de choisir deux polices. Sur l’interface publique, vous êtes limité à ces deux polices Web lorsque vous utilisez le langage CSS. De plus, si le plan WordPress.com Business ou eCommerce est actif, vous pouvez ajouter de polices supplémentaires au moyen d’extensions tierces.
Mes styles de CSS personnalisé sont-ils utilisés à la place des styles standard de mon thème ou en plus de ces derniers ?
C’est à vous de choisir, les deux options sont disponibles ! Vous pouvez choisir d’ajouter le CSS de manière incrémentielle pour écraser le CSS existant du thème (il s’agit de l’option la plus populaire) ou de partir de zéro sans charger du tout le CSS d’origine du thème. En cas d’ajout au CSS existant du thème, la feuille de style standard du thème est chargée en premier. Les règles de votre CSS personnalisé sont appliquées ensuite. Choisissez cette option si vous souhaitez seulement apporter quelques ajustements mineurs à un thème, comme modifier l’apparence du texte ou la couleur d’arrière-plan. Si vous partez de zéro, la feuille de style standard du thème ne sera pas chargée du tout. Choisissez cette option si vous souhaitez partir de zéro et tout concevoir vous-même.
Puis-je appliquer mon CSS au thème pour appareils mobiles ?
Oui. Vous pouvez choisir d’appliquer votre CSS personnalisé aux thèmes pour appareils mobiles, notre thème par défaut pour les navigateurs mobiles. Pour activer cette option, accédez à Mes sites → Design → Personnaliser → CSS et recherchez les paramètres sous l’éditeur de CSS. Cochez la case en regard de « Appliquer ce CSS au thème pour appareils mobiles ». Vos styles sont désormais appliqués à Minileven. Le thème Minileven possède une classe body « mobile-theme » que vous pouvez utiliser pour rédiger les styles spécifiquement dédiés à Minileven. Voici un exemple simple qui permet de configurer l’arrière-plan de Minileven sur la couleur rouge au moyen de la classe body « mobile-theme » :
body.mobile-theme {
background-color: #ff0000;
}
Puis-je charger les images à utiliser avec mon CSS ?
Oui. Vous pouvez charger une image dans votre bibliothèque de médias, puis créer un renvoi dans votre feuille de style CSS à l’aide de son URL directe. Voici un simple exemple d’utilisation d’une image d’arrière-plan dans votre feuille de style :
div#content {
background-image: url('https://example.files.wordpress.com/1999/09/example.jpg');
}Je me suis trompé. Comment puis-je réinitialiser mes styles de thèmes ?
Accédez à Mes sites → Design → Personnaliser → CSS, supprimez tous les codes CSS de l’éditeur et cliquez que Enregistrer.
Que se passe-t-il si j’annule l’abonnement de mon plan WordPress.com Premium, Business ou eCommerce ?
Toutes les mises à niveau sur WordPress.com sont renouvelées annuellement. Si vous choisissez d’annuler votre abonnement, l’enregistrement de votre CSS personnalisé sera conservé mais il ne sera plus appliqué à votre site et visible de vos visiteurs. Pour le réappliquer à votre site, vous pouvez racheter la mise à niveau. Les styles seront automatiquement réappliqués à condition que vous n’ayez pas remplacé les thèmes. Le cas échéant, suivez le lien Liste des révisions de votre CSS situé au-dessus de l’éditeur dans le panneau CSS pour rechercher votre CSS précédent.
Assistance WordPress.com 