[Résolu] Descendre la position du menu utilisateur de quelques pixels

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Submitted by vince45 on

Bonjour,

J'ai inséré une image (logo) dans l'entête de mon thème Bartik.
Elle me convient comme tel et je ne souhaite pas la modifier.
Mon problème est que le menu utilisateur (là où il est écrit "Mon compte" et "Se déconnecter") se retrouve à cheval entre le fond de l'entête et mon logo, ce qui n'est pas très joli.
Je souhaite garder le menu utilisateur à cet endroit.
Donc j'aimerais descendre le menu de quelques pixels afin qu'il ne soit plus à cheval.
Pourriez-vous me dire où faire cela et comment svp ?

Merci beaucoup !

Vince

Forum : 
Support général
Version de Drupal : 
7.x
Tags : 
position menu bartik

Soumis par vincent59 le 12 Octobre, 2012 - 14:46

Bonjour,

tout cela doit se faire en CSS dans une des feuilles de style du thème.

Le plus simple est d'inspecter la page avec Firebug ou les outils de développeur inclus dans Firefox / Chrome, et d'identifier la DIV qui entoure le menu, puis modifier les paramètres dans la feuille de style.

Ne pas oublier de nettoyer le cache des thèmes pour que ça prenne effet

Soumis par vince45 le 12 Octobre, 2012 - 17:57

Très intéressant firebug !

Donc, j'ai une liste de 4 css utilisés d'après firebug :
@import "http://fablab.tech-orleans.fr/modules/system/system.base.css?mbc46q";
@import "http://fablab.tech-orleans.fr/modules/system/system.menus.css?mbc46q";
@import "http://fablab.tech-orleans.fr/modules/system/system.messages.css?mbc46q";
@import "http://fablab.tech-orleans.fr/modules/system/system.theme.css?mbc46q";

Et l'élément qui m'intéresse est là dans l"ensemble du code de la page :

<

div id="page-wrapper">

<

div id="page">

<

div id="header" class="with-secondary-menu">

<

div class="section clearfix">

<

div id="name-and-slogan" class="element-invisible">

<

div id="main-menu" class="navigation">

<

div id="secondary-menu" class="navigation">

Menu secondaire

<

ul id="secondary-menu-links" class="links inline clearfix">

  • Mon compte

    Donc j'ai cherché dans ces 4 css qque chose appelé secondary-menu ou navigation,
    mais il n'y a rien de tel dans ces 4 css...

    Je me trompe de voie ?

    • Soumis par Michel-Ange le 6 Novembre, 2012 - 16:43

    Vous pouvez intégrer le code dans celle-ci par exemple : /themes/bartik/css/layout.css
    Sinon vous pouvez voir dans l'écran de droite de firebug quelle est la css utilisée lorsque vous pointez le bloc user.
    Mieux vaut centraliser les changements que vous faites sur une seule feuille plutôt que de s'éparpiller :)

    Soumis par vince45 le 6 Novembre, 2012 - 17:21

    Merci,

    Voici ce qu'il y a dans mon layout.css de Bartik (Pas de signe de " block-user-1") :

    /* ---------- Basic Layout Styles ----------- */

    html,
    body,

    page {

    height: 100%;
    }

    page-wrapper {

    min-height: 100%;
    min-width: 960px;
    }

    header div.section,

    featured div.section,

    messages div.section,

    main,

    triptych,

    footer-columns,

    footer {

    width: 960px;
    margin-left: auto;
    margin-right: auto;
    }

    header div.section {

    position: relative;
    }
    .region-header {
    float: right; /* LTR */
    margin: 0 5px 10px;
    }
    .with-secondary-menu .region-header {
    margin-top: 3em;
    }
    .without-secondary-menu .region-header {
    margin-top: 15px;
    }

    secondary-menu {

    position: absolute;
    right: 0; /* LTR */
    top: 0;
    width: 480px;
    }

    content,

    sidebar-first,

    sidebar-second,

    .region-triptych-first,
    .region-triptych-middle,
    .region-triptych-last,
    .region-footer-firstcolumn,
    .region-footer-secondcolumn,
    .region-footer-thirdcolumn,
    .region-footer-fourthcolumn {
    display: inline;
    float: left; /* LTR */
    position: relative;
    }
    .one-sidebar #content {
    width: 720px;
    }
    .two-sidebars #content {
    width: 480px;
    }
    .no-sidebars #content {
    width: 960px;
    float: none;
    }

    sidebar-first,

    sidebar-second {

    width: 240px;
    }

    main-wrapper {

    min-height: 300px;
    }

    content .section,

    .sidebar .section {
    padding: 0 15px;
    }

    breadcrumb {

    margin: 0 15px;
    }
    .region-triptych-first,
    .region-triptych-middle,
    .region-triptych-last {
    margin: 20px 20px 30px;
    width: 280px;
    }

    footer-wrapper {

    padding: 35px 5px 30px;
    }
    .region-footer-firstcolumn,
    .region-footer-secondcolumn,
    .region-footer-thirdcolumn,
    .region-footer-fourthcolumn {
    padding: 0 10px;
    width: 220px;
    }

    footer {

    width: 940px;
    min-width: 920px;
    }

    Avec Firebug je pense avoir peut être identifié que le type / la div serait "secondary menu" puisque j'ai cela :

    <

    div id="secondary-menu" class="navigation">

    Menu secondaire

    </div

    Reste à savoir quoi faire et dans quelle css... (désolé je ne suis vraiment pas doué en css et en structure de Drupal)

    Vince

    Soumis par Michel-Ange le 6 Novembre, 2012 - 17:34

    Non mais vous pouvez écraser le style du block-user dans cette feuille de style.
    Copiez / collez ce code en haut de la feuille de style :

    /* ————— Modifications Vince —————- */

    #block-user-1{margin-top:20px;}

    Ensuite videz le cache du navigateur et actualisez votre page.

    Par contre j'ai dit "#block-user-1" parce qu'il s'agit souvent de cet id par défaut, mais il faudrait vérifier avec firebug si l'id n'est pas différent avec Bartik.

    Soumis par vince45 le 6 Novembre, 2012 - 17:38

    J'ai appliqué la modif mais cela n'a rien changé (après avoir vidé le cache).
    Mais je n'ai pas compris pourquoi je devais faire cela... (ce qui est frustrant).
    Comment puis-je utiliser firebug pour voir s'il s'appelle bien #block-user-1 ?

    Merci

    Vince

    Soumis par Michel-Ange le 6 Novembre, 2012 - 17:44

    Il vous suffit de faire clic droit sur le bloc user et "Inspect element with Firebug", à ce moment là vous verrez dans le code à quel id ou classe correspond votre bloc, la / les feuilles de style dont il dépend sont affichées dans l'écran de droite de Firebug.

    Soumis par vince45 le 6 Novembre, 2012 - 17:50

    C'est bien ce que j'ai fait, et c'est pourquoi je vous ai mis en bas d'un précédent message (après le contenu de mon fichier layout.css) ce que j'avais identifié.

    Voici ce que cela me dit :

    Menu secondaire

    Quant à la partie à droit (css), je n'arrive pas à faire de copier coller.
    Je crois comprendre que cela fait référence à "secondary-menu_links"

    Soumis par Michel-Ange le 6 Novembre, 2012 - 18:07

    Oui vous pouvez également modifier le style de #secondary-menu_links il s'agit de l'élément en dessous de #secondary-menu.

    Nous allons faire le plus simple possible :)
    Allez dans /themes/Bartik/css/style.css

    Retrouvez ce bout de code dans la feuille de style :

    #secondary-menu-links {
      float: right; /* LTR */
      font-size: 0.929em;
      margin: 10px 10px 0;
    }

    Modifiez cette partie là : margin:10px 10px 0 , par exemple 30px au lieu de 10px pour la première valeur.
    Une marge se construit comme ceci : margin:haut droite bas gauche;

    Soumis par vince45 le 6 Novembre, 2012 - 20:47

    ça marche parfaitement bien !

    Merci beaucoup !

    Pour comprendre mieux tout de même : comment savoir dans quelle css faire des modif ?
    Plus haut tu disais qu'il ne fallait pas en faire partout et conseillais le fichier layout et non style...

    Vince

    Soumis par Michel-Ange le 6 Novembre, 2012 - 21:13

    Parfait :)
    Concernant le css en fait, pas mal de thèmes utilisent des feuilles de style dans tous les sens, par exemple Bartik en utilise 10...

    Tu seras peut-être amené à créer ton propre thème dans l'avenir, il faut prendre l'habitude de réduire le plus possible le nombre de requêtes, donc une seule feuille de style bien faite suffit souvent, à part pour les sites très complexes, mais généralement j'ai une seule feuille de style sur mes sites.

    Donc je te disais ça pour que tu prennes l'habitude de centraliser toutes tes modifications sur une seule feuille de style, par exemple layout.css pour ton thème Bartik, tu peux également choisir style.css. De plus, si tu éparpilles tes modifications sur 10 feuilles de style, ça va être compliqué de retrouver ce que tu as modifié et où !

    Si tu veux savoir exactement quelle est la feuille de style utilisée pour un bloc, tu peux voir ça avec firebug en cliquant sur ton élément :
    http://img839.imageshack.us/img839/3279/firebug.jpg