Éditeur de thèmes - Ajouter des fichiers CSS
Ajouter des fichiers CSS depuis l'éditeur de thèmes Blogger est un système ingénieux qui permet de visualiser presque instantanément les effets des déclarations sur le blog.
C'est un outil excessivement pratique pour apprendre et tester par sois-même des déclarations.
Remarque :
Cette fiche traite de fonctionnalités intégrées dans l'UI-2010 (à la retraite depuis 2021). Nous attendons les prochaines évolutions de l'UI-2020 pour mettre à jour le contenu.
Qu'est-ce qu'un fichier CSS ?
Les fichiers CSS sont composés de déclarations qui ont pour mission de modifier l'apparence de tous les éléments contenus dans une page web.
Ainsi, on peut modifier les couleurs des textes, des arrières-plan, la taille des polices, la disposition des éléments, appliquer des effets de transition, etc. La palette est relativement bien garnie.
Pour en savoir plus, je vous invite à lire les articles du centre d'aide Blogger :
Modifier les CSS dans l'outil de création de thèmes
Sur le web, vous trouverez un bon nombre de sites dédiés, dont ceux-ci :
W3Schools.com (en anglais)
W3Schools est l'endroit idéal pour commencer à apprendre ce langage. Nous vous encourageons fortement d'ajouter ce site à vos favoris et d'en faire votre livre de chevet.
SelfHtml.org (en allemand)
Ce site vous sera très utile, si vous avez besoin d'obtenir des explications détaillées. Le site contient également de nombreux exemples.
mozilla.org (en anglais, français, espagnol, portugais, etc...)
Mozilla Developers s'adresse à un public très international puisque les pages sont traduites dans de nombreuses langues dont le français.
Ajouter des déclarations depuis l'éditeur de modèles
Sur Blogger, en lançant l'éditeur de thèmes en 2010, les ingénieurs ont marqué le coup, en offrant la possibilité d'ajouter des styles personnalisés. Cela évite aussi d'aller trifouiller inutilement dans le code HTML du modèle.
Certes, l'application reste encore fragile et peut être facilement endommagée en fonction du thème et du navigateur utilisé, mais devient efficace quand tout tourne bien "rond".
Pour accéder à l'éditeur de thème :
- UI-2020
- Thème
- Personnaliser
- Avancé
- Ajouter Fichier CSS
A chaque fois que vous introduisez de nouvelles déclarations, l'aperçu se recharge en appliquant vos modifications.
Dés que vous enregistrez, ces déclarations sont ajoutées dans le fichier XML de votre thème, juste avant la balise ]]></b:skin>
Pour accéder à l'éditeur :
- UI-2020
- Thème
- Menu Personnaliser
- Modifier le code HTML
Vous pouvez donc, aussi ajouter vos nouvelles déclarations à cet endroit. Elles seront également reprises dans l'éditeur de modèles (c'est magique :D).
Pour y accéder, développez <b:skin></b:skin> et parcourez son contenu.
Dans l'éditeur de modèles, il est conseillé d'ajouter les nouvelles déclarations à la suite. Comme pour le langage courant (pour nous le français), les navigateurs exécutent les CSS du haut vers le bas. Si plusieurs déclarations sont en double, c'est la déclaration située au plus près de la fin du fichier qui devient prioritaire.
Afin de ne pas surcharger votre modèle, vous pouvez supprimer les déclarations inutilisées ou en double.
Pour vous repérer plus facilement dans votre fichier, Vous pouvez ajouter des notes personnelles.
Exemple :
/* Modules pied de page ---------------------------------------------------- */
Cet indice s'avère souvent utile lorsque le fichier devient volumineux ou lorsque vous rencontrez des problèmes.
Il peut permettre à celui qui vous portera assistance, de remonter la piste et vous fournir des explications.
Les notes personnelles doivent être introduites entre /* et */
Gérer son blog
- Les membres d'un blog
- Syndication
- Confidentialité et contenu pour adultes
- Outils de sauvegarde et suppression du blog
- Les identifiants de contenu Blogger
- Les statistiques Blogger
- Langue et horodatage
- Le profil Blogger
- La liste de lecture
- Analytics et Search Console
- L'outil de conception de thèmes
- L'éditeur XML
Licence - La reproduction du contenu de ce blog n'est pas autorisée
Aucune disposition des Conditions d'Utilisation de ce blog ne pourra être interprétée comme conférant à l'Utilisateur une licence sur les Droits de Propriété Intellectuelle.
Le blog Blogger Code PE ne concède qu'une autorisation de visualisation de son contenu à titre personnel et privé. Les copies ou reproductions doivent être strictement réservées à l'usage privé du copiste.
Toute reproduction abusive, totale ou partielle du blog Blogger Code PE, représentation, modification, publication, traduction, adaptation totale ou partielle de l'un quelconque de ces éléments, accompagnée ou non d'un lien de référence, quel que soit le moyen ou le procédé utilisé, est interdite et sera considérée comme constitutive d’une contrefaçon et passible de poursuite (Les peines prévues à cet effet sont une condamnation de 3 ans d'emprisonnement et une amende de 300.000€) conformément aux dispositions des articles L.335-2 et suivants du Code de Propriété Intellectuelle.
Nous nous réservons le droit d'afficher dans ce cadre les notifications d'infraction à la loi DMCA en relation avec le contenu de ce document et déposées par les représentants agréés du blog Blogger Code PE.
Affiliée au 
Google Product Experts Program - Ambassador & Troubleshooter.
- Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
- Affectation Google US, produit Blogger depuis le 28/07/2014.
Spécialisation : Technologie des thèmes Blogger.
Auteur originel de la théorie du langage XML Blogger : Règles syntaxiques, directives d'usage, classifications, compilations et corrélations des composants.
Cela représente près de 10 années de travail. Je remercie tous ceux qui ont respecté ma propriété intellectuelle et j'offre mes meilleurs sentiments aux nombreux contributeurs (Amis, Utilisateurs, Experts Produits Google, Blogger Team et Ingénieurs).
