Modifier votre bannière avec un CSS personnalisé

Andy Wibbels un membre de l'équipe TypePad US nous explique un peu ce qu'est le CSS personnalisé.  Ses explications ne ferons pas de vous un expert du CSS, néanmoins vous bénéficierez d'astuces pouvant se révéler utiles.

Une brève introduction aux CSS
CSS est un acronyme pour "Cascading Style Sheet" (feuilles de style en cascade) et c'est une méthode qui permet de personnaliser la mise en page et le design de votre blog sans avoir besoin de convertir votre habillage en habillage avancé.

Une feuille de style CSS est un petit fichier qui explique à votre navigateur les règles à appliquer au design de votre blog. Il définit la largeur des colonnes, la police, les tailles et couleurs, les marges et l'image au fond et plein d'autres options encore. Comme ça, vous n'avez pas à créer des balises html chaque fois que vous voulez un titre en gras ou dans une police différente.  Toutes les informations de design sont centralisées dans un fichier.

Le CSS personnalisé est disponible sur les offres TypePad Pro et Business class. Pour accéder au CSS personnalisé, identifiez-vous sur TypePad puis cliquez sur Weblogs> (Mon Weblog)> Habillage. Descendez et cliquez sur "Éditez un CSS personnalisé". La page du  CSS personnalisé s'affiche avec une grande zone de texte où vous pouvez coller et sauvegarder votre CSS personnalisé.

Apprenez par l'exemple: le blog "No Impact Man" de Colin Beavan.

Un blog TypePad qui montre toutes les facettes des CSS personnalisés est celui de Colin Beavan, un blog sur le thème du développement durable. Voici une capture d’écran de son blog:

Pas mal comme design, non? Ce design a été créé par Mary K. Elkins.  Colin utilise plusieurs astuces pour personnaliser son blog et le rendre plus attractif. Voyons ça par étape.

Avant d'appliquer votre CSS personnalisé, il est conseillé de choisir un des thèmes prédéfini comme thème de base. Pour son blog, No Impact Man, Colin a choisi le thème "Hills Green" comme thème prédéfini. Ci-dessous le blog avec le thème Hills Green appliqué avant utilisation d'un CSS personnalisé.

Le changement le plus visible que Colin ait fait, c'est de couvrir la bannière par défaut par sa bannière personnalisée.  Voici le CSS qui fait cela :

#banner { height: 338px; background-image: url(http://noimpactman.typepad.com/impactheader.jpg);
background-position: 0px 0px; background-repeat: no-repeat; }

Ce CSS indique au navigateur de prendre cette image de 388 pixels de haut, de l'afficher en fond de page, de la coller en haut à gauche de la fenêtre et de ne pas la répéter en hauteur ou largeur d'écran (affichage unique).

Il a aussi utilisé un peu de code particulier pour cacher le texte de son titre de blog de telle sorte que celui-ci n'apparaisse pas par dessus sa bannière.

 

#banner-inner { overflow: visible; padding: 0; } #banner-header { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #banner-header a { display: block; left: 0; top: 0; height: 338px; text-indent: -1000em; } #banner-description { overflow: hidden; width: 0; height: 0; margin: 0; padding: 0; text-indent: -1000em; }

Ce CSS indique au navigateur de "cacher" le titre pour que la bannière soit seule affichée au lecteur (le texte est en fait positionné en dehors de l'écran).

A vous de jouer : Téléchargez votre bannière personnalisée, mais faites attention à la hauteur exacte de l'image et aussi à son URL pour bien indiquer où le navigateur peut la trouver.  Ensuite, ajoutez votre CSS personnalisé. 

#banner { height: XXXXpx; background-image: url(http://votre-lien-vers-votre-banniere.com/filename.gif); background-position: 0px 0px; background-repeat: no-repeat; }

Sauvegardez le CSS et republiez  votre blog. Vous allez noter que le titre et la description de votre blog sont encore en surimpression de votre bannière.  Nous allons les cacher avec le code expliqué plus haut.   

#banner-inner { overflow: visible; padding: 0; } #banner-header { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #banner-header a { display: block; left: 0; top: 0; height: 338px; text-indent: -1000em; } #banner-description { overflow: hidden; width: 0; height: 0; margin: 0; padding: 0; text-indent: -1000em; }

Sauvegardez le CSS et republiez votre blog, maintenant vous devriez voir votre bannière personnalisée en haut de votre blog.

Et si la largeur de votre blog est plus grande que celle de votre bannière ? Ne vous inquiétez pas, vous pouvez la centrer sur la page. 

Entrez dans votre CSS personnalisé et saisissez:

#banner {background-position: center;}

Sauvegardez le CSS et republiez votre blog.

Autrement vous pouvez aligner la bannière à droite avec:

#banner {background-position: right;}

Pour supprimer vos changements, effacez la partie de code CSS que vous avez ajouté, sauvegardez et republiez le blog.