[RÉGLÉ] Affectation classe CSS à un module dans custom.css

[amarchand83]

Bonjour,
Je voudrai mettre une image de petite loupe en haut à droite de chaque page de mon site qui renverrait sur un article contentant le module search
J’ai donc créé l’article, le module personnalisé mod_custom avec une classe CSS my-recherche.
J’ai cherché dans les tuto CSS mais je n’arrive pas à voir comment affecter cette class à ce mod_custom personnalisé (j’en ai d’autre). Mes essais sont infructueux
Dans custom.css je pense qu’il faut qq chose comme cela :

.mod-custom .my-recherche {
position: absolute;
top: 20px;
right: 20px;
}

ma syntaxe .mod-custom .my-recherche ne doit pas être bonne…
Merci de votre aide

[lomart]

Re : Affectation classe CSS à un module dans custom.css

Bonjour,

Le plus simple ne serait-il pas de mettre une image de loupe dans le mod_custom

<a href="ma page recherche"><img src="loupe.png"></a>

Plutôt que mettre un module dans une page, pourquoi ne pas appeler un menu de type page recherche ?

[amarchand83]

Re : Affectation classe CSS à un module dans custom.css

Oui c'est ce que j'ai fait mais je voudrai que la loupe s'affiche en petit a côté des petits drapeaux multilangues du site en haut à droite

http://s676245095.onlinehome.fr/notre-maison/nos-valeurs

il n' y a pas bcp de place alors j'avais imaginé :
petite image dans un module personnalisé positionnée par la custom.css, lien sur un article --> l'article juste avec "loadmodule search" du module search de Joomla --> vers une nouvelle page contenant le champ "recherche" Joomla
D'où ma question ci-dessus comment positionner en CSS la petite image

[lomart]

Re : Affectation classe CSS à un module dans custom.css

Ah oui, je me souviens du coup du module en debug.
Donc il suffit de mettre le module également en débug avec le code indiqué dans ma première réponse

on peut modifier le CSS en ciblant #fav-debug au lieu de .mod-custom

[amarchand83]

Re : Affectation classe CSS à un module dans custom.css

J'ai mis dans Custom.css :
.fav-debug .recherche {
position: absolute;
top: 20px;
right: 20px;
}

avec recherche = Suffixe de classe CSS dans parametres avancés de mon module mod_custom (position debug) à placer en haut à droite
Cependant le module s'affiche en position debug tout en bas du template
J'ai du loupé qq chose dans la syntaxe ?

[lomart]

Re : Affectation classe CSS à un module dans custom.css

J'ai du loupé qq chose dans la syntaxe ?

J'ai dit : #fav-debug pas .fav-debug
Eh oui, le codage est tatillon

donc le code est

#fav-debug {
position: absolute;
top: 20px;
right: 20px;
}

Sans Suffixe de classe CSS dans parametres avancés des modules mod_custom

[amarchand83]

Re : Affectation classe CSS à un module dans custom.css

tatillon oui, je commence à m'y faire...
j'ai déplacé tes drapeaux pour ne pas prendre le risque de chevauchement, j'ai bien mis ton code mais rien ne s'affiche
Ce qui m'inquiète (peut être à tort) c'est que dans mon notepad++ :
fav-debug s'affiche en bleu turquoise ? et le # reste en noir
normal ?

[lomart]

Re : Affectation classe CSS à un module dans custom.css

Il faut supprimer tous les anciens CSS. Il reste encore un .mod-languages { position: absolute; top: 50px; right: 20px; }

et ajouter la règle #fav-debug div {display:inline-block}

et ne pas mettre l'image de la loupe dans une balise p

Ce qui m'inquiète (peut être à tort) c'est que dans mon notepad++ :
fav-debug s'affiche en bleu turquoise ? et le # reste en noir
normal ?

Pas grave

[amarchand83]

Re : Affectation classe CSS à un module dans custom.css

cela dépasse mes compétences actuelles, mais je progresse...
Je ne comprends pas pourquoi retirer tous les anciens CSS ??
voilà ma custom.css :

li.item-141 {
display: none;}
li.item-146 {
display: none;
}
li.item-148 {
display: none;
}
hr.classhr {
color: #000000;
background-color: #000000;
height: 1px;
width: 380px;
margin-left: auto;
margin-right: auto;
}
.mod-languages {
position: absolute;
top: 50px;
right: 20px;
}
.texte-widget .uk-overlay-panel {
color:#000000;
}
#fav-debug {
position: absolute;
top: 20px;
right: 20px;
}
#fav-debug div {display:inline-block}

J'ai fait une version en retirant le .mod-languages (je perds mes drapeaux)
dans les 2 versions la loupe ne s'affiche pas, l'image est dans une <div> (sans div l'éditeur génére un <p>

[lomart]

Re : Affectation classe CSS à un module dans custom.css

sans div l'éditeur génére un <p>

Il faut être en mode code sans éditeur wysiwig

Je ne comprends pas pourquoi retirer tous les anciens CSS ??

Non uniquement ceux concernés par la position debug
Il faut uniquement

#fav-debug {
    position: absolute;
    top: 10px;
    right: 20px;
    width: auto;
}
.mod-languages {
    margin-right: 5px;
}

J'ai ajouté un width:auto pour compenser le span12 du bloc. Le margin-right permet d'espacer la loupe

et j'obtiens ceci

[amarchand83]

Re : Affectation classe CSS à un module dans custom.css

Je vais me plonger dans un tuto CSS, vous en connaissez un bon ?
Je me disperse d'aller au coup par coup chercher l'info...

Pour la loupe, ça marche presque, mais chez moi elle est sous les drapeaux (une loupe militaire ?) alors que chez vous c'est bon... c'est ça l'expérience ?

[lomart]

Re : Affectation classe CSS à un module dans custom.css

Vous avez supprimé la règle #fav-debug div {display:inline-block}

Pour apprendre, le mieux est d'essayer de comprendre le pourquoi d'exemples concrets comme c'est le cas ici. J'ai toujours justifié la raison des règles mise en place.
Sinon regardez les tutos du zéro

[amarchand83]

Re : Affectation classe CSS à un module dans custom.css

Merci pour tout et votre patience, je vais suivre vos conseils.
Le problème est réglé.
Surement à une autre fois...

[lomart]

Re : Affectation classe CSS à un module dans custom.css

Parfait, il ne reste plus qu'a passer le post comme réglé