Comment changer la taille de la zone de saisie d'un module de recherche?
Joomla est un nouveau venu, et pour moi, il est toujours difficile de se déplacer, par exemple pour changer le style de certains modules ou modèles en cherchant dans les dossiers du système de fichiers, mais je suppose que, cette fois, la seule option est de modifier directement le code.
J'utilise le modèle Purity III et un module appelé Search pour un champ de recherche. J'ai placé ce dernier dans le coin supérieur droit du modèle, dans le menu principal, mais le problème est la taille du curseur (de la police et) du champ de recherche, comme vous pouvez le voir sur l'image suivante:
J'imagine que c'est un problème lié au modèle (et non au module), car si je mets le module de recherche dans une autre position, la taille du curseur a les "bonnes" proportions.
Donc, je suppose que je dois modifier le code du modèle quelque part, mais je ne sais vraiment pas où, il y a des tonnes de .css fichiers longs de milliers de lignes ... Il s’agit essentiellement du contenu du dossier du modèle Purity 3
Puisque je ne suis pas un programmeur php, même si je peux comprendre une partie de sa syntaxe, cela n’aide pas beaucoup, mais j’imagine que j’ai juste à modifier un .css fichier, il me faudrait donc aller dans le dossier css ...
En dehors de cela, existe-t-il un didacticiel expliquant à quel point il est facile de trouver et de modifier les fichiers directement d’un gabarit/module/extension, au moins un guide expliquant le contenu habituel des dossiers, etc.?
J'ai réussi à le faire, alors je vais décrire le processus que j'ai suivi, au cas où d'autres débutants comme moi auraient des problèmes similaires. Je suis sous Mac OS X et j'utilise Safari, ce qui me permet de inspecter le code et le modifier en temps réel. Le processus devrait être similaire avec Chrome/Firebug/Dev Tools ...
Tout d'abord, j'ai ouvert la page du site Web avec le champ de recherche. Sur le champ de recherche, j'ai cliqué avec le bouton droit de la souris et j'ai sélectionné élément à inspecter, comme dans l'image suivante (notez que dans l'image, le style du champ de recherche/curseur a déjà été modifié!)
et une fenêtre intégrée contenant les codes html et css liés à l'élément que nous voulons inspecter, c'est-à-dire le champ de recherche. Le code html qui nous intéresse doit par défaut être mis en évidence, comme dans l’illustration suivante
Sur le côté droit, le code associé à cet élément html devrait également apparaître et il s’agit en fait du code que j’ai modifié. Dans le code css, cliquez sur template.css:2582, comme dans l'image suivante:
L'éditeur central devrait maintenant être configuré pour éditer le code css (au lieu du code html), comme dans l'image suivante:
Essayez de modifier le code et de voir les résultats immédiatement. Notez que ces modifications ne changeront pas les fichiers avec le code, vous devez le faire plus tard manuellement!
Notez sur le côté droit, il y a un panneau gris. Vous pouvez voir à partir de là le fichier que vous modifiez maintenant temporairement:
Allez-y, en utilisant par exemple le terminal, et modifiez le code actuel avec le code auquel vous souhaitez que votre champ de recherche ressemble.
Vous devez modifier les autorisations de fichiers pour créer ce fichier accessible en écriture.
Je devais aussi modifier le fichier avec le même nom (template.css), en dessous de /templates/purity_iii/css/. Ne me demandez pas pourquoi, mais si je ne l'avais pas fait, cela n'aurait pas fonctionné.