Comment élargir les colonnes de son blog Hautetfort ?

Chez moi, j'adore changer les meubles de place, ré-agencer, redécorer, bref, donner vie à mon petit nid douillet. 

Cependant, j'aimerais parfois pouvoir pousser les murs, pour ajouter de nouveaux meubles, ou agencer différemment. Sur mon blog, c'est exactement pareil, et je suis certain que vous êtes comme moi. 

L'avantage est que sur un blog, on peut pousser les murs. 

Et si le vrai luxe, c'était l'espace ??

 

Aujourd'hui, je vais vous proposer de personnaliser la taille des colonnes de votre blog, ainsi que la taille centrale. 

Lorsque l'on connaît la méthode, cela parait simple, mais je vais vous donner le plus de détails possible pour que la gestion des 'width' n'ait plus de secrets pour vous !

 

Dans cette note, je serais un peu votre Valérie Damidot, on a une demi heure pour tout changer ! 

Et pour cela, pas besoin de truelles, de parpaings, de ciment... Vos outils ce sont vos mains, soyez votre propre architecte en cliquant sur 'Lire la suite' ! 

Tout bon architecte connaît les contraintes liées à son activité. Il ne va pas placer un mur au hasard. Il ne va pas non plus démolir un mur porteur. 

Alors, avant de pousser les pixels de votre blog, il vous fait également connaitre quelques bases, et notamment sa structure. 

Votre blog est divisé en plusieurs section, ce sont vos pièces. 

Voici le plan de votre blog: 

 1. L'en-tête de votre blog ou #banner

C'est ici que se trouve votre bannière. Le banner est présent sur toutes les pages qui constituent votre blog. 

2. La colonne de gauche, ou #left

Selon la disposition choisie pour votre blog, cette colonne peut apparaître à différents endroits. Elle peut notamment être placée aux cotés de la colonne de droite, ou même ne pas apparaître. Elle apparait aussi sur toutes les pages qui constituent votre blog

 3. La colonne de droite, ou #right

Comme pour la colonne de gauche, l'emplacement de la colonne de droite peut varier. Elle peut aussi être placée aux cotés de la colonne de gauche, ou ne pas apparaitre du tout. Si elle est apparente, comme pour la colonne de gauche, la colonne de droite apparait sur toutes les pages qui constituent votre blog

 4. La colonne centrale, ou #center

Cette colonne renferme vos notes, elle apparait toujours, quelque soit le modèle de blog que vous avez choisis. Elle est présente sur toutes les pages qui constituent votre blog, mais, contrairement aux autres points ci dessus, son contenu varie en fonction des pages que vous affichez, des liens que vous cliquez, etc...

 5. L'ensemble des points 1,2,3 et 4, ou #container

Il s'agit d'une boite, dans laquelle sont contenus tous les éléments vus ci dessus. Ce sont les murs extérieurs de votre maison.

Comme vous le remarquerez, je vous donne une petite précision dans le titre de ces sections, je vous indique en fait la correspondance de ces sections dans la feuille de style de votre blog. 

 

Une feuille de style ?

La feuille de style, c'est le plan de l'architecte. Sur votre plan d'architecte, vous indiquez les dimensions de vos pièces. Et bien sur la feuille de style, vous indiquez la dimension de vos éléments. 

Mais la feuille de style ne sert pas qu'à cela ! Grâce à elle, vous pouvez personnaliser: 

• La taille des éléments de votre blog
• La couleur de tous les textes de votre blog
• La couleur de tous les liens de votre blog
• La police utilisée pour tous les textes de votre blog
• La bannière de votre blog

÷ nous aujourd'hui sur le premier point, et pour voir cette mystérieuse feuille de style, rendez vous dans votre interface d'administration, dans la section 'Configuration avancée' de l'onglet 'Présentation' et cliquez sur 'Modifier le Template', face à la ligne 'Feuille de Styles'.

Votre feuille de style se présente sur deux colonnes: 

La colonne de gauche contient la feuille de style originale, c'est à dire celle qui est utilisée pour présenter votre blog tel qu'il est lorsque vous sélectionnez votre modèle. Vous ne pouvez pas modifier ces lignes. 

La colonne de droite est cependant peut être éditée, c'est ici que nous allons déclarer les dimensions que nous souhaitons pour les différentes sections du blog. 

Si vous souhaitez modifier les informations de la feuille de style initiale, déclarez dans votre espace de droite la fonction à modifier. Lorsque votre blog sera affiché, vos modifications 'écraseront' la feuille de style initiale, et seront donc pris en compte.

 

Dans cette capture, vous voyez déjà une déclaration pour l'élément 'Body'

body{

font-family:'Lucida Grande','Lucida Sans Unicode',Verdana,Arial,sans-serif;

font-size:105%;

word-spacing:normal;

background-color: transparent !important;

}

Pour info, le body renferme tous les éléments visibles sur votre blog, il enferme le container 

Voici la syntaxe à respecter (et je vous donne même le nom standard des éléments qui composent ce qu'on appelle une règle): 

selecteur {

propriete: valeur;

}

Pour notre besoin, le sélécteur sera soit #container, #banner, #left, #right ou #center

La propriété, ce sera 'width'. C'est le terme utilisé pour indiquer la dimension du sélecteur

la valeur, ce sera un chiffre que vous allez définir, et dont l'ordre de grandeur est exprimé en pixel. Par exemple: 500px .

 

/! A savoir /!

Comme vous l'avez vu plus haut, le #container comprend #left, #right, #center et #banner.

Si vous augmentez la taille d'un de ces éléments, vous devrez donc augmenter la taille du #container. 

La formule est simple pour notre besoin: 

Taille du #container = taille du #banner = #left + #right + #center

Un exemple ? Les valeurs de #left et #right sont 150px chacun, #center fait 300px, je dois donc avoir un #container de 150 + 150 + 300 = 600px

Idem pour #banner (ma bannière devra donc faire 600px de largeur)

Ainsi, pour modifier mes colonnes, ma zone de texte (#center), je peux annoncer les règles suivantes: 

#right {

 

width: 150px;

}

#left {

 

width: 150px;

}

#center {

 

width: 300px;

}

Et bien sur, je n'oublie pas d'augmenter la taille du container en conséquence, dans notre exemple: 

#container {

 

width: 600px;

}

Validez vos modifications, en cliquant sur 'Enregistrer ces informations', et votre blog prend immédiatement en compte les changements.

Et voila, vous venez de pousser les murs, sans même vous fatiguer ! 

Astuces, conseils: 

Voici pour terminer quelques astuces qui vous seront d'une grande aide lorsque vous créerez plus tard vos propres règles: 

• un sélécteur ne peut contenir d'accents, ni d'espaces, ni de caractères particuliers (&, ', §, ...)
• La propriété non plus
• la valeur... non plus !

Selon le modèle de présentation choisis, il est possible que des images soient utilisées pour habiller vos colonnes ou votre zone centrale. Si vous changer la taille des colonnes, ou de la zone centrale, ces images ne seront plus adaptées à vos nouvelles dimensions. Regardez bien dans les règles initiales des #left, #right et #center s'il n'y a pas une propriété du style: 

background-image: url(http://blablabla.hautetfort.com/images/left_bg.png);

Dans ce cas, il faudra récupérer cette image, et l'agrandir, ou la rétrécir, au besoin...

Enfin, si vous souhaitez modifier la taille du sélecteur #center, c'est très certainement pour avoir plus d'espace pour vos notes. Or, changer la valeur de #center va influer sur la 'boite' qui contient vos notes, pas vos notes en elles-même. Afin d'agrandir également la zone de texte, il vous faut changer la taille du sélecteur .posttext

Contrairement aux autres sélecteurs de la note, il ne possède pas de # devant son nom, mais un point (.)

Néanmoins, le principe reste exactement le même, il se déclare ainsi:

.posttext{
width: ...px;
}

Vous l'aurez compris, la taille que vous renseignerez doit être inférieure à son contenant, #center (merci à ol pour avoir relevé ce point en commentaire !).

Bon design !