eric
/
Yojik.net


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
							<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  
  
  <link rel="shortcut icon" href="../../../img/favicon.ico">
  <title>Personnalisation - Les Tutoriels du Yojik</title>
  <link rel="stylesheet" href="../../../css/theme.css" />
  <link rel="stylesheet" href="../../../css/theme_extra.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css" />
  
  <script>
    // Current page data
    var mkdocs_page_name = "Personnalisation";
    var mkdocs_page_input_path = "Tutoriels/tutoanki/Personnalisation.md";
    var mkdocs_page_url = null;
  </script>
  
  <script src="../../../js/jquery-2.1.1.min.js" defer></script>
  <script src="../../../js/modernizr-2.8.3.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script> 
  
</head>

<body class="wy-body-for-nav" role="document">

  <div class="wy-grid-for-nav">

    
    <nav data-toggle="wy-nav-shift" class="wy-nav-side stickynav">
    <div class="wy-side-scroll">
      <div class="wy-side-nav-search">
        <a href="../../.." class="icon icon-home"> Les Tutoriels du Yojik</a>
        <div role="search">
  <form id ="rtd-search-form" class="wy-form" action="../../../search.html" method="get">
    <input type="text" name="q" placeholder="Search docs" title="Type search term here" />
  </form>
</div>
      </div>

      <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
                <p class="caption"><span class="caption-text">Home</span></p>
                <ul>
                    <li class="toctree-l1"><a class="reference internal" href="../../..">Page d'accueil</a>
                    </li>
                </ul>
                <p class="caption"><span class="caption-text">Tutoriels</span></p>
                <ul class="current">
                    <li class="toctree-l1"><a class="reference internal" href="../../tutos/">Introduction</a>
                    </li>
                    <li class="toctree-l1"><a class="reference internal" href="#">Installation d'un serveur sécurisé, version Debian/Stretch (obsolète)</a>
    <ul>
                <li class="toctree-l2"><a class="reference internal" href="../../tutostretch/tutostretch/">Présentation</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="#">Installation</a>
    <ul>
                <li class="toctree-l3"><a class="reference internal" href="../../tutostretch/Installation-de-base/">Installation du système de base</a>
                </li>
                <li class="toctree-l3"><a class="reference internal" href="../../tutostretch/ovh/">Démarrage sur serveur OVH</a>
                </li>
                <li class="toctree-l3"><a class="reference internal" href="../../tutostretch/Premi%C3%A8re-Etape-S%C3%A9curisation/">Première étapes de sécurisation du serveur</a>
                </li>
                <li class="toctree-l3"><a class="reference internal" href="../../tutostretch/Configuration-R%C3%A9seau/">Configuration du réseau</a>
                </li>
                <li class="toctree-l3"><a class="reference internal" href="../../tutostretch/Installation-Serveur-Temps/">Installation d'un serveur de temps</a>
                </li>
                <li class="toctree-l3"><a class="reference internal" href="../../tutostretch/Installation-Parre-Feu/">Installation d'un pare-feu</a>
                </li>
                <li class="toctree-l3"><a class="reference internal" href="../../tutostretch/Installation-Fail2ban/">Contrer les attaques de brute-force avec fail2ban</a>
                </li>
                <li class="toctree-l3"><a class="reference internal" href="../../tutostretch/Installation-Serveur-Courrier-Basique/">Installation d'un serveur de courrier basique</a>
                </li>
                <li class="toctree-l3"><a class="reference internal" href="../../tutostretch/Installation-Serveur-DNS/">Installation du serveur DNS</a>
                </li>
                <li class="toctree-l3"><a class="reference internal" href="../../tutostretch/Installation-Serveur-Web/">Installation d'un serveur web</a>
                </li>
                <li class="toctree-l3"><a class="reference internal" href="../../tutostretch/Installation-Dovecot-Authentification/">Installation de dovecot et de l'authentification</a>
                </li>
                <li class="toctree-l3"><a class="" href="../../tutostretch/Installation-Certificats-Letsencrypt.md)">Installation des certificats letsencrypt</a>
                </li>
                <li class="toctree-l3"><a class="" href="../../tutostretch/courrier-SPF-DKIM-OPENDMARC.md">Ajout des enregistrements **spf**, **DKIM**, **DMARC** au fichier de zone DNS</a>
                </li>
                <li class="toctree-l3"><a class="reference internal" href="../../tutostretch/Courrier-Comptes-Virtuels/">Ajout des comptes émail virtuels</a>
                </li>
                <li class="toctree-l3"><a class="reference internal" href="../../tutostretch/Surveillance-Serveur/">Installation de programmes de surveillance du serveur</a>
                </li>
                <li class="toctree-l3"><a class="reference internal" href="../../tutostretch/Installation-Webmail/">Installation d'un webmail (rainloop)</a>
                </li>
                <li class="toctree-l3"><a class="" href="../../tutostretch/Sécurisation-Serveur-Web">Sécurisation d'un serveur WEB</a>
                </li>
    </ul>
                </li>
    </ul>
                    </li>
                    <li class="toctree-l1"><a class="reference internal" href="#">Installation d'un serveur sécurisé, version Debian/Buster (en cours d'écriture)</a>
    <ul>
                <li class="toctree-l2"><a class="reference internal" href="../../tutobuster/1-tutobuster/">Présentation</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../../tutobuster/2-Installation-de-base/">Installation de base</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../../tutobuster/3-ovh/">Démarrage sur serveur OVH</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../../tutobuster/4-Plan/">Plan d'ensemble</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../../tutobuster/5-Premi%C3%A8re-Etape-S%C3%A9curisation/">Premières étapes de sécurisation du serveur</a>
                </li>
    </ul>
                    </li>
                    <li class="toctree-l1"><a class="reference internal" href="#">Installation d'un serveur sécurisé, version Debian/Buster sur RaspberryPI</a>
    <ul>
                <li class="toctree-l2"><a class="reference internal" href="../../tutoraspi/R%C3%A9sum%C3%A9/">Résumé</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../../tutoraspi/tutoraspi/">Présentation</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../../tutoraspi/Installation-de-base/">Installation de base</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../../tutoraspi/Premier-d%C3%A9marrage/">Premier démarrage</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../../tutoraspi/Etat-des-lieux/">État des lieux</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../../tutoraspi/S%C3%A9curisation-SSH/">Sécurisation SSH</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../../tutoraspi/R%C3%A9seau/">Réseau (des IPs fixes)</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../../tutoraspi/Knot/">Installation de Knot-resolver</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../../tutoraspi/Firewall/">Installation d'un pare-feux</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../../tutoraspi/Fail2ban/">Contrer les attaques de force brute</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../../tutoraspi/Logwatch/">Surveillance du serveur</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../../tutoraspi/Installation-courrier-basique/">Installation d'un serveur de courriers basique</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../../tutoraspi/Exemple-d-utilisation-serveur-Web/">Exemple d'utilisation avec un serveur Web</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../../tutoraspi/Annexe/">Annexe</a>
                </li>
    </ul>
                    </li>
                    <li class="toctree-l1"><a class="reference internal" href="#">Domotique</a>
    <ul>
                <li class="toctree-l2"><a class="reference internal" href="../../Domotique/Introduction/">Introduction</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../../Domotique/Le-mat%C3%A9riel/">Le matériel</a>
                </li>
    </ul>
                    </li>
                    <li class="toctree-l1 current"><a class="reference internal current" href="#">Tutoriel Anki</a>
    <ul class="current">
                <li class="toctree-l2"><a class="reference internal" href="../Introduction/">Introduction</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../Installation/">Installation</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../Les-fiches/">Les fiches</a>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../Premi%C3%A8re-utilisation/">Premières utilisations et impressions</a>
                </li>
                <li class="toctree-l2 current"><a class="reference internal current" href="./">Personnalisation</a>
    <ul class="current">
    <li class="toctree-l3"><a class="reference internal" href="#constat">Constat</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#personnalisation_1">Personnalisation</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#premiere-etape">Première étape</a>
    </li>
    </ul>
                </li>
                <li class="toctree-l2"><a class="reference internal" href="../Cartes/">Les cartes</a>
                </li>
    </ul>
                    </li>
                </ul>
      </div>
    </div>
    </nav>

    <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">

      
      <nav class="wy-nav-top" role="navigation" aria-label="top navigation">
        <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
        <a href="../../..">Les Tutoriels du Yojik</a>
      </nav>

      
      <div class="wy-nav-content">
        <div class="rst-content">
          <div role="navigation" aria-label="breadcrumbs navigation">
  <ul class="wy-breadcrumbs">
    <li><a href="../../..">Docs</a> &raquo;</li>
    
      
        
          <li>Tutoriel Anki &raquo;</li>
        
      
        
          <li>Tutoriels &raquo;</li>
        
      
    
    <li>Personnalisation</li>
    <li class="wy-breadcrumbs-aside">
      
    </li>
  </ul>
  
  <hr/>
</div>
          <div role="main">
            <div class="section">
              
                <h1 id="personnalisation">Personnalisation</h1>
<h2 id="constat">Constat</h2>
<p>Le premier constat est que ce n'est pas sexy du tout : caratères trop petits, tout est planté en haut de l'écran.</p>
<h2 id="personnalisation_1">Personnalisation</h2>
<p>Les fiches sont entièrement personnalisables grâce aux CSS, le langage des propriétés d'affichage des pages html (le Web).</p>
<p>Nous allons pouvoir utiliser un sous-ensemble de ces directives pour augmenter la taille des caractères, changer leur couleur etc.</p>
<p>Une documentation considérable est disponible sur le Web qui vous permettra d'étudier et d'appliquer les règles.</p>
<h2 id="premiere-etape">Première étape</h2>
<p>Pour un début, nous allons changer la taille des caratères affichés.</p>
<ul>
<li>
<p>cliquez sur «Outils» puis dans le menu déroulant qui apparaît sur «Gérer les types de notes»</p>
<p><img alt="étape 9" src="../../../Images/tutoanki/image-14.png" /></p>
</li>
<li>
<p>apparaît l'écran suivant : cliquez sur «Cartes»</p>
<p><img alt="étape 10" src="../../../Images/tutoanki/image-15.png" /></p>
</li>
<li>
<p>vous voilà enfin sur la page qui va vous permettre de modifier l'apparence de vos cartes.</p>
<p><img alt="étape 11" src="../../../Images/tutoanki/image-16.png" /></p>
<p>La fenêtre de personnalisation est découpée en 2 parties principales, verticalement. La partie droite vous montre l'apparence que prendra votre partie recto et verso une fois les modifications faites.</p>
<p>La partie gauche est constituée de 3 parties : </p>
<ul>
<li>en haut, la face recto de votre carte</li>
<li>en bas, la face verso de votre carte</li>
<li>au milieu, les caractéristiques globales qui s'appliqueront aussi bien au recto qu'au vero.</li>
</ul>
</li>
<li>
<p>modification de la taille des caractères : </p>
<p>La taille indiquée sur la partie centrale indique une taille de fonte de 20 pixels (font-size: 20px;). La famille de la fonte est arial (très passe-partout). Couleur des caractère noire sur fond blanc.</p>
<p>Toutes ces caractéristiques sont modifiables, soit au niveau global, ou sur chaque côté de la carte.</p>
<p>Modifions pour commencer la taille gobale des caratères, donc, partie centrale de la fenêtre de personnalisation.</p>
<p>Passons là à 40px : font-size: 40px;</p>
<p>Voyez la capture d'écran pour vous guider.</p>
<p><img alt="étape 12" src="../../../Images/tutoanki/image-17.png" /></p>
<p>Vous pouvez constater instantanément la prise en compte de votre modification sur la partie droite de la fenêtre de personnalisation. Les caractères ont doublé de taille. Et par la même sont plus lisibles.</p>
</li>
<li>
<p>modification de la couleur des caractères</p>
<p>A titre d'exemple nous allons afficher les Hiraganas en bleu.</p>
<p>Voici la modification à faire dans la partie haute de la fenêtre de personnalisation.</p>
<p>Nous allons appliquer un style css aux Hiraganas. Pour cela nous allons créer une classe (c'est comme cela que cela s'appelle en CSS et HTML) et l'appliquer aux Hiraganas (donc le recto.)</p>
<p><span class="hiragana">{{recto}}</span></p>
<p>Ensuite, nous allons définir la classe crée dans la partie centrale dédiée aux styles.</p>
<p>Cela se fait comme dans un fichier .css classique.</p>
<p>.hiragana {
    color: blue;
}</p>
<p>Voyons le résultat : </p>
<p><img alt="étape 13" src="../../../Images/tutoanki/image-18.png" /></p>
<p>C'est déjà nettement plus joli! (à mon goût, bien sûr ...)</p>
</li>
</ul>
<p>Voyons le résultat final. Pour cela, cliquez sur «Fermer» en bas à droite de la fenêtre.</p>
<p>Puis sur «Close» de la fenêtre qui apparaît.</p>
<p><img alt="étape 14" src="../../../Images/tutoanki/image-19.png" /></p>
<p>Voilà pour une première personnalisation de nos cartes. Beaucoup de choses sont possibles et nous en verront encore certaines dans les chapitres à suivre.</p>
<p>Tout d'abord, nous allons personnaliser le contenu de nos cartes, ajouter des champs, du son ,et pourquoi pas, des images.</p>
              
            </div>
          </div>
          <footer>
  
    <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
      
        <a href="../Cartes/" class="btn btn-neutral float-right" title="Les cartes">Next <span class="icon icon-circle-arrow-right"></span></a>
      
      
        <a href="../Premi%C3%A8re-utilisation/" class="btn btn-neutral" title="Premières utilisations et impressions"><span class="icon icon-circle-arrow-left"></span> Previous</a>
      
    </div>
  

  <hr/>

  <div role="contentinfo">
    <!-- Copyright etc -->
    
  </div>

  Built with <a href="https://www.mkdocs.org/">MkDocs</a> using a <a href="https://github.com/snide/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>.
</footer>
      
        </div>
      </div>

    </section>

  </div>

  <div class="rst-versions" role="note" aria-label="versions">
    <span class="rst-current-version" data-toggle="rst-current-version">
      
      
        <span><a href="../Premi%C3%A8re-utilisation/" style="color: #fcfcfc;">&laquo; Previous</a></span>
      
      
        <span style="margin-left: 15px"><a href="../Cartes/" style="color: #fcfcfc">Next &raquo;</a></span>
      
    </span>
</div>
    <script>var base_url = '../../..';</script>
    <script src="../../../js/theme.js" defer></script>
      <script src="../../../search/main.js" defer></script>
    <script defer>
        window.onload = function () {
            SphinxRtdTheme.Navigation.enable(true);
        };
    </script>

</body>
</html>