Modifer taille zone de recherche

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Modifer taille zone de recherche

    Bonsoir tout le monde,

    J'ai essayer un tas code CSS trouver par-ci et par-ci mais en vain. Y-a t il un moyen SVP de modifier la hauteur et la largeur de la zone de recherche du mod_search ?
    Merci !
    Dernière édition par freud à 16/09/2019, 12h59

  • #2
    Apparement cette fonctionnalité est trés complexe........

    Commentaire


    • #3
      Bonjour,

      A priori, cette taille est définie par le template. Sans savoir lequel est sur le site ou sans avoir l'adresse du site (ce qui ne nécessite pas qu'on aie installé ce template pour tester), difficile de répondre.
      "Patience et longueur de temps font plus que force ni que rage..." (La Fontaine : Le Lion et le Rat) - "Il n'y a pas de problèmes; il n'y a que des solutions" (André Gide).
      MoovJla et LazyDbBackup sur www.joomxtensions.com - FaQ sur www.fontanil.info - Site pro : www.robertg-conseil.fr chez PHPNET, sites perso chez PlanetHoster + sites gérés chez PHPNET, PlanetHoster, Ionos et OVH

      Commentaire


      • #4
        Bonjour,

        Désolé je n'avais pas pensé au template, j'utilise le template Helium (v5.4.29 / g5_helium) de Gantry 5
        Merci
        Dernière édition par freud à 15/09/2019, 14h07

        Commentaire


        • #5
          Bonjour,
          Le problème est réglé et il en a fallu du temps. Effectivement, c'est au niveau du template je pense qu'on appelle cela un override, bref.
          Il faut ajouter le height dans g5_helium/scss/helium-joomla/styles/_forms.scss à la ligne 68 sauf qu'un petit souci pour les smartphones où la zone ne garde pas sa place en tout cas merci.

          Code:
          input[type="text"],
          input[type="password"],
          input[type="datetime"],
          input[type="datetime-local"],
          input[type="date"],
          input[type="month"],
          input[type="time"],
          input[type="week"],
          input[type="number"],
          input[type="email"],
          input[type="url"],
          input[type="search"],
          input[type="tel"],
          input[type="color"],
          .uneditable-input {
          [B][COLOR=#FF0000] height: 31px;    [/COLOR][/B]
          }

          Commentaire


          • #6
            Plutot non, le height existait déjà à 41 et l'ai remplacé par 31

            Commentaire


            • #7
              Bonjour.

              Il me semble t'avoir déjà signalé qu'il est déconseillé de modifier les fichiers css des templates.

              À la prochaine mise à jour, ta modification sera écrasée et il faudra recommencer, et recommencer et recommencer, etc.
              Il est préférable, pour ne pas dire indispensable, que les modifications se fassent dans un fichier custom.css ou user.css selon le template…
              Cordialement.
              __
              Eddy !!!
              Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

              Commentaire


              • #8
                Bonjour,

                Envoyé par Eddy.vh
                Il me semble t'avoir déjà signalé qu'il est déconseillé de modifier les fichiers css des templates.
                Oui je sais et merci pour ça. Mais malheureusement je n'ai pas su quel objet CSS il faut appeler dans le custom.css
                Dans les versions précedentes de gantry je mettais le code suivant dans le custom.css mais pour une zone de recherche d'une extension tierce dont je renseignais le CSS dans la zone suffixe CSS du module Searchbox1 :

                Code:
                .Searchbox1 input[type="text"]
                {
                  border-radius: 8px 8px 8px 8px;
                  border: solid 1px GRAY;
                  /*box-shadow: inset 0 0 0 1px #4d576e;
                  transition: box-shadow 0.3s, border 0.3s;*/
                  width:300px;
                  height:16px;
                  margin-right:0px;
                  margin-left:40px;  
                  float:right;
                  margin-top:-10px;
                  margin-bottom:-10px;
                  font-size:0.9em;
                  font-weight: NORMAL;
                  }
                Mais avec Gantry 5 je ne sais pas quel objet il faut référencé de toute les manieres il se trouve dans _forms.scss que j'ai modifier pour le height si tu as une idée du comment faire ?
                Merci encore.

                _forms.scss

                Code:
                legend {
                    color: $base-text-color;
                    font-family: get-font-family($font-family-title);
                    font-weight: $font-weight-bold;
                    font-size: $core-font-size + 0.5;
                    line-height: $core-line-height;
                    margin: 1rem 0;
                }
                
                .input-prepend .chzn-container-single .chzn-single,
                .input-append .chzn-container-single .chzn-single {
                    border-color: $base-border-color;
                }
                
                .input-prepend .chzn-container-single .chzn-drop,
                .input-append .chzn-container-single .chzn-drop {
                    border-color: $base-border-color;
                }
                
                .form-actions {
                    background: none;
                    border: 0;
                }
                
                textarea,
                input[type="text"],
                input[type="password"],
                input[type="datetime"],
                input[type="datetime-local"],
                input[type="date"],
                input[type="month"],
                input[type="time"],
                input[type="week"],
                input[type="number"],
                input[type="email"],
                input[type="url"],
                input[type="search"],
                input[type="tel"],
                input[type="color"],
                .uneditable-input {
                    color: $base-text-color;
                    background-color: $base-background;
                    border: 1px solid $base-border-color;
                    box-sizing: border-box !important;
                    @include transition(border 0.2s linear, box-shadow 0.2s linear);
                
                    .input-prepend &, .input-append & {
                        padding: 0.35rem;
                        max-width: 95%;
                    }
                }
                
                input[type="text"],
                input[type="password"],
                input[type="datetime"],
                input[type="datetime-local"],
                input[type="date"],
                input[type="month"],
                input[type="time"],
                input[type="week"],
                input[type="number"],
                input[type="email"],
                input[type="url"],
                input[type="search"],
                input[type="tel"],
                input[type="color"],
                .uneditable-input {
                [B][COLOR=#FF0000]height: 31px;    [/COLOR][/B]
                }
                
                .input-prepend > .add-on, .input-append > .add-on {
                    background: darken($base-background, 15%);
                    border: 1px solid $base-border-color;
                    padding: 0.275rem;
                    -webkit-padding-before: 7px;
                    -webkit-padding-after: 7px;
                    margin-right: -2px;
                
                    .dir-rtl & {
                        margin-right: auto;
                        margin-left: -2px;
                
                        .btn {
                            margin-right: auto;
                            margin-left: -2px;
                        }
                    }
                }
                
                // Search in Edit Panel
                #filter_search {
                    width: auto;
                    padding: 4px 12px;
                    line-height: normal;
                    height: 28px;
                }
                
                textarea {
                    width: 100%;
                }
                
                .dir-rtl {
                    .form-horizontal {
                        .control-label {
                            float: right;
                            text-align: left;
                        }
                
                        .controls {
                            margin-left: 0;
                            margin-right: 180px;
                        }
                    }
                }
                
                select {
                    color: $base-text-color;
                    background: $base-background;
                    border: 1px solid $base-border-color;
                }
                
                // Mailto and Print Windows
                .view-mailto, .body-only {
                    padding: 0 $leading-margin;
                    #g-page-surround {
                        box-shadow: none;
                    }
                }
                
                // Module Editing
                .controls {
                    input[type="radio"] {
                        margin-right: 5px;
                    }
                }
                
                .layout-edit {
                    #sbox-content.sbox-content-iframe {
                        overflow: hidden;
                    }
                }
                
                // Login Module
                #login-form {
                    .input-prepend, .input-append {
                        width: 100%;
                
                        .add-on, .input-small {
                            height: 50px;
                        }
                
                        .btn {
                            height: 50px;
                            line-height: 33px;
                            background: #4db2b3;
                            color: #ffffff;
                            text-shadow: none;
                        }
                
                        .input-small {
                            width: 80%;
                        }
                    }
                
                    #modlgn-secretkey {
                        width: 65%;
                    }
                }
                
                // Search
                #finder-search {
                    .inputbox {
                        margin: 1rem 0 0.5rem 0;
                    }
                }
                Dernière édition par freud à 16/09/2019, 19h16

                Commentaire

                Annonce

                Réduire
                Aucune annonce pour le moment.

                Partenaire de l'association

                Réduire

                Hébergeur Web PlanetHoster
                Travaille ...
                X