adHoc - Boîte et script recherche

(Selon forum Mania)

K : styler et à positionner la boîte de recherche ?

A : styler avec attention le div conteneur (#src-head) pour passer ensuite au champ de recherche, puis éventuellement, au bouton (il serait possible de le cacher)

K : J'ai essayé (sans succès) de mettre le border du champ de texte en marron, d'en arrondir les angles, de grossir l'image du bouton de recherche.

A : Le champ de recherche est un champ de type texte. Son style est contenu à ligne 38 de ton ficher css. Le changement du bord aura effet sur les autres champs et sur les textarea de ton site, il est possible d'utiliser l'attribut search du HTML 5 pour styler ce champ de façon différente.

K : Il faudrait remplacer des input type="text" dans le code par des input type="search" et ensuite styler spécifiquement ces champs de recherche ?


Au final, je n'ai pas créé de style distinct, donc, c'est le même pour tous les champs de type texte.


input[type=text], input[type=password], textarea {padding:4px;border : solid 1px rgb(110, 85, 55);box-shadow: 0px 0px 10px rgba(77, 61, 38,.8) inset; border-radius:30px 30px 30px 30px;}
input[type=text]:focus, input[type=password]:focus, textarea:focus {background:rgb(255, 255, 255);border : solid 1px rgb(0,0,0);}


Résultat : 1GUMtgz


Le script de recherche hérité de de Phortail gagnerait à être modifié. J'ai un peu avancé, mais il faut que je retrouve mes premières ... recherches.

J'ai créé 2 nouvelles classes de CSS, les voilà pour la skin Mik :

.search-form {width:100%;display:inline-block;border: 0.1rem solid rgb(0,0,0);padding:0.5rem;}
.search-text {max-height:8rem;overflow-y:auto;overflow-x:hidden;padding:1rem;border: 1px solid rgb(143, 123, 94);}

Puis j'ai forké search.php pour le nombre de résultats / page, le nombre de ligne de chaque résultat, pour supprimer la 2e URL, pour mettre par défaut majuscules/minuscules et mots entiers.

La class search-form donne du style au formulaire de recherche et la class search-text style chacun des résultats..

Téléchargement de search.zip : ici


Démo ici : http://revestou.fr/search.php


Index |Info | Imprimer | PDF | Permalien

Technique

Installer

Sécuriser

Référencer

Fabriquer le web

adHoc

Astuces CSS

Mail, Webmail, courrier etc ...

Piwigo

Écolibre