Pour ce tuto, je vais partir de la mise en forme par défaut de Calumma pour créer un habillage entièrement différent.
Comme je l’expliquais dans le tuto d’introduction, il est préférable de limiter la zone d’affichage d’un blog dans une colonne centrale. Cela présente deux intérêts. Déjà, une ligne de texte qui traverse tout un écran est peu lisible. Et ensuite, cela permet au blog de s’afficher de la même manière, quelle que soit la résolution.
Les écrans d’ordinateur ont généralement une résolution avec plus de 1024 pixels en largeur. C’est pour cela que l’habillage par défaut de Calumma se limite à 900 pixels. Ainsi, même sur un écran à 1024 de large, la mise en forme s’affiche correctement, avec un peu d’espace à droite et à gauche.
Par contre, comme je voulais une couleur de fond d’en-tête et de pied de page qui traverse tout l’écran, cet habillage est un peu compliqué.
Voici la structure des cadres (div) de Calumma :
Le plus simple pour limiter la largeur d’affichage est de déclarer le champ « width » du cadre « site » à 900px. Avec des marges automatiques à droite et à gauche (« margin-right » et « margin-left » en « auto »), la colonne serait centrée. Ensuite, il suffirait de déclarer la largeur des sous cadres (« site-header », « site-content », et « site-footer ») à 100%, sans marges. C’est ce que nous allons faire dans ce tuto.
Allez sur la page « Pagination », onglet « site » et paramétrez les champs suivants :
width : 900px
margin-left : auto
margin-right : auto
Passez à l’onglet « site-branding » (vous pouvez changer d’onglet sans perdre les modifications de l’onglet précédent du moment que vous sauvez à la fin) et paramétrez les champs suivants :
width : 100%
margin-left : 0
margin-right : 0
Faites la même chose pour « site-content » et « site-info ».
Si vous sauvez et regardez le résultat, vous verrez que le menu s’affiche en décalé. Cela peut se régler en modifiant les marges dans « Menu », onglet « general » (par contre, il faut sauver vos modifications avec de passer de la page « Pagination » à la page « Menus ») avec la configuration suivante :
width : 100%
margin-left : 0
margin-right: 1em
Ainsi le fond est à nouveau calé. Par contre le texte du menu est décalé par rapport au reste du blog. Pour corriger cela, il faut ajouter un « padding-left » à « 1em » partout où cela est nécessaire, page « Pagination », onglets « site-branding », « site-content », et « site-footer » :
padding-left : 1em
Ainsi, tout est à nouveau aligné. Si vous choisissez d’avoir un en-tête et un pied de page transparents, vous pouvez passer cette étape de réalignement du menu et des différents cadres. En effet, seul le fond était décalé.
Pour ce thème, je vais utiliser une couleur claire, mais non transparente : #e9ebee
Page « Pagination », onglet « site » :
background-color : #eeebe9
Tous les autres onglets de la page « Pagination » :
background-color : transparent
Page « Menus », onglet « menu »
background-color : transparent
En paramétrant tous les sous-cadres avec une couleur transparente, il suffit de changer « background-color » dans l’onglet « site » pour modifier la couleur de fond de tout le blog.
Maintenant, j’aimerais ajouter une bordure autour du blog.
Page « Pagination », onglet « site » :
border-top-style : solide
border-right-style : solid
border-bottom-style : solid
border-left-style : solid
border-top-width: 1px
border-right-width: 1px
border-bottom-width: 1px
border-left-width: 1px
border-top-color : #e2dfdd
border-right-color : #e2dfdd
border-bottom-color : #e2dfdd
border-left-color : #e2dfdd
Pour aérer un peu tout cela, je rajoute également une marge en haut et en bas, toujours sur l’onglet « site » :
margin-top : 50px
margin-bottom : 50px
Voilà, la partie pagination est terminée. Pour obtenir un thème complet, il faut finir de paramétrer le menu et s’occuper de la partie typo. Nous verrons cela dans un prochain tuto.
Voici le résultat temporaire :
