Modifier la couleur de fond de l'onglet (menu)

[mademoisellepolish]

Bonjour à tous!

 

Je suis toute nouvelle dans la création de mon site mais j'ai deux petits problèmes pour continuer dans la modification de mon thème:

 

1) allonger la barre de menu horizontal

 

 

J'ai donc réaliser ma barre de menu mais je souhaiterai que la partie de gauche soit également rose. Concrètement je veux que la barre de menu soit visible sur toute la largeur de page.

 

1) modifier la couleur de fond de l'onglet

 

J'ai réussi à modifier la couleur de fond de la barre horizontal du menu (rose), ainsi que de l'onglet (au pointeur il devient blanc) mais pas la couleur de base (qui est noir légèrement transparente) pour les sous catégories.

 

 

Savez-vous où puis-je modifier cette couleur noir/transparente?

 

J'ai déjà été dans le css du module "superfished-modified" mais j'arrive pas à mettre la main dessus!

 

 

Je vous remercie d'avance pour vos réponses!

 

 

[Acuao]

Bonjour,

 

C'est assez peu clair (c'est probablement pourquoi personne n'a répondu jusqu'à présent)

 

Pourriez vous nous donner un peu plus d’éléments ou une adresse, que l'on puisse consulter directement la page pour mieux pouvoir vous aiguiller, parce que la c'est un peu compliqué de voir de quoi il en retourne tant que nous ne pouvons pas jeter un coup d'oeil au code...

 

de plus les screenshots ne sont pas très parlants... 

[mademoisellepolish]

Bonjour,

 

C'est assez peu clair (c'est probablement pourquoi personne n'a répondu jusqu'à présent)

 

Pourriez vous nous donner un peu plus d’éléments ou une adresse, que l'on puisse consulter directement la page pour mieux pouvoir vous aiguiller, parce que la c'est un peu compliqué de voir de quoi il en retourne tant que nous ne pouvons pas jeter un coup d'oeil au code...

 

de plus les screenshots ne sont pas très parlants... 

 

Bonjour Acuao.

 

Je vous remercie pour votre retour effectivement ce n'est pas très parlant.

 

J'ai réalisé un printscreen pour être plus claire:

 

1) J'aimerai que la barre d'onglet soit également rose dans l'espace vide que j'ai encadrée sans pour autant que le premier onglet  maquillage ne bouge de position. Donc en gros, que la barre d'onglet prenne toute la largeur du site. 

 

2) Le fond coloré de l'onglet visage est gris/noir et j'aimerai donc changer la couleur mais je n'arrive pas à trouver le code css s'y rapportant dans le module "superfished-modified".

 

 

 

Merci d'avance pour votre aide!

[Acuao]

Pour la partie 1, c'est assez difficile de voir comment faire sans voir de quelle manière est organisée le code (peut etre que si vous nous disiez de quel thème vous êtes partie on pourrait vous aider...)

 

 

concernant la partie 2, vous pouvez firebug  (plugin de firefox) pour cibler l'élément et voir quelles règles/propriétés CSS lui sont appliquées (firebug indique également le fichier et la ligne concernée.)

[mademoisellepolish]

Pour la partie 1, c'est assez difficile de voir comment faire sans voir de quelle manière est organisée le code (peut etre que si vous nous disiez de quel thème vous êtes partie on pourrait vous aider...)

 

 

concernant la partie 2, vous pouvez firebug  (plugin de firefox) pour cibler l'élément et voir quelles règles/propriétés CSS lui sont appliquées (firebug indique également le fichier et la ligne concernée.)

Bonjour Acuao,

 

Il s'agit du thème par défaut que j'ai modifié au fur et à mesure selon mes envies. Je ne sais pas s'il est serait possible de rajouter le code nécessaire css dans le body ou superfish modified (barre de menu).

 

Soit je m'amuse à faire une ligne horizontal de la même épaisseur, même couleur que celle que j'ai déjà et la superposer afin de donner une impression de continuité à la barre de menu, soit je dois modifier directement le code du menu.

 

Pour ce qui est de la partie 2, effectivement j'avais déjà "inspecter l'élément" que propose google chrome (même principe de firebug) mais je ne vois pas où retrouver cette couleur grise:

 

/*** ESSENTIAL STYLES ***/

.sf-contener {

clear: both;

}

.sf-right {

  margin-right: 14px;

  float: right;

  width: 7px;

}

.sf-menu, .sf-menu * {

padding: 0;

list-style: none;

}

.sf-menu {

margin: 160px -0px;

padding:5px;

width:1272px;/* 980 */

background: #FFDFDF;

;

} 

 

.sf-menu ul {

position: absolute;

top: -999em;

width: 10em; /* left offset of submenus need to match (see below) */

}

.sf-menu ul li {

width: 100%;

}

.sf-menu li:hover {

visibility: inherit; /* fixes IE7 'sticky bug' */

}

.sf-menu li {

float: left;

position: relative;

}

.sf-menu a {

display: block;

position: relative;

color:              #fff;

text-shadow:0 0px 0 #333;

}

.sf-menu li:hover ul,

.sf-menu li.sfHover ul {

left: 0;

top: 34px; /* match top ul list item height */

z-index: 99;

width:auto

}

ul.sf-menu li:hover li ul,

ul.sf-menu li.sfHover li ul {

top: -999em;

}

ul.sf-menu li li:hover ul,

ul.sf-menu li li.sfHover ul {

left: 200px; /* match ul width */

top: 0;

}

ul.sf-menu li li:hover li ul,

ul.sf-menu li li.sfHover li ul {

top: -999em;

}

ul.sf-menu li li li:hover ul,

ul.sf-menu li li li.sfHover ul {

left: 200px; /* match ul width */

top: 0;

}

 

/*** DEMO SKIN ***/

.sf-menu {

float: left;

margin-bottom: 1em;

}

.sf-menu a {

display:block;

margin-right:2px;

padding: 0 22px 0 20px;

line-height:50px;

border: 0;

text-decoration:none;

}

.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/

color: #000000 ;

font-size: 18px ;

font-family: Tw Cen MT;

white-space:nowrap;

}

.sf-menu li li {

background: rgba(113, 113, 113, 0.9);

}

.sf-menu li li li {

background: rgba(113, 113, 113, 0.9);

}

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

  background: #FEFEFE;

}

.sf-menu ul li:hover, .sf-menu ul li.sfHover,

.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {

background: #FEFEFE;

outline: 0;

}

/*** arrows **/

.sf-menu a.sf-with-ul {

padding-right: 2.25em;

min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */

}

.sf-sub-indicator {

position: absolute;

display: block;

right: 10px;

top: 1.05em; /* IE6 only */

width: 10px;

height: 10px;

text-indent: -999em;

overflow: hidden;

background: url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */

}

a > .sf-sub-indicator {  /* give all except IE6 the correct values */

top: 11px;

background-position: 0 -100px; /* use translucent arrow for modern browsers*/

}

/* apply hovers to modern browsers */

a:focus > .sf-sub-indicator,

a:hover > .sf-sub-indicator,

a:active > .sf-sub-indicator,

li:hover > a > .sf-sub-indicator,

li.sfHover > a > .sf-sub-indicator {

background-position: -10px -100px; /* arrow hovers for modern browsers*/

}

 

/* point right for anchors in subs */

.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }

.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }

/* apply hovers to modern browsers */

.sf-menu ul a:focus > .sf-sub-indicator,

.sf-menu ul a:hover > .sf-sub-indicator,

.sf-menu ul a:active > .sf-sub-indicator,

.sf-menu ul li:hover > a > .sf-sub-indicator,

.sf-menu ul li.sfHover > a > .sf-sub-indicator {

background-position: -10px 0; /* arrow hovers for modern browsers*/

}

 

/*** shadows for all but IE6 ***/

.sf-shadow ul {

background: url('../img/shadow.png') no-repeat bottom right;

padding: 0 8px 9px 0;

-moz-border-bottom-left-radius: 17px;

-moz-border-top-right-radius: 17px;

-webkit-border-top-right-radius: 17px;

-webkit-border-bottom-left-radius: 17px;

}

.sf-shadow ul.sf-shadow-off {

background: transparent;

}

li.sf-search {

  background: inherit;

  float: right;

  line-height: 25px;

}

li.sf-search input {

  -moz-border-radius: 0 5px 5px 0;

  padding: 3px 0;

  padding-left: 20px;

  margin: 6px 6px 0 0;

  background: #fff url('../img/search.gif') no-repeat left center;

  border:1px solid #777

}

 

/* hack IE7 */

.sf-menu a, .sf-menu a:visited {height:34px !IE;}

.sf-menu li li {

width:200px;

background:#FFDFDF  !IE;

}

 

 

Merci encore pour ton aide!

[Acuao]

.sf-menu li li {
background: rgba(113, 113, 113, 0.9);
}
.sf-menu li li li {
background: rgba(113, 113, 113, 0.9);
}

Ne serai-ce pas cela? ça semble correspondre en terme de couleurs et type de règle

 

 

sur le thème par défaut, tout est contenu dans une div #page qui contient les divs #header, #conlumns et #footer

<body id="index" class=" ">
    <div id="page" class="container_9 clearfix">
        <div id="header" class="grid_9 alpha omega">
            <div class="sf-contener clearfix"> 
        <div id="columns" class="grid_9 alpha omega clearfix">
        <div id="footer" class="grid_9 alpha omega clearfix">

j'ai volontairement supprimé les divs inutiles et fermetures pour plus de lisibilité

 

la div #page est de largeur limitée, ce ce qui a pour etter de placer le reste de la page dans une colone

 

tant que le menu est placé dans un élément qui ne prend pas toute la largeur de la page, celuici ne pourra pas se mettre en pleine largeur (il ne peut pas dépasser son contenu)

 

Pour que le menu prenne toute la largeur, vous allez devoir

1. sortir le menu de la div header, ainsi il sera au même niveau que #header #columns et #footer (pour se faire il faut modifier les tpl du menu) ( on y reviendra plus tard)
2. élargir la div #page à la largeur de l'écran (width: 100%)
3. forcer les divs #header, #column et #footer à reprendre la largeur qu'elles avaient par défaut et les recentrer (width:***px et margin : 0 auto)

 

 

Comment sortir le menu du header?

• Votre menu doit être hooké en dernière place
• Commencer le tpl du menu par </div> ainsi on ferme la div du header (cependant on se retrouve avec une fermeture de div en trop car le header est déjà fermé plus loin)
• Supprimer la dernière fermeture de div du menu (qui se retrouvera fermée par la fermeture de div énoncée juste au dessus

[dan65]

Bonjour,

 

En version 1,4 il me semble que c'était dans les images du thème, en échantillon.

 

Cordialement

[mademoisellepolish]

 

Ne serai-ce pas cela? ça semble correspondre en terme de couleurs et type de règle

 

 

sur le thème par défaut, tout est contenu dans une div #page qui contient les divs #header, #conlumns et #footer

<body id="index" class=" ">
    <div id="page" class="container_9 clearfix">
        <div id="header" class="grid_9 alpha omega">
            <div class="sf-contener clearfix"> 
        <div id="columns" class="grid_9 alpha omega clearfix">
        <div id="footer" class="grid_9 alpha omega clearfix">

j'ai volontairement supprimé les divs inutiles et fermetures pour plus de lisibilité

 

la div #page est de largeur limitée, ce ce qui a pour etter de placer le reste de la page dans une colone

 

tant que le menu est placé dans un élément qui ne prend pas toute la largeur de la page, celuici ne pourra pas se mettre en pleine largeur (il ne peut pas dépasser son contenu)

 

Pour que le menu prenne toute la largeur, vous allez devoir

1. sortir le menu de la div header, ainsi il sera au même niveau que #header #columns et #footer (pour se faire il faut modifier les tpl du menu) ( on y reviendra plus tard)
2. élargir la div #page à la largeur de l'écran (width: 100%)
3. forcer les divs #header, #column et #footer à reprendre la largeur qu'elles avaient par défaut et les recentrer (width:***px et margin : 0 auto)

Bonjour!

 

Désolée de ce retard de réponse. J'ai malheureusement du mettre en suspens ma modification de prestashop, car beaucoup de travail.

 

J'ai bien reussi à changer la couleur de fond des onglets c'était effectivement ce code! Un grand merci!

 

Par contre pour la deuxième partie, ça à l'air un peu plus compliqué mais je dois encore chipoter dès que je trouve un peu de temps mais ça devrait aller! Je peux donc le mettre en résolu

 

Un énorme MERCI!

 

Comment sortir le menu du header?

• Votre menu doit être hooké en dernière place
• Commencer le tpl du menu par </div> ainsi on ferme la div du header (cependant on se retrouve avec une fermeture de div en trop car le header est déjà fermé plus loin)
• Supprimer la dernière fermeture de div du menu (qui se retrouvera fermée par la fermeture de div énoncée juste au dessus

 

[Acuao]

De rien, ce fut un plaisir

[mademoisellepolish]

Bonjour à tous!

 

J'ai résolu le problème pour le centrage des catégories du 'topmenu'

 

Il suffit simplement de rajouter ce code dans le "global css" dans la partie RESET (vers les lignes 40-45)

 

.sf-menu > li:nth-child(1) {

    margin-left: 400px;

}

.sf-menu > li:nth-child(3) {

    margin-right: 0px;

}

 

Il suffit bien sur de modifier le nombre de px en fonction de la largeur de votre page.

 

Maintenant il ne me reste plus qu'à trouver la solution afin d'élargir ma barre de menu.

 

Bonne journée!