Jump to content

Menu Haut horizontal en minuscules

ClairesurTerre
 Share

Recommended Posts

ClairesurTerre Newbie

ClairesurTerre

Posted
Posted (edited)

Bonjour,

J' utilise Prestashop en version 1.6.1.18 et le thème par défaut.
Ma question concerne le menu haut horizontal (et le sous-menu) : Je souhaiterai qu' ils soient écrits en minuscules mais, pour l' instant, ils sont en majuscules...

Comment puis-je faire cette modification ? Et où ?

Merci de votre entraide.

PS : Je m' excuse auprès de ceux qui vont se rendre compte que la question a déjà été posée mais je n' ai eu aucun résultat dans le bloc "rechercher".

Edited by ClairesurTerre (see edit history)
Link to comment
Share on other sites
Atch Newbie

Atch

Posted
Posted

Bonjour,

 

Dans le css du menu :

commentez ou supprimez "text-transform: uppercase;"
  

.sf-menu > li > a {
    font: 600 18px/22px "Open Sans",sans-serif;
    /*text-transform: uppercase;*/
    color: #484848;
    display: block;
    padding: 17px 20px;
    border-bottom: 3px solid #e9e9e9;
}

.sf-menu > li > ul > li > a {
    /*text-transform: uppercase;*/
    font: 600 16px/20px "Open Sans",sans-serif;
    color: #333;
}

V++

Atch

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites
ClairesurTerre Newbie

ClairesurTerre

Posted
  • Author
Posted

Trop contente mais trop rapide pour moi. Dans www/modules/blocktopmenu/css, rien de tout cela !

J' ai :

- blocktopmenu.css (document de feuille de style) Taille 0 !!! donc je n' ai pas ces écritures à modifier.

- index.php

- superfish-modified css (idem) Taille OK mais pas ces écritures là...

Link to comment
Share on other sites
Atch Newbie

Atch

Posted
Posted

C'est dans le theme "default-bootstrap"

CSS -> Modules -> etc... ;)

Désactivez la compilation du css dans les performances, et avec Firebug ( la console dev de votre navigateur) vous aurez le css exacte et la ligne en inspectant votre site.

V++

Paulo

Link to comment
Share on other sites
fp2 Newbie

fp2

Posted
Posted (edited)

je rencontre le meme probleme mais je n'ai pas de Blocktopmenu (je suis sous la version chargée ce jour donc 1,7,3.0 

Sous theme j'ai

  • _librairies 
  •          Font-awesome
  •                      CSS
    • et là j'ai des fichier CSS (font-awesome et font-avesome.min ) mais ils sont illisibles tout est à la ligne sans commentaires sans aucune info ....  comment y retrouver ses petits et voir même être sur que c'est bien le bon CSS, je veux modifier la taille des fonts du menu des catégories en haut 

                                  

et un deuxieme dossier Classic 

Edited by fp2 (see edit history)
Link to comment
Share on other sites
Ced17 Contributor

Ced17

Posted
Posted

Bonsoir,

Normalement, ça devrait être ici:

/themes/classic/assets/css/theme.css ligne 7 colonne 186153

#header .header-top a[data-depth="0"] {
    color: #7a7a7a;
    /* text-transform: uppercase; */

Link to comment
Share on other sites
Ced17 Contributor

Ced17

Posted
Posted

Et pour modifier uniquement la taille des fonts du menu haut,

Rajoutez ceci au theme.css

@media (min-width: 992px) {
  #_desktop_top_menu {
    font-size: .90rem;  * Mettez la taille désiré *
} }

  • Thanks 1
Link to comment
Share on other sites
fp2 Newbie

fp2

Posted
Posted

Merci Ced17 c'est efficace ici :) 

 

alors deja merci de m'avoir orienté sur le chemin du Css ce qui me gène c'est  la présentation de ce dernier j'ai vraiment un truc illisible comme tu peux le voir sur l'image ci jointe ... (du coup je tente un autre thème et m'en vais de ce pas voir le css... 

Capture.JPG

Link to comment
Share on other sites
fp2 Newbie

fp2

Posted
Posted

Je reprends la question avec ton aide Ced17 j'ai bien pu modifier le menu mais pas les sous menus. Est ce que tu sais comment ils les ont nommés ou comment je peux les mettre a la meme dimension que le menu principal du coup .?

Link to comment
Share on other sites
fp2 Newbie

fp2

Posted
Posted
il y a 13 minutes, Ced17 a dit :

Bonjour,

Je ne suis pas dispo avant encore un moment, je regarderai tout à l'heure et vous tiens au jus. :)

Je suis pas dans l'urgence :) j'essaie je cherche quand ça va pas je viens demander mais je comprends que les membres ne sont pas a mon service, je trouve déjà la réactivité assez impressionnante.. Et désolé j'oublie à chaque fois de dire Bonjour..

Link to comment
Share on other sites
Ced17 Contributor

Ced17

Posted
Posted

Re,

En testant, je m’aperçoit que cette classe suffit à tout modifier comme vous voulez, menu et sous -menu sauf le titre des sous-catégories que je vais vous donner après. Il suffit de rajouter ceci:

.dropdown-item { ligne 7 colonne 43008 ou decompresser ligne 3369

font-size: .?; } * Valeur à rajouter comme vous désirez *

.top-menu a.dropdown-submenu {      ligne 7862 decompressé
    color: #232323;
    /* text-transform: uppercase; */
    font-weight: 600;
}

Link to comment
Share on other sites
fp2 Newbie

fp2

Posted
Posted

Bonjour et Merci Ced

 

Alors j'ai bien mis en commentaire la partie du top menu 

et rajouté le font size  dans dropdown mais cela ne me change rien ?

.top-menu a.dropdown-submenu {
    color: #232323;
    /*text-transform: uppercase;*/
    font-weight: 300                     /*là j'ai mis 300 pour enlever le coté gras et ça fonctionne*/
    }

et ajouté le font size

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 0.5rem;
    color: #373a3c;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 0
}

mais rien ne change juste le  font-weight: 300  fonctionne en me mettant le texte en normal . 

et en toute sincérité j'ose pas trop allez tatouiller le CSS ne sachant pas quoi chercher  et quand je touche un truc que je connais pas ca me plante tout en principe

Link to comment
Share on other sites
fp2 Newbie

fp2

Posted
Posted (edited)

Merci j'avais tellement modifier ce paramètre que du coup je l'avais pas remis ds l'ordre, mais j'ai testé avec .5 ou .2 et cela ne change rien je pense qu'il y a une fonction qui bloque quelques part :( .. 

PS j'ai vidé les caches de la boutique et de mon navigateur 

 

Edited by fp2 (see edit history)
Link to comment
Share on other sites
Atch Newbie

Atch

Posted
Posted (edited)

Bonjour,

Un conseil, ne touchez pas à theme.css mais plutôt à custom.css

Si vous souhaitez modifier l'apparence de votre menu, ajoutez vos class directement dans custom.css

  

#header .top-menu a.dropdown-submenu {
    color: #232323;
    text-transform: none;
    font-weight: normal;
    }

300 == light , si vous n'avez pas la police complète de chargée sur votre PC ou sur votre Site, cela ne sert à rien. 

#header .dropdown-menu {
    font-size: 0.5rem;
}

V++

Atch



 

Edited by Atch (see edit history)
Link to comment
Share on other sites
fp2 Newbie

fp2

Posted
Posted

Merci Atch

 

voila donc mon custom.css

/*modifie la taille du sous menu*/

#header .top-menu a.dropdown-submenu {
    color: #232323;
    text-transform: none;
    font-weight: normal;
    } 
    
#header .dropdown-menu {
    font-size: .5rem;
} 

Mais la encore cela ne change pas le sous menu (le menu s'affiche comme je le veux mais au survol de la souris le sous menu lui reste en caractère beaucoup plus grand)  ci joint une petite capture du menu comme vous pouvez le voir le menu principale est bien ds une taille couleur (bleu a la selection)  et gras comme je le souhaite mais celui qui s'ouvre a la souris reste inchangé (a part le gras qui semble fonctionner sur mes ordi )

menu presta.jpg

Link to comment
Share on other sites
fp2 Newbie

fp2

Posted
Posted
il y a 15 minutes, Atch a dit :

Vous avez peut être bidouillé là où il ne fallait pas auparavant :(
Sans voir votre theme, je ne peux pas plus vous aider.

V++

Atch

 

Merci Arch alors j'ai remis mon CSS d'origine et j'ia ajouté toutes les modifs que l'on m'a donné ici ce qui donne un custom.css comme ci dessous mais rien ne change je reviens a la taille d'origine . est ce qu'il faut pas specifiez a presta d'aller voir le custom .?

/*modifie la taille du sous menu*/
@media (min-width: 992px) {
  #_desktop_top_menu {
    font-size: .60rem; 
} }

#header .top-menu a.dropdown-submenu {
    color: #232323;
    text-transform: none;
    font-weight: normal;
    } 
    
#header .dropdown-menu {
    font-size: .5rem;
} 

.dropdown-item {
    display: block;
    width: 100%;
    padding: 3px 1.5rem;
    clear: both;
    font-weight: 300;
    font-size: .010; 
    color: #373a3c;
    text-align: inherit;
    white-space: nowrap;
    background: none;
    border: 0
}
.top-menu a.dropdown-submenu {
    color: #232323;
    /*text-transform: uppercase;*/
    font-weight: 300
    }

Link to comment
Share on other sites
Atch Newbie

Atch

Posted
Posted

Pas besoin de spécifier, Custom.css est chargé automatiquement s'il y a du contenu.
Tous mes clients qui modifient mes thèmes 1.7 procèdent ainsi et cela fonctionne ( c'est Prestashop qui a prévu ce css).

Inspectez la source pour voir si ce css existent bien et surtout vos rules css.

Attention commenter dans custom.css ne sert à rien, il va exécuter l'original

.top-menu a.dropdown-submenu {
    color: #232323;
    /*text-transform: uppercase;*/
    font-weight: 300
    }

remplacez par

.#header top-menu a.dropdown-submenu {
    color: #232323;
    text-transform: none;
    font-weight: normal;
    }

 

ça vous pouvez virer, c'est pas bon :

#header .dropdown-menu {
    font-size: .5rem;
} 

 

et ajouter la font-size ici ;

#header .top-menu a.dropdown-submenu {
    color: #232323;
    text-transform: none;
    font-weight: normal;
    font-size: 0.5rem;
  } 

 

idem pour ça, vous pouvez virer :
@media (min-width: 992px) {
  #_desktop_top_menu {
    font-size: .60rem; 
} }

#_desktop_top_menu ---> c'est obligatoirement sur PC, donc pas besoin des médias.
 

et en ajoutant cela,
  #_desktop_top_menu {
    font-size: .60rem; 
}
Vous êtes trop global pour gérer la taille de votre menu.
Vaut mieux cibler les éléments ...

Par exemple, le menu haut, le premier niveau, c'est :

#header .header-top  #_desktop_top_menu a[data-depth="0"] {

  font-size: .60rem; 
}

 

ETC....
 

V++

Atch

 

 

 

 

Link to comment
Share on other sites
fp2 Newbie

fp2

Posted
Posted

 

 

Bonjour

Alors voila ma solution grâce à l'aide de CED et Atch (forum et MP)

J'ai donc rechargé mon CSS d'origine sans aucune modif 

j’ai ensuite crée mon custom.css avec ce qui suit

/themes/classic/assets/css/custom.css 



/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
 
 

/*modifie la taille du sous menu*/

#header .top-menu a.dropdown-submenu {
    color: #232323;
    text-transform: none;
    font-weight: 600;
    font-size: .70rem;
    } 

/* modifie le menu*/    
@media (min-width: 992px) {
  #_desktop_top_menu {
    font-size: .70rem; 
} }


 

et pour que cela fonctionne j'ai modifie le theme.css en commentant une ligne 

/themes/classic/assets/css/theme.css

 


  

.top-menu a.dropdown-submenu {
    color: #232323;
    /*text-transform: uppercase;  ligne mise en commentaire pour que le sous menu réponde au custom.css  */
    font-weight: 600
}

A faire valider par des pros :)  mais ça fonctionne pour moi prestashop 1.7.3.0. Merci à vous deux Ced et Atch

 

Link to comment
Share on other sites
Ced17 Contributor

Ced17

Posted
Posted

Bonsoir,

Effectivement, Atch a raison j'ai toujours tendance à zapper ce dossier custom.css .

J'ai modifié directement comme je vous ai dit et mis pareil dans le dossier custom.css et ça fonctionne également. 

/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

 .dropdown-item {
    display: block;
    width: 100%;
    padding: 3px 1.5rem;
    clear: both;
    font-weight: 400;
    color: #373a3c;
    text-align: inherit;
    white-space: nowrap;
    background: none;
    border: 0;
    font-size: .70rem;
 }
.top-menu a.dropdown-submenu {    
    color: #232323;
    text-transform: none;
    font-weight: 600;
}

Vous n'avez pas besoin de modifier le theme.css du coup comme ça et c'est ok pour une version 1.7.2.4.

Bonne soirée

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...