Canevas / Tutos pour créer des papiers à lettres

Demot · Message par **Demot** » 23 déc. 2009, 01:01

Tuto pour créer ses propres papiers à lettres avec image (fixe ou animée)
▬ Extension associée : Stationery

1 - Il suffit de tout copier dans le bloc-notes (de <html> à </html>)
2 - De rectifier (sans effacer les ; ) ce que j'ai mis en rouge, à savoir dans l'ordre :

La police .. ex : pour verdana ça donne : font-family: "verdana";
La taille de police en pt
Les marges gauches et droites (dans l'exemple 50 et 10)
La marge supérieure
Répétition de l'image, choix possibles :
no-repeat : l'image n'est représentée qu'une seule fois
repeat : l'image se répète infiniment
repeat-y : l'image se répète en colonne à gauche
repeat-x : l'image se répète en ligne au dessus
...
Nom du fichier de l'image de fond avec l'extension (ex : "image.gif")
Dans l'exemple le fichier de l'image et fichier html ¹ sont dans le même dossier
Pour une img située dans un autre dossier > mettre le chemin ex : "file:///C:/Dossier/sousdossier/image.gif"
...
La couleur du fond
La couleur du texte (pour du noir c'est #000000)

3 - D'enregistrer le fichier au format html (voire en htm)

exemple a écrit :<html>
<head><style>
body
{
font-family: "MS Sans Serif", "sans serif";
font-size: 20pt;
margin-left: 50;
margin-right: 10;
margin-top: 50;
background-repeat: repeat-y;
}
</style></head>
<body background="image.jpg"
bgcolor="#ffffcc"
text="#227ee7"
</body></html>

Si on veut directement par exemple du justifier en gras, après </body> mettre <div align="justify"><B>

4 - D'ajouter le Papier à lettres dans la liste de Stationery :
► Flèche du bouton Ecrire → Autre papier à lettres, parcourir et cliquer sur le fichier html ou htm correspondant.

▬ Pour Editer un papier à lettres dans un mail :
► Flèche du bouton Ecrire → cliquer sur un papier à lettres *
► Flèche du bouton Répondre → cliquer sur un papier à lettres * (ou Répondre à tous)
► Flèche du bouton Transférer → cliquer sur un papier à lettres * (A priori pour transfert en pièce-jointe)
► En cours d'écriture²→ clic droit → Modifier le papier à lettres → cliquer sur un papier à lettres
(² Cocher les options de l'extension : Autoriser le changement de papier à lettres)
* ou autre papier

Sur Tb3 → virer la barre avec CompactHeader et personnaliser la barre d'outils courrier
Y rajouter les icônes Ecrire etc → elles prennent en compte les papiers.
___________________
Variantes pour l'image de fond et pour la couleur du fond
(à mettre dans la partie entre { et } )

exemple a écrit :background-image: url(file:///C:/Dossier/sousdossier/image.gif);
background-color: #ffffcc;

Demot · Message par **Demot** » 24 déc. 2009, 00:25

Centrer une image unique (en haut)
(on me l'a demandé par MP ben voilà)

Pour qu'elle soit unique il suffit d'avoir bien sûr : background-repeat: no-repeat;
et pour le centrage rajouter avant ou après : background-position: top center;

Remarque à lire : Il semblerait que chez certaine personne le fait qu'il soit avant ou après n'ait pas donné la même chose, cependant chez moi c'est pareil

exemple a écrit :<html>
<head><style>
body
{
font-family: "MS Sans Serif", "sans serif";
font-size: 20pt;
margin-left: 50;
margin-right: 10;
margin-top: 50;
background-position: top center;
background-repeat: no-repeat ;
}
</style></head>
<body background="image.jpg"
bgcolor="#ffffcc"
text="#000000"
</body></html>

PS : D'autres tutos dans ce même fil pour diverses effets.

Demot · Message par **Demot** » 24 déc. 2009, 00:30

Une image qui descend avec texte, avec la touche entrée.
En clair quand on rajoute une ligne.
(Petite de préférence : exemple une signature en image, voire en mots animées)

Suffit de rajouter une ligne (ou de rectifier la partie rouge) :
background-position: center center;

Coté police de caractère bien sûr, on peut mettre autre chose, exemple font-family: "Comic Sans MS";

exemple a écrit :<html>
<head><style>
body
{
font-family: "verdana";
font-size: 13pt;
margin-left: 50;
margin-right: 50;
margin-top: 50;
background-position: center center;
background-repeat: no-repeat;
}
</style></head>
<body background="bonnejournee.gif"
bgcolor="#ffffcc"
text="#000000"
</body></html>

PS : D'autres tutos dans ce même fil pour diverses effets.

Demot · Message par **Demot** » 24 déc. 2009, 00:33

Mettre un texte par défaut (on me l'a demandé)
Exemple pour gagner du temps pour un transfert, voire pour ne pas oublier de commencer par Bonjour.

Il suffit à la fin d'écrire quelque chose entre les deux dernières lignes.
Si vous voulez qu'il soit centré et en gras par exemple rajouter une ligne avant le texte par défaut voulu
<div align="center"><b>

Dans l'exemple, le texte par défaut sera centré, en gras, en noir et dira :
Transfert en pièce jointe d'un message pour action.

Coté police de caractère bien sûr, on peut mettre autre chose, exemple font-family: "Comic Sans MS";

exemple a écrit :<html>
<head><style>
body
{
font-family: "MS Sans Serif", "sans serif";
font-size: 20pt;
margin-left: 50;
margin-right: 10;
margin-top: 50;
background-repeat: no-repeat ;
}
</style></head>
<body background="image.jpg"
bgcolor="#ffffcc"
text="#000000"
<div align="center"><b><br>
Transfert en pièce jointe d'un message pour action.
</body></html>

L'exemple est avec une image si vous en voulez une, pour ne pas avoir d'image supprimer simplement
background-repeat: no-repeat ;
background="image.jpg"

PS : D'autres tutos dans ce même fil pour diverses effets.

manudevil · Message par **manudevil** » 24 déc. 2009, 09:28

Une petite note : impossible de s'assurer que votre papier à lettre sera convenablement affiché sur tous les courielleurs. Thunderbird fait du bon travail à ce niveau-là, Outlook se débrouille relativement bien, mais si on parle des courielleurs online comme Gmail ou MSN, ça n'est pas gagné.
Certains supprime tout simplement tout contenu entre <head> et </head> compris. Du coup, les styles disparaissent, et avec eux, les images... La solution ? Elle n'est pas parfaite, et elle constitue une "erreur" au niveau du code : mettre le code des styles dans le corps de la page...

Code : Tout sélectionner

<body>

<div align="center"><b>
Transfert en pièce jointe d'un message pour action.</b>
</div>

<style>
<!--
body
{
font-family: "MS Sans Serif", "sans serif";
font-size: 20pt;
margin-left: 50;
margin-right: 10;
margin-top: 50;
background: #FFF url(Adresse de l'image) no-repeat bottom right;
}

-->
</style>

</body>

C'est assez porc, je sais... Mais ça marche.

patrick67 · Message par **patrick67** » 24 déc. 2009, 13:39

Bonjour,
J'aimerais savoir comment mettre mon texte a gauche ou a droite dans le papier a lettre.

Merci d'avance.

jpto · Message par **jpto** » 24 déc. 2009, 13:48

Bonjour,

Pour toutes vos questions sur le HTML, il y a un document de référence que j'aime beaucoup : http://fr.selfhtml.org/index.htm .

Dans le cas de Patrick67, la réponse est ici http://fr.selfhtml.org/navigation/html.htm#texte

patrick67 · Message par **patrick67** » 24 déc. 2009, 14:02

Bonjour,

jpto a écrit :Pour toutes vos questions sur le HTML, il y a un document de référence que j'aime beaucoup : http://fr.selfhtml.org/index.htm .

Dans le cas de Patrick67, la réponse est ici http://fr.selfhtml.org/navigation/html.htm#texte

Merci
Mais c'est une vraie mine d'or tout ça.

Merci encore et bonne fête de fin d'année.

Demot · Message par **Demot** » 24 déc. 2009, 17:37

J'ai apprécié la courtoisie d'une réponse à tiroirs multiples et à but ténébreux.

Elle commençait par je cite "petite note", qui, pour celui qui comprend la finesse du français, donne une appréciation de valeur et annonce bien la couleur de la suite se voulant plus destructif que constructif.
donnait un exemple où comme par hasard, le texte en question semble bien s'afficher dans un webmaileur et une solution sibylline qui reviendrait au même quant à l'affichage du texte.
et avait une conclusion symbolique en évoquant un animal rose dont on dit comme pour l'âne, le lapin ou le chien des contre-vérités.

Animal soigneux quand il fait son nid afin d'être confortablement installé pour dormir bien sec et au au propre, loin de tout détritus. (Quand on lui en laisse le loisir)

Certes, j'en était resté jusqu'à maintenant au " Les courrielleur parlent aux courrielleurs" ¹, mais quand même, pour réussir à réunir sur un même post, trois "maladresses" vs un autre posteur juste avant Noël fallait le faire.

¹ Quoique, j'avais mis un soupçon pour les courrielleurs et je ne voulais pas en rester là, ben, vu la tournure... un peu démotivé là ...

Demot · Message par **Demot** » 25 déc. 2009, 01:40

Pour Patrick et jpto ... pas la peine d'aller chercher si loin une mine d'or, il y en a une dans Stationery.
Il suffit de passer sur l'onglet html pour trouver quelques réponses for every <body>

<div align="left"> <div align="center"> <div align="right"> <div align="justify">

Humour on

A quoi ça sert de se décarcasser

!

Demot · Message par **Demot** » 07 janv. 2010, 00:57

Pour ceux qui veulent toujours profiter des papiers à lettres dans TB3
Avant de migrer de Tb2 à Tb3 penser à se faire des modèles qui devraient fonctionner normalement dans TB3
Stationery est encore incompatible Tb3

Pour les plus entreprenants :
Si vous installer TB3 en personnalisé pour l'utiliser, ça ne vous empêchera pas d'utiliser TB2 en déconnecté pour faire d'autres papiers à lettres.

Voire se faire un profil tb2 tout neuf :
Un profil TB2 dont les dossiers locaux pointent sur le même que celui de TB3 ; ce même Dossiers locaux peut être mis hors de tout profil dans le répertoire de son choix.
(Testé Dossiers locaux hors profil commun TB2/TB3 → aucun bogue)

Lors de la création de nouveaux papiers à lettres les transmettre via les dossiers locaux, TB3 pourra les utiliser,
exemple : clic droit modifier comme nouveaux message ... (pour utilisation directe ou pour s'en faire des modèles)

Bien sûr pas ouvrir les 2 Tb en même temps.

jocelyne · Message par **jocelyne** » 09 janv. 2010, 17:48

bonsoir
merci beaucoup pour ces tutos qui m'ont beaucoup aidée, je n'arrivais pas à mettre un papier dans mes messages et grâce à vous c'est fait tout du moins pour un papier sans image mais, puis je cependant poser une question: j'ai récupéré un papier sur un site avec une image gif, sur le coté gauche, j'ai suivi le tuto en mettant "no repeat" pour l'image et malgré cela elle est présente deux fois , j'ai redimensionné l'image mais cela ne change rien, pouvez vous me donner une idée
merci d'avance
cordlt Jocelyne

jocelyne · Message par **jocelyne** » 09 janv. 2010, 17:59

re bonsoir
désolée, je plaide coupage en lisant tous les posts je viens de m'apercevoir que j'avais fait une erreur en fait j'avais inscrit background: no-repeat tout seul donc j'ai rectifié en mettant background-repeat: no-repeat et là cela fonctionne .............mais l'image ne prend pas toute la page , j'ai encore du faire une erreur , suis pas douée , un peu d'aide si vous voulez mais je vais quand même continuer à chercher
merci d'avance
cdlt Jocelyne

Demot · Message par **Demot** » 09 janv. 2010, 18:20

Bonsoir ... Pour reporter une image en colonne à gauche c'est

background-repeat: repeat-y;

Cependant, tout dépend de ce que l'on veut faire, on peut mettre une image très large et peu haute par exemple.
Mais comme je ne vois pas l'image, difficile pour le moment d'en dire plus

jocelyne · Message par **jocelyne** » 09 janv. 2010, 19:28

Bonsoir
merci de votre réponse, je continue mes essais, pour l'image je peux peut être vous envoyer le papier que je voulais utiliser mais il faudrait me dire comment procéder et ce n'est pas urgent
d'autre part, TB refuserait il certaines couleurs de texte, j'essaie text="#330033" qui est un marron foncé et impossible de l'utiliser
à moins que j'ai encore fait une erreur de syntaxe ?
cdlt Jocelyne

Geckozone

Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tuto pour créer papiers à lettres perso

Re: Canevas / Tuto pour créer papiers à lettres perso

Re: Canevas / Tuto pour créer papiers à lettres perso

Re: Canevas / Tuto pour créer papiers à lettres perso

Re: Canevas / Tuto pour créer papiers à lettres perso

Re: Canevas / Tuto pour créer papiers à lettres perso

Re: Canevas / Tuto pour créer papiers à lettres perso

Re: Canevas / Tuto pour créer papiers à lettres perso

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Qui est en ligne ?