[RÉGLÉ] Problème d'affichage template joomspirit

[alva75]

Bonjour a tous,

Je suis entrain de construire mon site en ligne, je suis pratiquement a la fin de mon dur labeur, cependant alors que je pensais qu'il me restait seulement quelques petits détails a régler, je me retrouve bloquer sur un problème qui me perturbe et dont je n'en voit pas le bout.

Alors mon problème est le suivant, j'utilise un template gratuit joomspirit, et je rencontre un gros problème d'affichage, en fait voici:

Lorsque mon menu est de type (blog vedette d'une catégorie) alors la tout va bien l'affichage est parfait et c'est ainsi que je voudrais retrouver l'affichage mais pour (blog d'une catégorie tout simple).
Alors la vous allez me dire, mais pourquoi tu ne fait pas de chaque menu un blog vedette d'une catégorie?
Eh bien tout simplement parce que sur ma page d'accueil j'ai déjà un blog vedette de toutes les catégories, et je ne souhaite pas que tout mes articles finissent par s'afficher systématiquement sur ma page d'accueil.

Je me suis donc lancé dans une tentative de modification que je pensais être légère et facile, mais c'est bien la que on commencé les problèmes, malgré mon acharnement avec l'examinateur de Firefox je ne voit pas le bout du problème.
J'avais commencé par joué avec les largeurs des colonnes, et le rendu était plutôt bon, sauf que revers de la médaille cela modifiait par la même occasion la largeur des colonnes du blog vedette qui en a pâtit.

Donc du coup j'ai essayé de modifier d'autres paramètres comme margin, padding, largeur, hauteur bref j'ai tout essayé j'y ai passé la nuit et rien a faire.
J'ai donc essayé de regarder la classe du bloc affichage vedette afin de tenter de copier toutes les règles du CSS, cependant la je ne trouve rien la classe est vide la seule chose de bizarre que j'ai identifier est:

<div class="Blog-featured"
itemtype="http://schema.org/Blog" itemscope="">

Sur une page de type menu (blog d'une catégorie (non vedette))
a peu près la même chose:

<div class="Blog"
itemtype="http://schema.org/Blog" itemscope="">

Et impossible de trouver les paramètres CSS de "blog featured" pour utiliser les mêmes pour "blog".

Du coup je m'adresse a vous, car je ne sait trop quoi faire, j’espère que l'un d'entre vous saura m'éclairer sur ce problème qui m'obsède au point de ne pas avoir lâché mon site depuis la nuit dernière.

Je vous laisse quelques screens si cela peut vous aider.

Je vous remercie tous par avance.

Cordialement

Affichage qui pose problème


Affichage que je souhaite retrouver

[Rajoz]

Re : Problème d'affichage template joomspirit

Bonjour alva75,

j'utilise un template gratuit joomspirit

Il existe plusieurs templates gratuits chez JoomSpirit. Lequel utilises-tu ? Minimalist ?
La version de Joomla! serait aussi intéressante à connaître.

Je vous laisse quelques screens si cela peut vous aider

Comme toujours pour les problèmes d'affichage, ça serait bien que tu donnes un lien sur ton site que l'on puisse voir le problème et surtout utiliser Firebug ou l'inspecteur d'élément pour voir ce qui se passe (une image ne suffit souvent pas).

la seule chose de bizarre que j'ai identifier est ...

Le code HTML avec les classes que tu indiques blog-featured et blog sont les classes normales définies par Joomla! pour les vues Blog des articles en vedette et Blog des articles d'une catégorie.
Ce ne sont pas ces classes qui posent le problème de la distance séparant deux articles horizontalement. C'est pour pouvoir regarder les autres classes qu'il faudrait pouvoir analyser ton site avec Firebug ou l'Inspecteur d'éléments.
Il faudrait aussi savoir comment est configuré le lien de menu pour l'affichage du Blog des articles d'une catégorie : nombre d'articles à afficher, nombre d'articles en pleine largeur, nombre d'articles en introduction, nombre de colonnes, nombre de titres avec lien, etc.

Amicalement,
Rajoz

[alva75]

Re : Problème d'affichage template joomspirit

Bonjour alva75,


Il existe plusieurs templates gratuits chez JoomSpirit. Lequel utilises-tu ? Minimalist ?
La version de Joomla! serait aussi intéressante à connaître.


Comme toujours pour les problèmes d'affichage, ça serait bien que tu donnes un lien sur ton site que l'on puisse voir le problème et surtout utiliser Firebug ou l'inspecteur d'élément pour voir ce qui se passe (une image ne suffit souvent pas).


Le code HTML avec les classes que tu indiques blog-featured et blog sont les classes normales définies par Joomla! pour les vues Blog des articles en vedette et Blog des articles d'une catégorie.
Ce ne sont pas ces classes qui posent le problème de la distance séparant deux articles horizontalement. C'est pour pouvoir regarder les autres classes qu'il faudrait pouvoir analyser ton site avec Firebug ou l'Inspecteur d'éléments.
Il faudrait aussi savoir comment est configuré le lien de menu pour l'affichage du Blog des articles d'une catégorie : nombre d'articles à afficher, nombre d'articles en pleine largeur, nombre d'articles en introduction, nombre de colonnes, nombre de titres avec lien, etc.

Amicalement,
Rajoz

Bonjour, et merci d'avoir prit le temps de me répondre.
J'ai bien prit note de vos recomendations lorsque je m'adresserais ici dans le forum a l'avenir.
Je n'ai pas mit le lien du site parce que le site est fermé car en construction.

Cependant j'ai une bonne nouvelle, j'ai reussi a résoudre mon problème, en esperant que ça n'ai pas de conséquences sur autre chose que je n'ai pas encore remarqué.

Par contre avant de mettre le sujet comme résolu, je souhaiterais comprendre car je suis curieux.
J'ai résolu le problème sans trop le comprendre.
Alors voila:

Le problème d'affichage venait de mon plugin l'editeur JCK.
Plus précisemment de la typographie
Les deux commandes en question était:

.row-fluid "span 6"
.row-fluid.[class=span]

La dessus j'ai dut changer la largeur et le Float qui était sur left j'ai mit la valeur none.

Mais je comprend pas ce que c'est ?
Comment un plug in peut il influer sur l'affichage de ma page ? Et pourquoi uniquement sur le style de menu "blog d'une catégorie" et pas sur "blog d'une catégorie vedette" ?
Et enfin a quoi correspond exactement cette partie typographie ?
Quelqu’un pourrait il m'éclairer ?

merci

[Rajoz]

Re : Problème d'affichage template joomspirit

Bonjour alva75,

.row-fluid "span 6"
.row-fluid.[class=span]

Les versions 3.x.x de Joomla! sont basées sur le framework de template Bootstrap v2.3.2. Ce framework va permettre par exemple de définir la grille d'affichage avec des lignes comportant de 1 à 12 colonnes qui peuvent s'additionner. Voir la documentation sur http://getbootstrap.com/2.3.2/scaffo...luidGridSystem.

L'exemple de code donné dans cette documentation est :

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Ce code définit une ligne de classe row-fluid (qui s'adapte à la largeur de l'écran) avec une première colonne de classe span4 (qui va faire 4/12ème de l'écran) et une deuxième colonne de classe span8 (qui va faire 8/12ème de l'écran).

Dans les templates et extensions qui sont basés sur le Bootstrap v2 intégré à Joomla!, les classes row-fluid, span1 à span12 (entre autres) sont pré-définies.

Par exemple dans le cas d'un blog à deux colonnes, la vue de Joomla! va créer le code :

<div class="... row-fluid ...">
    <div class="span6">...premier article...</div>
    <div class="span6">...deuxième article...</div>
</div>

Ce code sera correctement affiché par un template basé sur le Bootstrap v2 puisque span6 y est défini à 6/12ème (50%). Donc un affichage en deux colonnes égales sur une ligne de la largeur disponible (100%).

Le template JoomSpirit Minimalist charge son propre Bootstrap mais il s'agit de la version 3 pas du Bootstrap V2 utilisé par Joomla!. La grande différence entre Bootstrap v2 et v3 c'est le système de grille d'affichage. L'impact c'est par exemple que la classe span6 n'existe pas dans Bootstrap v3 et donc pour l'affichage du blog sur 2 colonnes le template de JoomSpirit doit surcharger l'affichage de Joomla! en ajoutant au span6 du code supplémentaire.

Note : la surcharge est une méthode de modification du code de Joomla!.

Pour les affichages de Joomla! on peut espérer que les surcharges du template JoomSpirit Minimalist compensent l'absence de Bootstrap v2, mais :

• les surcharges ne sont pas toujours bien faites : par exemple avec un blog de trois colonnes l'espace entre les colonnes 1 et 2 est nettement plus petit que celui entre les colonnes 2 et 3.
• de nombreuses extensions s'attendent à ce que Bootstrap v2 soit pris en charge par le template puisque c'est le standard de Joomla! v3.x.x : pour ces extensions il faudrait écrire des surcharges spécifiques pour compenser l'absence de Bootstrap v2.

Il existe des templates basés sur Bootstrap v3 mais ceux-ci intègrent habituellement le minimum de Bootstrap v2 pour qu'il n'y ait pas d'impact sur les affichages de Joomla! ou des extensions. Ce n'est pas le cas du template JoomSpirit Minimalist d'où les soucis d'affichage.

Comment un plug in peut il influer sur l'affichage de ma page ?

Un plugin est un bout de code qui est exécuté au déclenchement d'un événement.

Par exemple si dans un article je saisis un texte comme {youtube}he73js82{/youtube} c'est ce texte qui s'affichera dans mon article.

Après installation et activation du plugin AllVideos, ce plugin sera lancé par l'événement "affichage de page" et à ce moment il cherchera dans l'article un texte de forme {youtube}...{/youtube} et le remplacera par un code permettant d'afficher le film YouTube dont la référence est dans le texte (he73js82).

Résultat : le plugin a modifié l'affichage de l'article qui affiche, dans le cas de mon exemple, un film au lieu d'un texte.

Amicalement,
Rajoz

[alva75]

Re : Problème d'affichage template joomspirit

Bonjour,

Je tient a te remercier pour ces explications très claires et précises, je comprend mieux maintenant.
Je vais peut être réfléchir a changé de template, a moins que j'arrive a corriger de moi même les petits problèmes.
Je viens de me rendre compte que en version mobile, mes modules de droite s'affiche en premier, avant mes articles de la page d'accueil, je vais encore passé des nuits blanches je le sens hahahaha.

Merci beaucoup pour ces réponses, cette expérience m'a grandit encore un peu.

Amicalement Alva