{"id":1739,"date":"2017-03-27T13:37:36","date_gmt":"2017-03-27T11:37:36","guid":{"rendered":"http:\/\/members.loria.fr\/infodoc\/?page_id=1739"},"modified":"2017-04-07T09:40:24","modified_gmt":"2017-04-07T07:40:24","slug":"modifier-la-disposition-des-logos","status":"publish","type":"page","link":"https:\/\/members.loria.fr\/infodoc\/modifier-la-disposition-des-logos\/","title":{"rendered":"Modifier la disposition des logos"},"content":{"rendered":"<ol>\n<li><a href=\"#preambule\">Avant de se lancer&#8230;<\/a><\/li>\n<li><a href=\"#logos\">O\u00f9 trouver les logos institutionnels ?<\/a><\/li>\n<li><a href=\"#standard\">Modifier la disposition standard<\/a><\/li>\n<li><a href=\"#lateral\">Mettre un logo dans le bandeau lat\u00e9ral<\/a><\/li>\n<li><a href=\"#entete\">Mettre un logo dans le bandeau d&rsquo;en-t\u00eate<\/a><\/li>\n<\/ol>\n<p><a name=\"preambule\"><\/a><\/p>\n<p style=\"margin-top: 32px;\">&nbsp;<\/p>\n<h2>Avant de se lancer&#8230;<\/h2>\n<p>Dans cette rubrique nous vous proposons 3 types de modifications pour mettre en valeur les logos des organismes dont vous d\u00e9pendez, et que vous voudrez peut-\u00eatre diff\u00e9rencier par rapport au bandeau standard propos\u00e9 dans le mod\u00e8le du site WordPress.<\/p>\n<p>Pour cela, il faudra avant tout toujours respercter les r\u00e8gles de leurs usages, pr\u00e9cis\u00e9es dans les chartes graphiques li\u00e9es \u00e0 chaque logo. Vous trouverez g\u00e9n\u00e9ralement ces chartes sur les intranets de chacun des \u00e9tablissements concern\u00e9s. En ce qui concerne le Laboratoire LORIA, nous reprenons la charte <a href=\"\/infodoc\/files\/img\/DOCLOGO\/CharteGraphiqueLoria.pdf\">ici<\/a>, car nous allons prendre essentiellement ce logo en exemple dans ce qui suit.<\/p>\n<ul>\n<li>le premier \u00e9l\u00e9ment important concerne l&rsquo;environnement du logo (taille, couleur) et le choix de ses options : comme souvent, le logo LORIA existe en \u00ab\u00a0version longue\u00a0\u00bb, avec une ligne de base qui reprend l&rsquo;intitul\u00e9 complet du Laboratoire (\u00e9l\u00e9ment appel\u00e9 \u00ab\u00a0signature\u00a0\u00bb dans la charte du LORIA), ou en \u00ab\u00a0version simplifi\u00e9e\u00a0\u00bb, purement graphique et sans intitul\u00e9s.<br \/>\n<table  class=\" table table-hover\" width=\"80%\" align=\"center\">\n<tr>\n<td width=\"50%\" align=\"center\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone \u00a0wp-image-249\" src=\"\/infodoc\/files\/img\/DOCLOGO\/logo_loria_complet_couleur.png\" alt=\"logo LORIA complet\" width=\"350\" height=\"186\" \/><\/td>\n<td width=\"50%\" align=\"center\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone \u00a0wp-image-249\" src=\"\/infodoc\/files\/img\/DOCLOGO\/logo_loria_abrege_couleur.png\" alt=\"logo LORIA abr\u00e9g\u00e9\" width=\"203\" height=\"186\" \/><\/td>\n<\/tr>\n<tr>\n<td align=\"center\"><b>Logo LORIA complet<\/b><\/td>\n<td align=\"center\"><b>Logo LORIA abr\u00e9g\u00e9<\/b><\/td>\n<\/tr>\n<\/table>\n<\/li>\n<li>la taille du logo : il y a g\u00e9n\u00e9ralement une taille minimale sous laquelle il ne faut pas passer un logo sous peine de le rendre m\u00e9connaissable. Dans certains cas, il existe des versions diff\u00e9rentes pour rendre un logo plus lisible, ou plus d\u00e9taill\u00e9 pour de grandes tailles. Pour le logo LORIA, la charte pr\u00e9cise \u00e0 partir de quelle taille il faut abandonner le \u00ab\u00a0Logo complet\u00a0\u00bb pour passer au \u00ab\u00a0Logo abr\u00e9g\u00e9\u00a0\u00bb.<\/li>\n<li>la couleur du logo : les couleurs de fond autoris\u00e9es sont \u00e9galement pr\u00e9cis\u00e9es, et plusieurs d\u00e9clinaisons propos\u00e9es en fonction de celle-ci. Par exemple pour le logo LORIA, la version multicolore avec des couleurs pastel n&rsquo;est autoris\u00e9e que sur fond blanc, mais il existe un logo blanc \u00e0 utiliser avec des fonds d&rsquo;image noirs ou sombres.<\/li>\n<\/ul>\n<p>On voit dans la charte que le logo LORIA complet ne doit \u00eatre utilis\u00e9 que si sa taille d\u00e9passe 3 cms, ce qui en exclut l&rsquo;utilisation dans le bandeau actuel, et dans le bandeau haut si on ne veut pas trop en augmenter la hauteur. Par contre il est parfaitement justifi\u00e9 de l&rsquo;utiliser dans le bandeau lat\u00e9ral dont la largeur varie entre 7,2 et 9 cms selon la largeur accord\u00e9e \u00e0 la fen\u00eatre du navigateur (le th\u00e8me est \u00ab\u00a0responsive\u00a0\u00bb et s&rsquo;adapte \u00e0 la taille de cette fen\u00eatre).<br \/>\nPar d\u00e9faut, le bandeau du haut est noir : il vous est interdit d&rsquo;y ins\u00e9rer le logo aux couleurs pastel, et il faudra donc choisir le logo blanc sur fond transparent. De m\u00eame, si vous utilisez une photo dans le bandeau du haut, l&rsquo;utilisation du logo (en version blanche) ne sera autoris\u00e9 que si sa lisibilit\u00e9 reste bonne.<\/p>\n<p><a name=\"logos\"><\/a><\/p>\n<p style=\"margin-top: 32px;\">&nbsp;<\/p>\n<h2>O\u00f9 trouver les logos institutionnels ?<\/h2>\n<ul>\n<li><a href=\"https:\/\/intranet.loria.fr\/ressources\/documents-a-telecharger\/dossiers-logos\">LORIA<\/a> (cette page reprend aussi les logos des tutelles du LORIA)<\/li>\n<li>CNRS<\/li>\n<li>Inria<\/li>\n<li>Universit\u00e9 de Lorraine<\/li>\n<\/ul>\n<p><a name=\"standard\"><\/a><\/p>\n<p style=\"margin-top: 32px;\">&nbsp;<\/p>\n<h2>Modifier la disposition standard (widget logos en bas de page)<\/h2>\n<ul>\n<li>par d\u00e9faut, nous avons choisi de disposer le logo du LORIA et de ses 3 tutelles (dans cet ordre pour le mod\u00e8le LORIA, ou en d\u00e9butant par le logo Inria pour le mod\u00e8le Inria) dans un <a href=\"\">slot<\/a> de widget sp\u00e9cifique du bas de page, en utilisant un widget de type \u00ab\u00a0Text Block\u00a0\u00bb cr\u00e9\u00e9 pour la circonstance et appel\u00e9 \u00ab\u00a0Logo\u00a0\u00bb.\n<p><img decoding=\"async\" class=\"alignnone \u00a0wp-image-249\" src=\"\/infodoc\/files\/img\/DOCLOGO\/ch-logos-01.png\" alt=\"logos\" \/>\n<\/li>\n<li>pour modifier le Text Block <b>Logo<\/b>, choisissez donc <i>Text Blocks<\/i> dans le menu gauche du Tableau de Bord, et s\u00e9lectionnez l&rsquo;option <i>Modifier<\/i> sous l&rsquo;objet <b>Logo<\/b> :\n<p><img decoding=\"async\" class=\"alignnone \u00a0wp-image-249\" src=\"\/infodoc\/files\/img\/DOCLOGO\/ch-logos-02.png\" alt=\"logos\" \/>\n<\/li>\n<li>Avec l&rsquo;\u00e9diteur en mode \u00ab\u00a0<b>Texte<\/b>\u00a0\u00bb vous pouvez voir et \u00e9diter le code du Text-Block. Vous pouvez supprimer ou ajouter des \u00e9l\u00e9ments (par exemple un logo d&rsquo;\u00e9quipe, ou d&rsquo;\u00e9tablissement d&rsquo;enseignement). <b>Attention :<\/b> vous ne pouvez pas modifier \u00e0 votre convenance les dimensions d&rsquo;un logo (sauf \u00e0 surcharger la feuille de style), car les dimensions (hauteur, largeur) du bandeau sont fix\u00e9es dans la feuille de style : il faudra donc prendre garde \u00e0 respecter la charte de l&rsquo;\u00e9tablissement (taille minimale, couleur de fond, etc. : voir plus haut).<br \/>\nLe service communication est \u00e0 votre disposition pour vous pr\u00e9ciser ces \u00e9l\u00e9ments.<br \/>\nNotez aussi que dans le mod\u00e8le que nous avons clon\u00e9 pour votre site, les logos sont d\u00e9pos\u00e9s sur la partie statique du site infodoc. Si vous ajoutez un \u00e9l\u00e9ment, d\u00e9posez-le sur la partie statique de votre site personnel, et faites-y r\u00e9f\u00e9rence de la m\u00eame fa\u00e7on. P par exemple, si l&rsquo;utilisateur <i>Pr\u00e9nom Nom<\/i> met le logo MyTeam.png dans le sous-r\u00e9pertoire Logos de son espace statique, il y fera r\u00e9f\u00e9rence par :<\/p>\n<pre>\r\n&lt;a href=&quot;http:\/\/myteam.loria.fr\/&quot;&gt;&lt;img src=&quot;\/PNom\/files\/Logos\/MyTeam.png&quot; alt=&quot;logo de mon \u00e9quipe&quot; \/&gt;&lt;\/a&gt;\r\n<\/pre>\n<p><img decoding=\"async\" class=\"alignnone \u00a0wp-image-249\" src=\"\/infodoc\/files\/img\/DOCLOGO\/ch-logos-03.png\" alt=\"logos\" \/>\n<\/li>\n<li>Voir dans le <a href=\"\/infodoc\/tutoriel\/lecon6\/\">Tutoriel6<\/a> comment ajouter ou surcharger les \u00e9l\u00e9ments de style.<\/li>\n<li>Quelques propositions :\n<ol>\n<li>Ajouter le logo de mon \u00e9quipe\/service :\n<ul>\n<li>\u00e0 la racine de votre espace statique, cr\u00e9ez un r\u00e9pertoire \u00ab\u00a0logos\u00a0\u00bb, et d\u00e9posez-y le logo myteam.png de votre \u00e9quipe :<br \/>\n<img decoding=\"async\" class=\"alignnone \u00a0wp-image-249\" src=\"\/infodoc\/files\/img\/DOCLOGO\/ch-logos-21.png\" alt=\"logos\" \/>\n<\/li>\n<li>\u00e9ditez le code du Text-Block <b>Logo<\/b> (en mode &quot;<i>Texte<\/i>&quot;), et ins\u00e9rez \u00e0 la place qui vous convient la ligne suivante :\n<pre>\r\n&lt;a href=\"http:\/\/myteam.loria.fr\/\"&gt;&lt;img class=\"alignnone\" src=\"\/TGartiser\/files\/logos\/myteam.png\" alt=\"MyTEAM\" \/&gt;&lt;\/a&gt;\r\n<\/pre>\n<\/li>\n<li>Pour \u00e9viter que la ligne de logos ne d\u00e9borde du cadre, je supprime toutes les marges autour de l&rsquo;image en rajoutant avant la liste de logos le bout de code CSS suivant :\n<pre>\r\n&lt;style&gt;\r\n.alignnone {\r\nmargin: 0 !important;\r\npadding: 0 !important;\r\n}\r\n&lt;\/style&gt;\r\n<\/pre>\n<\/li>\n<li>Et voici le bandeau r\u00e9sultat :<br \/>\n<img decoding=\"async\" class=\"alignnone \u00a0wp-image-249\" src=\"\/infodoc\/files\/img\/DOCLOGO\/ch-logos-22.png\" alt=\"logos\" \/>\n<\/li>\n<\/ul>\n<\/li>\n<li>Agrandir un logo dans le bandeau\n<ul>\n<li>comme nous l&rsquo;avons vu dans l&rsquo;exemple pr\u00e9c\u00e9dent, la taille des logos dans le bandeau est contrainte par des dimensions fix\u00e9es dans la feuille de style. Le code que vous voyez en \u00e9ditant le bandeau est en fait encadr\u00e9 dans le template par le le code suivant :\n<pre>\r\n&lt;div class=\"footer-widget-area\"&gt;\r\n  &lt;div class=\"col-sm-4 footer-widget\" role=\"complementary\"&gt;\r\n    &lt;div id=\"textblockswidget-6\" class=\"widget widget_textblockswidget\"&gt;\r\n      &lt;div class=\"text-block logo\"&gt;\r\n      &lt;p&gt;\r\n      Code du bandeau\r\n      &lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/li>\n<li>Le style sp\u00e9cifique du bandeau est <b>col-sm-4<\/b>. Il est d\u00e9fini ainsi :\n<pre>\r\n.col-sm-4 {\r\n  width: 100%;\r\n}\r\n.col-sm-4 img{\r\n  width: 16%;\r\n  margin-left: 3%;\r\n  margin-right: 3%;\r\n}\r\n.col-sm-4 p{\r\n  text-align: center;\r\n  vertical-align: middle;\r\n}\r\n<\/pre>\n<p>(remarquez bien, comme il est expliqu\u00e9 dans le Tutoriel 6, que la d\u00e9claration \u00ab\u00a0.col-sm-4 img\u00a0\u00bb signifie que tout \u00e9l\u00e9ment &lt;img&gt; <u>\u00e0 l&rsquo;int\u00e9rieur<\/u> d&rsquo;un \u00e9l\u00e9ment de classe <b>.col-sm-4<\/b> le bandeau de logos) aura les caract\u00e9ristiques ici d\u00e9finies, mais que bien entendu les images en dehors du bandeau ne sont pas affect\u00e9es.)\n<\/li>\n<li>Nous avons d\u00e9j\u00e0 annul\u00e9 l&rsquo;espace entre les logos dans le code CSS pr\u00e9c\u00e9dent, qui surchargeait la classe de style \u00ab\u00a0alignnone\u00a0\u00bb (Notez au passage l&rsquo;usage de l&rsquo;attribut &quot;<b>!important<\/b>&quot;, qui force la surcharge).<\/li>\n<li>il nous reste \u00e0 augmenter sp\u00e9cifiquement la taille du logo LORIA. Vous voyez dans les d\u00e9clarations ci-dessus qu&rsquo;une image dans le bandeau est redimensionn\u00e9e \u00e0 16% de sa taille initiale. Pour le logo LORIA, nous allons cr\u00e9er une classe d&rsquo;image (\u00ab\u00a0loria\u00a0\u00bb) sp\u00e9ciale qui redimensionne \u00e0 25% :\n<pre>\r\n.col-sm-4 img.loria{\r\n  width: 25%;\r\n  margin-left: 3%;\r\n  margin-right: 3%;\r\n}\r\n<\/pre>\n<p>Ici seule les images dans le bandeau portant la classe <b>.loria<\/b> seront redimensionn\u00e9es \u00e0 25%.\n<\/li>\n<li>Reprenons l&rsquo;\u00e9dition du Text-Block <b>Logo<\/b> dans le tableau de bord.<\/li>\n<li>Dans un premier temps, reportons la d\u00e9claration de la classe <b>.loria<\/b> \u00e0 la suite de la classe <b>.alignnone<\/b><\/li>\n<li>Puis ajoutons simplement la classe <b>.loria<\/b> \u00e0 la balise <b>&lt;img&gt;<\/b> du logo LORIA :\n<pre>\r\n&lt;a href=\"http:\/\/www.loria.fr\/\"&gt;&lt;img class=\"alignnone \u00a0wp-image-248 loria\" src=\"\/IMG\/files\/LORIA.jpg\" alt=\"LORIA LOGO\" width=\"192\" height=\"80\" \/&gt;&lt;\/a&gt;\r\n<\/pre>\n<\/li>\n<li>Le code complet du Text-Block <b>logo<\/b> est maintenant :\n<pre>\r\n&lt;style&gt;\r\n.alignnone {\r\nmargin: 0 !important;\r\npadding: 0 !important;\r\n}\r\n.col-sm-4 img.loria{\r\n  width: 25%;\r\n  margin-left: 3%;\r\n  margin-right: 3%;\r\n}\r\n&lt;\/style&gt;\r\n&lt;a href=\"http:\/\/myteam.loria.fr\/\"&gt;&lt;img class=\"alignnone\" src=\"\/TGartiser\/files\/logos\/myteam.png\" alt=\"MyTEAM\" \/&gt;&lt;\/a&gt;&lt;a href=\"http:\/\/www.loria.fr\/\"&gt;&lt;img class=\"alignnone \u00a0wp-image-248 loria\" src=\"\/IMG\/files\/LORIA.jpg\" alt=\"LORIA LOGO\" width=\"192\" height=\"80\" \/&gt;&lt;\/a&gt;&lt;a href=\"http:\/\/www.cnrs.fr\/\"&gt;&lt;img class=\"alignnone \u00a0wp-image-247\" src=\"\/IMG\/files\/CNRS.jpg\" alt=\"CNRS LOGO\" width=\"206\" height=\"86\" \/&gt;&lt;\/a&gt;&lt;a href=\"http:\/\/www.inria.fr\/\"&gt;&lt;img class=\"alignnone size-medium wp-image-217\" src=\"\/IMG\/files\/INRIA.jpg\" alt=\"INRIA CORPO RVB\" width=\"300\" height=\"125\" \/&gt;&lt;\/a&gt;&lt;a href=\"http:\/\/www.univ-lorraine.fr\/\"&gt;&lt;img class=\"alignnone \u00a0wp-image-249\" src=\"\/IMG\/files\/UL.jpg\" alt=\"Univ Lorraine LOGO\" width=\"206\" height=\"86\" \/&gt;&lt;\/a&gt;\r\n<\/pre>\n<\/li>\n<li>et voici le r\u00e9sultat, avec un logo LORIA mis en \u00e9vidence par rapport aux autres logos :\n<pre>\r\n<img decoding=\"async\" class=\"alignnone \u00a0wp-image-249\" src=\"\/infodoc\/files\/img\/DOCLOGO\/ch-logos-09.png\" alt=\"logos\" \/>\r\n<\/pre>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p style=\"margin-top: 32px;\">&nbsp;<\/p>\n<p>Dans le bandeau par d\u00e9faut, nous avons plac\u00e9 \u00e0 un m\u00eame niveau le logo du laboratoire LORIA et ceux des tutelles. Pour ceux \u00e0 qui ce choix ne conviendrait pas, nous d\u00e9crivons ci-dessous 2 m\u00e9thodes pour isoler un logo ou le mettre plus en \u00e9vidence.<\/p>\n<p><a name=\"lateral\"><\/a><\/p>\n<p style=\"margin-top: 32px;\">&nbsp;<\/p>\n<h2>Mettre un (ou plusieurs) logo(s) dans le bandeau lat\u00e9ral<\/h2>\n<ul>\n<li>Le bandeau lat\u00e9ral occupe environ 1\/3 de la largeur de la page et peut, au choix, se positionner \u00e0 gauche ou \u00e0 droite de la zone de texte principale. Il permet d&rsquo;y d\u00e9poser des \u00e9l\u00e9ments de type widgets qui attirent l&rsquo;oeil, comme la zone de recherche, le bloc \u00ab\u00a0identit\u00e9\u00a0\u00bb avec votre photo, et bien d&rsquo;autres encore. C&rsquo;est donc un emplacement de choix pour y placer le plus important des logos de vos partenaires (attention cependant : si vous avez choisi pour la plupart de vos pages un format \u00ab\u00a0full width\u00a0\u00bb -donc sans bandeau lat\u00e9ral-, ce n&rsquo;est peut-\u00eatre pas une bonne id\u00e9e ! ). Imaginons donc que vous ayez choisi de placer le logo du LORIA en bonne place dans le bandeau lat\u00e9ral. Pour cela, quelques op\u00e9rations suffisent :\n<ul>\n<li>Le widget \u00e0 utiliser typiquement sera soit <b>Texte<\/b>, soit <b>Text-Block<\/b> (la diff\u00e9rence essentielle entre les 2 \u00e9tant que le simple type <b>Texte<\/b> ne propose pas l&rsquo;\u00e9dition en WYSIWYG, ce qui n&rsquo;est vraiment pas n\u00e9cessaire ici).<\/li>\n<li>Commen\u00e7ons par supprimer le logo LORIA du text-Block <b>Logo<\/b> (barre du bas) :\n<ul>\n<li>Dans le menu gauche du Tableau de bord, cliquez sur <b>Text-Block<\/b> > <b>Logo<\/b> > <b>Modifier<\/b><\/li>\n<li><b>Coupez<\/b> le code HTML correspondant au logo LORIA :\n<pre>&lt;a href=\"http:\/\/www.loria.fr\/\"&gt;&lt;img class=\"alignnone \u00a0wp-image-248\" src=\"\/infodoc\/files\/img\/LORIA.jpg\" alt=\"LORIA LOGO\" width=\"288\" height=\"120\" \/&gt;&lt;\/a&gt;<\/pre>\n<\/li>\n<li>N&rsquo;oubliez pas d&rsquo;enregistrer la page<\/li>\n<\/ul>\n<\/li>\n<li>Allez maintenant sur <b>Apparence<\/b> > <b>Widgets<\/b>, et d\u00e9roulez dans la partie droite de la page le bloc <b><i>Barre lat\u00e9rale<\/i><\/b> (il contient au d\u00e9part 2 widgets) :\n<p><img decoding=\"async\" class=\"alignnone \u00a0wp-image-249\" src=\"\/infodoc\/files\/img\/DOCLOGO\/ch-logos-05.png\" alt=\"logos\" \/>\n<\/li>\n<li>Avec la souris, faites glisser le widget <b>Texte<\/b> sur le bloc <b>Barre lat\u00e9rale<\/b>.\n<p><img decoding=\"async\" class=\"alignnone \u00a0wp-image-249\" src=\"\/infodoc\/files\/img\/DOCLOGO\/ch-logos-06b.png\" alt=\"logos\" \/>\n<\/li>\n<li>L&rsquo;op\u00e9ration a instanci\u00e9 un nouveau widget de type Texte dans la barre lat\u00e9rale. Il vous reste \u00e0 le d\u00e9crire en compl\u00e8tant ses champs :\n<ul>\n<li>Laissez le champ <b>Titre<\/b> vide.<\/li>\n<li>Collez dans le champ <b>Contenu<\/b> le code HTML que vous venez de couper, modifiez les param\u00e8tres de taille du logo (ici pass\u00e9s \u00e0 150%), et encadrez le d&rsquo;une balise &lt;div&gt; pour centrer le contenu :<br \/>\n<img decoding=\"async\" class=\"alignnone \u00a0wp-image-249\" src=\"\/infodoc\/files\/img\/DOCLOGO\/ch-logos-04.png\" alt=\"logos\" \/>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Enregistrez le widget<\/li>\n<li>Vous avez maintenant un logo LORIA bien voyant dans la barre lat\u00e9rale :\n<p><img decoding=\"async\" class=\"alignnone \u00a0wp-image-249\" src=\"\/infodoc\/files\/img\/DOCLOGO\/ch-logos-08.png\" alt=\"logos\" \/>\n<\/li>\n<li>Vous pouvez le d\u00e9placer par rapport aux 2 autres widgets de la barre lat\u00e9rale par un simple <i>Glisser\/D\u00e9poser<\/i>.<\/li>\n<\/ul>\n<p><a name=\"entete\"><\/a><\/p>\n<p style=\"margin-top: 32px;\">&nbsp;<\/p>\n<h2>Mettre un (ou plusieurs) logo(s) dans le bandeau d&rsquo;en-t\u00eate<\/h2>\n<ul>\n<li>Le bandeau d&rsquo;en-t\u00eate du site n&rsquo;est pas un \u00ab\u00a0<i>slot<\/i>\u00a0\u00bb au sens ou nous l&rsquo;avons d\u00e9fini jusqu&rsquo;ici : vous ne pouvez pas y ins\u00e9rer \u00e0 votre guise diff\u00e9rents types d&rsquo;\u00e9l\u00e9ments de votre choix (sous forme de widget), mais son comportement et ses options sont pr\u00e9d\u00e9finis dans le th\u00e8me <b>Sparkling<\/b> (c&rsquo;est en fait un <i>template<\/i>). Il propose 2 options :\n<ul>\n<li>Par d\u00e9faut le bandeau d&rsquo;en-t\u00eate affiche le titre du site \u00e0 gauche du <b>Menu haut<\/b>. Le titre du site est fix\u00e9, au moment de la demande de cr\u00e9ation, \u00e0 un r\u00e9sultat extrait de la base du personnel et correspondant \u00e0 l&rsquo;expression \u00ab\u00a0Pr\u00e9nom NOM\u00a0\u00bb. Ce titre peut \u00eatre facilement modifi\u00e9 dans l&rsquo;interface (premier champ de la page <b>R\u00e9glages<\/b> > <b>G\u00e9n\u00e9ral<\/b>) : vous pourrez par exemple remplacer votre pr\u00e9nom par un surnom d&rsquo;usage plus courant&#8230; Enfin, vous constaterez que si le titre est long ou si vous augmentez le nombre d&rsquo;\u00e9l\u00e9ments du menu, vous obtiendrez un passage \u00e0 la ligne entre le titre et le menu.<\/li>\n<li>Vous pouvez obtenir un autre comportement si vous souhaitez ins\u00e9rer une image d&rsquo;en-t\u00eate dans le bandeau du haut de page (Option <b>En-t\u00eate<\/b> du menu <b>Apparence<\/b>) : \u00e0 ce moment, l&rsquo;image remplacera le titre et il n&rsquo;est pas possible de mettre le titre en surimpression sur l&rsquo;image.<\/li>\n<li>Les param\u00e8tres \u00e0 prendre en compte sont nombreux et peu document\u00e9s, mais vous comprendrez vite son fonctionnement apr\u00e8s quelques tatonnements !<\/li>\n<\/ul>\n<\/li>\n<li>Nous allons donc profiter de cette option pour proposer une m\u00e9thode de mise en place du logo LORIA (ou toute autre image) dans le bandeau haut de votre site.<\/li>\n<li>Quelques pr\u00e9requis :\n<ul>\n<li><b>Attention : <\/b>le fond de l&rsquo;en-t\u00eate est noir par d\u00e9faut (contrairement aux 2 slots vus plus haut qui sont blancs). Il faudra donc v\u00e9rifier les chartes des logos que vous voudrez y ins\u00e9rer pour savoir si elles autorisent de les placer sur fond noir et dans quelles conditions (certains logos ont des versions sp\u00e9ciales pour fond noir). Sinon, il faudra modifier la couleur de fond de l&rsquo;en-t\u00eate (voir Tutoriel6). Pour le logo LORIA, la directive est claire : il faut utiliser le logo blanc et non le logo aux couleurs pastel.<\/li>\n<li>Vous allez cr\u00e9er une image \u00e0 ins\u00e9rer dans l&rsquo;en-t\u00eate. <b>Si l&rsquo;image fait plus de 300 pixels de large et 76 pixels de haut<\/b>, elle forcera le passage \u00e0 la ligne pour le menu. Sinon, elle se placera \u00e0 gauche du menu (comme le champ titre).<\/li>\n<li>La plus grande largeur pr\u00e9vue pour la page est de 1200 pixels. Si vous voulez construire une image de plus de 300 pixels (largeur \u00e0 partir de laquelle le \u00ab\u00a0<b>Menu haut<\/b>\u00a0\u00bb est syst\u00e9matiquement renvoy\u00e9 \u00e0 la ligne apr\u00e8s l&rsquo;image), il est conseill\u00e9 d&rsquo;aller directement jusqu&rsquo;\u00e0 1200 pixels.<\/li>\n<li>Dans notre exemple, nous allons cr\u00e9er une image sur fond noir et utilisant la taille propos\u00e9e par d\u00e9faut pour l&rsquo;image d&rsquo;ent\u00eate : 300&#215;76 pixels, de mani\u00e8re \u00e0 conserver le menu au m\u00eame niveau et avoir un en-t\u00eate de faible hauteur. Nous voulons en plus ajouter le Pr\u00e9nom et le Nom directement dans l&rsquo;image, puisque la mention du titre disparaitra. Le logo LORIA \u00e0 utiliser dans ce petit format sera donc le logo blanc abr\u00e9g\u00e9.<\/li>\n<li>Vous pouvez utiliser n&rsquo;importe quel outil de dessin sur votre ordinateur pour cr\u00e9er cette image. Voici le r\u00e9sultat :<br \/>\n<img decoding=\"async\" class=\"alignnone\u00a0wp-image-249\" src=\"\/infodoc\/files\/img\/DOCLOGO\/logo-bandeau.png\" alt=\"logo bandeau\" \/>\n<\/li>\n<\/ul>\n<\/li>\n<li>Nous allons maintenant ins\u00e9rer l&rsquo;image ainsi pr\u00e9par\u00e9e dans le bandeau d&rsquo;en-t\u00eate.<\/li>\n<li>Sur le Tableau de bord, allez sur <b>Apparence<\/b> &gt; <b>En-t\u00eate<\/b><br \/>\n<img decoding=\"async\" class=\"alignnone\u00a0wp-image-249\" src=\"\/infodoc\/files\/img\/DOCLOGO\/ch-logos-10.png\" alt=\"logo bandeau\" \/>\n<\/li>\n<li>Cliquez sur <b>Envoyer des fichiers<\/b>, puis <b>Choisir des fichiers<\/b> : allez maintenant s\u00e9lectionner l&rsquo;image que vous venez de cr\u00e9er, et uploadez-la sur le site.<br \/>\n<img decoding=\"async\" class=\"alignnone\u00a0wp-image-249\" src=\"\/infodoc\/files\/img\/DOCLOGO\/ch-logos-11.png\" alt=\"logo bandeau\" \/>\n<\/li>\n<li>S\u00e9lectionnez l&rsquo;image et cliquez sur <b>S\u00e9lectionner et rogner<\/b>, puis <b>Pas de recadrage<\/b><br \/>\n<img decoding=\"async\" class=\"alignnone\u00a0wp-image-249\" src=\"\/infodoc\/files\/img\/DOCLOGO\/ch-logos-12.png\" alt=\"logo bandeau\" \/>\n<\/li>\n<li>Revenu sur la page de l&rsquo;image d&rsquo;en-t\u00eate, vous voyez une pr\u00e9visualition du r\u00e9sultat : il faut encore cliquer sur <b>Enregistrer et publier<\/b> pour que votre nouveau bandeau soit en ligne !<br \/>\n<img decoding=\"async\" class=\"alignnone\u00a0wp-image-249\" src=\"\/infodoc\/files\/img\/DOCLOGO\/ch-logos-13.png\" alt=\"logo bandeau\" \/>\n<\/li>\n<li>Et voici le r\u00e9sultat :<br \/>\n<img decoding=\"async\" class=\"alignnone\u00a0wp-image-249\" src=\"\/infodoc\/files\/img\/DOCLOGO\/ch-logos-14.png\" alt=\"logo bandeau\" \/>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<ol>\n<li><a href=\"#preambule\">Avant de se lancer&#8230;<\/a><\/li>\n<li><a href=\"#logos\">O\u00f9 trouver les logos institutionnels ?<\/a><\/li>\n<li><a href=\"#standard\">Modifier la disposition standard<\/a><\/li>\n<li><a href=\"#lateral\">Mettre un logo dans le bandeau lat\u00e9ral<\/a><\/li>\n<li><a href=\"#entete\">Mettre un logo dans le bandeau d&rsquo;en-t\u00eate<\/a><\/li>\n<\/ol>\n<p><a name=\"preambule\"><\/a><\/p>\n<p style=\"margin-top: 32px;\">&nbsp;<\/p>\n<p>Avant de se lancer&#8230;<\/p>\n<p>Dans cette rubrique nous vous proposons 3 types de modifications pour mettre en valeur les logos des organismes dont vous d\u00e9pendez, et que vous voudrez peut-\u00eatre diff\u00e9rencier par rapport au bandeau standard propos\u00e9 dans le mod\u00e8le du site WordPress.<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1739","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/members.loria.fr\/infodoc\/wp-json\/wp\/v2\/pages\/1739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/members.loria.fr\/infodoc\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/members.loria.fr\/infodoc\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/members.loria.fr\/infodoc\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/members.loria.fr\/infodoc\/wp-json\/wp\/v2\/comments?post=1739"}],"version-history":[{"count":78,"href":"https:\/\/members.loria.fr\/infodoc\/wp-json\/wp\/v2\/pages\/1739\/revisions"}],"predecessor-version":[{"id":1832,"href":"https:\/\/members.loria.fr\/infodoc\/wp-json\/wp\/v2\/pages\/1739\/revisions\/1832"}],"wp:attachment":[{"href":"https:\/\/members.loria.fr\/infodoc\/wp-json\/wp\/v2\/media?parent=1739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}