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.

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.

16.01.2009

123456789 123456789 123456789 123456789 123456789 123456789

Test de troncature au 49ème caractère.

12:29 Écrit par Gee Mee | Lien permanent | Commentaires (2) | |  del.icio.us | | Digg! Digg |  Facebook

13.01.2009

Ascenseur pour les chats faux

Sur le blog de Pierrot, j'ai trouvé une méthode d'affichage des photos, que l'on fait défiler avec un « ascenseur ». Vous montez ?

Techniquement c'est assez trivial, mais il fallait y penser, et le mettre en œuvre correctement. Pierrot l'a bien fait pour des photographies par ailleurs magnifiques, comme toutes celles que l'on peut voir chez lui. Bref, c'est dans cette note au titre difficilement plus explicite : Ascenseur à photos

Il s'agit de créer une division dans la page, pour y afficher des éléments que l'on sait être trop grands et ou trop nombreux pour s'afficher pleinement. Il va falloir gérer le défilement proprement pour montrer qu'on l'a fait exprès. Autant dire tout de suite que le mode d'interprétation des navigateurs est capital, et vous ne verrez pas forcément la même chose selon que vous utilisez Firefox ou Internet Explorer. Microsoft interprète plus de paramètres, ignorés par Mozilla.

Voici un « cadre » avec ascenseur :


^ Chat faux, bleu

^ Chat faux tôt

^ Chat : photo et maori

Voici le code, brut de décoffrage, mais sans malle de vis :

<div style="border: 2px solid #ffffff; overflow: scroll; width: 480px; height: 380px; background-color: #ffffff;" align="left"><span style="font-size:10pt"><img src="http://geemee.hautetfort.com/images/Chat_faux_bleu.jpg" style="width: 459px; height: 344px;" border="0" /><br /> ^ Chat faux, bleu<br /> <img src="http://geemee.hautetfort.com/images/Chat_faux_tot.jpg" style="width: 459px; height: 344px;" border="0" /><br /> ^ Chat faux tôt<br /> <img src="http://geemee.hautetfort.com/images/Chat_photo_et_maori.jpg" style="width: 459px; height: 344px;" border="0" /><br /> ^ Chat : photo et maori<br /></span></div>

Pour comprendre le code :

<div

On crée la division, dont la mise en forme en fera un cadre.

style="border: 2px solid #ffffff;

On fixe le style du cadre, la bordure aura 2 pixels d'épaisseur, en trait continu, et sera de couleur blanche.

overflow: scroll;

C'est le principal. Littéralement, si le flux déborde, on fera défiler.

width: 480px;
height: 380px;

Le cadre fera 480 pixels de large pour 380 pixels de haut.

background-color: #ffffff;"

L'arrière-plan sera blanc. C'est la fin du style du cadre

align="left">

On alignera à gauche.

<span

On crée une rupture dans la feuille de style courante.

style="font-size:10pt">

La taille des caractères sera de 10 points.

 

Puis c'est du classique, on insère une image dont on précise la taille, que l'on fait suivre de quelques mots de légende.

</span>

On ferme la rupture dans la feuille de style.

</div>

On ferme la division, et donc le « cadre ».

Si vous avez la curiosité de regarder le code source de la page du blog de Pierrot, vous constaterez qu'il y a bien plus de paramètres. Les barres de défilement sont colorées, notamment. Bizarrement, je n'ai pas réussi à intégrer le code in extenso dans une note. Est-ce un filtrage automatique, est-ce dû au fait que mon blog est gratuit ? Je suis preneur de toute explication.

Pour vous faciliter l'intégration, voici une courte feuille de route.

Un avertissement avant de commencer : Les critères de taille, valables pour le template de ce blog, ne sont pas forcément applicables au vôtre. Vous aurez peut-être à ajuster la taille du cadre et des photos.

1 – Préparer des images de taille « 459 x 344 » correspondant à un honnête 4/3.
2 – Téléchargez ces photos sur votre blog, via Tableau de bord / Fichier / Images
3 – Notez l'adresse de chacune des images téléchargées.
4 – Copiez le code ci-dessous et collez-le dans une note via la méthode code embed entre deux paragraphes pour garder la main avant et après le cadre.
<div style="border: 2px solid #ffffff; overflow: scroll; width: 480px; height: 380px; background-color: #ffffff;" align="left">
<span style="font-size:10pt">
<img src="<!--adresse de l'image 1 -->" style="width: 459px; height: 344px;" border="0" /><br />
^ Légende de l'image 1<br />
<img src="<!--adresse de l'image 2 -->" style="width: 459px; height: 344px;" border="0" /><br />
^ Légende de l'image 2<br />
<img src="<!--adresse de l'image 3 -->" style="width: 459px; height: 344px;" border="0" /><br />
^ Légende de l'image 3<br />
</span>
</div>

5 – Passez en éditeur HTML et remplacez <!--adresse de l'image 1 --> par l'adresse de l'image 1.
6 – Je vous conseille de rester dans l'éditeur HTML pour modifier ou supprimer les légendes. Dans l'éditeur Wysiwyg, dans la division, l'utilisation de la touche [Entrée] vous fera diviser la division.
7 – Pour insérer plus d'images, il suffira de procéder par copier/coller pour avoir assez de lignes complètes à modifier : <img src="<!--adresse de l'image 1 -->" style="width: 459px; height: 344px;" border="0" /><br /> ^ Légende de l'image 1<br />

Bonne chance, et n'hésitez pas à me dire ce que vous en avez fait.

P.S. : Aucun animal n'a été maltraité pour préparer cette note. C'est une photo libre de droit domiciliée ici.

01:00 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (10) | Tags : photo, ascenseur, défiler | |  del.icio.us | | Digg! Digg |  Facebook

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 ?

07.01.2009

Configuration avancée... mais prudemment

Il ne serait pas très prudent d'aller trop vite alors que la plupart des routes de France se couvrent d'une neige abondante, jusque dans des départements qui n'en voient pas le bout d'un flocon depuis des lustres. On se gardera ici de faire les malins, et on mettra des chaussettes autour de ses chaussures pour ne pas glisser ; c'est une autre forme de configuration avancée.

Cette note est publiée avec retard sur le planning (en fait de 12h30 AM ce serait plutôt PM), et j'espère que mes lecteurs les plus fidèles et les plus attentifs ne m'en tiendront pas trop rigueur. Les plus addicted auront remarqué quelques changements. Ils sont minces, les changements, on est tout de même dans la première semaine qui suit les fêtes. Notez bien que les visiteurs aussi.
J'avais activé des listes, un album, pour vérifier certaines conséquences du passage au mode avancé, avant de proposer quelques précautions.

Faisons donc le bilan de ce que cela change vraiment.

La séparation du contenu et de la forme permet de récupérer vos notes sans changement, malgré vos interventions sur la forme du blog. Passez en mode avancé, vous ne perdrez aucune note, ni aucun commentaire.

Vos notes sont tellement inchangées que si vous y introduisiez régulièrement du texte rose, parce qu'il s'accordait merveilleusement avec la mise en forme des pages... Il restera rose alors que vous avez viré vos pages au bleu. Cela peut être pénible de revenir sur toutes vos notes pour une faute de goût.

Vous avez toujours accès à la gestion du contenu des colonnes, des listes et des albums, qui viendront s'intégrer dans vos pages modifiées ou non.

Je m'en excuse auprès de tous ceux qui maîtrisent parfaitement la technique en plus du globish, mais il est peut-être temps de revenir sur le principe du template et de la feuille de styles.

Si vous avez l'habitude d'apporter du contenu dans la base de données éditoriale de votre blog, l'apparence des pages vient de deux documents différents : le template (un par type de page) et la feuille de styles (normalement valable pour le blog).

Le template Haut&Fort, c'est un document qui indique la structure de la page, la présence, l'emplacement et le comportement des différents éléments. Combien de colonnes, à gauche ou à droite, combien de « dernières notes » affichées, la note est-elle coupée sur la page d'accueil pour qu'on la lise in-extenso sur une autre page, la fonction « commentaire » se trouve-t-elle bien après le lien permanent, etc... En gros, quand vous changez la mise en page d'un modèle standard, vous changez surtout de template.

La feuille de styles, c'est ce qui commande le type de police, les couleurs de fonds, les couleurs de caractères, la mise en forme des liens hypertextes... C'est la couche de finition. En gros, quand vous « personnalisez » un modèle standard, vous changez de feuille de styles.

Quand vous passez en configuration avancée, vous avez accès à la feuille de styles et à différents templates. La page d'archive n'a pas nécessairement la même structure que la page d'accueil. Mais tant que vous n'y touchez pas, vous ne verrez aucun changement.
D'ailleurs, vous ne verrez aucun changement tant que vous ne serez pas intervenu dans les templates et ou la feuille de styles.

Allez-y, vous n'en reviendrez pas.

Pas si facilement. Certaines des modifications effectuées dans les templates en configuration avancée demeurent alors que vous êtes repassé à un modèle standard. La limite de ce qui reste, et de ce qui disparaît ne me paraît pas encore très claire, mais notez que si vous passez en mode avancé pour modifier vos pages, vous ne reviendrez qu'avec difficulté à l'état "standard" de départ.

C'est pourquoi je vous propose quelques principes de précaution :

• Pour avoir un document de référence, vous pouvez faire une copie de sauvegarde de votre blog.

• Pour rapidement retrouver une base saine après quelques séances d'essais et d'erreurs, faites des sauvegarde partielles.

• Pour les templates, il existe une fonction "voir la version originale" qui vous accorde une solution de secours. Copier son contenu et le coller dans le document modifié permet de revenir à une version stable. Mais pour conserver des modifications graduelles, copier dans un fichier texte (avec Notepad++ ou MS Windows Bloc-notes) reste la méthode la plus sûre. D'autant qu'il n'y a pas de "voir la version originale" pour les colonnes de droite et gauche. Dans les templates, vous pouvez insérez des commentaires en code HTML.
Vous encadrez vos commentaires <!-- ainsi -->.

• Pour la feuille de styles pas de "voir la version originale" non plus. Copiez-la donc en intégralité dans un fichier texte (avec un logiciel comme Notepad++, ou le bloc-note MS Windows à la limite). Dans la feuille de styles elle-même, vous pouvez insérer des commentaires avec une autre syntaxe qu'en HTML.
Vous encadrez vos commentaires /** ainsi **/.

• Sauvegardez ce qui fonctionne avant de faire la modification de trop qui écroulera le château de cartes.

Ces principes généraux étant exposés, nous allons pouvoir aborder la struture des templates, la modification d'éléments précis, et les interventions sur la feuille de styles. Vous avez des priorités ?

00:42 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (2) | Tags : avancé, précaution, sauvegarde | |  del.icio.us | | Digg! Digg |  Facebook

06.01.2009

Retard à l'allumage

Et pan sur les bonnes résolutions !

La note d'aujourd'hui ne sera prête que dans la soirée. Désolé.

 

11:37 Écrit par Gee Mee | Lien permanent | Commentaires (0) | Tags : mille excuses | |  del.icio.us | | Digg! Digg |  Facebook