Stylisation

23 Aoû, 2024

L'éditeur de style intégré à Bearblog fait de Bearblog une plateforme de création de sites web à part entière. Toutes sortes de sites web, des petits blogs aux documentations (comme celle-ci), en passant par les sites web de petites entreprises peuvent être construits avec Bearblog.

Thèmes

Il y a une poignée de thèmes prédéfinis à choisir dans le tableau de bord. Ils peuvent être utilisés tels quels, mais sont également un bon point de départ pour créer des styles personnalisés.

Vous pouvez également choisir n'importe quel thème css no-class comme point de départ et l'inclure dans le champ Styles en utilisant @import https://lien-vers-le-theme.css; (les polices personnalisées peuvent être importées de la même manière).

Styles personnalisés

Les thèmes de Bear peuvent être personnalisés en utilisant du CSS pure dans le champ Styles. La structure du CSS du thème est conçue pour modifier facilement les éléments basiques tels que la police, la couleur, l'échelle, etc. (tant pour un mode clair que pour un mode foncé, comme spécifié par la règle @media (prefers-color-scheme : dark)).

Classes de Bear

Bear possède quelques classes qui peuvent être utilisées comme sélecteurs CSS pour personnaliser des pages ou des éléments spécifiques.

Pages

• La racine de la page d'accueil : .home {}
• La racine de tout billets : .post {}
• La racine de toute page : .page {}
  • Si les styles de page et de billet sont identiques, les deux peuvent être sélectionnés en utilisant .page .post {}_
• La racine de la liste de billets : .blog {}
• La racine de la page de souscription par email : .subscribe {}
• La racine de la page 404 non trouvé : .not-found {}

Noms de classe personnalisés

Chaque article a l'option d'en-tête class_name qui ajoute une classe à la racine de l'article pour permettre un style personnalisé pour cette page particulière.

Par exemple :

Eléments

• La balise d'ancrage pour le titre du billet : .title h1 {}
• La ul des articles du blog : .blog-posts {}
• L'en-tête de navigation : nav
• Les blocs de code/surlignages : .highlight, .code {}

Notes

Toutes les parties du blog sont sélectionnables et stylisables à l'aide de simples sélecteurs CSS. Si des parties de la page sont difficiles d'accès, veuillez soumettre une "issue" [en anglais].

C'est vraiment merdique d'utiliser du CSS pour cacher le pied de page de Made with Bear. Si vous avez fait une mise à jour ou si vous contribuez au projet, cela ne pose pas de problème (bien que ce serait génial si vous le laissiez), mais pour les utilisateurs gratuits, ce sera réinitialisé automatiquement (ou manuellement).