Dotclear

Changeset 1749:5b81895af165 for admin


Ignore:
Timestamp:
09/08/13 12:05:23 (12 years ago)
Author:
Anne Kozlika <kozlika@…>
Branch:
default
Children:
1756:820ded7ce747, 1823:6dea7b458fb9
Message:

Layouts: detour du three-cols, améliorations des one- two- three- boxes.
Compléments sur _charte.html.

Location:
admin
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • admin/_charte.html

    r1748 r1749  
    1515     <style type="text/css"> 
    1616          #content > h2 {padding-top: 2.5em;} 
    17           #content > h3, #content > h4 {padding-top: 2em;} 
     17          #content > h3, #content > h4 {padding-top: 2em; color: #d30e70;} 
    1818          #content > h2:first-child {padding-top: 0;} 
     19          .one-box .box {border: 1px solid #ddd; padding: 2px .5em;} 
    1920     </style> 
    2021     <script type="text/javascript" src="js/jquery/jquery.js"></script> 
     22     <script type="text/javascript" src="js/jquery/jquery.pageTabs.js"></script> 
    2123     <script type="text/javascript" src="js/jquery/jquery.biscuit.js"></script> 
    2224     <script type="text/javascript" src="js/jquery/jquery.bgFade.js"></script> 
    … …  
    2527     <script type="text/javascript"> 
    2628     //<![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  
     29          dotclear.img_plus_alt = 'dévoiler'; 
     30          dotclear.img_minus_alt = 'cacher'; 
     31          dotclear.img_menu_on = 'images/menu_on.png'; 
     32          dotclear.img_menu_off = 'images/menu_off.png'; 
     33          dotclear.msg.help = 'Aide pour cette page'; 
     34          dotclear.msg.help_hide = 'Masquer'; 
     35          dotclear.msg.error = 'Erreur :'; 
    7536     //]]> 
    7637     </script> 
    7738     <script type="text/javascript"> 
    7839     //<![CDATA[ 
    79      dotclear.unfolded_sections = {'dcx_post_lang':true,'dc_favorites_menu':true,'dc_system_menu':true}; 
    80  
     40          dotclear.unfolded_sections = {'dc_favorites_menu':true,'dc_system_menu':true}; 
    8141     //]]> 
    8242     </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> 
    8743     <script type="text/javascript"> 
    8844     //<![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';  
     45          $(function() { 
     46               $.pageTabs('two-boxes'); 
     47          }); 
    9048     //]]> 
    9149     </script> 
    92      <script type="text/javascript" src="js/_index.js"></script> 
    9350</head> 
    9451 
    … …  
    11774                         <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  
    11875                         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> 
     76                         <p>La liste suivante est de class <code>"nice"</code>. Elle est semblable aux listes ordinaires mais avec des puces carrées.</p> 
    12077                         <ul class="nice"> 
    12178                              <li>Les textes courants sont en Arial, Helvetica ou sans-serif. </li> 
    … …  
    12582 
    12683                         <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> 
     84                              <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> 
    12885                              <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> 
    12986                         <h4>Titre de niveau h4</h4> 
    … …  
    13592                         <div class="fieldset"> 
    13693                              <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> 
     94                                   <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> 
     95                                   <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> 
    13996                         </div> 
    14097 
    … …  
    14299 
    143100                    <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 /> 
     101                    <p>Les descriptions des constructions en multi-colonnes ci-dessous présentent un exemple de répartition en onglets.</p> 
    152102 
    153103                    <h3 id="multi-colonnage">Multi-colonnage</h3> 
    154                     <h4>Two-cols 50/50</h4> 
     104                    <div id="one-box" class="multi-part" title="One-box"> 
     105                         <h4>Boîtes distribuées horizontalement</h4> 
     106                         <div class="one-box"> 
     107                              <div class="box"> 
     108                                   <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> 
     109                              </div> 
     110                              <div class="box"> 
     111                                   <p><span class="step">2</span> Voici une petite boîte.</p> 
     112                              </div> 
     113                              <div class="box"> 
     114                                   <p><span class="step">3</span> Une autre petite boîte.</p> 
     115                              </div> 
     116                              <div class="box"> 
     117                                   <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> 
     118                              </div> 
     119                              <div class="box"> 
     120                                   <p><span class="step">5</span> Si vous souhaitez un autre alignement des boîtes entre elles vous pouvez ajouter les class :  
     121                                   <ul class="nice clear"> 
     122                                        <li><code>"txt-left"</code>,</li> 
     123                                        <li><code>"txt-right"</code></li>  
     124                                        <li>ou <code>"txt-center"</code></li> 
     125                                   </ul> 
     126                                   <p> à la class <code>"one-box"</code>.</p> 
     127                              </div> 
     128                              <div class="box"> 
     129                                   <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> 
     130                              </div> 
     131                         </div> 
     132                    </div> 
     133                    <div id="two-boxes" class="multi-part" title="Two-boxes"> 
     134                         <h4>Boîtes distribuées deux par deux</h4> 
     135                         <div> 
     136                              <div class="two-boxes odd"> 
     137                                   <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> 
     138                              </div><!-- 
     139                              --><div class="two-boxes even"> 
     140                                   <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é de leur attribuer alternativement les class <code>"odd"</code> et <code>"even"</code> pour que les marges se placent correctement.</p> 
     141                              </div><!-- 
     142                              --><div class="two-boxes odd"> 
     143                                   <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> 
     144                              </div><!-- 
     145                              --><div class="two-boxes even"> 
     146                                   <div class="box"> 
     147                                        <p><span class="step">4</span> Toutes les boîtes de class <code>"box"</code><br /> 
     148                                         placées au sein d'une boîte <code>"two-boxes"</code>…</p> 
     149                                   </div> 
     150                                   <div class="box"> 
     151                                        <p><span class="step">4 bis</span>… se distribuent horizontalement comme dans <br /> 
     152                                             une boîte <code>"one-box"</code>.</p> 
     153                                   </div> 
     154                              </div> 
     155                         </div> 
     156                    </div> 
     157                    <div id="three-boxes" class="multi-part" title="Three-boxes"> 
     158                         <h4>Boîtes distribuées trois par trois</h4> 
     159                         <div> 
     160                              <div class="three-boxes"> 
     161                                   <div class="box"> 
     162                                        <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> 
     163                                   </div> 
     164                              </div><!-- 
     165                              --><div class="three-boxes"> 
     166                                   <div class="box"> 
     167                                        <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> 
     168                                   </div> 
     169                              </div><!-- 
     170                              --><div class="three-boxes"> 
     171                                   <div class="box"> 
     172                                        <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> 
     173                                   </div> 
     174                              </div> 
     175                         </div> 
     176                    </div> 
     177                    <div id="two-cols-50-50" class="multi-part" title="Two-cols (50/50)"> 
     178                         <h4>Deux colonnes flottantes de largeurs égales</h4> 
    155179                         <div class="two-cols clearfix"> 
    156180                              <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>. 
     181                                   <p>La div englobante porte la class <code>"two-cols"</code>, chacune de ses div porte la class <code>"col"</code>. 
    158182                                   Sans autre précision les deux colonnes sont d'égale largeur.</p> 
    159183                              </div> 
    160184                              <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> 
     185                                   <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> 
     186                              </div> 
     187                         </div> 
     188                    </div> 
     189                    <div id="two-cols-70-30" class="multi-part" title="Two-cols (70/30)"> 
     190                         <h4>Deux colonnes flottantes de largeurs inégales</h4> 
    165191                         <div class="two-cols clearfix"> 
    166192                              <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> 
     193                                   <p><span class="step">col70</span> La div englobante porte la class <code>"two-cols"</code>. 
     194                                   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> 
    169195                              </div> 
    170196                              <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> 
     197                                   <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> 
     198                              </div> 
     199                         </div> 
     200                    </div> 
     201                    <div id="three-cols" class="multi-part" title="Three-cols (deprecated)"> 
     202                         <h4>Trois colonnes flottantes de largeurs égales</h4> 
     203                         <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> 
     204                         <div class="three-cols clearfix"> 
     205                              <div class="col"> 
     206                                   <h5>Colonne 1</h5> 
     207                                   <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> 
     208                              </div> 
     209                              <div class="col"> 
     210                                   <h5>Colonne 2</h5> 
     211                                   <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> 
     212                              </div> 
     213                              <div class="col"> 
     214                                   <h5>Colonne 3</h5> 
     215                                   <p>Voilà la troisième colonne.</p> 
     216                              </div> 
     217                         </div> 
     218                    </div> 
     219                    <hr /> 
     220                    <p><strong>Note :</strong> les valeurs en pourcentage et les numérotations sont placées dans un <code>span class="step"</code>.</p> 
    212221 
    213222                    <h2><span class="page-title">Interactions</span></h2> 
    … …  
    323332                    <ul> 
    324333                         <li><a href="#onglets">Onglets</a></li> 
    325                          <li><a href="#multi">Multi-colonnage</a></li> 
     334                         <li><a href="#multi-colonnage">Multi-colonnage</a></li> 
    326335                    </ul> 
    327336               </div><!-- /blog-menu --> 

  • admin/index.php

    r1741 r1749  
    403403} 
    404404 
    405 $class = ' '.(($dashboardItems != '') && ($dashboardContents != '') ? 'two-boxes' : 'one-box'); 
     405$class = ' '.(($dashboardItems != '') && ($dashboardContents != '') ? 'two-boxes' : 'one-box txt-center'); 
    406406 
    407407if ($dashboardContents != '' || $dashboardItems != '') { 

  • admin/style/default.css

    r1748 r1749  
    8484          margin-right: 0; 
    8585          } 
     86/* -------------------------------------------------------------- layout: three-cols */ 
     87.three-cols { 
     88     position: static; 
     89     } 
     90     .three-cols .col {  
     91          width: 32.3%;  
     92          float: left;  
     93          margin-left: 1%;  
     94          }  
     95     .three-cols .col:first-child {  
     96          width: 33.3%;  
     97          margin-left: 0;  
     98          } 
    8699/* ------------------------------------------------- layout: optionnal one/two-boxes */ 
     100.one-box, .two-boxes, .three-boxes, .box { 
     101     margin-bottom: 1em; 
     102     } 
    87103.one-box { 
    88      text-align: center; 
    89      width: 100%; 
    90      } 
    91      .one-box .box { 
    92           display: inline-block; 
    93           vertical-align: top; 
    94           padding-right: 3%;  
    95           text-align: left; 
    96           } 
     104     text-align: justify; 
     105     } 
    97106.two-boxes { 
    98107     width: 47%; 
    … …  
    119128          margin-right: 0; 
    120129          } 
    121 /* boîtes intérieures */ 
     130/* boîtes intérieures distribuées horizontalement */ 
    122131.box { 
    123      margin-bottom: 2em; 
     132     display: inline-block; 
     133     vertical-align: top; 
     134     margin-right: 3%;  
     135     text-align: left; 
     136     } 
     137.box:last-child { 
     138     margin-right: 0; 
    124139     } 
    125140/* ---------------------------------------------------------------- layout: popups */ 
    … …  
    624639     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) 
    625640     } 
     641div.warn, div.warning, div.info { 
     642     padding: 1em 1em .33em 1em; 
     643     } 
    626644     .warn, .warning { 
    627645          background: #FEFACD url(msg-warning.png) no-repeat .3em .3em; 
    … …  
    16201638     border: 1px solid #A8DC26; 
    16211639     padding: 1em 2em 
    1622      } 
    1623      #my-favs ul { 
    1624           list-style-type: none; 
    1625           margin-left: 0; 
    1626           padding-left: 0; 
    1627           line-height: 1.2; 
    1628           } 
    1629           #my-favs li { 
    1630                display: block; 
    1631                float: left; 
    1632                width: 164px; 
    1633                margin-top: 1em; 
    1634                margin-bottom: 1.5em; 
    1635                } 
    1636      #my-favs label { 
    1637           height: 2.5em; 
    1638           width:140px; 
    1639           margin-top:.3em; 
    1640           } 
    1641           #my-favs label input { 
    1642                display:inline; 
    1643                } 
    1644      #my-favs img { 
    1645           display: block; 
    1646           } 
    1647      #my-favs input.position { 
    1648           margin: 0 0 .4em .2em; 
    1649           } 
    1650      #available-favs input, #available-favs label, #available-favs label span { 
    1651           white-space: normal; 
    1652           display: inline; 
    1653           } 
    1654           #default-favs h3 { 
    1655                margin-top: 2em; 
    1656                margin-bottom: 1em; 
    1657                } 
    1658           .fav-list { 
    1659                list-style-type: none; 
    1660                margin-left: 0; 
    1661                padding-left: 0; 
    1662                } 
    1663                .fav-list li { 
    1664                     line-height: 2; 
    1665                     margin-left: 0; 
    1666                     padding-left: 0; 
    1667                     position: relative; 
    1668                     } 
    1669                .fav-list img { 
    1670                     vertical-align: middle; 
    1671                     margin-right: .2em; 
    1672                } 
    1673      #available-favs label span.zoom { 
    1674           display: none; 
    1675           } 
    1676      #available-favs li:hover label span.zoom { 
    1677           display: block; 
    1678           position: absolute; 
    1679           bottom: 0; 
    1680           left: 10em; 
    1681           background-color: #f7f7f7; 
    1682           border: 1px solid #ddd; 
    1683           padding: .2em; 
    1684           border-radius: .5em; 
    1685           } 
     1640} 
     1641#my-favs ul { 
     1642     list-style-type: none; 
     1643     margin-left: 0; 
     1644     padding-left: 0; 
     1645     line-height: 1.2; 
     1646} 
     1647#my-favs li { 
     1648     display: block; 
     1649     float: left; 
     1650     width: 164px; 
     1651     margin-top: 1em; 
     1652     margin-bottom: 1.5em; 
     1653} 
     1654#my-favs label {height: 2.5em;width:140px;margin-top:.3em;} 
     1655#my-favs label input {display:inline;} 
     1656#my-favs img { 
     1657     display: block; 
     1658} 
     1659#my-favs input.position { 
     1660     margin: 0 0 .4em .2em; 
     1661} 
     1662#available-favs input, #available-favs label, #available-favs label span { 
     1663     white-space: normal; 
     1664     display: inline; 
     1665} 
     1666#default-favs h3 { 
     1667     margin-top: 2em; 
     1668     margin-bottom: 1em; 
     1669} 
     1670.fav-list { 
     1671     list-style-type: none; 
     1672     margin-left: 0; 
     1673     padding-left: 0; 
     1674} 
     1675.fav-list li { 
     1676     line-height: 2; 
     1677     margin-left: 0; 
     1678     padding-left: 0; 
     1679     position: relative; 
     1680} 
     1681.fav-list img { 
     1682     vertical-align: middle; 
     1683     margin-right: .2em; 
     1684} 
     1685#available-favs label span.zoom { 
     1686     display: none; 
     1687} 
     1688#available-favs li:hover label span.zoom { 
     1689     display: block; 
     1690     position: absolute; 
     1691     bottom: 0; 
     1692     left: 10em; 
     1693     background-color: #f7f7f7; 
     1694     border: 1px solid #ddd; 
     1695     padding: .2em; 
     1696     border-radius: .5em; 
     1697} 
    16861698#user-options label.ib { 
    16871699     display: inline-block; 
    … …  
    18581870          color: #333; 
    18591871          } 
    1860 .right { 
     1872.right, .txt-right { 
    18611873     text-align: right; 
    18621874     } 
    18631875.txt-center { 
    18641876     text-align: center; 
     1877     } 
     1878.txt-left { 
     1879     text-align: left; 
    18651880     } 
    18661881.no-margin, label.no-margin { 
    … …  
    19741989          #info-box1 select { width: 140px; width: 14rem; } 
    19751990     #main-menu, #main, #content, #content h2, #entry-wrapper, #entry-sidebar, #entry-content,  
    1976      .two-cols .col, .two-cols .col:first-child, .boxes { 
     1991     .col, .col30, .col70 { 
    19771992          display:block !important; 
    1978      width: 98%; 
    1979      margin:0 auto; 
     1993     width: 98% !important; 
     1994     margin:0 auto !important; 
    19801995     padding:0; 
    19811996     float:none; 
    … …  
    20012016          overflow: hidden; 
    20022017          } 
     2018     .one-box, .two-boxes, .three-boxes { 
     2019          width: 100%; 
     2020          margin-left: 0; 
     2021          margin-right: 0;  
     2022          } 
    20032023     } 
    20042024@media screen and (max-width: 492px) { 

  • admin/style/jsToolBar/jsToolBar.css

    r1741 r1749  
    1313     width: 100%; 
    1414     padding: .5em 0 0 0; 
     15     min-height: 100px; 
    1516} 
    1617.jstHandle { 
Note: See TracChangeset for help on using the changeset viewer.

Sites map