Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

13.03.2009

Afficher une image d'arrière plan en mosaïque, en motif (révisée)

Parce que vous ne trouverez pas forcément d'image à la taille idéale, et notamment parce que la zone à occuper n'a pas une surface constante, vous pouvez utiliser une image en motif, en mosaïque. Cette note publiée le 3 février a été mise à jour après le re-design de ce blog.

La partie centrale de ce blog, comme la colonne de droite sont habillées par des images en mosaïque, notammment. Il s'agit d'un motif, une petite image répétée autant de fois que nécessaire. Pour la colonne de droite, il s'agit de celle-ci :

body-bg.jpg

Dans la feuille de style

Vous trouverez dans le fichier les paramètres de la colonne de droite. Le code est maintenant le suivant :

#right {
overflow: hidden;
float: right;
width: 225px;
background: #ddb866 url(images/aspire/body-bg.jpg);
color: #000000;
}

La répétition d'une image en arrière-plan est activée par défaut. Il suffit donc de donner l'adresse de l'image pour qu'elle soit utilisée en motif. Dans ce code, il s'agit d'une adresse "relative" au domaine en cours en l'occurence geemee.hautetfort.com. Le code avec l'adresse absolue serait background: #ddb866 url("http://geemee.hautetfort.com/images/aspire/body-bg.jpg");

Il vous faut donc d'abord télécharger votre image-motif via Tableau de bord / Fichiers dans le répertoire images ou dans un nouveau dossier comme celui que j'ai nommé aspire.

Après vous modifiez la feuille de styles via Présentation / Configuration avancée / Feuille de styles : Modifier le template.

Trop facile non ?

30.01.2009

Afficher une image d'arrière-plan fixe

Je vous rassure, c'est un discours sur la méthode... pas sur le résultat. Un jour j'aurai le temps d'avoir du goût.

Vous en avez assez des ces aplats de couleur ? Vous voulez de l'image, et de la belle, pour arrière-plan ? Voici comment faire.

Je compte sur votre goût et votre débrouillardise personnelle pour trouver une belle image, que vous utiliserez sans violer son auteur, notamment dans son droit moral. Avant de partir à sa recherche, vous devrez savoir si vous souhaitez un motif répétitif (comme pour un papier peint avec raccord) ou une image unique et suffisamment grande. Et suffisamment grande c'est combien ? C'est... une certaine taille.

Je vois bien que cette première réponse vous déçoit, mais analysons ensemble les données du problème. Vous pourriez considérer que la bonne taille, c'est la votre. Celle de votre écran je veux dire. Je ne suis pas loin de penser que vous avez raison. Mais réfléchissez tout de même à la taille des écrans de vos visiteurs, qui disposent d'affichages différents du votre. Une personne qui visiterait mon site avec une résolution de 800x600 pixels ne verrait pas la moitié de l'image car elle mesure 1280x800 pixels. Si mon image est trop petite, le visiteur verra du blanc à droite et en dessous. Pour une image fixe, il faut bien faire un choix qui ne peut pas contenter tout le monde.

Pour une image répétée, ce problème n'existe pas, puisque précisément, l'image est répétée sur toute la surface affichée. C'est pourquoi nous voyons maintenant l'image fixe, et bientôt l'image répétée (comme dans la colonne de droite).

Afficher une image fixe en arrière plan de la page.

Une fois l'image choisie et modifiée par vos soins, vous la chargez sur le blog via Tableau de bord / Fichiers / Images / UI1. Vous n'avez pas de dossier UI1 ? Mais créez le donc pour y enregistrer les différentes images de "User Interface 1". Vous pouvez l'appeler Guernica ou Catherine_de_medicis si vous voulez, cela vous regarde.

Ensuite, vous allez modifier la feuille de style, en allant sur Présentation / Configuration avancée / Feuille de styles et Modifier le template.

RAPPEL : Il n'y pas de sauvegarde de la feuille de style, soyez prudents.
- Copiez le contenu et enregistrez le dans un fichier en mode texte avec l'extension .CSS
- Commentez vos interventions dans la feuille de style en utilisant les balises /* commentaire */
- D'ailleurs plutôt que de supprimer les paramètres existants, vous les encadrerez de balise de commentaire pour les neutraliser. Il vous sera plus facile de faire marche arrière.

Vous pouvez accéder à la feuille de styles pour geemee.hautetfort.com en cliquant ici.

Il faut intervenir sur l'élément "body", celui qui se situe au plus haut niveau.

Le code de body est maintenant :

body {
margin: 0px 0px 20px 0px;
padding: 0px;
background-color: #FFFFFF;
/*** mon arrière plan >>> ***/
background: url("http://geemee.hautetfort.com/images/UI1/arriere-plan.jpg") /** repeat-y 0% 0% **/ ;
background-repeat: no-repeat ; background-attachment:fixed;
/*** <<< mon arrière plan ***/
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
word-spacing: normal;
text-align: center;
}

background-color: #FFFFFF; indique la couleur à afficher, sous l'arrière-plan. C'est utile quand l'image est plus petite que l'espace d'affichage.

background: url("http://geemee.hautetfort.com/images/UI1/arriere-plan.jpg") indique l'adresse de l'image d'arrière-plan.

/** repeat-y 0% 0% **/ est contradictoire avec notre objectif de non répétition, je l'ai donc mis en commentaire.

background-repeat: no-repeat ; impose la non répétition de l'image, même si elle devait être trop petite.

background-attachment:fixed; permet de fixer l'image, elle ne défilera pas avec le texte.

Seul le code entre /*** mon arrière plan >>> ***/ et /*** <<< mon arrière plan ***/ a été ajouté.

Le code de #container est devenu :

#container {
line-height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
text-align: left;
/***neutralisation >>***
background: #aaaaaa url("http://static.hautetfort.com/backend/graphics/design/preview/set8/cab22a/f_general.gif") repeat-y 0% 0%; *** << neutralisation ***/
width: 988px; /* IE 5 */
}

J'ai neutralisé l'arrière plan de #container, pour que l'image f_general.gif ne vienne pas recouvrir l'arrière-plan.

Et voilà ! La prochaine fois, nous verrons l'image répétée, ou en mosaïque.

09.01.2009

En mâchant du template : Home

Vous êtes passés en configuration avancée ? Vous allez manger du template et de la feuille de style. Quelques modifications anecdotiques pour commencer.

J'ai préparé un document à télécharger qui contient le contenu initial du template "page d'accueil" et une forme de visualisation de la structure de la page d'accueil. On voit nettement deux éléments pour la bannière supérieure, un bloc pour chaque colonne et un bloc pour la partie centrale.

Je ne rentrerai pas maintenant dans le détail de chacun des éléments. Pour l'instant, appréciez (si vous le pouvez) l'imbrication de chacun des éléments, et le soin que vous devrez apporter à vos interventions.

Vous constaterez qu'il y en a déjà eu sur ce blog.

Dans le template, modifier le favicon.

La procédure est très bien expliquée sur le Blog Haut&Fort dans cette note que je vous incite à lire. Une fois l'icône préparée, l'intervention dans le template est mineure.

À la quatrième ligne, il faut remplacer ce qui est surligné <link rel="icon" href="{$platform.url}graphics/favicon.ico" type="image/x-icon" />,  par l'adresse de l'image que vous aurez téléchargée via Tableau de bord / Fichiers / Images. En l'occurence, la ligne est devenue <link rel="icon" href="http://geemee.hautetfort.com/images/favicon1.ico" type="image/x-icon" />. Et un jour j'en mettrai une jolie.

Dans la feuille de styles, modifier la police principale

C'est une intervention mineure dans la feuille de style avec de grandes conséquences pour le blog.

Je n'ai rien contre la police Arial, précisément parce qu'on en dit rien, aussi lui préféré-je Verdana. Normalement, on peut personnaliser son modèle standard et changer l'ordre des familles de polices, mais avec moi, cela ne voulait pas fonctionner. Une fois en configuration avancée, il "suffit" de modifier la feuille de style.

Dans la classe "body", la première, j'ai modifié l'ordre des polices utilisées pour que Verdana passe en premier
body {
margin: 0px 0px 20px 0px;
padding: 0px;
background-color: #aaaaaa;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
word-spacing: normal;
text-align: center;
}

L'un des principes des CSS, c'est la mise en cascade, la hiérarchie descendante des intructions. Modifier "Body" c'est modifier tout le blog, sauf instruction contraire. Comme le passage en Verdana modifiait la description du blog "Modeste contribution à l'émancipation technique du mardi et du vendredi à 12h30" en provoquant un retour à la ligne, j'ai modifié le style concerné.

Je suis donc intervenu sur la classe suivante en ajoutant l'instruction surlignée qui remet la police Arial en première position.
#banner h2 {
font-family: Arial, Verdana, Helvetica, sans-serif;
padding: 10px 25px 0px 25px;
}

En analysant le document à télécharger, vous comprendrez plus vite que c'est bien sur cette classe qu'il fallait intervenir.

Ces quelques interventions illustrent juste le principe, je vous proposerai bientôt des modifications plus ciblées et détaillées. D'ailleurs, avez-vous des priorités ?