Alignement du titre et de la description

Beaucoup ont eu des problèmes avec l'alignement du titre de leurs blogs ainsi que de la description avec les modèles proposés par Blogger. Voici pour vous un tuto de Jim sur la résolution de certains difficultés liés au titre et à la description.

Minima Template

Dans le modèle Minima, le titre et la description sont automatiquement centrés. Si vous voulez les changer pour qu’ils soient à gauche dans l’entête , changez le code pour l’alignement (code en rouge):-

#header { text-align: left;

Vous pouvez aussi les avoir à “droite” (mettre right à la place de left).

La bannière qui est télécharger est au alignée au centre de l’entête. Si vous voulez qu’elle s’aligne à droite, trouvez ces lignes et changez le “auto” pour l’alignement à gauche (left) en largeur fixée :

#header-inner { background-position: center; margin-left: 100px; margin-right: auto; }

Pour que l’image soit à l’extrême droit de l’entête, vous pouvez mettre la mesure droite à 0px:

margin-left: auto; margin-right: 0px;

Modèle Denim

Dans le modèle Denim, le titre et la description sont aligné à gauche dans l’entête. pour avoir le nom du blog au centre, ajouter le code d’alignement (voir la ligne en rouge):-

h1.title { text-align: center;

Pour que la description soit centrée, ajouter le code d’alignement (en rouge) :

#header .description { text-align: center;

L’image de l’entête (la bannière), est alignée à gauche. Pour aligner l’image au centre ou à droit, trouver /* Header */ et coller le code suivant juste après.

#header-inner { background-position: center; margin-left: auto; margin-right: auto; }

De même, si vous voulez que l’image soit à l’extrême droite, insérez une mesure déterminée pour la gauche (left) au lieu de mettre “auto” :

margin-left: 200px;

The image can also be on the far right of the Header if you set the right margin to 0px:-

margin-left: auto; margin-right: 0px;

Modèle Rounders

Le titre et la description sont automatiquement alignés à gauche. Vous pouvez avoir le titre du blog au centre en ajoutant la ligne de code suivant (en rouge):-

#header h1 { text-align: center;

Pour que la description soit au centre, ajoutez le code d’alignement suivant :

#header .description { text-align: center;

Si vous voulez une position particulière pour le titre et la description, vous pouvez mettre une mesure déterminée pour la gauche (left) :

#header h1 { margin-left: 200px;

La bannière est alignée à gauche. Vous pouvez centrer la bannière en ajouter ceci juste après /* Blog Header */

#header-inner { background-position: center; margin-left: auto; margin-right: auto; }

Vous pouvez avoir l’image à droite en mettant 0px pour “margin-right” au lieu de “auto”:

margin-left: auto; margin-right: 0px;

Modèles Herbert and Jellyfish

Par défaut, le titre et la description sont alignés à gauche. Pour avoir le titre centré à l’entête, mettre le code suivant (en rouge) :

h1 { text-align: center;

Pour la description :

.description { text-align: center;

La bannière est alignée à gauche dans l’entête. Pour aligner l’image au centre, ajouter ce code de l’entête immédiatement après le signe suivant } :

#header-inner { background-position: center; margin-left: auto; margin-right: auto; }

Modèle Harbor

Le titre et la description sont alignés à gauche. Pour centrer le titre, ajouter le code suivant (en rouge):-

.Header h1 { text-align: center;

Pour centrer la description, ajouter le code suivant:-

.Header .description { text-align: center;

Les gens utilisent lemodèle Harbor pour son image de fond.Nous ne pensons pas que vous voudriez ajouter une image en plus pour l’entête. Si cela vous intéresse, l’image ajouté sera aligné vers la gauche . Pour l’avoir au centre, vous devez ajuste la mesure gauche avec ce code inséré après /* Headings */

#header-inner { background-position: center; margin-left: 90px; margin-right: auto; }

Changer la largeur gauche et après avoir enregistré, aller voir si l’image est à l’endroit désiré.

Modèle Scribe

Le titre et la description sont à gauche. Si vous voulez les centrer, trouvez cette partie dans votre modèle et ajouter le code suivant (en rouge):-

.Header { text-align: center;

Vous pouvez changer “center” en “right” si vous voulez que les textes soient alignés à droite.

Une image ajoutée à l’entête est alignée à gauche. Pour l’avoir au centre, ajouter ce code (en rouge):-

#header-inner { background-position: center; margin-left: auto; margin-right: auto; } .Header { text-align: center; }

Vous remarquerez qu’il y a une marge entourant l’image avec pour conséquence sont alignement au reste du contenu. Vous pouvez vous retrouvez avec cette situation alors que votre intention était que l’image occupe l’entiereté de la partie supérieur du modèle.


Il suffit de bricoler le parametrage des marges.

#header-inner { background-position: center; margin-left: -50px; margin-top: -35px; }

Vous pouvez utiliser des nombres négatifs (e.x., -50px). Essayez en changeant une valeur à la fois. Voyez l’aperçu avant d’enregistrer les modifications.

La deuxième partie de cet article, “Aligner le titre et la description dans les modèles classiques”, nous verrons de quoi il retourne pour les modèles Dots, No. 897, No. 565, Thisaway, Moto, Snapshot, TicTac, Tekka, Sand Dollar et Simple II.

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.