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;

24 commentaires supplémentaires

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