Le média des professionnels du digital
Le média des professionnels du digital

Personnaliser sa feuille de style avec Blow up

Flavien Chantrel, le 26 août 2008

blowup dotclearUne des nouveautés majeures de la version finale de Dotclear 2 est l’arrivée du thème entièrement personnalisable Blow up. Il s’adresse clairement au grand public et aux personnes peu familières avec le langage CSS. Désormais, plus besoin de vous plonger dans le code, tout est paramétrable en quelques clics : changements des couleurs, du header, polices… Avec un peu de temps et de goût, vous pourrez obtenir un blog à votre image très facilement. Attention toutefois, un résultat peu harmonieux peut avoir des répercussions négatives. N’hésitez donc pas à demander conseil autour de vous ! Voici une présentation de ce nouveau thème et des possibilités offertes.

Pour personnaliser le thème Blow up, rendez-vous sur votre tableau de bord. Allez ensuite dans « Apparence du blog », sélectionnez Blow up puis validez. Il ne vous reste qu’à cliquer sur Configuration du thème (à droite). C’est parti !

  • Les styles prédéfinis

Ce thème ne propose pas une feuille de style, mais pas moins de 10 styles prédéfinis. Libre à vous de repartir d’un de ces pré-réglages voire de l’adopter. Voici un aperçu de ces styles (cliquez pour agrandir et naviguer d’image en image).

flamingo.JPGforest.JPGCnight.JPGpeas_carrot.JPG
rabbit.JPGrecroom.JPGseville.JPGspringtime.JPGtypo.JPG

  • Général

general

Vous pouvez y régler les paramètres globaux de votre feuille de style. Vous pouvez ainsi choisir la couleur de fond, son dégradé, la couleur du texte de vos billets, sa taille, sa police ainsi que l’interligne. Cliquez sur la pipette pour régler la couleur voulue. Attention aux couleurs trop flashy ! Trop de couleurs n’est également pas une bonne idée, le mieux pour le texte est généralement de la laisser en noir.

  • Liens

liens

Il est important de faire ressortir vos liens pour qu’ils ne se perdent pas au milieu de votre texte. Vous avez la possibilité d’en distinguer trois. Les liens non-cliqués, les liens cliqués et les liens survolés. Vous l’avez sans doutes remarqué sur de nombreux sites, les liens cliqués ont généralement une couleur plus terne que les autres. N’oubliez pas de garder cet aspect pour que vos visiteurs s’y retrouvent 😉

  • Haut de page

haut de page

Vous pouvez ici changer la couleur du prélude (la bande tout en haut du blog). Vous pouvez surtout customiser votre titre : taille, couleur, alignement (centre, gauche, droite), police… Encore une fois, attention à garder une harmonie sur le blog : les couleurs et les polices ne doivent pas se mélanger à l’excès.

  • Image d’en-tête (header)

image d'en-tête

Vous avez le choix entre une dizaine de headers. Mais vous avez une possibilité intéressante : choisir votre propre header. Attention, l’image utilisée doit être au format 800*130 pixels. Attention également à ne pas charger une image trop lourde qui ralentirait votre blog. De nombreux sites proposent des headers gratuits de qualité. Vous pouvez également faire parler votre créativité. Le header est un des points forts du blog, il convient donc d’y prêter attention !

  • Bandeau (sidebar)

bandeau

Vous retrouverez ici tout ce qui se rapporte au bandeau de navigation (sidebar). Vous pouvez y changer tous les éléments (de design) : couleur, police et taille des titres, sous-titres et des textes. Vous pouvez également changer la couleur des différents types de liens mais aussi des lignes.

  • Billets

billets

Encore une fois, tout est paramétrable à l’intérieur de vos billets : couleurs, taille et police des dates, titres et commentaires. A noter : vous pouvez différencier la couleur du fond et du texte de vos propres commentaires pour les démarquer des autres. La couleur du texte du billet se règle dans la partie Général.

  • Pied de page (footer)

pied de page

Cette partie concerne la partie basse de votre blog. Vous pouvez personnaliser les différentes couleurs (texte, fond, liens) ainsi que la taille et la police du texte.

  • Import / export de configuration

Une fois vos réglages effectuées, il ne vous reste plus qu’à sauvegarder. Une fois sauvegardé, vous pouvez garder une copie des paramètres de cette nouvelle feuille de style. Pour cela, dépliez la partie « Import / export de configuration » (tout en bas) puis conservez précieusement ce code. Il permettra à un autre membre de la plateforme de récupérer cette configuration. Cela peut également vous permettre de réaliser plusieurs créations sans les perdre. Pour revenir sous une précédente feuille de style, il vous suffit de coller le code au même endroit et de cliquer sur « Appliquer le code ».

Une bonne manière de construire votre propre feuille de style est d’observer auparavant comment sont faits les styles prédéfinis. Vous remarquerez que des codes ressortent : police, couleurs des titres et de la sidebar… Des rappels sont faits pour donner de la cohérence. Le nombre de couleurs utilisées est généralement limité, de même que les polices utilisées.Enfin, pensez à opter pour des couleurs qui s’accordent bien ! De nombreux sites vous proposent des codes couleurs. Bonne exploration !

Recevez nos meilleurs articles
Commentaires
  1. Franck61 dit :

    Merci Flavien !!!

    Les pages de styles sont très utiles…

    @+

  2. Ben dit :

    Marrant c’est celui que j’ai choisi de mettre en place sur mon blog. Et j’utilise le header que tu présentes mais légèrement modifié…

  3. odette dit :

    Merçi pour ces conseils;

  4. odette dit :

    Je n’arrive pas à créer mon BLOG. On me dit : « la page que je recherche n’existe pas….. » Alors pourquoi sur mon espace candidat on me demande si je veux créer un blog ? Je ne comprend pas, j’aimerais que l’on me renseigne.
    Merçi d’avance.

    La blogeuse san blog. ODETTE.

  5. Modérateur dit :

    Bonjour Odette, dans quelle région êtes-vous ?

  6. fv6973 dit :

    Bonjour,
    Je viens d’installer Dotclear 2.1, et j’apprécie beaucoup cette possibilité de personnalisation facile. Pourtant, je n’arrive pas à trouver quelque chose qui doit sûrement être tout simple : Je n’arrive pas à changer la couleur de fond (aussi bien dans le bandeau que pour les billets).
    Est-ce que vous pouvez me donner une petite indication sur ce point ?
    Merci beaucoup

  7. Moderateur dit :

    La couleur de fond se règle dans la partie générale> couleur de fond. Cela règle la couleur non pas des billets, mais de la partie tout autour du blog.

    Le couleur de fond de la première ligne tout en haut, au dessus du bandeau, se règle Haut de page > couleur du prélude.

    Concernant le bandeau, tu peux changer la couleur des textes mais pas celle du bandeau. Tu peux par contre changer le bandeau et en mettre un personnalisé (ce que tu as déjà fait visiblement).

    Pour ce qui est de la couleur de fond des billets ce n’est visiblement pas possible de la régler à part en changeant le code..

  8. fv6973 dit :

    Zut… C’est vraiment dommage. Le fond blanc ne va pas avec le reste. Il aurait fallu que je puisse mettre le même gris…
    Pourquoi s’être arrêtés en chemin, alors que tout est personnalisable ? J’ai du mal à comprendre.

  9. Moderateur dit :

    Personnellement je le trouve pas mal comme çà ton thème 😉 J’ai vu que tu as posé ta question sur le forum Dotclear, je ne pourrais pas faire mieux pour la réponse…

  10. fv6973 dit :

    Ok, je comprends… Je trouvais juste le blanc un peu bizarre (du gris tout le long irait mieux).
    Je viens de poser une autre question sur le forum Dotclear,du coup : Est-ce que je peux récupérer le thème, tel qu’il est là, et l’enregistrer sous un autre nom pour le modifier à la main (et mettre mon gris !) ?
    Je sais, je m’acharne, mais ça ne me plait pas tellement comme ça…

  11. fv6973 dit :

    Ok, j’ai eu une réponse sur le forum. Désolé pour le dérangement, et merci pour ton aide.

  12. Moderateur dit :

    Pas de soucis si tu as eu ta réponse c’est parfait 😉 Bon courage !

  13. Lunesoleil dit :

    bonjour
    Merci d’avoir intégré le module visiteur sur ma page , je voudrais savoir comment je fait ensuite pour y rajouter ma page emploi quand on clic sur ma photo
    Quand je vais sur mon tableau de bord j’y vois :
    – Nouveau billet
    – billets
    – commentaires
    – Préférences utilisateur
    – Paramètres du blog
    – Apparence du blog
    -Pages
    -Liens

    Je voudrais savoir ou il faut aller pour personnaliser l’en-tête ?

    merci de votre aide !

  14. Modérateur dit :

    Va dans Apparence du blog, sélectionne Blow Up puis clique sur Utiliser ce thème, puis Configuration du thème. Tu accèderas alors aux éléments que j’explique ci-dessus 😉

  15. Audrey dit :

    Bonjour,
    J’ai personnalisé mon Blow up et je trouve mon bandeau un peu étroit et le rendu est pas top!
    Y’a t-il un moyen de l’élargir?

    Merci d’avance !

  16. Modérateur dit :

    Je trouve le rendu assez sympa personnellement…

    Blow up ne te permet pas d’élargir le bandeau. Pour cela tu devras toucher au code (en partant de ce thème là ou d’un autre).

    De nombreux thèmes ont par ailleurs été ajoutés, n’hésites pas à y jeter un oeil !

  17. Audrey dit :

    Merci !

  18. lomdu drh dit :

    bonjour moderateur. J essaye de configurer et rien ne marche. j ai pris blowup et je n arrive pas a personnalisé mon bandeau de presentation. Meme avec vos bandeaux rien ne change. Que faire?
    De plus aucune widget n apparait. Et la je dis VAROUM????
    Merci de votre aide qui ne sera surement pas le derniere.

  19. Modérateur dit :

    Répondu par mail 😉

  20. kiwi dit :

    Bonsoir Flavien,
    et si je veux personnaliser une feuille de style d’un blog qui n’est pas « blow up », je fais comment ?
    Merci d’avance !

  21. pascale dit :

    ui, mais n’utilisant pas le blow up, je ne sais pas comment faire apparaître en caractères gras ou rouges le titre des catégories de mes liens pour une meilleure visibilité.
    Une manip est-elle possible avec iphoneclear?
    MERKI

  22. krystel dit :

    Je voudrais changer le style de police mais comment faire ??? quand je vais dans feuille de style je ne peux rien faire
    ou faut-il aller pour voir tous les encarts que vous expliquer????

  23. Anne-Laure dit :

    @krystel : il vous faut sélectionner le thème « Blow Up » dans « Apparence du blog » tout d’abord !

  24. krystel dit :

    j’ai essayé mais je ne tombe pas après sur les encarts !!!! j’ai essayé de sélectionner ce fond mais après quand j’ai cliquer sur feuille de style rien !!! je ne suis pas tombé sur les encarts !

  25. krystel dit :

    ou est le bouton configuration du thème après avoir sélectionner le fond que vous me dites??? je ne comprends rien du tout !!!

  26. Anne-Laure dit :

    je vous envoie un mail Krystel

  27. Phil dit :

    Bonsoir Flavien,

    j’essaie de changer mon bandeau avec une photo (aux bonnes dimensions), mais blow up ne fait pas la mise à jour… un petit coup de main ?

  28. Philippe dit :

    Bonjour,
    Je crée un blog sur blog.free.fr.
    J’ai un problème avec les images d’en tete : j’avais créé une bannière qui fonctionnait et que je souhaite maintenant changer, mais dans le thème blowup je n’ai plus la possibilité de choisir en tête personnalisé : le paragraphe en tête situé entre haut de page et bandeau n’existe plus……
    Merci de votre aide.
    Cordialement

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *