Centrer le logo ("header")

Centrer le logo ("header")

par F. Valembois,
Nombre de réponses : 13

Bonjour à tous

après quelques semaines d'observation, je me suis enfin lancée dans l'installation de Moodle que je trouve extraordinaire... et les étudiants sont ravis des premiers essais.

Je tâche de peaufiner la présentation. J'utilise le thème "formal white" que j'ai personnalisé, mais je n'arrive pas à trouver comment centrer le logo (page d'accueil + header de toutes les pages). Est-ce que quelqu'un sait comment faire?

(j'ai essayé d'ajouter une ligne dans le fochier "layout.css", mais sans résultat...

Merci d'avance sourire

Moyenne des évaluations  -
En réponse à F. Valembois

Re: Centrer le logo ("header")

par Joseph Rézeau,
Avatar Développeurs Avatar Développeurs de plugins Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Traducteurs
Pas facile, parce que le logo se trouve dans une classe h1.headermain, qui a l'attribut float:left tandis que la division .logininfo est en float:right. Si on enlève le float:left du logo, il s'affiche bien au milieu, mais du coup la division .logininfo est rejetée au -dessous, ce qui n'est pas du meilleur effet (voir image). Franchement je ne pense pas que ce soit une bonne idée de mettre le logo en position centrée. Je trouve que visuellement son accrochage à gauche est plus satisfaisant.
Joseph
Annexe image00.jpg
En réponse à Joseph Rézeau

Re: Centrer le logo ("header")

par F. Valembois,

Bonjour

merci beaucoup pour cette réponse rapide et précise!

j'ai oublié de signaler que j'ai changé le logo sourire
le rendu n'est pas le même du coup...

par  contre, je ne trouve pas les réglages dont tu parles : "h1.headermain  float:left " : dans quelle page est-ce? je ne vois pas cette ligne dans mon code (page layout)

(ps je ne sais pas s'il est de bon ton de donner l'adresse du site en question??

dans le doute : www.tchin-tchine.com/moodle

merci encore!! bonne soirée

En réponse à F. Valembois

Re: Centrer le logo ("header")

par Anne Durand,
Bonjour
En utilisant l'extension firebug de firefox, j'ai pu "modifier" votre feuille de style et obtenir le résultat ci-joint.
Sur ma plateforme, j'ai préféré imposé une largeur fixe de 1000px et tout centrer (notre logo a une largeur de 1000px donc se centre tout seul).

En passant, je vous recommande aussi FastStone Capture (la version 5.3 est gratuite, on la trouve par exemple sur le site de Gratilog) : elle permet d'expliquer clairement de manière visuelle et non textuelle un problème que l'on rencontre ou une solution à apporter.

Bonne journée
@nne

PS : j'ai résolu tous mes problèmes de menu SCORM (largeur, le +/- qui se déplie, l'icône SCORM avant le +/-) et d'ascenseur en double dans l'iframe (utilisation d'un javascript qui ralentit l'affichage mais qui est bien plus pratique et plus joli). Donc, si vous avez besoin...
Voir le module libre d'accès sur les boucles SPIP sur la plateforme http://a2l.projet-plume.org/moodle/
Annexe moodle.png
En réponse à Anne Durand

Re: Centrer le logo ("header")

par F. Valembois,

Merci beaucoup pour ces explications!!

malheureusement, dans ma version 1.7 de Moodle, je n'ai pas de page "syle-layout (mais une page CSS layout) et du coup je ne trouve pas le réglage dont vous parlez (je ne vois pas où ma feuille de style peut être redondante).

Je travaille avec Dreamweaver...

je continue à chercher sourire

En réponse à F. Valembois

Re: Centrer le logo ("header")

par Joseph Rézeau,
Avatar Développeurs Avatar Développeurs de plugins Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Traducteurs
Fanny,
Sur ton site http://www.tchin-tchine.com/moodle/ tu utilises le thème visuel formal_white. Dans le fichier formal_white/fw_fonts.css, en remplaçant:
.headermain, h1.headermain {
float:left;
margin:0%;
padding:0%;
border-width: 0px;
}
par
.headermain, h1.headermain {
float:none;
margin:0%;
padding:0%;
border-width: 0px;
text-align:center;
background-color:white; // pour supprimer les bandeaux de couleur sur les côtés
}
le logo sera centré, mais la couleur de fond apparaitra de chaque côté et, comme je l'ai déjà dit, le bloc du login sera décalé vers le bas. Est-ce ce que tu veux?
Joseph
Annexe image00.jpg
En réponse à Joseph Rézeau

Re: Centrer le logo ("header")

par F. Valembois,

Génial! ça marche

(il faut modifier le fichier css-layout et non fonts)

merci merci sourire

En réponse à F. Valembois

Re: Centrer le logo ("header")

par F. Valembois,

Encore une question... comment avez-vous fait pour déplacer l'identification / connexion dans la colonne de droite??

merci sourire

En réponse à F. Valembois

Re: Centrer le logo ("header")

par Joseph Rézeau,
Avatar Développeurs Avatar Développeurs de plugins Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Traducteurs
Fanny > il faut modifier le fichier css-layout et non fonts

Il vaut mieux ne jamais toucher aux fichiers du thème standard. Je recommande plutôt d'éditer le fichier formal_white/fw_fonts.css, puisque ton site utilise ce thème.

Je n'ai rien fait pour déplacer le bloc login/identification/connexion. Il reste à droite, mais il descend plus bas.

Joseph

En réponse à Joseph Rézeau

Re: Centrer le logo ("header")

par Anne Durand,
Bonsoir
Je suis d'accord avec l'idée qu'il est déconseillé, disons même qu'il faut toujours se l'interdire quelque soit le logiciel, de modifier le thème standard. Pour Moodle, depuis le répertoire moodle/theme, j'ai recopié le répertoire du thème qui se rapprochait le plus du thème qui me plaisait, je l'ai appelé a2L, du nom de mon projet . Dans le menu, admin/thèmes/sélecteur de thèmes, le thème a2L apparaît au même titre qu'un autre. Je peux en modifier facilement tous les fichiers et tout sera conservé à la prochaine mise à jour.
@nne
En réponse à Anne Durand

Re: Centrer le logo ("header")

par F. Valembois,

Je vous remercie pour vos conseils, je vais faire une copie de mon thème et restaurer les fichiers d'origine.

En réponse à F. Valembois

Re: Centrer le logo ("header")

par Daniel Méthot,
Avatar Moodleurs particulièrement utiles
Bonjour,

Tout cela est très intéressant et je fais partie de ceux qui aimeraient bien pouvoir personnaliser sensiblement une plateforme Moodle.
Je crois me souvenir du site de Caroline Brassard au québec où l'on était accueilli par une secrétaire virtuelle ainsi que de nombreux autres sites très bien conçus.
Cela nécessite-t-il une formation complexe pour un non informaticien ?
Peux-t-on envisager de le faire au prochain Moodlemoot ?
Quelqu'un va-t-il nous proposer une formation en ligne, même payante !

Daniel

En réponse à Daniel Méthot

Re: Centrer le logo ("header")

par Valery Fremaux,

Daniel,

Tout dépends de ce que tu entends par "personnaliser". Implanter des écrans supplémentaires ou intermédiaires peut nécessiter une compétence complexe en programmation TIC : 

  • Connaissance du HTML
  • Connaissance du PHP
  • Connaissances bases de données et en modélisation (Merise, UML)
  • Connaissances en réseau

Autant dire, développer une compétence sur plusieurs années.

Simplement agir sur les feuilles de style pour modifier une couleur ou une image de fond (ce qui peut déjà faire beaucoup sur l'apparence) ne nécessite que deux compétences bien identifiées :

  • Savoir reprérer les éléments sur la page de Moodle dans le navigateur (là il existe quelques plugins du type DeveloperBar pour IE qui ont un explorateur de DOM pas trop mal fichu)
  • Connaître correctement le langage de feuilles de styles CSS.

C'est plus facile pour un non informaticien car il s'agit de compétences "descriptives". Par contre, une bonne représentation mentale de la notion de cascade et de surcharge (ce qui induit une compréhension des structures d'arbres et du concept de "Récursion") serait nécessaire. Tout cela, appris pragmatiquement "sans le dire". Difficile pour tout maîtriser, mais cela reste possible.   

En réponse à Joseph Rézeau

Re: Centrer le logo ("header")

par Valery Fremaux,

Pour replacer le bloc de connexion en haut, j'utilise les règles suivantes ajoutée à mon fichier fw_layout.css :

DIV.headermenu {
 position : absolute;
 top : 3px;
 right : 10px ;
}

DIV.innerheadermenu {
 position : absolute;
 top : 30px;
 right : 10px ;
}

J'ai donc légèrement du modifier mon header.html ainsi :

    <?php print_container_start(true, '', 'header-home'); ?>
        <div><img alt='Bio-info on Moodle' src='<?php echo $CFG->httpsthemewww .'/'. current_theme() ?>/banniere_bioinfo.jpg' /></div>
        <div class="headermenu"><?php echo $menu ?></div>
    <?php print_container_end(); ?>
<?php } else if ($heading) {  // This is what gets printed on any other page with a heading
?>
    <?php print_container_start(true, '', 'header'); ?>
        <div><img alt='Bio-info on Moodle' src='<?php echo $CFG->httpsthemewww .'/'. current_theme() ?>/banniere_bioinfo_small.jpg' /></div>
        <!-- h1 class="headermain"><?php echo $heading ?></h1 -->
        <div class="innerheadermenu"><?php echo $menu ?></div>
    <?php print_container_end(); ?>

pour différencier le cas de la home avec le cas d'une page intérieure.

Voir le résultat sur http://www.bio-info.fr