Jump to content
Alain33

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

Recommended Posts

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 ?   B)  


 


Cordialement,


Alain33


 


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


Share this post


Link to post
Share on other sites

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 by coeos.pro (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Alain33 (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 

Share this post


Link to post
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

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More