Integration CSS dans un fichier CFM

Vos questions et réponses sur l'usage des CSS avec Coldfusion
Répondre

Integration CSS dans un fichier CFM

Messagede Emmalove le Jeu 04 Déc 2008 20:22

Bonjour,

Je vais essayé de faire le plus clair possible. ;)

J'ai un fichier CFM, ou je met le code suivant :

Line Numbers | Expand Code | Tout sélectionner
  1.  
  2.  
  3. <link href="contact.css" rel="stylesheet" type="text/css" />
  4. <cfif isdefined("url.input_name")>
  5.    
  6.          <CFMail from="neant@neantbe"
  7.                 server="smtp.neant.net"
  8.                 to="neant@neant.be"
  9.                 subject="Message de neant">
  10.  
  11.                     Message de  #input_name# (#input_email#) - Tel. : (#input_tel#)
  12.                    
  13.                     Sujet : #input_subject#
  14.                    
  15.                     Message : #input_msg#
  16.  
  17.         </cfmail>
  18.  
  19.          mon code HTML qui s'affiche apres avoir remplit le formulaire
  20.   <cfelse>
  21.  
  22.         Mon code HTML qui s'affiche avec le formulaire
  23.  
  24.   <cfif>
  25.  


Le coté CFM marche tres bien, mais ce qui ne va pas c'est qui ne lit pas mon fichier css, que dois je faire ou changer.
Si vous désirez plus d'information dites le.

Merci d'avance.
Avatar de l'utilisateur
Emmalove
 
Messages: 3
Inscription: Jeu 04 Déc 2008 19:59
Haut

Re: Integration CSS dans un fichier CFM

Messagede srappaille le Jeu 04 Déc 2008 23:06

Bonjour,

Pour appliquer du CSS à un mail, il fait procéder autrement.

a) Créez un page web (header, body, etc) reflétant exactement ce que vous désirez en déclarant le CSS dans cette page.
b) Changez l'extension en CFM et placez le tout dans un CFOUTPUT. Placez ensuite vos variables aux endroits désirés.
c) Faites un CFINCLUDE de cette page dans le CFMAIL en précisant le type HTML

En effet, le CSS appliqué ne dans la page de traitement en s'applique pas au contenu du CFMAIL.

Est-ce bien cela qui vous posait problème ?

Bien à vous,

Serge
Avatar de l'utilisateur
srappaille
Site Admin
 
Messages: 373
Inscription: Lun 13 Aoû 2007 14:07
Localisation: Brussels
Haut

Re: Integration CSS dans un fichier CFM

Messagede Emmalove le Ven 05 Déc 2008 01:11

Merci de la réponse.

Voici mon code complet:
Line Numbers | Expand Code | Tout sélectionner
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>2008</title>
  6. <link href="style2.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9.  
  10. <cfif isdefined("url.input_name")>
  11.    
  12.          <CFMail from="neant@neantbe"
  13.                 server="smtp.neant.net"
  14.                 to="info@neant.be"
  15.                 subject="Message de neant.be">
  16.  
  17.                     Message de  #input_name# (#input_email#) - Tel. : (#input_tel#)
  18.                    
  19.                     Sujet : #input_subject#
  20.                    
  21.                     Message : #input_msg#
  22.  
  23.         </cfmail>
  24.  
  25.  
  26. <div id="up_div">
  27.   <div id="header">
  28.     <h1></h1>
  29.     <ul>
  30.       <li><a href="01.cfm">Accueil</a></li>
  31.       <li><a href="02.cfm">Line Up</a></li>
  32.       <li><a href="03.cfm">Photos</a></li>
  33.       <li><a href="04.cfm">Download</a></li>
  34.       <li><a href="http://.skyblog.com" target="_blank">Blog</a></li>
  35.       <li><a href="05.cfm">F.A.Q</a></li>
  36.       <li><a href="06.cfm">Contact</a></li>
  37.     </ul>
  38.   </div>
  39. </div>
  40. <div id="mid_div">
  41.   <div id="body_pan">
  42.    
  43.    
  44.     <div id="update">
  45.       <p class="up"></p>
  46.      
  47.           <div id="latest">
  48.             <h2>Question ?</h2>
  49.             <h3>
  50.            
  51.             <br /><br /><br /><br />
  52.             <center>
  53.                     Votre message a bien ete envoye!<br>
  54.                    
  55.                     Nous vous recontacterons dans les plus brefs delais.<br>
  56.                    
  57.             </center>
  58.            
  59.            
  60.             </h3>    
  61.        </div>  
  62.              
  63.       <p class="down"></p>
  64.     </div>
  65.    
  66.   <cfelse>
  67.  
  68.  
  69.   <div id="up_div">
  70.   <div id="header">
  71.     <h1></h1>
  72.     <ul>
  73.       <li><a href="01.cfm">Accueil</a></li>
  74.       <li><a href="02.cfm">Line Up</a></li>
  75.       <li><a href="03.cfm">Photos</a></li>
  76.       <li><a href="04.cfm">Download</a></li>
  77.       <li><a href="http://.skyblog.com" target="_blank">Blog</a></li>
  78.       <li><a href="05.cfm">F.A.Q</a></li>
  79.       <li><a href="06.cfm">Contact</a></li>
  80.     </ul>
  81.   </div>
  82. </div>
  83. <div id="mid_div">
  84.   <div id="body_pan">
  85.    
  86.    
  87.     <div id="update">
  88.       <p class="up"></p>
  89.      
  90.           <div id="latest">
  91.             <h2>Question ?</h2>
  92.             <h3>
  93.            
  94.            
  95.             <table width="450">
  96.                     <tr><td width="450" align="center">
  97.                 <font face="arial, helvetica" size="2">
  98.                 <form method="GET" action="06.cfm" name="contact">
  99.                 <table width="450">
  100.                 <tr>
  101.                     <td width="100" align="left"><font face="arial, helvetica" size="1" color="000000">Nom, Prenom :&nbsp;</font></td>
  102.                     <td><input type="text" name="input_name" size="30" style="font-size:9pt"></td>
  103.                 </tr>
  104.                 <tr>
  105.                     <td width="100" align="left"><font face="arial, helvetica" size="1" color="000000">E-Mail : </font></td>
  106.                     <td><input type="text" name="input_email" size="30" style="font-size:9pt"></td>
  107.                 </tr>
  108.                 <tr>
  109.                     <td width="100" align="left"><font face="arial, helvetica" size="1" color="000000">Telephone : </font></td>
  110.                     <td><input type="text" name="input_tel" size="30" style="font-size:9pt"></td>
  111.                 </tr>
  112.                 <tr>   
  113.                     <td width="100" align="left"><font face="arial, helvetica" size="1" color="0000000">Sujet : </font></td>
  114.                     <td><input type="text" name="input_subject" size="30" style="font-size:9pt"></td>
  115.                 </tr>
  116.                 </table>
  117.                 </font>
  118.                 </td><td>&nbsp;</td></tr>
  119.                 <tr><td colspan="2"><br>
  120.                
  121.                 <font face="arial, helvetica" style="font-size:12px" color="000000"><b>VOTRE MESSAGE :</b><br>
  122.                  </font><br>
  123.                 <textarea name="input_msg"  style="font-size:9pt" cols="57" rows="5"></textarea><br>
  124.                 <br>
  125.                 <input type="submit" value="Envoyer" style="font-size:9pt">&nbsp;<input type="reset" value="Effacer" style="font-size:9pt"></form>
  126.                
  127.                 </td></tr>
  128.             </table>
  129.            
  130.            
  131.             </h3>    
  132.            
  133.            
  134.            
  135.                
  136.           </div>  
  137.              
  138.       <p class="down"></p>
  139.     </div>
  140.    
  141. </cfif>
  142.    
  143.    
  144. </body>
  145. </html>



Si je comprend bien je met <CFOUTPUT> au debut et </CFOUTPUT> a la fin. Par contre la déclaration de l'autre variable je ne comprend pas.

Merci
Avatar de l'utilisateur
Emmalove
 
Messages: 3
Inscription: Jeu 04 Déc 2008 19:59
Haut

Re: Integration CSS dans un fichier CFM

Messagede eric00000007 le Ven 05 Déc 2008 01:46

Quel éditeur utilises tu ? Cela est il peut être utile de tout passer en utf-8 aussi ... mais c'est peut être pour la suite. Un truc comme ça...
Line Numbers | Expand Code | Tout sélectionner
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>2008</title>
  6. <link href="style2.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9.  <!--- Le header --->
  10. <div id="up_div">
  11.   <div id="header">
  12.     <h1></h1>
  13.     <ul>
  14.       <li><a href="01.cfm">Accueil</a></li>
  15.       <li><a href="02.cfm">Line Up</a></li>
  16.       <li><a href="03.cfm">Photos</a></li>
  17.       <li><a href="04.cfm">Download</a></li>
  18.       <li><a href="http://.skyblog.com" target="_blank">Blog</a></li>
  19.       <li><a href="05.cfm">F.A.Q</a></li>
  20.       <li><a href="06.cfm">Contact</a></li>
  21.     </ul>
  22.   </div>
  23. </div>
  24. <!--- Le contenu --->
  25. <div id="mid_div">
  26.   <div id="body_pan">
  27. <!--- Envoyer le mail et afficher un message de succès en vert --->
  28. <cfif isdefined("url.input_name")>
  29.    
  30.          <CFMail from="neant@neantbe"
  31.                 server="smtp.neant.net"
  32.                 to="info@neant.be"
  33.                 subject="Message de neant.be">
  34.     <cfmailpart type="text" wraptext="74">
  35.           Message de  #input_name# (#input_email#) - Tel. : (#input_tel#)
  36.           Sujet : #input_subject#
  37.           Message : #input_msg#
  38.     </cfmailpart>
  39.     <cfmailpart type="html">
  40. <html>
  41. <head>
  42. <style>
  43. <!--- faire un cfinclude de la feuille de style ou bien coller les classes de la CSS --->
  44. <!--
  45. body {margin:0 auto;width:520px;}
  46. h1 {font-size:200px}
  47. -->
  48. </style>
  49. </head>
  50. <body>
  51.           <h1> Message de  #input_name# (#input_email#) - Tel. : (#input_tel#)</h1>
  52.          <p> <strong>Sujet :</strong> #input_subject#</p>
  53.           <p><strong>Message :</strong> #input_msg#   </p>
  54.   </body>        
  55. </html>
  56.  </cfmailpart>
  57.  </cfmail>
  58.  <!--- Affichage du message apres l'envoie, il faudrait penser à l'action que le client doit faire apres ce message  --->
  59.     <div id="update">
  60.       <p class="up"></p>
  61.           <div id="latest">
  62.             <h2>Question ?</h2>
  63.             <div class="success">
  64.                     Votre message a bien ete envoye!<br />
  65.                     Nous vous recontacterons dans les plus brefs delais.<br />
  66.            </div>
  67.        </div>  
  68.   <cfelse>
  69.  <!--- Si pas de variable URL on afiche le formulaire--->
  70.      <div id="update">
  71.       <p class="up"></p>
  72.           <div id="latest">
  73.             <h2>Question ?</h2>
  74.             <h3>
  75.             <table width="450">
  76.                     <tr><td width="450" align="center">
  77.                 <font face="arial, helvetica" size="2">
  78.                 <form method="GET" action="06.cfm" name="contact">
  79.                 <table width="450">
  80.                 <tr>
  81.                     <td width="100" align="left"><font face="arial, helvetica" size="1" color="000000">Nom, Prenom :&nbsp;</font></td>
  82.                     <td><input type="text" name="input_name" size="30" style="font-size:9pt"></td>
  83.                 </tr>
  84.                 <tr>
  85.                     <td width="100" align="left"><font face="arial, helvetica" size="1" color="000000">E-Mail : </font></td>
  86.                     <td><input type="text" name="input_email" size="30" style="font-size:9pt"></td>
  87.                 </tr>
  88.                 <tr>
  89.                     <td width="100" align="left"><font face="arial, helvetica" size="1" color="000000">Telephone : </font></td>
  90.                     <td><input type="text" name="input_tel" size="30" style="font-size:9pt"></td>
  91.                 </tr>
  92.                 <tr>  
  93.                     <td width="100" align="left"><font face="arial, helvetica" size="1" color="0000000">Sujet : </font></td>
  94.                     <td><input type="text" name="input_subject" size="30" style="font-size:9pt"></td>
  95.                 </tr>
  96.                 </table>
  97.                 </font>
  98.                 </td><td>&nbsp;</td></tr>
  99.                 <tr><td colspan="2"><br>
  100.                 <font face="arial, helvetica" style="font-size:12px" color="000000"><b>VOTRE MESSAGE :</b><br>
  101.                  </font><br>
  102.                 <textarea name="input_msg"  style="font-size:9pt" cols="57" rows="5"></textarea><br>
  103.                 <br>
  104.                 <input type="submit" value="Envoyer" style="font-size:9pt">&nbsp;<input type="reset" value="Effacer" style="font-size:9pt"></form>
  105.                 </td></tr>
  106.             </table>
  107.              </h3>    
  108.            </div>  
  109.         <p class="down"></p>
  110.     </div>
  111. </cfif>   
  112. </body>
  113. </html>


Source :
http://livedocs.adobe.com/coldfusion/8/ ... -o_03.html
eric00000007
 
Messages: 425
Inscription: Mer 31 Oct 2007 10:55
Localisation: Paris
Haut

Re: Integration CSS dans un fichier CFM

Messagede Emmalove le Sam 06 Déc 2008 13:15

Re,

eric00000007 a écrit:Quel éditeur utilises tu ? Cela est il peut être utile de tout passer en utf-8 aussi ... mais c'est peut être pour la suite. Un truc comme ça...


Dreamweaver, mais je mets toujours des annotations dans mes fichiers pour me retrouver ultérieurement. ;)
On ne sait jamais.
Avatar de l'utilisateur
Emmalove
 
Messages: 3
Inscription: Jeu 04 Déc 2008 19:59
Haut

Re: Integration CSS dans un fichier CFM

Messagede CAZ le Dim 22 Mar 2009 22:22

Intégrer le formatage HTML désiré n'est pas nécessairement lié à CF mais plutôt lié à comment c'est intérprété par le lecteur d'email (Outlook, gmail, hotmail, etc.).
Bien que la recommandation donnée ci-dessus de préparer ton contenu HTML dans un fichier séparé et de l'inclure dans le body de ton cfmail soit bonne. Et j'y ajouterais de veiller à appliquer des chemins absolus et non relatif ("http://www.mondomaine.com/css/mycss.css" v/s "../css/mycss.css") car une fois le mail downloadé, la css ne pourrait probablement pas se trouver sur la machine du user mais en donnant un chemin absolu, pour autant que le user soit connecté au net, il y aura une requete pour aller "chercher" cette css. Idem pour les images.

Par ailleurs, et cela annule ou relativise qlq part mon conseil précédent, ces lecteurs de mail différents pourraient ne pas (vouloir) lire les CSS, de façon arbitraire.
Je conseillerais alors donc de revenir quelques années net en arrière en appliquant des style 'en ligne' (dans les tags des blocks) et même à la limite en utilisant les params de ces tags (ex.: td bgcolor="red"). Je sais, c assez rétrograde mais utilisant d'abord ça, puis les autres mises en forme plus "modernes", tu arriveras presque à satisfaire la majorité des lecteurs de mail.
Chris
Avatar de l'utilisateur
CAZ
 
Messages: 121
Inscription: Mar 03 Mar 2009 17:31
Localisation: Bruxelles, Belgique
Haut

Re: Integration CSS dans un fichier CFM

Messagede Renand le Mar 26 Mai 2009 01:55

J'en rajouterai une couche, l'utilisation de CSS est au final pas si mal interprété SI, les balises sont en ligne.
donc plutôt que les attributs du passé j'aurais vu une méthode plus courtoise genre <td style="background="red"> pour reprendre l'exemple ci dessus..

une article très intéressant ici : http://www.pompage.net/pompe/email-html/
qui fait référence à celui là : http://www.pompage.net/pompe/emails-htm ... r-la-bete/

et une liste des CSS supportés par les différents clients http://www.campaignmonitor.com/blog/pos ... in-emai-2/ (en bas de page), en espérant que cela s'arrange dans l'avenir, mais avec un microsoft qui continu à utiliser le moteur HTML de Word dans les mails ça va pas être simple.
Avatar de l'utilisateur
Renand
 
Messages: 213
Inscription: Lun 25 Aoû 2008 10:47
Localisation: Versailles
Haut
Répondre

Retourner vers CSS (Cascading Style Sheets)

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Traduction par: phpBB-fr.com & phpBB.biz
cron