Changement Styles Thème De Base (Default-Bootstrap) Ps 1.6.1.3

[Alain33]

Bonjour à tous !

 

On est certainement plusieurs à vouloir conserver le thème d'origine et ce, pour diverses raisons : compatibilité, prix, etc...

 

Mais il faut reconnaître que le thème d'origine est un peu "sombre"...

 

Actuellement, ma boutique est en préparation et donc, en mode maintenance.

 

J'ai déjà réussi à changer pas mal de style (dans global.css), mais je bloque sur quelques petits points.

 

1) Savez vous comment je peux reproduire l'effet visible au survol de la souri au-dessus des catégories, comme sur ce thème en option proposé par Prestashop :

http://addons.presta...mo/FO10400.html

Modifs à faire peut-être dans blockcategories.css...

 

2) Idem pour le panier

Modifs à faire peut-être dans blockcart.css...

 

J'ai beau passé la page au crible avec FireBug, je ne trouve pas ce qu'il faut modifier...

 

Pouvez-vous me donner un petit coup de main ?     

 

Cordialement,

Alain33

 

PS : Ce sujet pourrait également rassembler ici de bonnes idées concernant les modifications de style du thème d'origine.

[Alain33]

Gloups..., personne pour m'aider...

[coeos.pro]

Suffit d'inspecter l'élément, tu y trouvera :

#categories_block_left li > a:before {
    background: #fee402;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    display: block;
    z-index: 2;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

Edited December 13, 2015 by coeos.pro (see edit history)

[Alain33]

Bonjour coes.pro et merci pour la réponse, c'est sympa de m'aider !

 

Par rapport à l'exemple donné ci-dessus, ce bout de code tu le retrouves dans quel fichier, stp ?

Je le cherche partout depuis un bout de temps, et je ne le trouve nulle part avec firebug quand j'examine l'élément...

 

Dans mon blockcategories.css, je n'ai rien qui commence par #categories_block_left li > a:before {

 

Par contre, j'ai çà en fin de fichier, et qui s'en rapproche le plus :

 

#categories_block_left li li a:before {

      content: "\f105";

      font-family: "FontAwesome";

      line-height: 29px;

      padding-right: 8px; }

 

Je le supprime et je le remplace par le code que tu as trouvé ?

 

Excuse moi pour ces questions qui doivent te paraître idiotes...

[Alain33]

Bon, j'ai recopié le code en fin de fichier et en supprimant l'autre, mais çà ne fonctionne pas...

Bon, je m'en doutais un peu...

 

Mes pseudo "connaissances" en style CSS, s'arrêtent là...

 

Gloups

[Alain33]

Bon, je relance au cas où un programmeur charitable et spécialiste du CSS passe dans le coin et s'arrête 5 minutes...
 
Dans le fichier blockcategories.css du site cité au dessus en exemple de ce que je souhaiterai reproduire, il y a en autre ce code qui gère (du moins, je le pense...)  les transitions des couleurs :
 

#categories_block_left li > a {

    color: black;

    display: block;

    font: bold 16px/18px "Roboto", sans-serif;

    text-transform: uppercase;

    background: #f3f3f3;

    padding: 15px 30px 15px 18px;

    -moz-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;

    position: relative; }

    #categories_block_left li > a > strong {

      position: relative;

      z-index: 8; }

    #categories_block_left li > a:before {

      background: #ffc528;

      content: "";

      position: absolute;

      top: 0;

      left: 0;

      height: 100%;

      width: 0;

      display: block;

      z-index: 2;

      -moz-transition: all 0.3s ease;

      -o-transition: all 0.3s ease;

      -webkit-transition: all 0.3s ease;

      transition: all 0.3s ease; }

 

Mais, si mets tout çà dans blockcategories.css de ma boutique, évidement, çà ne fonctionne pas. Il manque quelque chose ou alors, il ya quelque chose en trop ici ou ailleurs, je ne sais pas...

 

Ma boutique est en maintenance mais je peux bien sûr valider votre IP pour vous donner l'accès et donc, inspecter l'élément.

Peut-être par mail, c'est plus pratique, vous me dites.

 

Voilà, encore une fois, si quelqu'un passe par là et veux bien me donner un coup de main, çà serait top !

 

Alain33

Edited December 14, 2015 by Alain33 (see edit history)

[Alain33]

OK...

[Allstar27]

Bonjour Alain,

 

Je ne suis pas un expert mais voici le css du menu du thème citer plus haut:

#categories_block_left .block_content > ul > li.active > a:before {
    width: 100%
}

@media (max-width:767px) {
    #categories_block_left {
        display: none
    }
}

#categories_block_left .block_content > ul > li {
    position: relative;
    margin-bottom: 3px
}

#categories_block_left li {
    position: relative
}

#categories_block_left li.extra-item a {
    background: #f8f8f8
}

#categories_block_left li > a {
    color: black;
    display: block;
    font: bold 16px / 18px "Roboto", sans-serif;
    text-transform: uppercase;
    background: #f3f3f3;
    padding: 15px 30px 15px 18px;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    position: relative
}

#categories_block_left li > a > strong {
    position: relative;
    z-index: 8
}

#categories_block_left li > a:before {
    background: #fee402;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    display: block;
    z-index: 2;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease
}

@media (max-width:991px) {
    #categories_block_left li > a {
        padding: 11px 30px 10px 15px
    }
}

#categories_block_left li span.grower {
    display: block;
    position: absolute;
    right: 0;
    top: 9px;
    cursor: pointer;
    font-family: "FontAwesome";
    color: #fff;
    font-size: 16px;
    z-index: 10
}

#categories_block_left li span.grower.OPEN:before, #categories_block_left li span.grower.CLOSE:before {
    content: "\f056";
    display: block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    color: #fff;
    line-height: 30px;
    text-align: center
}

#categories_block_left li span.grower.CLOSE:before {
    content: "\f055";
    color: #c2c2c2
}

#categories_block_left li span.grower:hover + a:before, #categories_block_left li a:hover:before,
#categories_block_left li a.selected:before {
    width: 100%
}

#categories_block_left li ul {
    background: #f3f3f3;
    padding-top: 18px;
    margin-top: 3px
}

#categories_block_left li ul li {
    border: none;
    padding: 0;
    padding-left: 19px;
    padding-right: 30px;
    margin-bottom: 10px
}

@media (max-width:991px) {
    #categories_block_left li ul li {
        padding-left: 15px
    }
}

#categories_block_left li ul li:first-child {
    margin-top: 0
}

#categories_block_left li ul li.last {
    padding-bottom: 28px;
    margin-bottom: 0
}

#categories_block_left li ul li ul {
    margin: 0;
    padding-top: 6px
}

#categories_block_left li ul li ul li.last {
    padding-bottom: 10px
}

#categories_block_left li ul li span.grower {
    top: -6px;
    font-size: 13px
}

#categories_block_left li ul li span.grower:before {
    color: #c2c2c2 !important
}

#categories_block_left li ul li a {
    background: none !important;
    color: #777;
    font-size: 14px;
    text-transform: none;
    font-weight: bold;
    border: none;
    padding: 0
}

#categories_block_left li ul li a:before {
    display: none
}

#categories_block_left li ul li a:hover {
    color: black
}

#categories_block_left li ul li a:hover:before {
    display: none
}

#categories_block_left li ul li ul li:first-child {
    margin-top: 4px
}

#categories_block_left li li span.grower:hover + a:before {
    display: none
}

Evidement ce thème a probablement modifier des balises du fichier TPL donc le recopier je ne suis pas sur que cela va fonctionner...

Il faudra l'adapter...

 

J'espère t'avoir au moins un peu éclairer, bonne continuation.

[Alain33]

Bonsoir Allstar27 et merci de ta réponse, c'est sympa !

 

J'ai déjà recopié ce bout de code, mais çà ne fonctionne pas.

Remarque, comme je l'ai déjà dit plus haut, je m'en doutais...

 

C'est dommage, çà doit pas être bien compliqué de faire une transition sur une couleur pour quelqu'un qui maîtrise le langage.

Mais bon, ce n'est pas grave...

 

Merci quand même de ton aide !

 

Bonne soirée

Alain33