Jump to content

Modifier barre de menu page d'accueil

membre13
 Share

Recommended Posts

membre13 Newbie

membre13

Posted
Posted

Bonjour à tous,

 

Je viens de faire développer un site sur prestashop mais j'aimerais devenir indépendant et pouvoir maitriser les bases.

 

je souhaiterais modifier la taille des boutons de ma barre de menu principal de page d'accueil.

Plus précisement, je vais supprimer l'un des liens donc j'aimerais réorganiser la barre correctement pour ne pas qu'il y ait un bouton vide ou des différences de taille.

 

J'ai téléchargé filezilla pour avoir accès au FTP, je me retrouve devant de nombreux fichiers et je ne sais vers lequel m'orienter.

 

Comment faire?

Dîtes moi si en tant que débutant je peux arriver à effectuer cette modification?

 

Merci de votre aide.

Link to comment
Share on other sites
membre13 Newbie

membre13

Posted
  • Author
Posted

Bonjour,

 

Merci pour votre aide.

J'ai téléchargé Firebug, j'ai localisé la ligne à modifier avec le html:

 

 

<ul class="sf-menu sf-js-enabled sf-shadow">

Cependant je n'arrive pas à trouver le css correspondant.

 

Pouvez-vous m'indiquer comment faire ?

 

Merci par avance.

Link to comment
Share on other sites
membre13 Newbie

membre13

Posted
  • Author
Posted

Bonjour,

 

Oui il y a un attribut "width", cependant lorsque je sélectionne un bouton dans la barre de menu du site avec firebug et que je modifie l'attribut c'est le texte qui se décale et non pas les lignes séparatrices du bouton concerné.

En revanche quand je sélectionne la barre entière les extrémités se raccoucirssent.

 

Au final mon problème c'est que je n'arrive pas à sélectionner chacun des boutons indépendamment pour modifier leurs dimensions.

Link to comment
Share on other sites
Yaku Newbie

Yaku

Posted
Posted

Bonjour,

 

Oui il y a un attribut "width", cependant lorsque je sélectionne un bouton dans la barre de menu du site avec firebug et que je modifie l'attribut c'est le texte qui se décale et non pas les lignes séparatrices du bouton concerné.

En revanche quand je sélectionne la barre entière les extrémités se raccoucirssent.

 

Au final mon problème c'est que je n'arrive pas à sélectionner chacun des boutons indépendamment pour modifier leurs dimensions.

Tu peux envoyer un lien vers la page concernée que je regarde avec firebug?

Link to comment
Share on other sites
Yaku Newbie

Yaku

Posted
Posted

Le problème c'est l'image de fond utilisée dans ton menu qui inclut les séparations grises : http://www.dynveo.fr/modules/blocktopmenu/img/fd-menu.jpg

 

Ces séparations ne sont donc pas calculées automatiquement en fait avec la taille de tes balises "li" qui incluent les textes de tes différents menus. Je pense donc qu'il te faut refaire ton image de fond en enlevant les séparations grises et donc faire une image totalement verte de la même taille ou bien revoir le style du div en prenant cette image en 1px de large qui se répète en x c'est à dire que l'image se répétera autant de fois qu'il faut pour remplir toute la largeur de ton menu. Et les séparations grises tu pourras les faire avec un style sur tes balises li.

 

Ce n'est peut être pas très clair ce que je dis... Si tu ne vois pas, je tâcherais de te donner des exemples plus précis.

Link to comment
Share on other sites
membre13 Newbie

membre13

Posted
  • Author
Posted

Merci.

 

Je comprends tout à fait ce que tu me dis par contre je ne sais pas comment le retranscrire dans le code.

L'option deux me semble plus simple: répéter l'image.

Qu'appelles tu "div"?

Comment faire ensuite pour intégrer les séparations grises?

 

Merci encore.

Link to comment
Share on other sites
Yaku Newbie

Yaku

Posted
Posted

Bon j'ai testé ça vite fait mais je n'ai pas le temps de faire mieux car je dois partir.

 

Mais tu peux déjà faire ça pour te donner une idée.

 

Dans un premier temps, supprime les width:260px qu'il y a ta balise li et à la balise a du menu "Trans Resveratrol" (fais une recherche de "width:260px" dans tes fichiers pour trouver dans quel fichier ça se situe).

 

Puis fais une copie quelque part de ton fichier "superfish-modified.css" et remplace le code du fichier par :

.sf-contener {
 background-color: #90CD54;
 border-radius: 4px 4px 4px 4px;
 box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
 clear: both;
 height: 53px;
 width: 976px;
}
.sf-right {
 display: none;
}
.sf-menu, .sf-menu * {
 list-style: none outside none;
 margin: 0px;
 padding: 0px;
}
.sf-menu {
 float: left;
 height: 37px;
 margin: 8px;
 padding: 0px;
 width: 960px;
}
.sf-menu ul {
 position: relative;
}
.sf-menu li:hover {
 visibility: inherit;
}
.sf-menu li {
 border-right: 1px solid #CCCCCB;
 float: left;
 position: relative;
 text-align: center;
 width: 15%;
}
.sf-menu li#fin {
 border-right: 0px solid #CCCCCB;
}
.sf-menu li#home {
 width: 5%;
}
.sf-menu li#home a {
 height: 32px;
 padding-top: 5px;
 width: 49px;
}
.sf-menu li a {
 color: #FFFFFF;
 display: block;
 font-size: 17px;
 height: 37px;
 line-height: 35px;
 position: relative;
 text-decoration: none;
 text-shadow: 0px 1px 1px #1B1B1B;
}
.sf-menu li#home a:hover, .sf-menu li a:hover {
 background: none repeat scroll 0px 0px #71BA2C;
}
.sf-menu li a .sf-sub-indicator {
 display: none;
}
.sf-menu li li, .sf-menu li li li, .sf-menu li li li li {
 display: none;
}

 

Ensuite, il te faudra créer un style spécifique pour le dernier menu "Blog" pour qu'il n'y ait pas de trait gris sur la droite comme c est le dernier menu. Il faudra aussi modifier les styles qui s'applique au survol des liens du menu et puis réajuster selon ce que tu veux ovtenir au final mais c'est déjà un premier jet de ce que tu peux faire comme modifications pour obtenir autre chose sans utiliser l'image de fond.

 

Je repasserai ici demain ;)

 

Bon courage! Heureusement, comme beaucoup de chose, le CSS est bien documenté sur internet ce qui pourra grandement t'aider.

Link to comment
Share on other sites
membre13 Newbie

membre13

Posted
  • Author
Posted

Salut,

 

En fait je n'arrive pas à retrouver le width:260px sur filezilla. J'arrive à localiser sur firebug mais comment ensuite savoir dans quel fichier il se trouve?

J'ai par contre trouvé "superfish-modified.css" sur filezilla.

 

Merci.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...