Modification Flêches Homepage

[tetedemort]

Bonjour,

Je souhaiterais faire la même chose que sur le topic donc voici le lien (qui date de plus de 3 ans donc je préférais vous demander directement ici).

Je voudrais faire la même chose si possible, seulement le code et les lignes semblent différents.

Est ce que vous pourriez m'aider à modifier celui-ci pour obtenir le même resultat SVP? 

voici mon code :

/******************************************************************************
                        Home Page Slider
*******************************************************************************/
#homepage-slider {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 14px;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  float: left;
  /*****************************************************************************
                          BXSlider Styles
  ********************************************************************************/ }
  @media (max-width: 767px) {
    #homepage-slider {
      width: 100%;
      max-width: 100%;
      padding-top: 20px; } }
  #homepage-slider #homeslider {
    margin: 0 auto;
    padding: 0; }
  #homepage-slider .homeslider-container {
    position: relative; }
  #homepage-slider .homeslider-image {
    position: absolute;
    left: 0;
    top: 0; }
  #homepage-slider .homeslider-description {
    position: absolute;
    left: 0;
    top: 0;
    padding: 50px 50px;
    cursor: pointer; }
    #homepage-slider .homeslider-description h2 {
      font-size: 2.7em;
      color: white;
      margin: 0;
      padding: 0; }
    #homepage-slider .homeslider-description p {
      width: 50%;
      font-size: 1.15em;
      line-height: 1.3em;
      padding: 0.5em 0;
      color: white; }
    #homepage-slider .homeslider-description button {
      font-size: 1.2em;
      text-transform: uppercase; }
    @media (max-width: 1200px) {
      #homepage-slider .homeslider-description {
        padding: 20px;
        font-size: 0.8em; } }
    @media (max-width: 768px) {
      #homepage-slider .homeslider-description {
        padding: 30px;
        font-size: 0.7em; }
        #homepage-slider .homeslider-description p {
          font-size: 1.5em; } }
    @media (max-width: 480px) {
      #homepage-slider .homeslider-description {
        padding: 30px;
        font-size: 0.5em; }
        #homepage-slider .homeslider-description p {
          font-size: 1.7em; } }
  #homepage-slider .bx-wrapper a {
    display: block; }
  #homepage-slider .bx-wrapper img {
    height: auto; }
  #homepage-slider .bx-wrapper .bx-viewport {
    width: 100%;
    direction: ltr !important; }
  #homepage-slider .bx-wrapper .bx-pager.bx-default-pager a {
    background: #666; }
  #homepage-slider .bx-wrapper .bx-controls-direction a {
    top: auto;
    margin-top: 0px;
    font-size: 1em;
    bottom: 10px;
    outline: 0;
    width: 52px;
    height: 52px;
    text-indent: -9999px;
    z-index: 9999;
    border: 2px solid #fff;
    line-height: 18px; }
    #homepage-slider .bx-wrapper .bx-controls-direction a:before {
      height: 48px;
      width: 48px;
      display: block;
      background: #fff;
      content: ".";
      opacity: 0.14;
      text-indent: -9999px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1; }
    #homepage-slider .bx-wrapper .bx-controls-direction a:after {
      display: block;
      width: 48px;
      height: 48px;
      color: #fff;
      text-indent: 0;
      text-align: center;
      font-size: 21px;
      font-family: "FontAwesome";
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      padding: 16px 0 0 0; }
    #homepage-slider .bx-wrapper .bx-controls-direction a:hover:before {
      background: #333;
      opacity: 0.83; }
  #homepage-slider .bx-wrapper .bx-prev {
    right: 60px;
    left: auto; }
    #homepage-slider .bx-wrapper .bx-prev:after {
      content: "\f053"; }
  #homepage-slider .bx-wrapper .bx-next:after {
    content: "\f054"; }

.ie8 #homepage-slider .bx-wrapper .bx-controls-direction a:before {
  background: #333; }

[Remy FRK Corp]

Bonjour a vous ☠️

Je ne crois pas reconnaitre le code du carrousel d'origine de PS 1.7xx peut être, êtes vous sur 1.6xx (que je ne connais pas donc plouf) ,sinon  je suppose donc que vous êtes sur un thème autre que celui d'origine...

Et votre question si j'ai bien compris consiste à savoir comment placer les "flèches" du carrousel principal: une à droite une à gauche centrées sur la hauteur de l'image ?

auriez vous un lien vers votre site à nous communiquer? (c'est pas que votre code css ne me parle pas (ca viendrait pas de owl d'ailleur?) mais entre nous on  ne va pas dire non plus qu'il chante...dans l'idée vous avez des choses comme :

  #homepage-slider .bx-wrapper .bx-controls-direction

sur lesquels il va falloir sans doute faire quelque chose.

Franchement le css hors contexte c'est faisable mais tellement plus fastidieux qu'un lien vers une page...

[tetedemort]

Bonjour,

Merci pour votre réponse.

C'est tout à fait cela j'aimerais une fleche à droite une à gauche centrées sur la hauteur de l'image.

Voici le lien du site en question : https://tetedemort-boutique.fr/index.php

[Remy FRK Corp]

Bonsoir.

voici les les css à changer (mettez ça directement dans custom.css vous vous embêterez pas)

#homepage-slider .bx-wrapper .bx-controls-direction a {
    top: 45%;
}
#homepage-slider .bx-wrapper .bx-prev {
    right: auto;
    left: 10px;
}

 

ci après le screenshot du résultat:

Edited February 3, 2021 by Remy FRK Corp (see edit history)

[tetedemort]

Bonjour,

Merci beaucoup pour votre aide.

Finalement après visualisation du screenshot je crois que je préfère laisser les flèches au même endroit. Par contre ce que je souhaiterais faires c'est réduire de moitié la taille des flêches mais uniquement sur mobile. Elles sont beaucoup trop grosses par rapport à la version PC.

Est ce que vous sauriez m'indiquer comment effectuer cette manip ?

Merci encore

 

[Remy FRK Corp]

Bonsoir TDM

essayez ca dans le custom css :

         
  @media (max-width:767px) {
  #homepage-slider .bx-wrapper .bx-controls-direction a {
      font-size: 1em;
      width: 32px;
      height: 32px;
      line-height: 0px;
  }
  #homepage-slider .bx-wrapper .bx-controls-direction a::before {
      height: 32px;
      width: 32px;
  }
  #homepage-slider .bx-wrapper .bx-controls-direction a::after {
      width: 28px;
      height: 28px;
      font-size: 13px;
      padding: 15px 0 0 0;
  }
}

vous pouvez jouer sur les valeurs pour atteindre la taille souhaité normalement

la le réglage est sensé donner ca :

 

[tetedemort]

Bonjour Remy,

C'est fait merci beaucoup.

Comme je n'y connais pas grand chose, je souhaiterais rapprocher les deux flèches très légèrement, quelle paramètre dois je modifier ?

 

[tetedemort]

Et si possible également les descendre à peine (disons 1 ligne)

[Remy FRK Corp]

Bonjour TDM

je vous ai fais le réglage et j'y ai mis des commentaires, vous pouvez ajuster au besoin en changeant les valeurs en % et en px.

 /*Reglages sur ordinateur */ 


  #homepage-slider .bx-wrapper .bx-prev {
    right: 50px; /* reglage positon fleche gauche  */
  }
   #homepage-slider .bx-wrapper .bx-controls-direction a {
    top: 90%; /* reglage hauteure des fleches droites et gauche  */
  }


/*Reglages Mobile */

  @media (max-width:767px) {

  #homepage-slider .bx-wrapper .bx-controls-direction a {
      font-size: 1em;
      width: 32px;
      height: 32px;
      line-height: 0px;
  }
  #homepage-slider .bx-wrapper .bx-controls-direction a::before {
      height: 32px;
      width: 32px;
  }
  #homepage-slider .bx-wrapper .bx-controls-direction a::after {
      width: 28px;
      height: 28px;
      font-size: 13px;
      padding: 15px 0 0 0;
  }
  #homepage-slider .bx-wrapper .bx-prev {
    right: 50px; /* reglage positon fleche gauche  */
  }

   #homepage-slider .bx-wrapper .bx-controls-direction a {
    top: 80%; /* reglage hauteure des fleches droites et gauche  */


  }
}

 

 

Edited February 6, 2021 by Remy FRK Corp (see edit history)

[tetedemort]

Bonjour,

Merci encore.

Par contre je voudrais réduite à peine la taille des fleches mais uniquement sur mobile et j'ai tout essayé dès que je bouge quelque chose ca modifie en même temps le mobile et PC.

D'autres part, j'aurais aimé réduire l'espace entre les slides et le menu toujours sur mobile uniquemen (voir PJ), sauriez vous m'aider à ce niveau là ?

[Remy FRK Corp]

Bonsoir TDM

La partie supérieur sert pour les pc la partie inférieur pour les mobiles :

  
   /* ci dessous Reglages sur ordinateur */ 


  #homepage-slider .bx-wrapper .bx-controls-direction a {
      font-size: 1em;
      width: 32px;
      height: 32px;
      line-height: 0px;
  }
  #homepage-slider .bx-wrapper .bx-controls-direction a::before {
      height: 32px;
      width: 32px;
  }
  #homepage-slider .bx-wrapper .bx-controls-direction a::after {
      width: 28px;
      height: 28px;
      font-size: 13px;
      padding: 15px 0 0 0;
  }
  #homepage-slider .bx-wrapper .bx-prev {
    right: 50px; /* reglage positon fleche gauche  */
  }
   #homepage-slider .bx-wrapper .bx-controls-direction a {
    top: 90%; /* reglage hauteure des fleches droites et gauche  */
  }


/* ci dessous Reglages Mobile */

  @media (max-width:767px) {

  #homepage-slider .bx-wrapper .bx-controls-direction a {
      font-size: 1em;
      width: 32px;
      height: 32px;
      line-height: 0px;
  }
  #homepage-slider .bx-wrapper .bx-controls-direction a::before {
      height: 32px;
      width: 32px;
  }
  #homepage-slider .bx-wrapper .bx-controls-direction a::after {
      width: 28px;
      height: 28px;
      font-size: 13px;
      padding: 15px 0 0 0;
  }
  #homepage-slider .bx-wrapper .bx-prev {
    right: 50px; /* reglage positon fleche gauche  */
  }

   #homepage-slider .bx-wrapper .bx-controls-direction a {
    top: 80%; /* reglage hauteure des fleches droites et gauche  */


  }
}

 

[tetedemort]

Bonjour,

Je vous ai mis en PJ copie ecran de mon ftp.

Pourriez vous m'indiquer la ligne exacte pour le mobile SVP ?

Merci d'avance