Comment modifier l’affichage de plusieurs éléments dans la position Below-top ?

[Micky701]

Bonjour,

* Joomla 4.4.3
* Template Cassiopeia + le module pro Kickstart Cassiopeia
* Affichage fluide
* Menu principal horizontal en position Menu
* Développement en local


Dans la position Below-top, je souhaite à l’extrême gauche l’image d’un logo et à l’extrême droite un lien de menu "Espace membres" (qui ouvre le module de connexion) et le module "Recherche", soit côte à côte soit l’un au dessus de l’autre.
Je souhaite également que sur smartphones, le logo soit en haut sur toute la largeur et en dessous le lien de menu "Espace membres" et le module "Recherche" soit côte à côte soit l’un au dessus de l’autre.

J’ai créé une image du logo dans un module personnalisé publié dans la position Below-top, un nouveau menu avec comme seul lien "Connexion" publié dans la position Below-top et j’ai publié le module "Recherche" dans la position Below-top.

Sur PC, le logo se situe à l’extrême gauche mais le lien de menu est collé au logo et le module de recherche est à l’extrême droite.
Sur smartphones, le logo disparaît complètement, le lien de menu est à gauche et le module de recherche n’apparaît que partiellement.

Si je ne publie que le logo et le module de recherche, ce dernier se trouve collé au logo aussi bien sur PC que sur smartphone.

Je n’arrive pas à positionner tout ça correctement en CSS.
Est-ce possible uniquement en CSS ?
Pouvez-vous m’apporter votre aide ?

Michel

[lomart]

Bonjour,

Dans ce cas, j'utilise un module personnalisé dans lequel je fais appel à des "loadposition nom_position_module" dans des blocs mis en forme en CSS.
Par facilité, pour gérer les mediaqueries, j'utilise les règles flexgrid de la feuille de style de UP : https://up.lomart.fr/liste-css/css-flexgrid
Un exemple (pour la clarté, j'ai remplacé les "loadposition" par du texte)

<div class="fg-row fg-vcenter bd-bleu">
<div class="fg-c3 fg-cs12 tc bd-rouge">LOGO</div>
<div class="fg-c5 fg-cs0 bd-orange">Espace vide</div>
<div class="fg-c4 fg-cs12">
<div class="bd-gris tc">Connexion</div>
<div class="bd-vert tc">Recherche</div>
</div>
</div>​</div>​

Voici le résultat. Aidez-vous des indications sur cette page :https://up.lomart.fr/infos/css pour comprendre le rôle des classes css.

En cas de problème avec l'éditeur, il est possible d'utiliser des actions DIV de UP

{up div=fg-row fg-vcenter bd-bleu}
{up div=fg-c3 fg-cs12 tc bd-rouge}LOGO{/up div}
{up div=fg-c5 fg-cs0 bd-orange tc }Espace vide{/up div}
{up div=fg-c4 fg-cs12 tc bd-violet}
{up div=bd-vert tc}Connexion{/up div}
{up div=bd-gris tc}Recherche{/up div}
{/up div}
{/up div}
​

[Micky701]

Bonjour Loïc,

Merci pour toutes ces infos.
Le graphique correspond à mes souhaits.
Je vais étudier ça et essayer de mettre en application.

Michel

[Micky701]

Bonsoir,

Merci, j'ai réussi à obtenir ce que je souhaitais en adaptant un peu le code ci-dessus.
Il me reste un détail à résoudre : je n'arrive pas à supprimer les bordures d'origine du module de recherche pour éviter d'avoir un double cadre :


Savez-vous comment faire ?

[lomart]

Bonjour,

Il faut trouver la classe du bloc avec l'inspecteur du navigateur, puis la surcharger pour annuler la bordure dans le fichier user.css
Une alternative, si tu utilises UP, est d'ajouter l'option css-head à un des shortcodes

css-head=.js-finder-search-query[border: none]​

[Micky701]

Bonjour,

J'avais déjà essayé avec l'inspecteur du navigateur mais je n'arrivais pas à cibler la bonne classe.
Après plusieurs essais j'ai trouvé la bonne :

#mod-search-searchword106 {
border: none;
}

J'ai ajouté une loupe dans le module de recherche.
Ce qui donne ceci :


Merci pour votre aide.

Bonne journée
Michel