Problème apparence barre de recherche
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Problème apparence barre de recherche
Détails techniques
Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)
Description du problème
Bonjour à tous!Je vous sollicite aujourd'hui, car je souhaite ajouter une barre de recherche instantanée sur mon forum, mais je n'arrive pas à bien personnaliser son apparence.
Vous trouverez ci-dessous le rendu actuel (en haut de l'image), et ce que je souhaite faire (en bas).
1 - Je n'arrive pas à supprimer un trait de couleur gris qui change de couleur et devient bleu au passage de la souris (surement dans le style par défaut du forum).
2- En mettant un peu de transparence sur le fond (car je ne souhaite voir l'image d'arrière plan), cela me grise mon texte et il n'est plus bien visible, est-il possible de forcer du noir?
3 - Je souhaite mettre une loupe sur le côté droit avec un fond de couleur mais je n'y arrive pas.
Voila maintenant les codes que j'ai utilisé:
Sur le template haut de page pour créer le champ recherche:
- Code:
<div class="rechercheaccueil">
<form action="/search" method="get">
<div class="input-wrap" >
<input type="text" class="inputboxaccueil" name="search_keywords" size="24" placeholder=" Rechercher des reportages" style="height=30px"/>
<button type="submit" class="ion-android-search"></button>
</div>
</form>
</div>
</div>
Et sur mon CSS, je pense que c'est là que ca ne va pas:
- Code:
.rechercheaccueil {
width: 80% !important;
max-width: 500px !important;
height: 35px;
margin: auto;
border: 0px solid #3E464C;
border-radius: 8px;
padding-bottom: -5px;
text-color: black !important;
background-color: rgba(255, 255, 255, .5);
background-repeat: no-repeat;
background-position: 2%;
}
Merci d'avance pour votre réponse!
A+
Dernière édition par ju012345 le Jeu 29 Déc 2022 - 19:45, édité 1 fois
Re: Problème apparence barre de recherche
Hey !
est-ce que le résultat vous va si vous remplacez votre html par :
Et votre CSS par ceci :
J'ai travailler sur l'input plutôt que sur la div qui l'entoure et j'ai ajouté un id à l'input ce qui permet de donner une importance plus grande aux règles CSS attachées à cet input qu'aux règles générales données dans le template de votre forum. Et j'ai essayé de me rapprocher au mieux de l'image que vous avez fournie.
est-ce que le résultat vous va si vous remplacez votre html par :
- Code:
<div class="rechercheaccueil">
<form action="/search" method="get">
<div class="input-wrap" >
<input type="text" id="inputboxaccueil" name="search_keywords" size="24" placeholder="Rechercher des reportages" />
<button type="submit" class="ion-android-search"></button>
</div>
</form>
</div>
Et votre CSS par ceci :
- Code:
#inputboxaccueil {
display: inline-block;
width: 80%;
max-width: 420px;
height: 37px;
margin: auto;
border: 1px solid #3E464C;
border-radius: 22px;
padding: 0 38px 0 12px;
color: #000;
background-color: rgba(255, 255, 255, .5);
}
.rechercheaccueil .ion-android-search {
display: inline-block;
position: relative;
left: -57px; top: 2.5px;
margin-left: 0;
background-color: orangered;
height: 30px;
width: 50px;
border-radius: 16px;
border: 0;
color: white;
}
J'ai travailler sur l'input plutôt que sur la div qui l'entoure et j'ai ajouté un id à l'input ce qui permet de donner une importance plus grande aux règles CSS attachées à cet input qu'aux règles générales données dans le template de votre forum. Et j'ai essayé de me rapprocher au mieux de l'image que vous avez fournie.
Re: Problème apparence barre de recherche
Bonsoir!
Super, c'est génial ça fonctionne très bien, je vois pouvoir continuer mon développement!
Un grand merci pour votre aide et pour votre réactivité!
Bonne soirée
Super, c'est génial ça fonctionne très bien, je vois pouvoir continuer mon développement!
Un grand merci pour votre aide et pour votre réactivité!
Bonne soirée
Sujets similaires
» Installer barre de recherche Google sur la même ligne que la barre de recherche Forumactif
» Problème avec la barre de recherche
» Problème barre '' index, recherche ..."
» Barre de recherche
» bug de la barre de recherche
» Problème avec la barre de recherche
» Problème barre '' index, recherche ..."
» Barre de recherche
» bug de la barre de recherche
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum