[ulee]

#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS: 1.8.1
#~ Nom de l'hébergeur : OVH
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.8.1
#~ Installed Modules:
#~ * CMSMailer: 2.0
#~ * FileManager: 1.0.2
#~ * MenuManager: 1.6.5
#~ * ModuleManager: 1.4
#~ * News: 2.10.6
#~ * nuSOAP: 1.0.1
#~ * Printing: 1.1.0
#~ * Search: 1.6.5
#~ * ThemeManager: 1.1.1
#~ * TinyMCE: 2.7.2
#~ Config Information:
#~ * php_memory_limit:
#~ * process_whole_template: false
#~ * output_compression: false
#~ * max_upload_size: 64000000
#~ * default_upload_permission: 664
#~ * url_rewriting: none
#~ * page_extension:
#~ * query_var: page
#~ * image_manipulation_prog: GD
#~ * auto_alias_content: true
#~ * locale:
#~ * default_encoding: utf-8
#~ * admin_encoding: utf-8
#~ * set_names: true
#~ Php Information:
#~ * phpversion: 5.2.13
#~ * md5_function: On (Vrai)
#~ * gd_version: 2
#~ * tempnam_function: On (Vrai)
#~ * magic_quotes_runtime: Off (Faux)
#~ * E_STRICT: 0
#~ * memory_limit: 128M
#~ * max_execution_time: 30
#~ * output_buffering: On
#~ * safe_mode: Off (Faux)
#~ * file_uploads: On (Vrai)
#~ * post_max_size: 64M
#~ * upload_max_filesize: 64M
#~ * session_save_path: /tmp (1777)
#~ * session_use_cookies: On (Vrai)
#~ * xml_function: On (Vrai)
#~ Server Information:
#~ * Server Api: cgi
#~ * Server Db Type: MySQL (mysql)
#~ * Server Db Version: 5.0.90
#~ ----------------------------------------------
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~

Bonjour à vous,
c'est la première fois que je poste sur votre forum, sur lequel j'ai toujours trouver les réponses à mes problèmes...

Toutefois, je ne parviens pas à trouver la réponse cette fois-ci.
Je poste dans la section "Graphisme", mais je ne sais pas si cela ne relève pas de la section "Modules". (merci aux modos de déplacer mon post si c'est le cas)
Je pu changer le texte dans le champs de saisie, et l'intitulé du bouton "submit", mais j'aimerais modifier l'apparence du module search.

En lieu et place du champs de saisie rectangulaire et du bouton arrondi "submit", je voudrais avoir un champs de saisie à coins arrondis et remplacer le bouton par une icône représentant une loupe.

Pourriez-vous m'aiguiller dans mes recherches et m'indiquer quels sont les paramètres à bidouiller pour arriver à un tel résultat ?

Merci par avance pour vos réponses...

[bess]

Joue avec le CSS de ton gabarit pour faire ce genre de chose : recherche les occurances de

Code :

div#search

et tous les associés. C'est groupé dans le css donc tu risques pas de les louper

firefox et son addon firebug t'aideront bien. voir le tuto

[ulee]

Merci pour ta réponse rapide
Désolé, je ne suis encore vraiment habitué à toutes les subtilités du CSS et je ne parviens pas à modifier l'apparence du champs et du bouton comme je l'aimerais.. je suis un peu perdu en fait ! ^^

J'ai regardé avec Firebug et j'ai réussi à isoler le module search.
Je peux modifier les dimensions des 2 éléments grâce à l'onglet "Apparence" à droite, mais pas leur forme (arrondis, etc...)

J'y trouve ceci :
<input type="text" onblur="if(this.value=='') this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue) this.value='';" value="Recherche ..." maxlength="50" size="20" name="cntnt01searchinput" id="cntnt01searchinput" class="search-input">

A l'intuition je dirais qu'il faut intervenir sur "cntnt01searchinput", mais je ne sais pas où trouver cet élément... :/

Désolé, je sèche un peu là...

Merci

[bess]

je suis désolé ulee mais nous ne sommes pas ici pour te former au CSS... tu trouveras d'excellents tuto sur le sujet pour faire ce genre de chose.

et comme j'ai dit la modification se passe dans le CSS, la feuille de style doit donc être modifiée à la source. firebug te permet juste de tester en live sans persistance de tes modifs.

et autre point qu'il faut savoir : il gère très mal les arrondis, insère les direct dans la feuille de style, en gros il sait afficher les propriétés arrondis d'une classe, mais il est incapable de l'écrire à la volée à partir de zéro... je sais pas si je me fait comprendre :/

[ulee]

oui cela est très clair...
Ce qui l'est moins, c'est de comprendre de quel CSS tu parles.

Voici ce que je pense avoir compris sur le fonctionnement de CMSMS :
- j'ai un gabarit (contenu_gab) dans lequel je place mes différentes div.
- à ce gabarit j'y attache la feuille de style (contenu_css) dans laquelle je paramètre les spécificités des mes div.
jusque là, tout va bien...

Ensuite, j'intègre le module "search" dans la div correspondant au header de ma page, dans le gabarit "contenu_gab".
Là, toujours pas de problème... le module s'affiche par défaut.
Je change le texte affiché dans la champs, via l'onglet "options".
Dans l'onglet gabarit, je supprime le $label search devant le module, et remplace le texte "submit" dans le bouton par "Ok".
jusque là, tout va bien...

Maintenant je veux modifier plus en profondeur l'aspect graphique du champs et du bouton...
Tu me dis de regarder dans mon CSS (contenu_css), mais je n'ai rien d'autre que ce que j'y ai déclarer pour mes différentes div.
Je ne sais pas si tu parles de ce CSS ou d'un autre.
Si il s'agit d'un autre, pourrais tu me désigner lequel stp ?

Ce module "search" fait surement appel à des composants (CSS ou autres) pour qu'il ai l'apparence qu'il a... c'est ceux là que j'aimerais modifier.

Cette fois, c'est moi qui ne sais pas si je me suis fait comprendre

Merci

[bess]

alors je pars du principe que tu utilise une skin basique fournit par défaut avec cmsms 1.6.x et supp. (sinon je risque pas de deviner)

le CSS de tes champs search + bouton submit, TOUT est présent dans la feuille de style nommée Layout_NCleanBlue

si tu as fait des modifs sur l'organisation des feuilles de style, alors effectivement je risque pas de pouvoir t'aider :/

[bess]

et au cas ou tu doutes encore:

Code :

/* ------------ Header - Search ------------ */
div#search {
    width: 190px;
    height: 28px;
    margin-top: 31px;
    margin-right: 20px;
}
div#search label {
    text-indent: -9999em;
    height: 0pt;
    width: 0pt;
    display: none;
}
div#search input.search-input {
/* specific size for image, your image may need these adjusted */
    width: 143px;
    height: 17px;
/* removes default borders, allows use of image */
    border-style: none;
/* text color */
    color: #999;
/* padding of text */
    padding: 7px 0px 4px 10px;
    float: left;
/* set all font properties at once, weight, size, family */
    font: bold 0.9em Arial, Helvetica, sans-serif;
/* left input image, set your own here */
    background: url(/uploads/NCleanBlue/search.png) no-repeat left top;
}
div#search input.search-button {
/* specific size for image, your image may need these adjusted */
    width: 37px;
    height: 28px;
/* removes default borders, allows use of image */
    border-style: none;
/* hides text, image has text */
    text-indent: -9999em;
    float: left;
    margin: 0;
/* provides positive hover effect */
    cursor: pointer;
/* removes default size/height */
    font-size: 0px;
    line-height: 0px;
/* submit button image, set your own here */
    background: transparent url(/uploads/NCleanBlue/search.png) no-repeat right top;
}

source : http://www.cmsmadesimple.fr/demo/cmsms16...012308.css

[ulee]

Ah ben ouais, effectivement... toute mes confuses !!!

Je suis parti de nouvelles feuilles de styles avec, forcement :/ , seulement ce que j'ai pu y mettre...
Je ne trouvais donc pas tout les réglages CSS relatifs au module "search"... héhé

Je pense que je vais pouvoir trouver tout ce dont j'ai besoin dans le code que tu viens de poster.
Et je penserais à jeter un œil dans les skins fournis avec CMSMS la prochaine fois que je cherche des réglages spécifiques aux modules.

Merci beaucoup pour ta patience et bravo pour le travail que vous fournissez sur ce forum.

[bess]

si c'est tout bon ajoute [résolu] dans le titre de ton premier message stp