Aide Svp [ Modification Theme ]

[Notsuko]

Bonsoir a tous,

 

je suis nouveau sur le forum donc j’espère être dans la bonne rubrique ...

j'ai regarder sur le forum mais je n'est pas trouver de sujet qui correspond a ma question.

 

 

Donc voila ma question dans le thème par défaut je voudrai changer le menu je vous montre en image

 

voila mon thème a l'heure actuel

 

 

Et je voudrai faire sa

 

 

Es-que quelqu'un a une idée pour m'aider a réaliser le même menu que l'image 2 ?

 

 

Merci d'avance pour votre aide, bonne soirée.

Cordialement.

Edited February 17, 2016 by Notsuko (see edit history)

[ChDUP]

Vous pouvez le faire en appliquant une background-image de 1px de large avec un repeat-x sur votre <header> à place du background-blanc.

Edited February 18, 2016 by ChDUP (see edit history)

[Guest]

pour arriver à ça proprement.. il faut quelques modification du thème dans header.tpl et utiliser un hook différent de hook top pour le menu, sans ça il restera toujours dans la div "container", alors qu'il doit être placé dans une div "container-fluid", tout en gardant la taille maximum "container" pour le contenu du menu.

 

je vous invite à lire ce post : https://www.prestashop.com/forums/topic/279708-display-top-menu-without-hook-top/

[Notsuko]

Bonjour, merci pour vos réponses.

 

J'avais déjà penser a sa mais le petit soucis qui me block étant nouveau sur prestashop je c'est pas ou aller ou quoi faire pour créer un nouveau Hook je suis entrain de regarder sur le net des tutos.

 

Dans header.tpl j'ai rajouter

 

                    {capture name='displayNav'}{hook h='displayNav'}{/capture}
                    {if $smarty.capture.displayNav}
                        <div class="topmenu">
                            <div class="container">
                                <div class="row">
                                    <topmenu>{$smarty.capture.displayMenu}</topmenu>
                                </div>
                            </div>
                        </div>
                    {/if}

 

en me basant sur celui du Nav.

 

Maintenant comment faire pour le hook

 

Comment créer un nouveau hook ?

Es dans un fichier dans prestashop ou dans l'administration ?

 

je suis sur la version 1.6

 

merci pour vos réponses.

Edited February 18, 2016 by Notsuko (see edit history)

[Guest]

Vous pouvez le faire en appliquant une background-image de 1px de large avec un repeat-x sur votre <header> à place du background-blanc.

 

Cette solution apportée par ChDUP est peut-être plus abordable, il vous suffit de créer une image avec le fond de votre menu (de la même hauteur), vous pouvez le faire à partir d'une copie d'écran par exemple, puis de découper cette image pour qu'elle ne fasse qu'un 1px de large, ensuite il faut l'uploader par ftp dans votre dossier image du thème et rajouter cette image en background à la place du blanc utilisé pour la balise "header" dans le fichier global.css

 

ce qui donne en gros :

header {
    background: rgba(0, 0, 0, 0) url("../img/monimage_background_menu.png") repeat-x scroll left bottom;
}

[Notsuko]

Merci ta réponse

 

j'ai déjà essayer comme sa, le soucis c'est que en mode portable la bar et visible je vous montre en image

 

 

 

si vous avez une solution pour qu'elle disparaisse je suis preneur

[ChDUP]

il faut jouer sur les media queries pour enlever le background en dessous d'une certaine resolution, à définir.

genre

@media (min-width: 768px) {
.header {
background-image : none;
}
}

[Notsuko]

Merci

 

Mdr je viens juste de le faire sans regarder le message.

[Notsuko]

Je rencontre un autre soucis maintenant mon menu et ni-quel en version full écran mais quand je suis en version portable le menu et blanc avec la police aussi voila en image

 

 

comment changer la couleur portable sans changer celle de la full écran ?

[Notsuko]

je n'est rien dit j'ai trouvé merci encore.

 

je vous remercie pour vos réponses vous m’avais bien aider, merci encore.

 

Bonne soirée, je retourne travailler.

[ChDUP]

Bonne soirée, je retourne travailler.

 

Et tu rangeras ta chambre.

[Notsuko]

Bonsoir,

 

j'aurai besoin d'un petit coup de main encore

Je voudrais changer le nombre de produits a afficher je voudrais en mettre 3 au lieu de 4 a l'index

 

en image pour que vous puissiez comprendre de quoi je parle.

 

 

 

Merci d'avance.

Bonne soirée.

Edited February 19, 2016 by Notsuko (see edit history)

[ChDUP]

pour l'onglet "populaires", il s'agit du module homefeatured.

Quand vous réduisez la fenêtre, ça passe à 3 produits ?

 

L'affichage de ces modules reprend depuis les dernières versions le product-list.tpl de votre thème.

Dans ce fichier, il vous faut retrouver le <li> qui doit avoir une class ressemblant à ajax_block_product

Dans la class, "col-xs-12 col-sm-4 col-md-3" vous permet de gérer la largeur de chaque item en l'adaptant à la largeur de resolution grâce à bootstrap.

que je vous laisse étudier : http://getbootstrap.com/css/

En gros, la largeur de cette section est divisée en 12 colonnes.

col-xs-12 signifie qu'en dessous de 768px, l'item doit prendre une largeur de 12 colonnes (donc toute la largeur)

col-md-3 signifie qu'au dela de 992px, l'item doit prendre une largeur de 3 colonnes -> donc 4 items sur une largeur de 12 colonnes.

 

si vous remplacez par un col-md-4, vous devriez avoir 3 items par ligne.

[Notsuko]

Bonjour,

 

merci pour ta réponse ChDUP

je vais essayer de tester ton explication.

[Notsuko]

Sa marche ni quel merci ChDUP

[Guest]

pensez aussi à modifier le tout début du fichier product-list.tpl - valeurs en rouge dans le code ci-dessous - pour que ça corresponde à ton affichage.

{if isset($products) && $products}
    {*define number of products per line in other page for desktop*}
    {if $page_name !='index' && $page_name !='product'}
        {assign var='nbItemsPerLine' value=3}
        {assign var='nbItemsPerLineTablet' value=2}
        {assign var='nbItemsPerLineMobile' value=3}
    {else}
        {assign var='nbItemsPerLine' value=4}
        {assign var='nbItemsPerLineTablet' value=3}
        {assign var='nbItemsPerLineMobile' value=2}
    {/if}