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. <!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">
4. Ici viendra le formulaire pour l'identification, on va donc enlever la partie en jaune et la remplacer
par le code suivant. La balise {{form_login}} est une balise qu'on appelle chunk, un chunk, c'est un
bout de code html, dans ce cas, ce chunk contiendra le code pour afficher un formulaire
d'identification, on verra plus tard comment le configurer.
<div>{{form_login}}</div>
<div class="cleared"></div>
</div>
</div>
<div class="cleared"></div>
</div>
</div>
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>
5. <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>
<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>
6. </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>
<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 …
7. 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>
8. 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">
15. 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