Comment créer une barre de recherche personnalisée ?

J’essaie de créer une barre de recherche personnalisée similaire au plugin discourse-search-banner. Je ne souhaite pas utiliser ce plugin car il perturbe l’apparence de mon thème.

Comment puis-je reproduire cette fonctionnalité avec un élément <input type="text" /> de mon choix ?

J’ai examiné le code source du plugin et j’ai tenté de l’adapter pour utiliser uniquement mon élément HTML, mais je n’ai pas réussi à trouver la solution. Toute astuce serait appréciée !

2 « J'aime »

Pourriez-vous mettre un lien vers ce plugin ici ? Je n’arrive pas à le trouver. Peut-être aussi identifier le créateur du plugin, il pourrait avoir quelques idées.

2 « J'aime »

Parlez-vous de ce #theme-component ?

2 « J'aime »

Exactement ! Désolé, c’est de ma faute de ne pas avoir mis le lien. Je vais faire une modification.

1 « J'aime »

Pas de souci, mais c’est un composant de thème et non un plugin, ce qui modifie quelques éléments. Surtout parce que les composants de thème fonctionnent avec une logique côté client, tandis que les plugins fonctionnent avec une logique côté serveur. Ou cherchez-vous à créer un plugin basé sur ce composant de thème ?

2 « J'aime »

Désolé pour cette réponse tardive.

Peu importe que cela se traduise par un plugin ou un composant de thème, tant que j’obtiens la fonctionnalité souhaitée. En gros, ce dont j’ai besoin, c’est de reproduire le comportement de la recherche par défaut (l’icône dans la barre supérieure) sur un champ de saisie de texte de mon choix.

Comment procéder ?

De nombreux problèmes peuvent être résolus en CSS.

Qu’est-ce qui vous empêche d’inspecter et de modifier simplement le CSS ? Ce serait de loin la solution la plus rapide.

Dans le pire des cas, faites un fork du TC et modifiez votre CSS ?

1 « J'aime »

Ce n’est pas vraiment le CSS, c’est davantage l’emplacement et la façon dont cela s’intègre à ma structure HTML. Si je parviens à comprendre comment modifier l’endroit où le composant est injecté, je pourrais avoir une solution. Pouvez-vous m’orienter dans cette direction ?

Avec le composant de thème activé sur votre site, inspectez le code avec votre navigateur et voyez où il est placé. Ajustez-le dans votre navigateur pour trouver un emplacement plus confortable, puis utilisez cette information pour mettre à jour ou modifier un fork du TC. Cela devrait fonctionner.

Il existe également une solution prête à l’emploi pour l’en-tête :

Si aucune de ces options ne convient et que les modifications CSS ne suffisent pas, vous devrez vous salir les mains avec le code des widgets :).

1 « J'aime »

Un message a été divisé en un nouveau sujet : Où trouver la barre de recherche dans nos paramètres ?