Dotclear

source: admin/_charte.php @ 2501:ead2e4e308bf

Revision 2501:ead2e4e308bf, 32.8 KB checked in by franck <carnet.franck.paul@…>, 12 years ago (diff)

Précisions sur les onglets (vrais et faux)
Line 
1<?php
2# -- BEGIN LICENSE BLOCK ---------------------------------------
3#
4# This file is part of Dotclear 2.
5#
6# Copyright (c) 2003-2013 Olivier Meunier & Association Dotclear
7# Licensed under the GPL version 2.0 license.
8# See LICENSE file or
9# http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
10#
11# -- END LICENSE BLOCK -----------------------------------------
12
13require dirname(__FILE__).'/../inc/admin/prepend.php';
14
15dcPage::check('usage,contentadmin');
16?>
17<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
18<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
19<head>
20     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
21     <meta name="ROBOTS" content="NOARCHIVE,NOINDEX,NOFOLLOW" />
22     <meta name="GOOGLEBOT" content="NOSNIPPET" />
23     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
24     <title>Bibliothèque de styles - Dotclear - 2.6</title>
25     <link rel="icon" type="image/png" href="images/favicon96-login.png" />
26     <!--[if lt IE 9]>
27     <script type="text/javascript" src="js/ie7/IE9.js"></script>
28     <link rel="stylesheet" type="text/css" href="style/iesucks.css" />
29     <![endif]-->
30     <link rel="stylesheet" href="style/default.css" type="text/css" media="screen" />
31     <script type="text/javascript" src="js/jquery/jquery.js"></script>
32     <script type="text/javascript" src="js/jquery/jquery-ui.custom.js"></script>
33     <script type="text/javascript" src="js/jquery/jquery.pageTabs.js"></script>
34     <script type="text/javascript" src="js/jquery/jquery.biscuit.js"></script>
35     <script type="text/javascript" src="js/jquery/jquery.bgFade.js"></script>
36     <script type="text/javascript" src="js/common.js"></script>
37     <script type="text/javascript" src="js/prelude.js"></script>
38     <script type="text/javascript">
39     //<![CDATA[
40          dotclear.img_plus_alt = 'dévoiler';
41          dotclear.img_minus_alt = 'cacher';
42          dotclear.img_menu_on = 'images/menu_on.png';
43          dotclear.img_menu_off = 'images/menu_off.png';
44          dotclear.msg.new_window = 'nouvelle fenêtre';
45     //]]>
46     </script>
47     <script type="text/javascript">
48     //<![CDATA[
49          $(function() {
50               $.pageTabs('two-boxes');
51               $('#pageslist').sortable({'cursor':'move'});
52               $('#pageslist tr').hover(function(){
53                    $(this).css({'cursor':'move'});
54               }, function(){
55                    $(this).css({'cursor':'auto'});
56               });
57               $('#pageslist tr td input.position').hide();
58               $('#pageslist tr td.handle').addClass('handler');
59          });
60     //]]>
61     </script>
62</head>
63
64<body id="dotclear-admin" class="no-js guideline">
65     <ul id="prelude">
66          <li><a href="#content">Aller au contenu</a></li>
67          <li><a href="#main-menu">Aller au menu</a></li>
68          <li><a href="#qx">Aller à la recherche</a></li>
69     </ul>
70     <div id="header">
71          <h1><a href="./index.php"><span class="hidden">Dotclear</span></a></h1>
72          <div id="top-info-blog">
73                    <p>Bibliothèque de styles - Dotclear - 2.6+</p>
74          </div>
75          <ul id="top-info-user"><li>Octobre 2013</li></ul>
76     </div><!-- /header -->
77
78     <div id="wrapper" class="clearfix">
79          <div class="hidden-if-no-js collapser-box"><a href="#" id="collapser">
80          <img class="collapse-mm" src="images/collapser-hide.png" alt="Cacher le menu" />
81          <img class="expand-mm" src="images/collapser-show.png" alt="Montrer le menu" />
82          </a></div>
83          <div id="main">
84               <div id="content" class="clearfix">
85                    <h2>Typographie</h2>
86                    <h3 id="texte">Textes</h3>
87                         <p>La font-size de base est à 1.2rem (la valeur <code>1rem</code> correspond à 10px). Si vous utilisez l'unité <code>rem</code> pensez à faire précéder la déclaration par son équivalent
88                         en pixels pour rester compatible avec Internet Explorer. L'interlignage courant est à 1.5.</p>
89                         <p>La liste suivante est de class <code>"nice"</code>. Elle est semblable aux listes ordinaires mais avec des puces carrées.</p>
90                         <ul class="nice">
91                              <li>Les textes courants sont en Arial, Helvetica ou sans-serif. </li>
92                              <li>Le code adopte la fonte Andale Mono, Courier New ou monospace.</li>
93                              <li>Les liens ont des aspects différents au focus et au survol. Il faut conserver cette distinction, nécessaire à l'accessibilité et l'ergonomie.</li>
94                         </ul>
95
96                         <h3 id="titres">Titre h3</h3>
97                              <p>Le titre de niveau h1 est réservé au titre du site-admin. Le titre de niveau h2 est réservé au breadcrumb/titre de la page courante. On utilise les titres de niveau h3 en premier niveau de titre à l'intérieur des pages, comme sur la page Import/Export.</p>
98                              <p>Il ne faut pas choisir un niveau de titre en fonction de son aspect mais respecter une hiérarchie cohérente. On peut obtenir visuellement l'aspect d'un titre h3 en donnant à l'élément la class <code>"as_h3"</code>.</p>
99                         <h4>Titre de niveau h4</h4>
100                              <p>On peut obtenir visuellement l'aspect d'un titre h4 en donnant à l'élément la class <code>"as_h4"</code>.</p>
101                         <h5>Titre de niveau h5</h5>
102                              <p>Le titre de niveau h5 est assez peu employé mais son style est prévu. Dans une admin de base, on utilise les niveaux
103                              h5 pour certains éléments du sidebar du billet, mais un style particulier leur est alors appliqué pour ressembler aux autres
104                              items de ce sidebar.</p>
105                         <div class="fieldset">
106                              <h4>Titres des encadrés</h4>
107                                   <p>Les titres de boîte encadrées (div de class <code>"fieldset"</code>, comme ici) se présentent comme ci-dessus.</p>
108                                   <p>On peut utiliser, quel que soit le niveau hx de cet intertitre la class <code>"pretty-title"</code> pour obtenir l'effet ci-dessus.</p>
109                         </div>
110                         <h4 class="smart-title">Autre variante</h4>
111                              <p>On dispose également d'une class <code>"smart-title"</code> pour obtenir une présentation comme celle du titre de ce paragraphe.</p>
112
113                    <h2>Layouts</h2>
114
115                    <h3 id="onglets">Onglets</h3>
116                    <p>Les descriptions des constructions en multi-colonnes ci-dessous présentent un exemple de répartition en onglets.</p>
117                    <p>Chacun de ces onglets doit être défini à l'aide d'une <code>&lt;div class="multi-part"&gt;</code>. Ils seront alors automatiquement présentés sous forme d'onglets.</p>
118
119                    <h3 id="multi-colonnage">Multi-colonnage</h3>
120                    <div id="one-box" class="multi-part" title="One-box">
121                         <h4>Boîtes distribuées horizontalement</h4>
122                         <div class="one-box">
123                              <div class="box">
124                                   <p><span class="step">1</span> Toutes les boîtes de class <code>"box"</code> placées à l'intérieur d'une boîte de class <code>"one-box"</code> se distribuent horizontalement (imaginez que chaque boîte est un mot dans un paragraphe). Si les largeurs de ces boîtes ne sont pas spécifiquement définies dans la CSS, elle s'ajustent à leur contenu.</p>
125                              </div>
126                              <div class="box">
127                                   <p><span class="step">2</span> Voici une petite boîte.</p>
128                              </div>
129                              <div class="box">
130                                   <p><span class="step">3</span> Une autre petite boîte.</p>
131                              </div>
132                              <div class="box">
133                                   <p><span class="step">4</span> Par défaut les « lignes »  de boîtes <code>"box"</code> sont justifiées au sein de la boîte <code>"one-box"</code> et l'espacement se répartit entre elles.</p>
134                              </div>
135                              <div class="box">
136                                   <p><span class="step">5</span> Si vous souhaitez un autre alignement des boîtes entre elles vous pouvez ajouter les class :</p>
137                                   <ul class="nice clear">
138                                        <li><code>"txt-left"</code>,</li>
139                                        <li><code>"txt-right"</code></li>
140                                        <li>ou <code>"txt-center"</code></li>
141                                   </ul>
142                                   <p>à la class <code>"one-box"</code>.</p>
143                              </div>
144                              <div class="box">
145                                   <p><span class="step">6</span> Le cadre placé ici autour de chaque boîte ne fait pas partie des styles par défaut.</p>
146                              </div>
147                         </div>
148                    </div>
149                    <div id="two-boxes" class="multi-part" title="Two-boxes">
150                         <h4>Boîtes distribuées deux par deux</h4>
151                         <div>
152                              <div class="two-boxes odd">
153                                   <p><span class="step">1</span> Les boîtes de class <code>"two-boxes"</code> ont une règle CSS <code>display:inline-block;</code>. Elles se rangent alternativement à gauche et à droite. Pour plus de clarté, les blocs sont ici numérotés avec leur ordre dans le flux.</p>
154                              </div><!--
155                              --><div class="two-boxes even">
156                                   <p><span class="step">2</span> On peut assortir une boîte des class <code>"odd"</code> (nothing left) et <code>"even"</code> pour que les marges se placent correctement.</p>
157                              </div><!--
158                              --><div class="two-boxes odd">
159                                   <p><span class="step">3</span> Attention, il faut soit ne pas retourner à la ligne entre la fermeture d'une boîte <code>"two-boxes"</code> et l'ouverture de la suivante soit adopter la méthode de commentaire vide mise en place ici et expliquée chez <a href="http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html">Alsacréations</a> («&nbsp;Méthode 2&nbsp;»).</p>
160                              </div><!--
161                              --><div class="two-boxes even">
162                                   <div class="two-boxes odd">
163                                        <p><span class="step">4</span> On peut bien sûr imbriquer des boîtes de class <code>"two-boxes"</code>
164                                         au sein d'une boîte <code>"two-boxes" afin qu'elles…</code>…</p>
165                                   </div><div class="two-boxes even">
166                                        <p><span class="step">4 bis</span>… se distribuent horizontalement comme dans une boîte <code>"one-box"</code>.</p>
167                                   </div>
168                              </div>
169                         </div>
170                    </div>
171                    <div id="three-boxes" class="multi-part" title="Three-boxes">
172                         <h4>Boîtes distribuées trois par trois</h4>
173                         <div>
174                              <div class="three-boxes">
175                                   <div class="box">
176                                        <p>Sur le même principe que les « two-boxes » on peut utiliser des boîtes de class <code>"three-boxes"</code> pour répartir les contenus sur trois colonnes de 30% chacune (le reste est occupé par les marges).</p>
177                                   </div>
178                              </div><!--
179                              --><div class="three-boxes">
180                                   <div class="box">
181                                        <p>Comme pour les "two-boxes" il faut soit ne pas laisser d'espace ou de retour à la ligne entre les boîtes, soit adopter la méthode recommandée plus haut.</p>
182                                   </div>
183                              </div><!--
184                              --><div class="three-boxes">
185                                   <div class="box">
186                                        <p>Dans les « two-boxes » comme dans les « three-boxes », on peut placer à l'intérieur plusieurs autres div de class="box" qui s'afficheront les unes à côté des autres ou l'une en dessous de l'autre selon la place dont elles disposent.</p>
187                                   </div>
188                              </div>
189                         </div>
190                    </div>
191                    <div id="two-cols-50-50" class="multi-part" title="Two-cols (50/50)">
192                         <h4>Deux colonnes flottantes de largeurs égales</h4>
193                         <div class="two-cols clearfix">
194                              <div class="col">
195                                   <p>La div englobante porte la class <code>"two-cols"</code>, chacune de ses div porte la class <code>"col"</code>.
196                                   Sans autre précision les deux colonnes sont d'égale largeur.</p>
197                              </div>
198                              <div class="col">
199                                   <p>Attention : ces colonnes sont construites avec des flottants, il faut donc penser à mettre une class <code>clear</code> à l'élément suivant ou ajouter la class <code>"clearfix"</code> à la <code>div class="two-cols"</code>.</p>
200                              </div>
201                         </div>
202                    </div>
203                    <div id="two-cols-70-30" class="multi-part" title="Two-cols (70/30)">
204                         <h4>Deux colonnes flottantes de largeurs inégales</h4>
205                         <div class="two-cols clearfix">
206                              <div class="col70">
207                                   <p><span class="step">col70</span> La div englobante porte la class <code>"two-cols"</code>.
208                                   Pour obtenir des colonnes inégales, on dispose des classes <code>"col70"</code> et <code>col30</code> à attribuer à l'une ou à l'autre de ses colonnes.</p>
209                              </div>
210                              <div class="col30">
211                                   <p><span class="step">col30</span> Penser à mettre une class <code>"clear"</code> à l'élément suivant ou ajouter la class <code>"clearfix"</code> <code>div class="two-cols"</code>.</p>
212                              </div>
213                         </div>
214                    </div>
215                    <div id="three-cols" class="multi-part" title="Three-cols (deprecated)">
216                         <h4>Trois colonnes flottantes de largeurs égales</h4>
217                         <p class="warning"><strong>Deprecated.</strong> Ces règles sont conservées dans la 2.6 par souci de rétro-compatibilité mais il est recommandé d'utiliser désormais le colonnage <a href="#three-boxes">three-boxes</a>.</p>
218                         <div class="three-cols clearfix">
219                              <div class="col">
220                                   <h5>Colonne 1</h5>
221                                   <p>La div englobante porte la class <code>"three-cols"</code>, chacune de ses div porte la class <code>"col"</code>. Les trois colonnes sont d'égale largeur.</p>
222                              </div>
223                              <div class="col">
224                                   <h5>Colonne 2</h5>
225                                   <p>Voici une deuxième colonne. N'oubliez pas d'ajouter la class <code>"clearfix"</code> à la class <code>"three-cols"</code> ou un élément de class <code>"clear"</code> après cet élément.</p>
226                              </div>
227                              <div class="col">
228                                   <h5>Colonne 3</h5>
229                                   <p>Voilà la troisième colonne.</p>
230                              </div>
231                         </div>
232                    </div>
233                    <hr />
234                    <p><strong>Note :</strong> dans les exemples les valeurs et les numérotations sont placées dans un <code>span class="step"</code> (et ressortent donc dans un petit bloc à fond gris).</p>
235
236                    <h2>Interactions</h2>
237
238                    <h3 id="elements">Éléments de formulaire</h3>
239                         <form class="two-cols clearfix" action="#">
240                              <div class="col">
241                                   <p><label for="ex1">Label simple + input text :</label><input id="ex1" type="text" /></p>
242                                   <p class="form-note">p class="form-note".</p>
243                                   <p><label for="ex4" class="classic">Label class="classic" + input text :</label> <input id="ex4" type="text" /></p>
244                                   <p><label for="ex2" class="required"><abbr title="'.__('Required field').'">*</abbr> Label class="required" :</label> <input id="ex2" type="text" /><span class="form-note">span class="form-note"</span></p>
245                                   <p><label for="ex11" class="bold">Label class="bold" :</label> <input id="ex11" type="text" /></p>
246                                   <p class="form-note">La class="bold" est bien sûr à écrire en minuscules.</p>
247                                   <p><label for="ex3">Input class="maximal" :</label> <input id="ex3" type="text" class="maximal" /></p>
248                              </div>
249                              <div class="col">
250                                   <p class="field"><label for="ex5">p.field label + input :</label><input id="ex5" type="text" /></p>
251                                   <p class="field"><label for="ex6">p.field label + select :</label>
252                                   <select id="ex6"><option value="opt2">Option 2</option><option selected="selected" value="opt2">Option 2</option></select>
253                                   </p>
254                                   <p><label class="classic" for="ex7"><input type="checkbox" checked="checked" id="ex7" value="1" name="ex7" />
255                                        Checkbox (label.classic)</label></p>
256                                   <p><label class="classic" for="ex8-1"><input type="radio" checked="checked" id="ex8-1" value="ex8-1" name="ex8-1" />
257                                    Bouton radio 1 (label.classic)</label></p>
258                                   <p><label class="classic" for="ex8-2"><input type="radio" id="ex8-2" value="ex8-2" name="ex8-2" />
259                                    Bouton radio 2 (label.classic)</label></p>
260                                   <p class="form-note">Les checkboxes et les boutons radio sont dans la balise &lt;label&gt;.</p>
261                                   <p><label class="classic" for="ex9"><input type="checkbox"
262                                   checked="checked" id="ex9" value="1" title="intitulé du champ" /></label> <label
263                                   for="ex10" class="classic">checkbox.classic + label class="classic" :</label> <input id="ex10" type="text" /></p>
264                              </div>
265                         </form>
266                         <form action="#" class="clear">
267                              <fieldset>
268                              <legend>Légende de fieldset</legend>
269                                   <p>Attention: Les fieldsets ne doivent être utilisés que pour isoler un groupe de champs au sein d'un formulaire.</p>
270                              </fieldset>
271                         </form>
272
273                    <h3 id="boutons">Boutons</h3>
274                         <div class="clearfix">
275                         <p><a class="button add">a.button.add</a> Se place en haut à droite (dans un p.top-add)</p>
276                              <p><input type="button" value="Type button" /> <a href="#" class="button">a.button</a> <input type="reset" value="Type reset" /> <a href="#" class="button reset">a.reset</a></p>
277                              <p><input type="submit" value="Type submit" /> <input type="submit" class="delete" value="Type submit class delete" /> <a href="#" class="button delete">a.button delete</a></p>
278                              <p><input type="submit" value="Type submit class disabled" class="disabled" /></p>
279                         </div>
280
281                    <h3 id="messages">Messages</h3>
282                    <h4 class="smart-title">Messages système</h4>
283                         <p>Il existe quatre types de messages système auxquels correspondent des classes CSS : .error, .message, .success, .warning-msg. Ils s'affichent en haut de page, sous le titre/breadcrumb.</p>
284                         <div class="message">
285                              <p>Message simple. Le plus souvent horodaté dcPage::message</p>
286                         </div>
287                         <div class="success">
288                              <p>Message de succès. Le plus souvent horodaté dcPage::success</p>
289                         </div>
290                         <div class="warning-msg">
291                              <p>Message warning. Non horodaté dcPage::warning</p>
292                         </div>
293                         <div class="error">
294                              <p>Message d'erreur. Non horodaté dcPage::error</p>
295                         </div>
296                         <p>La classe .static-msg peut être utilisée directement pour affichage en haut de page :</p>
297                         <div class="static-msg">
298                              <p>Comme le message simple mais sans effets de transition.</p>
299                         </div>
300                         <p>Un type de message réservé à Dotclear peut s'afficher en haut de la page :</p>
301                         <div class="dc-update">
302                              <h3>Dotclear 42 est disponible</h3>
303                              <p><a class="button submit" href="#">Mettre à jour maintenant</a>
304                              <a class="button" href="u#">Me le rappeler plus tard</a></p>
305                              <p class="updt-info"><a href="#">Informations sur cette version</a></p>
306                         </div>
307                    <h4 class="smart-title">Messages contextuels</h4>
308                         <p class="warn">Paragraphe de message d'alerte class warn ou warning.</p>
309                         <p class="info">Paragraphe de message de class info.</p>
310                         <p>Ces messages sont en display:inline-block. Le fond s'adapte à la longueur du message.</p>
311
312                    <h2>Navigation</h2>
313
314                    <h3 id="direct">Selecteur d'accès direct</h3>
315                         <p>Sur des pages longues et denses comme les pages about:config ou about:preferences, on peut utiliser un sélecteur pour faciliter l'accès direct aux sections.</p>
316                         <p class="anchor-nav">
317                              <label class="classic" for="lp_nav">Aller à : </label>
318                              <select id="lp_nav" name="lp_nav">
319                                   <option value="#l_accessibility">accessibility</option>
320                                   <option value="#l_dashboard">dashboard</option>
321                                   <option value="#l_dmhostingmonitor">dmhostingmonitor</option>
322                                   <option value="#l_dmpending">dmpending</option>
323                                   <option value="#l_favorites">favorites</option>
324                                   <option value="#l_filters">filters</option>
325                                   <option value="#l_interface">interface</option>
326                                   <option value="#l_lists">lists</option>
327                                   <option value="#l_toggles">toggles</option>
328                              </select>
329                              <input type="submit" id="lp_submit" value="Ok" style="display: none;" />
330                              <input type="hidden" value="aboutConfig" name="p" />
331                         </p>
332                    <h3 id="prevnext">Navigation contextuelle</h3>
333                         <p><a title="Titre du lien" href="http://fr.dotclear.org/blog" class="onblog_link outgoing">Lien vers le blog <img alt="" src="images/outgoing-blue.png" /></a></p>
334                         <p class="nav_prevnext"><a title="Titre de l'élément précédente" href="post.php?id=4145">«&nbsp;Élément précédent</a> | <a title="Titre de l'élément suivant" href="#">Élément suivant&nbsp;»</a></p>
335
336                    <h3 id="pseudo-tabs">Pseudo-onglets </h3>
337                         <p>Les pseudo-onglets permettent d'ajouter des sous-pages qui sont des liens vers d'autres pages, par opposition aux onglets qui sont des sections internes à la page.</p>
338                         <p>Les pseudo-onglets sont à positionner immédiatement après le breadcrumb (ici un hr simule le trait sous le breadcrumb).</p>
339                         <p>Ces pseudo-onglets doivent être définis avec un <code>&lt;ul class="pseudo-tabs"&gt;</code> et des <code>&lt;li&gt;</code>.</p>
340                         <hr style="margin-bottom: .75em;" />
341                         <ul class="pseudo-tabs">
342                           <li><a href="#">Page 1</a></li>
343                           <li><a href="#">Autre faux onglet</a></li>
344                           <li><a href="#" class="active">Onglet actif</a></li>
345                           <li><a href="#">Liste 4</a></li>
346                         </ul>
347
348                    <h2 id="common">Tableaux</h2>
349                         <p>Il existe deux mises en forme type de tableaux selon que l'on cherche à faire un tableau ordinaire
350                         ou un tableau dont on peut déplacer les lignes par glisser déposer (voir plus bas). Cependant certaines règles
351                         sont communes à tout les tableaux.</p>
352
353                    <h3>Règles communes</h3>
354                         <h4>Largeur du tableau</h4>
355                              <p>Sauf pour des tableaux particuliers (absents dans l'admin mais qui pourraient être nécessaires
356                              à un plugin,les tableaux occupent toute la largeur de la page. Afin que les tableaux soient consultables
357                              sur un mobile en navigant horizontalement, on englobe le tableau dans une <code>div class="table-outer"</code>,
358                              qui servira de «&nbsp;conteneur&nbsp;».</p>
359                         <h4>Accessibilité</h4>
360                              <p>Les éléments caption, th, scope sont nécessaires à l'accessibilité. Ne les oubliez pas&nbsp;!&nbsp;».
361                              On peut utiliser la <code>class="hidden"</code> sur l'élément <code>caption</code> (qui accueille
362                              le titre du tableau) si vous ne souhaitez pas qu'il soit affiché sur la page.</p>
363                          <h4>Les classes</h4>
364                              <p>Des classes particulières peuvent être attribuées aux lignes :</p>
365                                   <ul>
366                                        <li><code>line</code> (systématique) : pour les traits horizontaux et le fond gris léger
367                                        au survol&nbsp;;</li>
368                                        <li><code>offline</code> : pour un noir estompé (gris quoi).</li>
369                                   </ul>
370                              <p>Des classes particulières peuvent être appliquées aux cellules :</p>
371                              <ul>
372                                   <li><code>nowrap</code> : pas de retour à la ligne dans la cellule, quelle que soit la
373                                   largeur de la page&nbsp;;</li>
374                                   <li><code>maximal</code> : la cellule prendra toute la largeur restante disponible&nbsp;;</li>
375                                   <li><code>count</code> : le contenu de la cellule sera aligné à droite avec un petit retrait.</li>
376                              </ul>
377                    <h3 id="courants">Tableau classique</h3>
378                    <div class="table-outer">
379                         <table>
380                              <caption class="hidden">Liste des entrées</caption>
381                              <tr>
382                                   <th colspan="2" class="first">Titre</th>
383                                   <th scope="col">Date</th>
384                                   <th scope="col">Catégorie</th>
385                                   <th scope="col">Auteur</th>
386                                   <th scope="col">Commentaires</th>
387                                   <th scope="col">Rétroliens</th>
388                                   <th scope="col">État</th>
389                              </tr>
390                              <tr class="line">
391                                   <td class="nowrap"><input type="checkbox" name="name1" value="value1"  /></td>
392                                   <td class="maximal" scope="row"><a href="#">Mon cher Franck</a></td>
393                                   <td class="nowrap count">06/08/2013 19:16</td>
394                                   <td class="nowrap"><a href="#">Les aventures du clafoutis</a></td>
395                                   <td class="nowrap">kozlika</td><td class="nowrap count">4</td>
396                                   <td class="nowrap count">0</td><td class="nowrap status"><img alt="Publié" title="Publié" src="images/check-on.png" /> <img alt="Sélectionné" title="Sélectionné" src="images/selected.png" />  </td>
397                              </tr>
398                              <tr class="line offline">
399                                   <td class="nowrap"><input type="checkbox" name="name2" value="value2"  /></td>
400                                   <td class="maximal" scope="row"><a href="#">Dotclear 2.3.0</a></td>
401                                   <td class="nowrap count">16/05/2011 22:29</td>
402                                   <td class="nowrap"><a href="#">Les aventures du clafoutis</a></td>
403                                   <td class="nowrap">kozlika</td><td class="nowrap count">5</td>
404                                   <td class="nowrap count">0</td><td class="nowrap status"><img alt="Non publié" title="Non publié" src="images/check-off.png" /> <img alt="Sélectionné" title="Sélectionné" src="images/selected.png" />  </td>
405                              </tr>
406                              <tr class="line">
407                                   <td class="nowrap"><input type="checkbox" name="entries[]" value="2148" /></td>
408                                   <td class="maximal" scope="row"><a href="#">Causons opéra au Tamm Bara</a></td>
409                                   <td class="nowrap count">24/11/2009 23:10</td>
410                                   <td class="nowrap"><a href="#">Les aventures du clafoutis</a></td>
411                                   <td class="nowrap">kozlika</td>
412                                   <td class="nowrap count">4</td><td class="nowrap count">1</td>
413                                   <td class="nowrap status"><img alt="Publié" title="Publié" src="images/check-on.png" />   </td>
414                              </tr>
415                              <tr class="line">
416                                   <td class="nowrap"><input type="checkbox" name="entries[]" value="2136"  /></td>
417                                   <td class="maximal" scope="row"><a href="#">Souffler six bougies</a></td>
418                                   <td class="nowrap count">14/08/2009 00:00</td><td class="nowrap"><a href="#">Les aventures du clafoutis</a></td>
419                                   <td class="nowrap">kozlika</td>
420                                   <td class="nowrap count">4</td><td class="nowrap count">2</td><td class="nowrap status"><img alt="Publié" title="Publié" src="images/check-on.png" />   </td>
421                              </tr>
422                              <tr class="line">
423                                   <td class="nowrap"><input type="checkbox" name="entries[]" value="2129"  /></td>
424                                   <td class="maximal" scope="row"><a href="#">Dotclear et grenadine, troisième édition</a></td>
425                                   <td class="nowrap count">15/06/2009 07:39</td>
426                                   <td class="nowrap"><a href="#">Les aventures du clafoutis</a></td>
427                                   <td class="nowrap">kozlika</td>
428                                   <td class="nowrap count">9</td>
429                                   <td class="nowrap count">1</td>
430                                   <td class="nowrap status"><img alt="Publié" title="Publié" src="images/check-on.png" />   </td>
431                              </tr>
432                              <tr class="line">
433                                   <td class="nowrap"><input type="checkbox" name="entries[]" value="2111"  /></td>
434                                   <td class="maximal" scope="row"><a href="#">L'abc dotclear est né</a></td>
435                                   <td class="nowrap count">19/03/2009 10:31</td><td class="nowrap"><a href="#">Les aventures du clafoutis</a></td>
436                                   <td class="nowrap">kozlika</td>
437                                   <td class="nowrap count">1</td><td class="nowrap count">0</td>
438                                   <td class="nowrap status"><img alt="Publié" title="Publié" src="images/check-on.png" />   </td>
439                              </tr>
440                         </table>
441                    </div>
442
443                    <h3 id="dragable">Tableau avec ordonnancement</h3>
444                    <p>Les tableaux permettant l'ordonnancement doivent offrir la possibilité d'effectuer le classement grâce à
445                    des inputs placés en début de ligne pour que le classement soit possible même lorsque cette fonctionnalité est
446                    désactivée (via les préférences utilisateurs, voire une désactivation complète du javascript dans le navigateur).</p>
447                         <div class="table-outer">
448                              <table class="maximal dragable">
449                                   <thead>
450                                        <tr>
451                                             <th colspan="3">Titre</th>
452                                             <th>Date</th>
453                                             <th>Auteur</th>
454                                             <th>Commentaires</th>
455                                             <th>Rétroliens</th>
456                                             <th>État</th>
457                                        </tr>
458                                   </thead>
459                                   <tbody id="pageslist">
460                                        <tr class="line" id="p10899">
461                                             <td class="nowrap handle minimal">
462                                                  <input type="text" size="2" name="order[10899]" maxlength="3" value="1" class="position" title="position de Mentions légales" />
463                                             </td>
464                                             <td class="nowrap">
465                                                  <input type="checkbox" name="entries[]" value="10899" title="Sélectionner cette page" />
466                                             </td>
467                                             <td class="maximal"><a href="#">Mentions légales</a>
468                                             </td>
469                                             <td class="nowrap">17/12/2008 07:35</td>
470                                             <td class="nowrap">franck</td>
471                                             <td class="nowrap">0</td>
472                                             <td class="nowrap">0</td>
473                                             <td class="nowrap status">
474                                                  <img alt="Publié" title="Publié" src="images/check-on.png" />
475                                             </td>
476                                        </tr>
477                                        <tr class="line" id="p10937">
478                                             <td class="nowrap handle minimal">
479                                                  <input type="text" size="2" name="order[10937]" maxlength="3" value="2" class="position" title="position de Page active et cachée" />
480                                             </td>
481                                             <td class="nowrap">
482                                                  <input type="checkbox" name="entries[]" value="10937" title="Sélectionner cette page" />
483                                             </td>
484                                             <td class="maximal"><a href="#">Page active et cachée</a>
485                                             </td>
486                                             <td class="nowrap">26/10/2012 11:08</td>
487                                             <td class="nowrap">admin</td>
488                                             <td class="nowrap">0</td>
489                                             <td class="nowrap">0</td>
490                                             <td class="nowrap status">
491                                                  <img alt="Publié" title="Publié" src="images/check-on.png" />
492                                                  <img alt="Masqué" title="Masqué" src="images/hidden.png" />
493                                             </td>
494                                        </tr>
495                                        <tr class="line offline" id="p11047">
496                                             <td class="nowrap handle minimal">
497                                                  <input type="text" size="2" name="order[11047]" maxlength="3" value="3" class="position" title="position de Page révisionnable" />
498                                             </td>
499                                             <td class="nowrap">
500                                                  <input type="checkbox" name="entries[]" value="11047" title="Sélectionner cette page" />
501                                             </td>
502                                             <td class="maximal"><a href="#">Page révisionnable</a>
503                                             </td>
504                                             <td class="nowrap">14/12/2012 13:26</td>
505                                             <td class="nowrap">admin</td>
506                                             <td class="nowrap">0</td>
507                                             <td class="nowrap">0</td>
508                                             <td class="nowrap status">
509                                                  <img alt="En attente" title="En attente" src="images/check-wrn.png" />
510                                             </td>
511                                        </tr>
512                                        <tr class="line offline" id="p10939">
513                                             <td class="nowrap handle minimal">
514                                                  <input type="text" size="2" name="order[10939]" maxlength="3" value="4" class="position" title="position de Programme" />
515                                             </td>
516                                             <td class="nowrap">
517                                                  <input type="checkbox" name="entries[]" value="10939" title="Sélectionner cette page" />
518                                             </td>
519                                             <td class="maximal"><a href="#">Programme</a>
520                                             </td>
521                                             <td class="nowrap">26/10/2020 11:23</td>
522                                             <td class="nowrap">admin</td>
523                                             <td class="nowrap">0</td>
524                                             <td class="nowrap">0</td>
525                                             <td class="nowrap status">
526                                                  <img alt="Programmé" title="Programmé" src="images/scheduled.png" />
527                                             </td>
528                                        </tr>
529                                        <tr class="line offline" id="p10940">
530                                             <td class="nowrap handle minimal">
531                                                  <input type="text" size="2" name="order[10940]" maxlength="3" value="5" class="position" title="position de Protégée" />
532                                             </td>
533                                             <td class="nowrap">
534                                                  <input type="checkbox" name="entries[]" value="10940" title="Sélectionner cette page" />
535                                             </td>
536                                             <td class="maximal"><a href="#">Protégée</a>
537                                             </td>
538                                             <td class="nowrap">26/10/2012 11:23</td>
539                                             <td class="nowrap">admin</td>
540                                             <td class="nowrap">0</td>
541                                             <td class="nowrap">0</td>
542                                             <td class="nowrap status">
543                                                  <img alt="En attente" title="En attente" src="images/check-wrn.png" />
544                                                  <img alt="Protégé" title="Protégé" src="images/locker.png" />
545                                             </td>
546                                        </tr>
547                                   </tbody>
548                              </table>
549                         </div>
550
551                    <h2 id="iconset">Icônes</h2>
552                    <p>Les icônes utilisées dans l'administration sont présentes en deux formats&nbsp; 64*64px pour les grandes
553                    (qui sont affichées sur le tableau de bord si la page correspondante est choisie en favori par l'utilisateur) et
554                    16*16px pour les petits formats.</p>
555                    <p>La plupart sont dérivées de la fonte d'icônes <a href="http://www.elegantthemes.com/blog/resources/elegant-icon-font">Elegant Font</a>. Les autres sont des images vectorielles réalisées
556                    par la DC Team. Nous les avons nommées <em>Traviata</em>. La palette de couleurs utilisée est la suivante&nbsp;:</p>
557                    <p class="txt-center"><img src="images/palette-traviata.png" alt="palette des couleurs utilisées pour les icônes" /></p>
558                    <p class="txt-center">Bleu&nbsp;: #137bbb - Vert&nbsp;: #9ac123 - Rouge&nbsp;: #c44d58 - Bleu ciel&nbsp;: #a2cbe9 - Gris clair&nbsp;: #ececec -
559                    Gris moyen&nbsp;: #b2b2b2 - Gris foncé&nbsp;: #676e78.</p>
560               </div><!-- /content -->
561          </div><!-- /main -->
562          <div id="main-menu">
563               <ul><li class="pretty-title">Typographie
564                    <ul>
565                         <li><a href="#texte">Texte</a></li>
566                         <li><a href="#titres">Titres hx</a></li>
567                    </ul>
568                    </li>
569                    <li class="pretty-title">Layouts
570                    <ul>
571                         <li><a href="#onglets">Onglets</a></li>
572                         <li><a href="#multi-colonnage">Multi-colonnage</a></li>
573                    </ul>
574                    </li>
575                    <li class="pretty-title">Interactions
576                    <ul>
577                         <li><a href="#elements">Éléments de formulaire</a></li>
578                         <li><a href="#boutons">Boutons</a></li>
579                         <li><a href="#messages">Messages</a></li>
580                    </ul>
581                    </li>
582                    <li class="pretty-title">Navigation
583                    <ul>
584                         <li><a href="#direct">Accès direct</a></li>
585                         <li><a href="#prevnext">Précédent, suivant</a></li>
586                         <li><a href="#pseudo-tabs">Pseudo-onglets</a></li>
587                    </ul>
588                    </li>
589                    <li class="pretty-title">Tableaux
590                    <ul>
591                         <li><a href="#commons">Règles communes</a></li>
592                         <li><a href="#courants">Tableaux courants</a></li>
593                         <li><a href="#dragables">Tableaux ordonnancés</a></li>
594                    </ul>
595                    </li>
596               </ul>
597               <div class="info vertical-separator">
598                    <p>Cette page vise à présenter les règles graphiques et conventions utilisées dans les pages de l'administration
599                    d'une installation Dotclear, à l'usage des contributeurs et développeurs d'extensions. Elle en est elle-même
600                    une illustration. L'observation de son code source peut donc servir de complément aux descriptions.</p>
601               </div>
602          </div><!-- /main-menu -->
603
604          <div id="footer">
605               <a href="http://dotclear.org/" title="Merci de manger des clafoutis."><img src="style/dc_logos/w-dotclear90.png" alt="Merci d'utiliser Dotclear 2.6-dev." /></a>
606          </div><!-- /footer -->
607                                                            <!--
608                                                                              .
609                                                                           ,;:'`'::
610                                                                        __||
611                                                                  _____/LLLL\_
612                                                                  \__________"|
613                                                                ~^~^~^~^~^~^~^~^~^~
614                                                             -->
615     </div><!-- /wrapper -->
616</body>
617</html>
Note: See TracBrowser for help on using the repository browser.

Sites map