Template Artisteer Modx

2,902 views

Published on

Détails des codes html du template selon les balises de MODX

1 Comment
0 Likes
Statistics
Notes
  • ouhaou, merci pr ces explications en français !!

    c'est clair, net et précis... il n'y a plus qu'à suivre pas-à-pas.
    Merci pour vos efforts !
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
2,902
On SlideShare
0
From Embeds
0
Number of Embeds
77
Actions
Shares
0
Downloads
56
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Template Artisteer Modx

  1. 1. Dans ce document, je vais vous décortiquer un template généré par Artisteer et vous montrer les modifications apportées pour l'importer dans votre MODX. Les lignes dont le fond est jaune est la partie html dont on parle Les lignes en bleu sont mes commentaires Les lignes en vert sont les lignes que j'ai modifié ou ajouté
  2. 2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en"> <head> <!-- Created by Artisteer v2.3.0.20258 Base template (without user's data) checked by http://validator.w3.org : "This page is valid XHTML 1.0 Transitional" --> On peut enlever cette partie, aucun intérêt … <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>Artisteer </title> On va profiter pour mettre ici les balises de MODX pour le référencement, je remplace la balise title en ajoutant quelques autres balises <title>[*pagetitle*]</title> <meta name="title" content="[*pagetitle*]" /> <meta name="description" content="[*description*]" /> <meta name="language" content="fr" /> <meta name="subject" content="[*pagetitle*]" /> <meta name="robots" content="All" /> <meta name="author" content="Votre nom" /> <meta name="copyright" content="Votre nom" /> <script type="text/javascript" src="script.js"></script> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <!--[if IE 6]><link rel="stylesheet" href="style.ie6.css" type="text/css" media="screen" /><! [endif]--> <!--[if IE 7]><link rel="stylesheet" href="style.ie7.css" type="text/css" media="screen" /><! [endif]--> </head> <body> <div id="art-main"> <div class="art-Sheet"> <div class="art-Sheet-tl"></div> <div class="art-Sheet-tr"></div> <div class="art-Sheet-bl"></div> <div class="art-Sheet-br"></div> <div class="art-Sheet-tc"></div> <div class="art-Sheet-bc"></div> <div class="art-Sheet-cl"></div> <div class="art-Sheet-cr"></div> <div class="art-Sheet-cc"></div> <div class="art-Sheet-body"> <div class="art-Header"> <div class="art-Header-jpeg"></div> <div class="art-Logo">
  3. 3. <h1 id="name-text" class="art-Logo-name"><a href="#">Site de membres</a></h1> <div id="slogan-text" class="art-Logo-text">Comment faire un site de membres en 10 étapes pas à pas</div> </div> </div> <div class="art-contentLayout"> <div class="art-sidebar1"> On arrive à la boîte de message <div class="art-Block"> <div class="art-Block-body"> <div class="art-BlockHeader"> <div class="l"></div> <div class="r"></div> <div class="art-header-tag-icon"> <div class="t">Highlights</div> On va changer le titre de la boîte en mettant par exemple 'Messages', on changera plus tard le contenu par une balise, un chunk, maintenant vous savez ce que c'est :) <div class="t">Messages</div> </div> </div><div class="art-BlockContent"> <div class="art-BlockContent-tl"></div> <div class="art-BlockContent-tr"></div> <div class="art-BlockContent-bl"></div> <div class="art-BlockContent-br"></div> <div class="art-BlockContent-tc"></div> <div class="art-BlockContent-bc"></div> <div class="art-BlockContent-cl"></div> <div class="art-BlockContent-cr"></div> <div class="art-BlockContent-cc"></div>
  4. 4. <div class="art-BlockContent-body"> <div> <p><b>Jun 14, 2008</b><br/> Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra.<br/> <a href="javascript:void(0)">Read more...</a></p> <p><b>Aug 24, 2008</b><br/> Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra.<br/> <a href="javascript:void(0)">Read more...</a></p> </div> On va remplacer le code en jaune, par la balise en vert, dans ce cas, on va mettre une variable de template ...Une variable de template permet d'assigner le contenu d'une page à cette balise, on pourra donc facilement modifier le contenu d'une page qui sera en fait placée dans cette boîte à message <div>[*BoxMessage*] </div> <div class="cleared"></div> </div> </div> <div class="cleared"></div> </div> </div> <div class="art-Block"> <div class="art-Block-body"> <div class="art-BlockHeader"> <div class="l"></div> <div class="r"></div> <div class="art-header-tag-icon"> <div class="t">Contact Info</div> On va changer le titre de la boîte de contact <div class="t">Contact</div> </div> </div><div class="art-BlockContent"> <div class="art-BlockContent-tl"></div> <div class="art-BlockContent-tr"></div> <div class="art-BlockContent-bl"></div> <div class="art-BlockContent-br"></div> <div class="art-BlockContent-tc"></div>
  5. 5. <div class="art-BlockContent-bc"></div> <div class="art-BlockContent-cl"></div> <div class="art-BlockContent-cr"></div> <div class="art-BlockContent-cc"></div> <div class="art-BlockContent-body"> <div> <img src="images/contact.jpg" alt="an image" style="margin: 0 auto;display:block;width:95%" /> <br /> <b>Company Co.</b><br /> Las Vegas, NV 12345<br /> Email: <a href="mailto:info@company.com">info@company.com</a><br /> <br/> Phone: (123) 456-7890 <br/> Fax: (123) 456-7890 </div> <div class="cleared"></div> </div> Maintenant, on va aussi mettre une variable de template à la place du contenu de la boîte de contact, cela permettra d'éditer une page tranquillement pour modifier le contenu de la boîte <div>[*BoxContact*]</div> </div> <div class="cleared"></div> </div> </div> </div> On arrive au contenu de la page …
  6. 6. On va changer 'Welcome' en plaçant le titre de la page et virer le contenu actuel pour mettre la balise de MODX qui va gérer le contenu. <div class="art-content"> <div class="art-Post"> <div class="art-Post-tl"></div> <div class="art-Post-tr"></div> <div class="art-Post-bl"></div> <div class="art-Post-br"></div> <div class="art-Post-tc"></div> <div class="art-Post-bc"></div> <div class="art-Post-cl"></div> <div class="art-Post-cr"></div> <div class="art-Post-cc"></div> <div class="art-Post-body"> <div class="art-Post-inner"> <div class="art-PostMetadataHeader"> <h2 class="art-PostHeader"> Welcome </h2> On remplace la balise en jaune par la suivante <h2 class="art-PostHeader"> [*pagetitle*] </h2> </div>
  7. 7. A partir d'ici je met la balise de MODX pour le contenu <div class="art-PostContent">[*#content*] et je supprime le contenu existant en jaune <p>Lorem ipsum dolor sit amet, <a href="#" title="link">link</a>, <a class="visited" href="#" title="visited link">visited link</a>, <a class="hover" href="#" title="hovered link">hovered link</a> consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.</p> <p> <span class="art-button-wrapper"> <span class="l"> </span> <span class="r"> </span> <a class="art-button" href="javascript:void(0)">Read more...</a> </span> </p> <table class="table" width="100%"> <tr> <td width="33%" valign="top"> <div class="art-Block"> <div class="art-Block-body"> <div class="art-BlockHeader"> <div class="l"></div> <div class="r"></div> <div class="t"><center>Support</center></div> </div> <div class="art-BlockContent"> <div class="art-PostContent"> <img src="images/01.png" width="55px" height="55px" alt="an image" style="margin: 0 auto; display: block; border: 0" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna. </p> </div> </div> </div> </div> </td> <td width="33%" valign="top">
  8. 8. <div class="art-Block"> <div class="art-Block-body"> <div class="art-BlockHeader"> <div class="l"></div> <div class="r"></div> <div class="t"><center>Development</center></div> </div> <div class="art-BlockContent"> <div class="art-PostContent"> <img src="images/02.png" width="55px" height="55px" alt="an image" style="margin: 0 auto; display: block; border: 0" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna. </p> </div> </div> </div> </div> </td> <td width="33%" valign="top"> <div class="art-Block"> <div class="art-Block-body"> <div class="art-BlockHeader"> <div class="l"></div> <div class="r"></div> <div class="t"><center>Strategy</center></div> </div> <div class="art-BlockContent"> <div class="art-PostContent"> <img src="images/03.png" width="55px" height="55px" alt="an image" style="margin: 0 auto; display: block; border: 0" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna. </p> </div> </div> </div> </div> </td> </tr> </table> </div> <div class="cleared"></div>
  9. 9. </div> <div class="cleared"></div> </div> </div> On arrive à la 2eme boîte qui ne nous sert à rien dans notre site de membres, on va donc la virer complètement <div class="art-Post"> <div class="art-Post-tl"></div> <div class="art-Post-tr"></div> <div class="art-Post-bl"></div> <div class="art-Post-br"></div> <div class="art-Post-tc"></div> <div class="art-Post-bc"></div> <div class="art-Post-cl"></div> <div class="art-Post-cr"></div> <div class="art-Post-cc"></div> <div class="art-Post-body"> <div class="art-Post-inner"> <div class="art-PostMetadataHeader"> <h2 class="art-PostHeader"> Text, <a href="#" rel="bookmark" title="Permanent Link to this Post">Link</a>, <a class="visited" href="#" rel="bookmark" title="Visited Hyperlink">Visited</a>, <a class="hovered" href="#" rel="bookmark" title="Hovered Hyperlink">Hovered</a> </h2> </div> <div class="art-PostContent"> <p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit, <a href="#" title="test link">test link</a>.
  10. 10. Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. <abbr title="Avenue">AVE</abbr></p> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <blockquote> <p> “This stylesheet is going to help so freaking much.” <br /> -Blockquote </p> </blockquote> <br /> <table class="art-article" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <th>Header</th> <th>Header</th> <th>Header</th> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr class="even"> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </tbody></table>
  11. 11. <p> <span class="art-button-wrapper"> <span class="l"> </span> <span class="r"> </span> <a class="art-button" href="javascript:void(0)">Join&nbsp;Now!</a> </span> </p> </div> <div class="cleared"></div> </div> <div class="cleared"></div> </div> </div> </div> </div> <div class="cleared"></div><div class="art-Footer"> <div class="art-Footer-inner"> <a href="#" class="art-rss-tag-icon" title="RSS"></a> <div class="art-Footer-text"> <p><a href="#">Contact Us</a> | <a href="#">Terms of Use</a> | <a href="#">Trademarks</a> | <a href="#">Privacy Statement</a><br /> Copyright &copy; 2009 ---. All Rights Reserved.</p> On va mettre ici un lien vers les mentions légales par exemple <p><a href="Conditions-dutilisation.html">Conditions d'utilisation</a><br /> Copyright &copy; 2009 ---. All Rights Reserved.</p> </div> </div> <div class="art-Footer-background"></div> </div> <div class="cleared"></div> </div> </div> <div class="cleared"></div> <p class="art-page-footer"><a href="http://www.artisteer.com/">Web Template</a> created with Artisteer.</p> </div> On termine ici en ajoutant un chunk qui contiendra les balises de google Analytic {{google}} </body> </html>
  12. 12. Et voilà, le code est prêt à intégrer MODX, il faudra peut-être adapter ce tutoriel au template que vous avez, vous le copiez et le collez selon les instructions des vidéos. Patrick info@sitedemembres.com

×