BasBas



Re : imagehover
Alain T
Alain T

Re : imagehover

Alain T 608
25/10/2021 21:57
Alain T 608
25/10/2021 21:57
Un peu de rigueur avec un retour arrière propre,
ou une suppression complète pour des modifications comprises et maitrisées.

Un peu de recul.
Le thème est propre au départ, donc si tu avances étape par étape avec attention, tout va bien se passer.
Allez, bon courage !


Re : Présentations des images dans les news
Alain T
Alain T

Re : Présentations des images dans les news

Alain T 608
25/10/2021 16:51
Alain T 608
25/10/2021 16:51
Au fait,
Voici un tableau (un vrai tableau ) avec toutes les fonctionnalités responsives.

Et pour t'en convaincre,
regarde la page des sujets récents du forum.
Amuses-toi à réduire la largeur de la page et observe les changements en fonction de cette largeur.
Moins c'est large, plus je retire les éléments les moins utiles (masquage de certaines colonnes en fonction de la largeur, réorganisation du contenu...)


Re : Présentations des images dans les news
Alain T
Alain T

Re : Présentations des images dans les news

Alain T 608
25/10/2021 16:39
Alain T 608
25/10/2021 16:39
Merci d'avoir ouvert ce sujet.
Oui, ton thème est 100% responsive si tu utilises les templates surchargées de xswatch4.
Par contre, si tu ajoutes du code non optimisé Bootstrap 4 (4.6), il y a de grande chance que les pages concernées ne soient plus tout à fait responsives et réagissent pas tout a fait comme tu l'attendrais.

Dans ton exemple, tu utilises une vilaine table pour présenter des éléments.
Les tables sont à proscrire, hormis en cas de VRAIS tableaux, sinon, il faut faire autrement.

Bon, évidemment, cela prends du temps, donc ce n'est pas forcément ta priorité car il y a un temps d'apprentissage à ne pas négliger.
Mais une fois cette technique maitrisée, tu pourras l'adapter à d'autres situation et dans des délais beaucoup plus courts.

Ta bible sera dorénavant Bootstrap 4.6 (4.6 pour s'accorder avec ton thème qui est sur une base de BT 4.6).

Pour ton besoin particulier, ta lecture peux commencer ici : Card layout
Maintenant, il y a plusieurs façon de présenter un ensemble de photos,
moi je te conseillerai card-decks, mais tu peux essayer d'autres choses.

Evidemment,
Je t'invite a faire des essais pour comprendre comment cela fonctionne.

Tu peux aussi t'inspirer des templates de xmnews, bloc xmnews_block.tpl par exemple.

Il y a d'autres méthodes également telles que flex
Tu peux en trouver un très bon exemple sur la page "XOOPS - Les Groupes", par exemple.
Vise un peu la barre du bas avec les 10 boutons. Je t'invite à éditer la source pour voir le code.
Je ne te cache pas que j'ai mis un certain temps a proposer cette barre, mais tu peux t'en servir exemple pour comprendre et avancer plus vite.

Encore une fois, ce n'est pas primordial, mais il ne faut pas négliger le design et la fonctionnalité responsive !

Bon courage.


Re : imagehover
Alain T
Alain T

Re : imagehover

Alain T 608
22/10/2021 18:47
Alain T 608
22/10/2021 18:47
Trouvééééééé !!!
Tssssss

Je t'explique ma démarche (intellectuelle) pour te montrer comment j'ai fait pour trouver.

Bon, en fait, de mon côté, j'avais juste testé avec bg-warning et en dur, pas avec une définition personnelle.
Et j'ai donc fait EXACTEMENT comme toi
et ...
j'ai rencontré le même problème,
le script ne prenait pas en compte ma classe sur l'élément figcaption.

Au départ, j'ai pensé au complément de classe "hover".
J'ai donc ajouté une classe
.hovrframboise-bg:hover {
    
background-color#920826;
}
mais, pareil, même problème.
Donc il fallait trouver une autre piste...

Or cela fonctionne avec des classes de bootstrap, vu qu'avec bg-warning, c'est opérationnel.
J'ai donc édité le fichier éditable bootsrap.css (plus simple pour lire le contenu que le fichier bootstrap.min.css)
et j'ai cherché la classe bg-warning.
Résultat :

.bg-warning {
  
background-color#f5e625 !important;
}

Donc la différence est le "!important".
Je l'ai donc reporté dans ma définition dans mon fichier css de personnalisation :
/* Fonds framboise */
.hovrframboise-bg {
    
background-color#920826 !important;
}

Et... ça fonctionne !!!

Explication :
Attention, je ne suis pas expert en css,
le tag !important permet d'écraser les composants existant d'une classe car il passe prioritaire.

Voilà, c'est tout ce que je peux te dire, mais en tout cas, ça marche.
Et si un jour tu veux changer la couleur de toute une catégorie, au lieu d'aller dans chaque article, tu pourras juste modifier la déclaration de ta class .hovrframboise-bg et l'impact sera immédiat sur tous tes articles qui utilisent cette classe.
Donc ne pas mettre en dur les styles !

Je pense avoir été complet... jusqu'au prochain problème


Re : imagehover
Alain T
Alain T

Re : imagehover

Alain T 608
22/10/2021 17:54
Alain T 608
22/10/2021 17:54
Sinon, j'ai peut-être une piste d'explication.
Je fais quelques essais pour voir mon intuition...


Re : imagehover
Alain T
Alain T

Re : imagehover

Alain T 608
22/10/2021 17:28
Alain T 608
22/10/2021 17:28
Au fait,
Je n'ai pas la réponse à ton soucis de couleurs de fonds mais
tu peux utiliser une classe qui ne comporte pas de fond intermédiaire.

imghvr-push-up par exemple, non ?
Dans ce cas, tu peux retirer le bg de figure et ne laisser que celui de figcaption


Re : imagehover
Alain T
Alain T

Re : imagehover

Alain T 608
22/10/2021 16:21
Alain T 608
22/10/2021 16:21
ok !
Oui c'est étrange, le pb est toujours là.

Essaye de permuter les 2 articles
mettre ta définition sur vega et bg-warning sur torsade
Quel est le résultat ?

Tu peux également, mais juste pour tester car pas pratique du tout en cas de changement, c'est de tester en "dur"
<figure class="imghvr-hinge-up" style="background-color:#920826">
    <
img src="http://www.lumieresdefrance.com/phpv2/acontenu/img/v_x1.jpg">
    <
figcaption  style="background-color:#920826">
       
texte Alain
    
</figcaption>
    <
a href="#"></a>
</
figure>


Chez moi, ça marche

Juste une remarque (qui ne règle pas le problème) :
Appeler tes définitions de couleurs par leur couleur n'est pas judicieux.
Le jours où tu veux passer toutes les lanternes de couleur framboise à une toute autre couleur, (vert par exemple), le nom sera alors trompeur et source d'erreur.
Il vaut mieux utiliser un nom de catégorie / rubrique / type de matériel.
- lanterne
- borne
- projecteurs
Bon, je pense que tu comprends l'idée.


Re : imagehover
Alain T
Alain T

Re : imagehover

Alain T 608
22/10/2021 15:55
Alain T 608
22/10/2021 15:55
Non pas bon!
Affiche la source !
Tu vois quand même que tu as 2 body ouvrant, non ?
Ligne 100 et ligne 122


Re : imagehover
Alain T
Alain T

Re : imagehover

Alain T 608
22/10/2021 15:26
Alain T 608
22/10/2021 15:26
ok !
Une fois fini,
tu pourras ouvrir un sujet à propos de la façon de présenter tes images dans ta news.

Tu vas me dire "pourquoi" ?
Tu utilises un thème 100% responsive,
MAIS dans ta news tu utilises une très vilaine table.
Ce n'est plus comme cela maintenant même si ça fonctionne.
Mais je suis d'accord, étape par étape,
donc quand tu en seras là, ouvre un sujet.
Merci de ne pas débattre de cela ici, ce sujet ici concerne imagehover.

Alain


Re : imagehover
Alain T
Alain T

Re : imagehover

Alain T 608
22/10/2021 15:06
Alain T 608
22/10/2021 15:06
Citation :
D'autant que je me rajoute souvent des problèmes tout seul, qui prennent aussi du temps à corriger.

C'est pas faux.
Si tu avais repris le fichier nav.tpl comme je te l'avais indiqué quelques post auparavant, tu n'aurais pas eu de nouveau ces erreurs en cascade.
Je ne sais pas si tout est lié, mais si le fichier généré n'est pas au format standard html attendu par le navigateur, c'est clair que tu vas au devant de soucis.



« 1 ... 22 23 24 (25) 26 27 28 ... 60 »