Module Simple Isotope

**pmleconte** · 25/10/2016, 13h28

Re : Module Simple Isotope

Merci Fynnhooft pour cette pub

...

J'ai fait une nouvelle version: 1.0.16 : les catégories sont accessibles par css avec la classe iso_cat_<no catégorie>, le select de la liste des catégories aussi avec une classe isotope_select. Je pense que vous pouvez en faire ce que vous souhaitez maintenant.

De plus, j'ai ajouté, au niveau de l'affichage Liens web, la possibilité de choisir la forme du filtre : boutons ou liste (si vous avez trop de catégories de liens).

Merci pour toutes ces suggestions/améliorations proposées.

En espérant que cela corresponde à vos besoins,

Pascal

**fynhooft** · 25/10/2016, 13h51

Re : Module Simple Isotope

...
Petit souci :
J'ai juste ajouté ce code dans mon fichier css :

Code:

.iso_cat_122{background-color:lime !important;}

J'obtiens cela :

Pourquoi le nom de la catégorie n'est pas colorée ?
Pourquoi suis-je obligé de mettre "!important" (sinon, couleur grise par defaut)

**pmleconte** · 25/10/2016, 17h51

Re : Module Simple Isotope

Bonsoir,

C'est "normal", car, pour la div contenant les informations, on a 2 classes : la classe par défaut (isotope_item) avec sa couleur définie dans les paramètres du module et la classe de la catégorie (iso_cat_<no catégorie>).

Si tu souhaites "coloriser" les noms des catégories, il s'agit de liens, donc, il faut utiliser, par exemple,

Code:

.iso_cat_<categorie> {
background:blue !important; 
color: white;
}
.iso_cat_<categorie> a {
color: yellow ;
}
.iso_cat_<categorie> a:hover{
color: white;
}

Pascal

**fynhooft** · 25/10/2016, 18h35

Re : Module Simple Isotope

Envoyé par pmleconte Voir le message

Si tu souhaites "coloriser" les noms des catégories, il s'agit de liens, donc, il faut utiliser, par exemple,

Code:

.iso_cat_<categorie> {
background:blue !important; 
color: white;
}
.iso_cat_<categorie> a {
color: yellow ;
}
.iso_cat_<categorie> a:hover{
color: white;
}

Pascal

Cela ce n'est pas pour les catégories mais pour les liens contenus dans les catégories.

En fait, les catégories ce sont les boutons (dans mon cas : "Liens GIMPons", "GIMP", "Ils ont référencé GIMPons").
Il faut que la couleur de ce "bouton-catégorie" soit la même que celle définie par le css : .iso_cat_<categorie>

De plus, il faut que la couleur soit "liée" : tu ne dois pas pouvoir avoir deux couleurs différentes entre le "bouton-catégorie" et le "*******" associé à la catégorie. C'est pour cela que je m'attendais qu'à une seule propriété css de la catégorie.

Soucis supplémentaires :
Essayes de mettre un padding sur ta classe .isotope_item et regarde ce qu'il se passe : les liens sont "avalés"

Ton menu contient le terme "catégorie" : c'est "liens" que tu dois mettre.

**fynhooft** · 27/10/2016, 17h43

Re : Module Simple Isotope

Bonjour,

J'ai vu que tu étais passé à la version 1.0.17. Je l'ai installée. Voici ce que cela donne après quelques modifications dans les css :
Ecran initial :

Là, j'ai choisi une catégorie avec un tri alphabétique :

Il reste quelques trucs que tu dois modifier :
- renommer "catégorie" en "liens"
- nettoyer ton code car il y a du code css qui est en dur (ex : <div class="isotope_button-group sort-by-button-group" style="width:50%;float:left"> )
- il est impossible de mettre un padding dans les "*******" (essayes : .isotope_item {padding:1%;}
- il faut souvent mettre !important dans le css : pourquoi ?
- gros souci : tu références tous les liens , même ceux qui sont dépubliés !

Au boulot !

Fichiers joints

**pmleconte** · 27/10/2016, 19h33

Re : Module Simple Isotope

Bonsoir et merci pour ton implication sur ce module.

Tu vas trop vite, je n'ai même pas eu le temps de t'annoncer la nouvelle version

(il est vrai que je me bats avec la double authentification en ce moment...)

J'ai mis une nouvelle version en ligne qui fait disparaître les liens supprimés ou dépubliés (je les avais oubliés ceux-là...) et j'ai nettoyé les zones en dur.

Au niveau de !important, ils sont là pour forcer ton choix par rapport à ceux que j'avais fait (en fait, ce ne sont pas mes choix, mais ceux qui sont fournis dans la démonstration isotope ou ceux qui sont générés par la librairie). Pour le padding que tu proposais, j'ai mis !important et il a bien fonctionné.

Au niveau du bouton Catégorie, il s'agit bien d'un tri par catégorie de liens et non un tri par lien. Si tu veux un tri par lien, il y a le bouton alpha.

Bons tests et en espérant que cela répond un peu mieux à tes attentes,

Pascal

**benna** · 27/10/2016, 20h25

Re : Module Simple Isotope

Bonsoir,

je suis nouvelle sur ce forum merci pour l’application sur ce module que je trouve simple et rapide

**fynhooft** · 27/10/2016, 22h08

Re : Module Simple Isotope

...
La version 1.0.19 m'a légèrement cassé ma mise en page car tu as rajouté un padding-left.

Or, tu ne devrais pas ajouté du code en dur.

Voici ce que j'ai trouvé sur les styles, en dur, qui trainent dans ton code (v1.0.18) :

Code:

Ligne 21 à 28 de tmpl/defaut.php:
echo '<style type="text/css">';
if (($iso_layout == "masonry") || ($iso_layout == "fitRows")) {
	echo '.isotope_item {width: '.((100 / $iso_nbcol)-2).'% }';
} else if ($iso_layout == "vertical") {
	echo '.isotope_item {width: 100%; }';
}
echo '.isotope_item {background:'.$params->get("backgroundcolor","#eee").';}';
echo '</style>';


Ligne 31 de tmpl/defaut.php:
<div class="isotope_button-group sort-by-button-group" style="width:50%;float:left">

Ligne 64 de tmpl/defaut.php:
echo '<p style="float:left;margin-top:5px;" class="hidden-phone" >Filtre :&nbsp;</p><select class="isotope_select">';

Ligne 81 de tmpl/defaut.php:
echo '<p style="float:left;margin-top:5px;" class="hidden-phone" >Filtre :&nbsp;</p><select class="isotope_select">';

Il faut que tu mettes des classes à la place de ces styles et modifier celle-ci dans le fichier isotope.css
C'est ainsi, plus facile de personnaliser et c'est plus beau !

**fynhooft** · 28/10/2016, 15h30

Re : Module Simple Isotope

Bonjour,

Vous pouvez maintenant voir le module de pmleconte à l'oeuvre sur mon site. Regardez là.

Le module a été entièrement personnalisé grâce au CSS.
Je vais devoir intervenir dans le code uniquement pour modifier le texte : "création :" remplacera "créé le", l'heure sera supprimée
Il faut aussi que je regarde le responsive.

@pmleconte,
encore un pb, quand on clique sur un lien, le compteur n'est pas augmenté (il faudrait intervenir sur le composant liens web, je pense) !

**pmleconte** · 28/10/2016, 18h24

Re : Module Simple Isotope

Bonsoir,

Version 01.0.20 : corrige l'incrémentation du compteur de visites (c'était bien caché et c'est effectivement un appel à com_weblink un peu space..) ainsi que le css pour le mode responsive.

Bonne soirée,

Pascal

PS: j'ai mis création au lieu de créé le, mais, j'ai quand même laissé l'heure (j'y réfléchis)

**fynhooft** · 28/10/2016, 20h47

Re : Module Simple Isotope

Bonsoir,

J'ai mis à jour avec la version 1.0.20.
Il reste du css en ligne mais je pense que c'est le code php qui l'insère (<div class="isotope_item ... )

Tu n'as plus qu'à mettre à jour, toi aussi, sur ton site.
En passant, j'ai vu une correction à faire sur celui-ci.

Tu as :

Code:

<span style="background-color: #ffff00;">des mot sur fond jaune</span>

au lieu de :

Code:

<span class="fluo">des mot sur fond jaune</span>

dans le fichier css, tu mets :
.fluo{background-color: #ffff00;}

L'avantage, c'est que le jour où le jaune ne te plaît plus, tu changes juste la couleur dans le fichier css et tous tes mots en fluo changent automatiquement de couleur. Pas besoin de balayer tout ton code pour rechercher où tu as mis ce fluo.

Pour revenir à simple isotope, je viens d"aménager le css pour le responsive : c'est bon pour moi. Tu peux vérifier sur mon site.

Bon week-end.

**pmleconte** · 29/10/2016, 08h08

Re : Module Simple Isotope

Bonjour,

Il y a bien un css dans le code: c'est à cause du nombre de colonnes que l'on paramètre dans le module. Donc, je l'ai laissé dans le php.

Bon weekend et encore merci pour ton aide sur ce module,

Pascal

**fynhooft** · 29/10/2016, 11h31

Re : Module Simple Isotope

Bonjour,

J'ai finalement enlevé l'affichage de l'heure. Pour cela, j'ai édité le fichier modules/mod_simple_isotope/tmpl/default.php
J'ai modifié les lignes 108 à 113.
J'ai mis en rouge ce que j'ai supprimé et en vert ce que j'ai ajouté.

avant :

Code:

if ($displaysortinfo == "show") {
	echo '<br/><span class="iso_date">cr&eacute;ation&nbsp;:&nbsp;'.JHtml::_('date', $item->created, 'd-m-Y [COLOR="#FF0000"]H:i[/COLOR]').'</span>[COLOR="#FF0000"],&nbsp;[/COLOR]<span class="iso_click"> '.$item->hits.' visites</span>';
}
if ($displaysortinfo == "showdate") {
	echo '<br/><span class="iso_date">cr&eacute;ation;&nbsp;:&nbsp;'.JHtml::_('date', $item->created, 'd-m-Y [COLOR="#FF0000"]H:i[/COLOR]').'</span>';
}

après :

Code:

if ($displaysortinfo == "show") {
	echo '<br/><span class="iso_date">cr&eacute;ation&nbsp;:&nbsp;'.JHtml::_('date', $item->created, 'd-m-Y').'</span>[COLOR="#00FF00"]<br />[/COLOR]<span class="iso_click"> '.$item->hits.' visites</span>';
}
if ($displaysortinfo == "showdate") {
	echo '<br/><span class="iso_date">cr&eacute;ation;&nbsp;:&nbsp;'.JHtml::_('date', $item->created, 'd-m-Y').'</span>';
}

Voilà, je pense que le module restera en l'état pour moi.

**pmleconte** · 29/10/2016, 19h47

Re : Module Simple Isotope

Bonsoir,

Comme je vois les choses en grand, j'ai créé une nouvelle version (01.0.21 : https://www.conseilgouz.com/index.ph...simple-isotope) avec ses fichiers languages FR et GB, ce qui permet aussi de personnaliser tous les libellés, ainsi que le format de la date.

La zone de date, par exemple, s'appelle SSISO_DATEFORMAT et contient par défaut d/m/Y, mais, par la substitution au niveau langage, tu peux y mettre ce que tu veux.

Bon dimanche,

Pascal

Module Simple Isotope

[Suggestion] Module Simple Isotope

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association