problème css

[catherine17]

Bonjour, 

Je fini par venir vers vous car après mainte recherche et de nombreux loupé je perds espoir. 

Voilà je ne suis pas développeur (se) du tout ... 

J'essai de modifier mon thème sur prestashop : Version de PrestaShop 1.6.1.3

 

j'ai bien entendu eu le thème de base, que j'ai réussi à exporté (arrivé dans téléchargement déplacé dans mes documents pour pas le chercher sans cesse) 

Ensuite je l'ai décompressé pour pouvoir copier la version original. donc je me retrouve avec le dossier dézippé "original" et "copie". 
Dans Copie j'ai modifié le css de thème "global". jusque là j'arrive presque à m'en sortir.... 

J'ai donc voulu voir si ce que j'ai fait avait fonctionné.... Mais là comment le renvoyer sur prestashop ?? 
Car quand je fais : ajouter un thème, je rempli tout mais jamais on me demande de charger le dossier que j'ai modifier.... 

Bref j'arrive pas à ajouter mon thème modifié.... 
 

je me pose la question, le dossier original (zip) est ce celui là qu'il faudrait que je modifie ? mais comment faire il est compressé.... 

Pourriez vous m'aider svp ? 
 

[catherine17]

je vous précise que je cherche pas à modifier les images, j'ai trouvé le module pour cela. 

j'aimerais mettre une image background, déplacer le logo pour le centrer et décaler vers la droite le panier. 

 

et aussi changer la couleur de la bande (entre la bannière et le background) où il y a le compte client. 

Une fois tout cela résolu je cherche aussi à modifier l'allure du menu horizontal, une couleur peut être ou mieux une bande décorative mais je ne sais pas si c'est possible... 

[Keyosh]

Bonjour !

 

Alors sans aucune connaissance en développement il vous faudra plancher un petit peu sur le sujet pour faire vos modifications !

Cependant, le css et l'html sont des langages optimisés et lisibles, vous pourrez en saisir les notions en quelques jours.

 

 

Dans un premier temps je vous conseille de suivre le cours Html/Css du site Openclassroom qui part vraiment de 0 ou via tout autre site régulièrement mis à jours (beaucoup de ressources sont disponibles).

Une simple lecture attentive du cours (ça se fait vite et bien vous verrez) et vous pourrez par la suite comprendre comment modifier le design de votre site sans trop de difficultés avec ce genre d'article :

http://www.team-ever.com/comprendre-les-css-sur-prestashop/

 

Sans passer par là vous aurez beaucoup de mal à effectuer vos modifications d'après moi.

 

 

Bon courage  !

Edited April 30, 2016 by Keyosh (see edit history)

[catherine17]

Bonjour, 

Merci pour ce lien, j'ai déjà lu beaucoup de chose du même style que le lien. 
Cela je pense l'avoir compris, j'ai modifier le css déjà avec notepad ++ 

 

Je parcours votre lien, qui explique très bien comment modifier les css d'ailleurs. Mais cela je pense déjà l'avoir réussi. 

Mais je n'arrive pas à vérifier si cela à marcher car je n'arrive pas à ajouter le nouveau thème sur presta shop. 

 

En faite je pense que ma question finalement est simplement : quand on extrait le thème pour le modifier comment faire pour que la modification soit effective dans presta shop ? 
 

Edited April 30, 2016 by catherine17 (see edit history)

[Keyosh]

Dans ce cas depuis un logiciel FTP (comme Filezilla) il suffira de remplacer les fichiers que vous avez modifié dans le dossier www/Theme/themedefaultbootstrap/css.

Ensuite allez dans l'onglet "paramêtre avancés" puis "performances" de votre Backoffice et vider le cache (en haut à droite).

 

J'espère avoir bien ciblé votre question.

Si vous n'avez aucune notion en FTP vous allez voir cela consiste surtout à du glisser déposer une fois la connexion configurée.

Plus d'infos :https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/envoyez-votre-site-sur-le-web-2

[catherine17]

Merci beaucoup, je vais essayer cela cette nuit ou demain. 
Car avec la version que j'ai je peux pas importé de dossier FTP ou ZIP depuis l'ordi. 

Donc si je comprends bien, je réexporte le thème et je le met dans le logiciel Filezilla pour le modifier et ainsi les modifs s'appliqueront à mon site ? 
 

et de nouveau si je comprends bien, le FTP c'est le fait de placer mon thème sur un serveur ? 
il y a un module à installer dans presta ou juste le logiciel sur mon pc ? 

[Keyosh]

Car avec la version que j'ai je peux pas importé de dossier FTP ou ZIP depuis l'ordi. 

 

Utilisez-vous la version Cloud de Prestashop ? Si c'est le cas je ne sais pas du tout comment cela fonctionne étant nouveau sur ce CMS. :x

 

Vous pouvez peut être importer le Dossier du thème que vous avez modifié à la place du thème intégré sur votre boutique depuis votre Backoffice ?

En allant dans "Préférences" puis "Theme" depuis votre Back office puis "Paramètres avancés" et le bouton "Ajouter un fichier" sous la miniature de votre thème actuel pour enfin sélectionner le dossier complet que vous avez téléchargé et modifié.

 

Si vous n'êtes pas sous offre Cloud Prestashop :

 

 

Fillezilla est un logiciel qui vous présente votre serveur d'hébergement (qui n'est pas grand chose de plus qu'un simple disque dur relié au web) sous la forme d'un dossier.

Dans ce dossier vous avez votre installation Prestashop dispatchée dans plusieurs sous dossiers qui gèrent le fonctionnement de la boutique.

Vous y trouverez notamment le dossier theme dans lequel doit se trouver le dossier de votre thème actuel.

Cela se passe comme si vous naviguiez dans vos documents depuis votre bureau.

 

Si comme je l'imagine vous avez téléchargé un fichier ZIP contenant le thème principal de prestashop que vous avez décompressé pour effectuer vos modifications sur des fichiers alors il faut remplacer les fichiers du thème actuellement hébergé sur votre site par ceux que vous avez modifié.

 

La chose à faire est donc de glisser déposer les fichiers modifiés dans le bon sous dossier à partir de Filezilla.

Vous devrez suivre ce chemin de dossier : prestashop/Theme/default-bootstrap/css et y mettre les fichiers modifiés en écrasant les anciens ayant le même nom.

Vous pouvez également remplacer directement le dossier "default-bootstrap" de votre serveur par celui sur lequel vous avez effectué vos modifs en local.

 

  

Edited April 30, 2016 by Keyosh (see edit history)

[Ariane Web et Plus]

Bonjour,

 

Vous avez 2 solutions, soit renvoyer en ftp les modifications, vous renvoyez uniquement les fichiers modifiés. 

Soit réziper votre dossier, vous cliquez sur ajouter un thème et le premier champ c'est le zip, vous ajutez votre dossier puis cliquer sur enregistrer.

 

La deuxième solution est beaucoup plus laborieuse que la première.

Vous pouvez avoir accès à votre thème en ftp même sur le cloud, je vous conseil FileZilla.

Mais le mieux est encore de tout installer en local pour pouvoir faire tranquillement vos modifications, quand vous êtes content vous envoyez le thème en entier.7

Bonne journée

[catherine17]

Bonjour, 

 

je suis en effet avec la version Cloud. 

pour le moment je n'y arrive toujours pas, mais je persite... 

 

le problème ce votre première proposition Ariane c'est que réziper ou non, quand je veux ajouter le fichier il me dis que le fichier existe déjà. 

[catherine17]

Bonjour, 

 

Aujourd'hui c'est mon jour de congé donc je me suis remise à travailler le site. 

bon j'ai réussi à installer et me connecter sur FilleZila. Là pas de problème. 

 

j'ai exporté sur mon ordi mon thème, je l'ai déziper, puis modifier le css global du thème, enregistré. 

Maintenant je voudrais mettre ce css modifié dans Filezilla. 

Ma question est tout bête : dois-je supprimer dans la partie de gauche de filezilla, le fichier CSS "global" puis faire glisser le miens (le modifié) à la place ? ou je l'ajoute simplement en plus dans le dossier css de gauche ? et je me retrouverais alors avec deux css "global" dans le même dossier .? 

[Matt75]

Pas besoin de supprimer, lorsque vous allez envoyer votre fichier modifié, il va simplement remplacer le fichier existant

Pensez ensuite à vider le cache de Prestashop et le cache de votre navigateur pour voir vos modifications prises en compte.

[catherine17]

Bonjour ! 

Ca y est je m'avoue vaincue C'est un métier c'est sûr et ce n'est pas le mien 

 

je ne sais pas si c'est autorisé sur le forum .... mais du coup je cherche quelqu'un pour me le faire. si certains sont intéressé dites moi combien vous me prendriez pour me le faire et éventuellement me montrer au passage (sinon pas grave juste me le faire déjà) 

[Ariane Web et Plus]

Bonjour,

 

Je vous envoie un message privé.

 

Cordialement

[catherine17]

Bonjour, 

j'ai rien reçu. 

Sinon je tiens a remercier ceux qui m'ont aider ! Sa y est ENFIN ! j'ai mon fond ! 

[Ufasimba]

Bonjour à tous,

Je souhaiterais modifier l'aspect de mes sous menus dans le blocktopmenu.
Je sais que le fichier à modifier est celui-ci ../themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css.
Actuellement, j'ai l'affichage suivant:

Je souhaite avoir un afichage comme celui-ci:

Ci-après le contenu de mon fichier superfish-modified.css, quelles sont les modifications à faire pour arriver à l'affichage que je souhaite?
Merci pour votre aide. Bien cordialement.

/*** ESSENTIAL STYLES ***/
.sf-contener {
  clear: both;
  float: left;
  width: 100%; }

.sf-menu,
.sf-menu * {
  margin: 0;
  padding: 0;
  list-style: none; }

.sf-menu { /* gere la longueur du block*/
  position: relative;
  padding: 0;
  width: 100%;
  border-bottom: 3px solid #e9e9e9;
  background: #f6f6f6; }
  @media (max-width: 767px) {
    .sf-menu {
      display: none; } }

.sf-menu ul {
  position: absolute;
  top: -999em;
  background: #fff; }
  @media (max-width: 767px) {
    .sf-menu ul {
      position: relative; } }

.sf-menu ul li {
  width: 100%; }

.sf-menu li:hover {
  visibility: inherit;
  /* fixes IE7 'sticky bug' */ }

.sf-menu > li {
  float: left;
  border-right: 1px solid #d6d4d4;
  margin-bottom: -3px; }
  @media (max-width: 767px) {
    .sf-menu > li {
      float: none;
      position: relative;
      border-right: none; }
      .sf-menu > li span {
        position: absolute;
        right: 6px;
        top: 20px;
        width: 30px;
        height: 30px;
        z-index: 2; }
        .sf-menu > li span:after {
          font-family: "FontAwesome";
          content: "\f067";
          font-size: 26px; }
        .sf-menu > li span.active:after {
          content: "\f068"; } }
  .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.sfHover > a,
  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
    background: #333;
    border-bottom-color: #666666;
    color: #fff; }

.sf-menu li li li a {
  display: inline-block;
  position: relative;
  color: #777777;
  font-size: 13px;
  line-height: 16px;
  font-weight: bold;
  padding-bottom: 10px; }
  .sf-menu li li li a:before {
    content: "\f105";
    display: inline-block;
    font-family: "FontAwesome";
    padding-right: 10px; }
  .sf-menu li li li a:hover {
    color: #333; }

.sf-menu li ul {
  display: none;
  left: 0;
  top: 59px;
  /* match top ul list item height */
  z-index: 99;
  padding: 12px 0px 18px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px; }
  @media (max-width: 767px) {
    .sf-menu li ul {
      top: 0; } }

.sf-menu li li ul {
  position: static;
  display: block !important;
  opacity: 1 !important;
  background: none;
  -moz-box-shadow: transparent 0px 0px 0px;
  -webkit-box-shadow: transparent 0px 0px 0px;
  box-shadow: transparent 0px 0px 0px; }

.sf-menu li li li ul {
  padding: 0 0 0 20px; }

.sf-menu li li li ul {
  width: 220px; }

ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
  top: -999em; }

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
  left: 200px;
  /* match ul width */
  top: 0; }

ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
  top: -999em; }

ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
  left: 200px;
  /* match ul width */
  top: 0; }

.sf-menu > li > ul {
  padding: 26px 30px 31px;
  width: 100%; }
  .sf-menu > li > ul > li > a {
    text-transform: uppercase;
    font: 600 12px/16px "Open Sans", sans-serif; /* font: 600 16px/20px "Open Sans", sans-serif; */
    color: #333; }
    .sf-menu > li > ul > li > a:hover {
      color: #515151; }

.sf-menu > li > ul > li {
  float: left;
  width: 20%;
  padding-right: 15px; }
  @media (max-width: 767px) {
    .sf-menu > li > ul > li {
      width: 50%; } }
  @media (max-width: 479px) {
    .sf-menu > li > ul > li {
      width: 100%;
      padding-bottom: 20px; } }
  @media (min-width: 768px) {
    .sf-menu > li > ul > li.first-in-line-lg {
      clear: left; } }
  @media (min-width: 480px) and (max-width: 767px) {
    .sf-menu > li > ul > li.first-in-line-xs {
      clear: left; } }

.sf-menu > li > ul > li.category-thumbnail {
  width: 100% !important;
  float: none;
  clear: both;
  overflow: hidden;
  padding-right: 0; }
  .sf-menu > li > ul > li.category-thumbnail > div {
    float: left;
    padding-left: 10px;
    width: 33.333%; }
    @media (max-width: 479px) {
      .sf-menu > li > ul > li.category-thumbnail > div {
        width: 100%;
        padding-left: 0;
        padding-top: 10px;
        text-align: center; } }
    .sf-menu > li > ul > li.category-thumbnail > div:first-child {
      padding-left: 0; }
    .sf-menu > li > ul > li.category-thumbnail > div img {
      max-width: 100%;
      display: block; }

.cat-title {
  display: none; }
  @media (max-width: 767px) {
    .cat-title {
      display: block;
      font: 600 18px/22px "Open Sans", sans-serif;
      text-transform: uppercase;
      color: #484848;
      display: block;
      padding: 17px 20px;
      border-bottom: 3px solid #e9e9e9;
      background: #f6f6f6;
      position: relative; }
      .cat-title:hover {
        background: #333;
        border-bottom-color: #666666;
        color: #fff; }
      .cat-title:after {
        display: block;
        font-family: "FontAwesome";
        content: "\f067";
        position: absolute;
        right: 15px;
        top: 18px;
        font-size: 26px; }
      .cat-title.active:after {
        content: "\f068"; } }

.sf-menu li.sf-search {
  border: none; }
  .sf-menu li.sf-search input {
    display: inline;
    padding: 0 13px;
    height: 30px;
    line-height: 30px;
    background: #fff;
    margin: 13px 10px 0 0;
    font-size: 13px;
    color: #9c9b9b;
    border: 1px solid #d6d4d4; }

#block_top_menu .category-thumbnail {
  clear: both;
  width: 100%;
  float: none; }
  #block_top_menu .category-thumbnail div {
    float: left;
    width: 33.33333%; }
    #block_top_menu .category-thumbnail div img {
      max-width: 100%; }
#block_top_menu li.category-thumbnail {
  padding-right: 0; }

/*# sourceMappingURL=superfish-modified.css.map */