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
Bonjour, tout cela doit se
Permalien 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
Très intéressant
Permalien 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">
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 ?
Hello :-) Est-ce que les
Permalien Soumis par vince45 le 3 Novembre, 2012 - 09:48
Hello :-)
Est-ce que les éléments que je t'ai donnés sont insuffisants ?
Merci,
Vince
Bonjour, normalement le menu
Permalien Soumis par Michel-Ange le 6 Novembre, 2012 - 14:54
Bonjour, normalement le menu user devrait avoir un id type : block-user-1
Il suffirait donc d'écrire quelque chose comme ça dans la feuille de style :
#block-user-1{margin-top:20px;}
Bonjour, Merci pour cette
Permalien Soumis par vince45 le 6 Novembre, 2012 - 16:33
Bonjour,
Merci pour cette réponse. Ceci étant dit, où puis-je trouver la CSS correspondante svp ?
Merci,
Vince
Vous pouvez intégrer le code
Permalien 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 :)
Merci, Voici ce qu’il y a
Permalien 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
Non mais vous pouvez écraser
Permalien 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.
J’ai appliqué la modif mais
Permalien 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
Il vous suffit de faire clic
Permalien 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.
C’est bien ce que j’ai fait,
Permalien 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"
Oui vous pouvez également
Permalien 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;
ça marche parfaitement
Permalien 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
Parfait :) Concernant le css
Permalien 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
Merci pour ces explications
Permalien Soumis par vince45 le 6 Novembre, 2012 - 21:19
Merci pour ces explications très claires.
Je suis également plus partisan d'une seule feuille de style bien agencée et annotée.
Merci encore en tout cas ! :-)
edité
Permalien Soumis par Michel-Ange le 6 Novembre, 2012 - 18:05
edité