[RÉGLÉ] Bug dans le CSS de Protostar ?

[chdioux]

Bonjour,

Je viens de télécharger la dernière version (française) de Joomla et de faire quelques essais en local avec le template Protostar de base. J'ai un petit souci: L'image "mapple.jpg" ne se redimensionne correctement que pour les petites dimensions d'écran, quand l'affichage bascule en taille "mobile/tablette".
En revanche, sur un grand écran, elle ne se redimensionne plus et se bloque à une dimension quasi-invisible (23px x 6px). J'ai essayé de modifier le css mais je n'arrive à rien de bien car je ne maîtrise pas assez le CSS. Quelqu'un aurait-il une piste ?

Merci.

Christophe

[Rajoz]

Re : Bug dans le CSS de Protostar ?

Bonjour Christophe,

L'image "mapple.jpg" ne fait pas partie du template Protostar ni même de Joomla!.

La première piste c'est que tu nous donnes un minimum d'information sur cette image et sur la façon dont tu l'utilises.

Amicalement,
Rajoz

[chdioux]

Re : Bug dans le CSS de Protostar ?

Bonjour Rajoz et merci de ton aide.

Toutes mes excuses, maintenant que tu me dis que c'était pas dans le package de base, je me dis que c'est probablement moi qui ai fait une fausse manip en essayant de commencer à customiser les sites d'exemple (Australie et Boutique de fruits) livrés avec le package en français.

En fait, ça me revient maintenant, il commençait à se faire tard mais c'est très probablement moi qui ait essayé de mettre cette image (qui venait des images de la "Boutique de fruits") pour voir si je pouvais mettre une image redimensionnable différente dans div.moduletable.span1.jmoddiv
Le résultat fonctionnait très bien, c'était pile poil ce qu'il me fallait, mais ça marchait uniquement pour les petits écrans.
Faut pas essayer de jouer dans la cour des grands quand on n'a pas le niveau !

J'le frais plus !

BTW: Le CSS du site d'exemple "Australie" en français en revanche fonctionne très mal (2 colonnes verticales étroites et illisibles) et là, je suis certain à 99.9% que je n'y suis absolument pour rien, mais c'est un autre sujet.

Bien cordialement
Christophe

[chdioux]

Re : Bug dans le CSS de Protostar ?

(Re)bonsoir,

Bon bein non, correctif à mon message précédent, je n'y étais pour rien:

J'ai téléchargé le paquet:
Joomla_3.4.0-Stable-Full_Package_French_v1.zip
A l'installation, j'ai demandé l'installation des "données d'exemple en français".
A la fin de l'installation je me retrouve, en plein écran, avec une micro image carrée de 34x9px (plus ou moins selon qu'on redimensionne l'écran).
Quand je diminue considérablemenbt la taille de la fenêtre, pour imiter un écran de tablette, l'image change de position et s'agrandit d'un seul coup pour occuper toute la largeur de sa zone.
Avec un clic droit sur cette image, on voit qu'il s'agit de l'image:
/images/headers/maple.jpg
(je n'avais rien modifié en dur hier au soir, finalement)

Les outils de Chrome me disent que l'image est dans <div class="moduletable_span1">
Et le code source de la page d'accueil, la toute première qui s'affiche après l'installation, me dit que c'est à la ligne 77 du html.

<div class="row-fluid">
<main id="content" role="main" class="span9">
<!-- Begin Content -->
<div class="moduletable span1">
<div class="custom" >
<p><img src="/joomla_original/images/headers/maple.jpg" alt="" /></p></div>
</div>

Sur les petits écrans, cette petite image d'exemple prend tout la largeur de la fenêtre et se redimensionne, ce qui est très bien.
Quand on bascule sur un grand écran, les menus latéraux se mettent en place et cette fichue image devient microscopique et mal placée (juste avant le titre "Joomla" du premier article d'exemple). Elle se redimensionne toujours, mais en restant microscopique.
J'ai fait un essai avec un navigateur Internet Explorer 11, avec exactement le même résultat.
Je crois donc qu'il y a quelque chose qui cloche dans ces exemples en français (et/ou le CSS) mais je ne comprends pas assez ces choses là pour en dire plus.

Toute aide ou piste serait la bienvenue, parce que cet exemple me conviendrait très bien s'il fonctionnait un peu mieux avec les grands écrans. En effet, je n'aurais qu'à changer l'image de l'exemple!

Bien sincèrement
Christophe

[Rajoz]

Re : Bug dans le CSS de Protostar ?

Bonsoir Christophe,

L'image indiquée dans le premier post (mapple.jpg avec deux "p") n'existe pas d'où ma difficulté à voir le problème.

Avec la correction du dernier post (/images/headers/maple.jpg avec un seul "p") tout s'éclaire. Vive l'ortografe !

Dans les exemples, cette image est affichée par le module "Module Image" de type Contenu personnalisé et placé en position-3 qui est par défaut de style xhtml :

• Dans les "Paramètres avancés" du module, le paramètre "Style du module" est à Hérité ce qui signifie que le style est défini par le code dans le template.
• Dans templates/protostar/index.php la position-3 est déclarée par <jdoc:include type="modules" name="position-3" style="xhtml" /> donc de style xhtml

Le style xhtml est défini dans templates/system/html/modules.php par la fonction modChrome_xhtml. Cette fonction a été modifiée dans J! 3.4.0 pour intégrer les paramètres Bootstrap dans ce style de module (Tag de module, Taille Bootstrap, Tag d'en-tête/titre et Classe d'en-tête/titre).

Le résultat c'est qu'avec J! 3.4.0 la largeur spanX du module est maintenant prise en compte alors qu'elle ne l'était pas en 3.3.6

Pour corriger l'affichage du module, il faut aller dans Extensions > Gestion des modules > Module Image > Paramètres avancés et mettre Taille Bootstrap à 12 (au lieu de 1).

Amicalement,
Rajoz

[chdioux]

Re : Bug dans le CSS de Protostar ?

Super ! Merci Rajoz ! Ca marche impeccable!

Et merci aussi pour les explications de la solution, qui me montrent clairement qu'après 5 années sans configurer de site web, il va falloir que je fasse un sérieux effort de remise à niveau.

Bon, avant de clore ce fil, j'en profite pour faire remonter aussi un autre petit problème assez similaire dans les exemples en français, bien qu'il n'ait aucune conséquence pratique pour moi:
Dans localhost/joomla/index.php/sample-sites , en petit écran les liens vers les deux sites d'exemple sont impeccables (en bas), mais en grand écran, ils se dimensionnent mal (à droite).
C'est pas très gênant mais si quelqu'un qui sait faire ces choses-là pouvait le corriger dans le paquet Joomla_3.4.0-Stable-Full_Package_French_v1.zip, ça serait peut-être aussi bien pour l'image de marque de Joomla auprès des débutants.

A bientôt pour de nouvelles aventures, d'ici là, moi, je file apprendre Bootstrap!

Bien amicalement
Christophe