Template Artisteer Modx

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é

<!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>


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" />


</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">

<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">

<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">Newsletter</div>

Cette boîte va nous servir à mettre le formulaire d'identification, on va donc changer le titre

<div class="t">Identification</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>
<div class="art-BlockContent-body">
<div><form method="get" id="newsletterform"
action="javascript:void(0)">
<input type="text" value="" name="email" id="s" style="width:
95%;" />
<span class="art-button-wrapper">
<span class="l"> </span>
<span class="r"> </span>
<input class="art-button" type="submit" name="search"
value="Subscribe"/>
</span>

</form></div>

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>
</div>

On arrive à la boîte de message


<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>
<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>
</div>
</div>
</div>
<div class="t">Contact Info</div>

On va changer le titre de la boîte de contact

<div class="t">Contact</div>

</div>
<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>

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>
</div>
</div>

On arrive au contenu de la page …

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

[*pagetitle*]
</h2>

</div>

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>
<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="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" />
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>

<div
class="t"><center>Development</center></div>
</div>
</div>
</div>
</div>
</div>
</td>
<div
class="t"><center>Strategy</center></div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>

</div>

</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">
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>
<p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet,
consectetuer adipiscing elit, <a href="#" title="test link">test link</a>.

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>

<p>
<a class="art-button"
href="javascript:void(0)">Join Now!</a>
</span>
</p>

</div>
</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 © 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 © 2009 ---. All Rights Reserved.</p>

</div>
</div>
<div class="art-Footer-background"></div>
</div>
</div>
</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>

Template Artisteer Modx

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (17)

Plus de Patrick Van Hoof

Plus de Patrick Van Hoof (9)

Template Artisteer Modx