[RÉGLÉ] Modifer taille zone de recherche

[freud]

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 !

[freud]

Apparement cette fonctionnalité est trés complexe........

[RobertG]

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.

[freud]

Bonjour,

Désolé je n'avais pas pensé au template, j'utilise le template Helium (v5.4.29 / g5_helium) de Gantry 5
Merci

[freud]

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.

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]
}

[freud]

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

[Eddy.vh]

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…

[freud]

Bonjour,

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 :

.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

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;
    }
}