Reporting : les 5 outils indispensables du community manager
sumall
Les 20 sites Internet les plus visités au bureau en 2013
20sites
Identité numérique

Personnaliser sa feuille de style avec Blow up

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 !

Commentaires

  1. Franck61
    27 août 2008 - 8h48

    Merci Flavien !!!

    Les pages de styles sont très utiles…

    @+

  2. Ben
    28 août 2008 - 9h15

    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
    2 octobre 2008 - 12h22

    Merçi pour ces conseils;

  4. odette
    2 octobre 2008 - 13h45

    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
    2 octobre 2008 - 14h25

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

  6. fv6973
    4 novembre 2008 - 10h16

    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
    4 novembre 2008 - 10h43

    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
    4 novembre 2008 - 11h23

    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
    4 novembre 2008 - 11h36

    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
    4 novembre 2008 - 11h46

    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
    4 novembre 2008 - 13h22

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

  12. Moderateur
    4 novembre 2008 - 14h09

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

  13. Lunesoleil
    10 décembre 2008 - 11h53

    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
    10 décembre 2008 - 12h01

    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
    6 février 2009 - 12h13

    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
    6 février 2009 - 12h31

    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
    6 février 2009 - 17h29

    Merci !

  18. lomdu drh
    26 février 2009 - 17h34

    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
    27 février 2009 - 17h48

    Répondu par mail ;-)

  20. kiwi
    2 septembre 2009 - 21h49

    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
    3 septembre 2009 - 13h03

    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
    6 décembre 2010 - 17h16

    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
    6 décembre 2010 - 17h26

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

  24. krystel
    6 décembre 2010 - 18h25

    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
    6 décembre 2010 - 18h29

    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
    6 décembre 2010 - 18h32

    je vous envoie un mail Krystel

  27. Phil
    12 février 2011 - 3h31

    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 ?

Laisser un commentaire

Il est possible d’utiliser ces balises HTML :
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Ce blog supporte le système Gravatar, pour obtenir le vôtre, inscrivez-vous sur Gravatar