eric
/
Yojik.net


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
							<!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 = "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">Tutoriel Anki</span></p>
                <ul class="current">
                    <li class="toctree-l1"><a class="reference internal" href="..">Introduction</a>
                    </li>
                    <li class="toctree-l1"><a class="reference internal" href="../Installation/">Installation</a>
                    </li>
                    <li class="toctree-l1"><a class="reference internal" href="../Les-fiches/">Les fiches</a>
                    </li>
                    <li class="toctree-l1"><a class="reference internal" href="../Premi%C3%A8re-utilisation/">Premières utilisations et impressions</a>
                    </li>
                    <li class="toctree-l1 current"><a class="reference internal current" href="./">Personnalisation</a>
    <ul class="current">
    <li class="toctree-l2"><a class="reference internal" href="#constat">Constat</a>
    </li>
    <li class="toctree-l2"><a class="reference internal" href="#personnalisation_1">Personnalisation</a>
    </li>
    <li class="toctree-l2"><a class="reference internal" href="#premiere-etape">Première étape</a>
    </li>
    </ul>
                    </li>
                    <li class="toctree-l1"><a class="reference internal" href="../Cartes/">Les cartes</a>
                    </li>
                    <li class="toctree-l1"><a class="reference internal" href="../Compl%C3%A9tion/">Complétion</a>
                    </li>
                    <li class="toctree-l1"><a class="reference internal" href="../Nouvelle-approche/">Nouvelle approche</a>
                    </li>
                    <li class="toctree-l1"><a class="reference internal" href="../Champs-%C3%A9ditables-1/">Champs éditables «partie 1»</a>
                    </li>
                    <li class="toctree-l1"><a class="reference internal" href="../Champs-%C3%A9ditables-2/">Champs éditables «partie 2»</a>
                    </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>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/image-14.png" /></p>
</li>
<li>
<p>apparaît l'écran suivant : cliquez sur «Cartes»</p>
<p><img alt="étape 10" src="../Images/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/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/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/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/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>