| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|---|
| 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> |
|---|
| 3 | <head> |
|---|
| 4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
|---|
| 5 | <meta name="ROBOTS" content="NOARCHIVE,NOINDEX,NOFOLLOW" /> |
|---|
| 6 | <meta name="GOOGLEBOT" content="NOSNIPPET" /> |
|---|
| 7 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|---|
| 8 | <title>Bibliothèque de styles - Dotclear - 2.6</title> |
|---|
| 9 | <link rel="icon" type="image/png" href="images/favicon.png" /> |
|---|
| 10 | <!--[if lt IE 9]> |
|---|
| 11 | <script type="text/javascript" src="js/ie7/IE9.js"></script> |
|---|
| 12 | <link rel="stylesheet" type="text/css" href="style/iesucks.css" /> |
|---|
| 13 | <![endif]--> |
|---|
| 14 | <link rel="stylesheet" href="style/default.css" type="text/css" media="screen" /> |
|---|
| 15 | <style type="text/css"> |
|---|
| 16 | #content > h2 {padding-top: 2.5em;} |
|---|
| 17 | #content > h3, #content > h4 {padding-top: 2em;} |
|---|
| 18 | #content > h2:first-child {padding-top: 0;} |
|---|
| 19 | </style> |
|---|
| 20 | <script type="text/javascript" src="js/jquery/jquery.js"></script> |
|---|
| 21 | <script type="text/javascript" src="js/jquery/jquery.biscuit.js"></script> |
|---|
| 22 | <script type="text/javascript" src="js/jquery/jquery.bgFade.js"></script> |
|---|
| 23 | <script type="text/javascript" src="js/common.js"></script> |
|---|
| 24 | <script type="text/javascript" src="js/prelude.js"></script> |
|---|
| 25 | <script type="text/javascript"> |
|---|
| 26 | //<![CDATA[ |
|---|
| 27 | dotclear.nonce = '5f7602a68cd19a8613d2dda9b510e1e0e85b417a'; |
|---|
| 28 | dotclear.img_plus_src = 'images/expand.png'; |
|---|
| 29 | dotclear.img_plus_alt = 'dévoiler'; |
|---|
| 30 | dotclear.img_minus_src = 'images/hide.png'; |
|---|
| 31 | dotclear.img_minus_alt = 'cacher'; |
|---|
| 32 | dotclear.img_menu_on = 'images/menu_on.png'; |
|---|
| 33 | dotclear.img_menu_off = 'images/menu_off.png'; |
|---|
| 34 | dotclear.msg.help = 'Aide pour cette page'; |
|---|
| 35 | dotclear.msg.help_hide = 'Masquer'; |
|---|
| 36 | dotclear.msg.to_select = 'Sélectionner :'; |
|---|
| 37 | dotclear.msg.no_selection = 'aucun'; |
|---|
| 38 | dotclear.msg.select_all = 'tous'; |
|---|
| 39 | dotclear.msg.invert_sel = 'Inverser la sélection'; |
|---|
| 40 | dotclear.msg.website = 'Site web :'; |
|---|
| 41 | dotclear.msg.email = 'Email :'; |
|---|
| 42 | dotclear.msg.ip_address = 'Adresse IP :'; |
|---|
| 43 | dotclear.msg.error = 'Erreur :'; |
|---|
| 44 | dotclear.msg.entry_created = 'Billet créé avec succès.'; |
|---|
| 45 | dotclear.msg.edit_entry = 'Modifier le billet'; |
|---|
| 46 | dotclear.msg.view_entry = 'voir le billet'; |
|---|
| 47 | dotclear.msg.confirm_delete_posts = 'Êtes-vous certain de vouloir supprimer les billets sélectionnés (%s) ?'; |
|---|
| 48 | dotclear.msg.confirm_delete_categories = 'Êtes-vous certain de vouloir supprimer les categories sélectionnées (%s) ?'; |
|---|
| 49 | dotclear.msg.confirm_delete_post = 'Êtes-vous certain de vouloir supprimer ce billet ?'; |
|---|
| 50 | dotclear.msg.click_to_unlock = 'Cliquez ici pour déverrouiller ce champ'; |
|---|
| 51 | dotclear.msg.confirm_spam_delete = 'Êtes-vous sûr de vouloir supprimer tous les indésirables ?'; |
|---|
| 52 | dotclear.msg.confirm_delete_comments = 'Êtes-vous certain de vouloir supprimer les commentaires sélectionnés (%s) ?'; |
|---|
| 53 | dotclear.msg.confirm_delete_comment = 'Êtes-vous certain de vouloir supprimer ce commentaire ?'; |
|---|
| 54 | dotclear.msg.cannot_delete_users = 'Les utilisateurs ayant écrit des entrées ne peuvent être supprimés.'; |
|---|
| 55 | dotclear.msg.confirm_delete_user = 'Êtes-vous certain de vouloir supprimer les utilisateurs sélectionnés (%s) ?'; |
|---|
| 56 | dotclear.msg.confirm_delete_category = 'Êtes-vous certain de vouloir supprimer la catégorie \"%s\" ?'; |
|---|
| 57 | dotclear.msg.confirm_reorder_categories = 'Êtes-vous certain de vouloir réinitialiser l\'ordre des catégories ?'; |
|---|
| 58 | dotclear.msg.confirm_delete_media = 'Êtes-vous certain de vouloir supprimer le média \"%s\" ?'; |
|---|
| 59 | dotclear.msg.confirm_extract_current = 'Êtes-vous certain de vouloir extraire l\'archive dans le répertoire actuel ?'; |
|---|
| 60 | dotclear.msg.confirm_remove_attachment = 'Êtes-vous certain de vouloir supprimer l\'annexe \"%s\" ?'; |
|---|
| 61 | dotclear.msg.confirm_delete_lang = 'Êtes-vous certain de vouloir supprimer la langue \"%s\" ?'; |
|---|
| 62 | dotclear.msg.confirm_delete_plugin = 'Êtes-vous certain de vouloir supprimer le plugin \"%s\" ?'; |
|---|
| 63 | dotclear.msg.use_this_theme = 'Utiliser ce thème'; |
|---|
| 64 | dotclear.msg.remove_this_theme = 'Supprimer ce thème'; |
|---|
| 65 | dotclear.msg.confirm_delete_theme = 'Êtes-vous certain de vouloir supprimer le thème \"%s\" ?'; |
|---|
| 66 | dotclear.msg.confirm_delete_backup = 'Êtes-vous certain de vouloir supprimer cette sauvegarde ?'; |
|---|
| 67 | dotclear.msg.zip_file_content = 'Contenu du fichier zip'; |
|---|
| 68 | dotclear.msg.xhtml_validator = 'Vérifier la validité XHTML'; |
|---|
| 69 | dotclear.msg.xhtml_valid = 'Le contenu XHTML est valide.'; |
|---|
| 70 | dotclear.msg.xhtml_not_valid = 'Il y a des erreurs XHTML.'; |
|---|
| 71 | dotclear.msg.confirm_change_post_format = 'Vous avez des modifications non sauvegardées. Changer de format vous fera perdre ces modifications. Continuer ?'; |
|---|
| 72 | dotclear.msg.confirm_change_post_format_noconvert = 'Attention : le changement de syntaxe ne transformera pas les balises des contenus déjà saisis. Pensez à les réadapter après cette opération. Confirmez-vous ce changement de syntaxe ?'; |
|---|
| 73 | dotclear.msg.load_enhanced_uploader = 'Chargement de l\'interface avancée.'; |
|---|
| 74 | |
|---|
| 75 | //]]> |
|---|
| 76 | </script> |
|---|
| 77 | <script type="text/javascript"> |
|---|
| 78 | //<![CDATA[ |
|---|
| 79 | dotclear.unfolded_sections = {'dcx_post_lang':true,'dc_favorites_menu':true,'dc_system_menu':true}; |
|---|
| 80 | |
|---|
| 81 | //]]> |
|---|
| 82 | </script> |
|---|
| 83 | <link rel="stylesheet" type="text/css" href="style/jsToolBar/jsToolBar.css" /> |
|---|
| 84 | <script type="text/javascript" src="js/jsToolBar/jsToolBar.js"></script> |
|---|
| 85 | <script type="text/javascript" src="js/jsToolBar/jsToolBar.wysiwyg.js"></script> |
|---|
| 86 | <script type="text/javascript" src="js/jsToolBar/jsToolBar.dotclear.js"></script> |
|---|
| 87 | <script type="text/javascript"> |
|---|
| 88 | //<![CDATA[ |
|---|
| 89 | jsToolBar.prototype.dialog_url = 'popup.php'; jsToolBar.prototype.iframe_css = 'body{font: 12px "DejaVu Sans","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;color : #000;background: #f9f9f9;margin: 0;padding : 2px;border: none;}pre, code, kbd, samp {font-family:"Courier New",Courier,monospace;font-size : 1.1em;}code {color : #666;font-weight : bold;}body > p:first-child {margin-top: 0;}'; jsToolBar.prototype.base_url = 'http://localhost'; jsToolBar.prototype.switcher_visual_title = 'visuel'; jsToolBar.prototype.switcher_source_title = 'source'; jsToolBar.prototype.legend_msg = 'Vous pouvez utiliser les raccourcis suivants pour formater votre texte.'; jsToolBar.prototype.elements.blocks.options.none = '-- aucun --'; jsToolBar.prototype.elements.blocks.options.nonebis = '-- format bloc --'; jsToolBar.prototype.elements.blocks.options.p = 'Paragraphe'; jsToolBar.prototype.elements.blocks.options.h1 = 'Titre de niveau 1'; jsToolBar.prototype.elements.blocks.options.h2 = 'Titre de niveau 2'; jsToolBar.prototype.elements.blocks.options.h3 = 'Titre de niveau 3'; jsToolBar.prototype.elements.blocks.options.h4 = 'Titre de niveau 4'; jsToolBar.prototype.elements.blocks.options.h5 = 'Titre de niveau 5'; jsToolBar.prototype.elements.blocks.options.h6 = 'Titre de niveau 6'; jsToolBar.prototype.elements.strong.title = 'Forte emphase'; jsToolBar.prototype.elements.em.title = 'Emphase'; jsToolBar.prototype.elements.ins.title = 'Insertion'; jsToolBar.prototype.elements.del.title = 'Suppression'; jsToolBar.prototype.elements.quote.title = 'Citation en ligne'; jsToolBar.prototype.elements.code.title = 'Code'; jsToolBar.prototype.elements.br.title = 'Passage à la ligne'; jsToolBar.prototype.elements.blockquote.title = 'Bloc de citation'; jsToolBar.prototype.elements.pre.title = 'Texte préformaté'; jsToolBar.prototype.elements.ul.title = 'Liste à puces'; jsToolBar.prototype.elements.ol.title = 'Liste numérotée'; jsToolBar.prototype.elements.link.title = 'Lien'; jsToolBar.prototype.elements.link.href_prompt = 'URL ?'; jsToolBar.prototype.elements.link.hreflang_prompt = 'Langue ?'; jsToolBar.prototype.elements.img.title = 'Image externe'; jsToolBar.prototype.elements.img.src_prompt = 'URL ?'; jsToolBar.prototype.elements.img_select.title = 'Sélecteur de média'; jsToolBar.prototype.elements.post_link.title = 'Lien vers une entrée'; |
|---|
| 90 | //]]> |
|---|
| 91 | </script> |
|---|
| 92 | <script type="text/javascript" src="js/_index.js"></script> |
|---|
| 93 | </head> |
|---|
| 94 | |
|---|
| 95 | <body id="dotclear-admin" class="no-js"> |
|---|
| 96 | <div id="header"> |
|---|
| 97 | <ul id="prelude"> |
|---|
| 98 | <li><a href="#content">Aller au contenu</a></li> |
|---|
| 99 | <li><a href="#main-menu">Aller au menu</a></li> |
|---|
| 100 | <li><a href="#qx">Aller à la recherche</a></li> |
|---|
| 101 | </ul> |
|---|
| 102 | <div id="top"><h1><a href="./_charte.html">Bibliothèque de styles - Dotclear - 2.6+</a></h1></div> |
|---|
| 103 | <div id="info-boxes"> |
|---|
| 104 | <div id="info-box1"> |
|---|
| 105 | <p>Informations sur les styles disponibles dans l'admin pour les développeurs de plugins</p> |
|---|
| 106 | </div> |
|---|
| 107 | <div id="info-box2">Octobre 2013</div> |
|---|
| 108 | </div> |
|---|
| 109 | </div><!-- /header --> |
|---|
| 110 | |
|---|
| 111 | <div id="wrapper" class="clearfix"> |
|---|
| 112 | <div id="main"> |
|---|
| 113 | <div id="content" class="clearfix"> |
|---|
| 114 | |
|---|
| 115 | <h2><span class="page-title">Typographie</span></h2> |
|---|
| 116 | <h3 id="texte">Textes</h3> |
|---|
| 117 | <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 |
|---|
| 118 | en pixels pour rester compatible avec Internet Explorer. L'interlignage courant est à 1.5.</p> |
|---|
| 119 | <p>La liste suivante est de class <code>nice</code>. Elle est semblable aux listes ordinaires mais avec des puces carrées.</p> |
|---|
| 120 | <ul class="nice"> |
|---|
| 121 | <li>Les textes courants sont en Arial, Helvetica ou sans-serif. </li> |
|---|
| 122 | <li>Le code adopte la fonte Andale Mono, Courier New ou monospace.</li> |
|---|
| 123 | <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> |
|---|
| 124 | </ul> |
|---|
| 125 | |
|---|
| 126 | <h3 id="titres">Titre h3</h3> |
|---|
| 127 | <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 de pages, comme sur la page Inport/Export.</p> |
|---|
| 128 | <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> |
|---|
| 129 | <h4>Titre de niveau h4</h4> |
|---|
| 130 | <p>On peut obtenir visuellement l'aspect d'un titre h4 en donnant à l'élément la class <code>"as_h4"</code>.</p> |
|---|
| 131 | <h5>Titre de niveau h5</h5> |
|---|
| 132 | <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 |
|---|
| 133 | h5 pour certains éléments du sidebar du billet, mais un style particulier leur est alors appliqué pour ressembler aux autres |
|---|
| 134 | items de ce sidebar.</p> |
|---|
| 135 | <div class="fieldset"> |
|---|
| 136 | <h4 class="smart-title">Variante pour les titres</h4> |
|---|
| 137 | <p>On peut utiliser une variante aux titres qui regroupent des actions (voir la page de la Médiathèque) ou servent de titre à une boîte encadrée, comme ici où les présentes explications sont placées dans une div de class <code>fieldset</code>.</p> |
|---|
| 138 | <p>On peut utiliser, quel que soit le niveau hx de cet intertitre la class <code>smart-title</code> pour obtenir l'effet ci-dessus.</p> |
|---|
| 139 | </div> |
|---|
| 140 | |
|---|
| 141 | <h2><span class="page-title">Layouts</span></h2> |
|---|
| 142 | |
|---|
| 143 | <h3 id="onglets">Onglets</h3> |
|---|
| 144 | <div class="part-tabs"> |
|---|
| 145 | <ul> |
|---|
| 146 | <li id="part-tabs-toto" class="part-tabs-active"><a href="#ancre-1">Titre de l'onglet 1</a></li> |
|---|
| 147 | <li id="part-tabs-titi"><a href="#ancre-2">Titre de l'onglet 2</a></li> |
|---|
| 148 | </ul> |
|---|
| 149 | </div> |
|---|
| 150 | <p class="multi-part">La classe <code>multi-part</code> (qui doit obligatoirement être donnée à la div du contenu de chaque onglet afin que le script jQuery fonctionne) aligne son bord gauche avec celui premier onglet.</p> |
|---|
| 151 | <hr /> |
|---|
| 152 | |
|---|
| 153 | <h3 id="multi-colonnage">Multi-colonnage</h3> |
|---|
| 154 | <h4>Two-cols 50/50</h4> |
|---|
| 155 | <div class="two-cols clearfix"> |
|---|
| 156 | <div class="col"> |
|---|
| 157 | <p>La div englobante porte la class <code>two-cols</code>, chacune de ses div porte la class <code>col</code>. |
|---|
| 158 | Sans autre précision les deux colonnes sont d'égale largeur.</p> |
|---|
| 159 | </div> |
|---|
| 160 | <div class="col"> |
|---|
| 161 | <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 div <code>class="two-cols"</code>.</p> |
|---|
| 162 | </div> |
|---|
| 163 | </div> |
|---|
| 164 | <h4>Two-cols 70/30</h4> |
|---|
| 165 | <div class="two-cols clearfix"> |
|---|
| 166 | <div class="col70"> |
|---|
| 167 | <p><span class="step">col70</span> La div englobante porte la class <code>two-cols</code>, chacune de ses div porte la class <code>col</code>. |
|---|
| 168 | Pour obtenir des colonnes inégales, on dispose des classes <code>col70</code> et <code>col30</code>.</p> |
|---|
| 169 | </div> |
|---|
| 170 | <div class="col30"> |
|---|
| 171 | <p><span class="step">col30</span> Penser à mettre une class <code>clear</code> à l'élément suivant ou ajouter la class <code>clearfix</code> à la div <code>class="two-cols"</code>.</p> |
|---|
| 172 | </div> |
|---|
| 173 | </div> |
|---|
| 174 | <h4>Two-boxes</h4> |
|---|
| 175 | <div> |
|---|
| 176 | <div class="two-boxes odd"> |
|---|
| 177 | <div class="box"> |
|---|
| 178 | <p><span class="step">1</span> Les boîtes de class <code>two-boxes</code> ont une règle de <code>display:inline-block;</code>. Elles se rangent alternativement à gauche et à droite.</p> |
|---|
| 179 | </div> |
|---|
| 180 | </div><!-- |
|---|
| 181 | --><div class="two-boxes even"> |
|---|
| 182 | <div class="box"> |
|---|
| 183 | <p><span class="step">2</span> S'il n'y a que deux boîtes, une autre class n'est pas nécessaire. S'il y en a plusieurs, il est conseillé |
|---|
| 184 | de leur attribuer alternativement les class <code>odd</code> et <code>even</code> pour que les marges se |
|---|
| 185 | placent correctement.</p> |
|---|
| 186 | </div> |
|---|
| 187 | </div><!-- |
|---|
| 188 | --><div class="two-boxes odd"> |
|---|
| 189 | <div class="box"> |
|---|
| 190 | <p><span class="step">3</span> Attention, il faut soit ne pas retourner à la ligne entre la fermeture d'une boîte et l'ouverture de la suivante soit adopter la Méthode 2 mise en place ici expliquée chez <a href="http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html">Alsacréations</a>.</p> |
|---|
| 191 | </div> |
|---|
| 192 | </div> |
|---|
| 193 | </div> |
|---|
| 194 | <h4>Three-boxes</h4> |
|---|
| 195 | <div> |
|---|
| 196 | <div class="three-boxes"> |
|---|
| 197 | <div class="box"> |
|---|
| 198 | <p>Sur le même principe 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> |
|---|
| 199 | </div> |
|---|
| 200 | </div><!-- |
|---|
| 201 | --><div class="three-boxes"> |
|---|
| 202 | <div class="box"> |
|---|
| 203 | <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> |
|---|
| 204 | </div> |
|---|
| 205 | </div><!-- |
|---|
| 206 | --><div class="three-boxes"> |
|---|
| 207 | <div class="box"> |
|---|
| 208 | <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> |
|---|
| 209 | </div> |
|---|
| 210 | </div> |
|---|
| 211 | </div> |
|---|
| 212 | |
|---|
| 213 | <h2><span class="page-title">Interactions</span></h2> |
|---|
| 214 | |
|---|
| 215 | <h3 id="elements">Éléments de formulaire</h3> |
|---|
| 216 | <form class="two-cols clearfix" action="#"> |
|---|
| 217 | <div class="col"> |
|---|
| 218 | <p><label for="ex1">Label simple + input text :</label><input id="ex1" type="text" /></p> |
|---|
| 219 | <p class="form-note">p class="form-note".</p> |
|---|
| 220 | <p><label for="ex2" class="required"><abbr title="'.__('Required field').'">*</abbr> Label class="required" :</label> <input id="ex2" type="text" /></p> |
|---|
| 221 | <p><label for="ex3">Input class="maximal" :</label> <input id="ex3" type="text" class="maximal" /></p> |
|---|
| 222 | <p><label for="ex4" class="classic">Label class="classic" :</label> <input id="ex4" type="text" /></p> |
|---|
| 223 | </div> |
|---|
| 224 | <div class="col"> |
|---|
| 225 | <p class="field"><label for="ex5">p.field label + input :</label><input id="ex5" type="text" /></p> |
|---|
| 226 | <p class="field"><label for="ex6">p.field label + select :</label> |
|---|
| 227 | <select id="ex6"><option value="opt2">Option 2</option><option selected="selected" value="opt2">Option 2</option></select> |
|---|
| 228 | </p> |
|---|
| 229 | <p><label class="classic" for="ex7"><input type="checkbox" checked="checked" id="ex7" value="1" name="ex7" /> |
|---|
| 230 | Checkbox (label.classic)</label></p> |
|---|
| 231 | <p><label class="classic" for="ex8-1"><input type="radio" checked="checked" id="ex8-1" value="ex8-1" name="ex8-1" /> |
|---|
| 232 | Bouton radio 1 (label.classic)</label></p> |
|---|
| 233 | <p><label class="classic" for="ex8-2"><input type="radio" id="ex8-2" value="ex8-2" name="ex8-2" /> |
|---|
| 234 | Bouton radio 2 (label.classic)</label></p> |
|---|
| 235 | <p class="form-note">Les checkboxes et les boutons radio sont dans la balise <label>.</p> |
|---|
| 236 | </div> |
|---|
| 237 | </form> |
|---|
| 238 | <form action="#" class="clear"> |
|---|
| 239 | <fieldset> |
|---|
| 240 | <legend>Légende de fieldset</legend> |
|---|
| 241 | <p>Attention: Les fieldsets ne doivent être utilisés que pour isoler un groupe de champs au sein d'un formulaire.</p> |
|---|
| 242 | </fieldset> |
|---|
| 243 | </form> |
|---|
| 244 | |
|---|
| 245 | <h3 id="boutons">Boutons</h3> |
|---|
| 246 | <div class="clearfix"> |
|---|
| 247 | <p><a class="button add">a.button.add</a> Se place en haut à droite (dans un p.top-add)</p> |
|---|
| 248 | <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> |
|---|
| 249 | <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> |
|---|
| 250 | <p><input type="submit" value="Type submit class disabled" class="disabled" /></p> |
|---|
| 251 | </div> |
|---|
| 252 | |
|---|
| 253 | <h3 id="messages">Messages</h3> |
|---|
| 254 | <h4 class="smart-title">Messages système</h4> |
|---|
| 255 | <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> |
|---|
| 256 | <div class="message"> |
|---|
| 257 | <p>Message simple. Le plus souvent horodaté dcPage::message</p> |
|---|
| 258 | </div> |
|---|
| 259 | <div class="success"> |
|---|
| 260 | <p>Message de succès. Le plus souvent horodaté dcPage::success</p> |
|---|
| 261 | </div> |
|---|
| 262 | <div class="warning-msg"> |
|---|
| 263 | <p>Message warning. Non horodaté dcPage::warning</p> |
|---|
| 264 | </div> |
|---|
| 265 | <div class="error"> |
|---|
| 266 | <p>Message d'erreur. Non horodaté dcPage::error</p> |
|---|
| 267 | </div> |
|---|
| 268 | <p>La classe .static-msg peut être utilisée directement pour affichage en haut de page :</p> |
|---|
| 269 | <div class="static-msg"> |
|---|
| 270 | <p>Comme le message simple mais sans effets de transition.</p> |
|---|
| 271 | </div> |
|---|
| 272 | <p>Un type de message réservé à Dotclear peut s'afficher en haut de la page :</p> |
|---|
| 273 | <div class="dc-update"> |
|---|
| 274 | <h3>Dotclear 42 est disponible</h3> |
|---|
| 275 | <p><a class="button submit" href="#">Mettre à jour maintenant</a> |
|---|
| 276 | <a href="u#">Me le rappeler plus tard</a> |
|---|
| 277 | <a href="#" class="updt-info">information sur cette version</a></p> |
|---|
| 278 | </div> |
|---|
| 279 | <h4 class="smart-title">Messages contextuels</h4> |
|---|
| 280 | <p class="warn">Paragraphe de message d'alerte class warn ou warning.</p> |
|---|
| 281 | <p class="info">Paragraphe de message de class info.</p> |
|---|
| 282 | <p>Ces messages sont en display:inline-block. Le fond s'adapte à la longueur du message.</p> |
|---|
| 283 | |
|---|
| 284 | <h2><span class="page-title">Navigation</span></h2> |
|---|
| 285 | |
|---|
| 286 | <h3 id="direct">Selecteur d'accès direct</h3> |
|---|
| 287 | <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> |
|---|
| 288 | <p class="anchor-nav"> |
|---|
| 289 | <label class="classic" for="lp_nav">Aller à : </label> |
|---|
| 290 | <select id="lp_nav" name="lp_nav"> |
|---|
| 291 | <option value="#l_accessibility">accessibility</option> |
|---|
| 292 | <option value="#l_dashboard">dashboard</option> |
|---|
| 293 | <option value="#l_dmhostingmonitor">dmhostingmonitor</option> |
|---|
| 294 | <option value="#l_dmpending">dmpending</option> |
|---|
| 295 | <option value="#l_favorites">favorites</option> |
|---|
| 296 | <option value="#l_filters">filters</option> |
|---|
| 297 | <option value="#l_interface">interface</option> |
|---|
| 298 | <option value="#l_lists">lists</option> |
|---|
| 299 | <option value="#l_toggles">toggles</option> |
|---|
| 300 | </select> |
|---|
| 301 | <input type="submit" id="lp_submit" value="Ok" style="display: none;" /> |
|---|
| 302 | <input type="hidden" value="aboutConfig" name="p" /> |
|---|
| 303 | </p> |
|---|
| 304 | <h3 id="prevnext">Navigation contextuelle</h3> |
|---|
| 305 | <p><a title="Titre du lien (nouvelle fenêtre)" onclick="window.open(this.href);return false;" href="http://fr.dotclear.org/blog" class="onblog_link">Lien vers le blog <img alt="" src="images/outgoing-blue.png" /></a></p> |
|---|
| 306 | <p class="nav_prevnext"><a title="Titre de l'élément précédente" href="post.php?id=4145">« Élément précédent</a> | <a title="Titre de l'élément suivant" href="#">Élément suivant »</a></p> |
|---|
| 307 | |
|---|
| 308 | </div><!-- /content --> |
|---|
| 309 | </div><!-- /main --> |
|---|
| 310 | <div id="main-menu"> |
|---|
| 311 | <form id="search-menu" action="search.php" method="get"> |
|---|
| 312 | <p><label for="qx" class="hidden">Chercher : </label><input type="text" size="30" name="qx" id="qx" maxlength="255" /><input type="submit" value="OK" /></p> |
|---|
| 313 | </form> |
|---|
| 314 | <div id="favorites-menu"> |
|---|
| 315 | <h3>Typo</h3> |
|---|
| 316 | <ul> |
|---|
| 317 | <li><a href="#texte">Texte</a></li> |
|---|
| 318 | <li><a href="#titres">Titres hx</a></li> |
|---|
| 319 | </ul> |
|---|
| 320 | </div><!-- /favorites-menu --> |
|---|
| 321 | <div id="blog-menu"> |
|---|
| 322 | <h3>Layouts</h3> |
|---|
| 323 | <ul> |
|---|
| 324 | <li><a href="#onglets">Onglets</a></li> |
|---|
| 325 | <li><a href="#multi">Multi-colonnage</a></li> |
|---|
| 326 | </ul> |
|---|
| 327 | </div><!-- /blog-menu --> |
|---|
| 328 | <div id="system-menu"> |
|---|
| 329 | <h3>Interactions</h3> |
|---|
| 330 | <ul> |
|---|
| 331 | <li><a href="#elements">Éléments de formulaire</a></li> |
|---|
| 332 | <li><a href="#boutons">Boutons</a></li> |
|---|
| 333 | <li><a href="#messages">Messages</a></li> |
|---|
| 334 | </ul> |
|---|
| 335 | </div><!-- /system-menu --> |
|---|
| 336 | <div id="plugins-menu"> |
|---|
| 337 | <h3>Navigation</h3> |
|---|
| 338 | <ul> |
|---|
| 339 | <li><a href="#direct">Accès direct</a></li> |
|---|
| 340 | <li><a href="#prevnext">Précédent, suivant</a></li> |
|---|
| 341 | </ul> |
|---|
| 342 | </div><!-- /plugins-menu --> |
|---|
| 343 | </div><!-- /main-menu --> |
|---|
| 344 | |
|---|
| 345 | <div id="footer"> |
|---|
| 346 | <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> |
|---|
| 347 | </div><!-- /footer --> |
|---|
| 348 | <!-- |
|---|
| 349 | . |
|---|
| 350 | ,;:'`':: |
|---|
| 351 | __|| |
|---|
| 352 | _____/LLLL\_ |
|---|
| 353 | \__________"| |
|---|
| 354 | ~^~^~^~^~^~^~^~^~^~ |
|---|
| 355 | --> |
|---|
| 356 | </div><!-- /wrapper --> |
|---|
| 357 | </body> |
|---|
| 358 | </html> |
|---|
