Faire des catégories rétractables, mais avec une icône +.

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Faire des catégories rétractables, mais avec une icône +.

Message par AtsukiMD Jeu 29 Sep 2011 - 19:40

Bonjour,

J'ai eu la chance de découvrir le tutoriel Catégorie rétractable sans invision sur ce forum, et j'en suis presque pleinement satisfait.

Seulement, j'aimerais, comme sur un forum invision (ou du moins l'exemple du tutorial), avoir un plus [+] ou un moins [-] (selon l'état de la catégorie, si elle est rétractée ou non) a droite de ma barre des titres ou à sa gauche.

Aussi, ne sachant comment procéder, pourriez vous éclairer ma lanterne ? Razz
A savoir, je suis le fondateur du forum en question.

J'ai un CSS partiellement modifié, suis sous PhpBB2 (forum)/Google Chrome (navigateur), et le seul template modifié chez moi est celui cité dans le tutorial ci-dessus, à savoir index_box.

Merci à vous pour votre précieux soutien ! Very Happy

Amicalement,
Atsuki.


Dernière édition par AtsukiMD le Mer 5 Oct 2011 - 21:31, édité 1 fois
AtsukiMD

AtsukiMD
**

Masculin
Messages : 62
Inscrit(e) le : 25/09/2011

http://www.manga-destiny.com
AtsukiMD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des catégories rétractables, mais avec une icône +.

Message par Ea Jeu 29 Sep 2011 - 21:08

Bonjour,


Et vous voulez la mettre où cette icône sur un phpbb2 ?

Ce n'est pas comme du punbb ou il y a une barre pour le titre et une barre pour les titre de colonne, ici il n'y a qu'une barre avec les noms de colonnes ( et le titre dans la première colonne ).
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des catégories rétractables, mais avec une icône +.

Message par AtsukiMD Ven 30 Sep 2011 - 19:51

Bonjour,

Je pensais mettre ces icônes à la gauche des barres de catégories, après avoir d'avantage réfléchi. C'est à dire à gauche de la barre où est présent le titre des catégories.

Cela est-il envisageable (bien que je pense que ça ne pose pas de problèmes particuliers) ?

Aussi, si ce bouton pouvait aussi être actif sur le message de bienvenue de l'index ainsi que sur le Qui est en ligne, ça serait génial Very Happy

Amicalement,
Atsuki.
AtsukiMD

AtsukiMD
**

Masculin
Messages : 62
Inscrit(e) le : 25/09/2011

http://www.manga-destiny.com
AtsukiMD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des catégories rétractables, mais avec une icône +.

Message par Ea Ven 30 Sep 2011 - 21:43

D'accord.


L'astuce du tutoriel date un peu donc je l'ai refait un peu mieux ( et sans devoir éditer de template ) ^^

Déjà pour chaque titre de catégorie pour laquelle vous voulez la "rétraction" il faudra mettre au début du titre :

Code:
<a class=tcat id=c0></a>
En mettant c0 pour la première, c1 pour la deuxième, c2 pour la troisième, c3 pour la quatrième et ainsi de suite ( l'ordre n'a pas d'importance mais il faut avoir pour chaque catégorie un chiffre différent entre 0 et 31 compris ).

Une fois que c'est fait il suffira de mettre ce script sur l'index ( voir gestion des codes javascript ) :

Code:
$(function() {
  var a = +my_getcookie("tcat");
  $(".tcat").append('<img class="sprite-tabs_less" src="http://2img.net/i/fa/empty.gif" alt="-" />').click(function() {
    $(this).children().toggleClass("sprite-tabs_less");
    $(this).children().toggleClass("sprite-tabs_more");
    $(this).closest("table").toggleClass("toggledcat");
    my_setcookie("tcat", +my_getcookie("tcat") ^ 1 << parseInt($(this).attr("id").substr(1)), 1, 0)
  }).each(function() {
    $(this).insertBefore($(this).parent());
    a & 1 << parseInt($(this).attr("id").substr(1)) && (my_setcookie("tcat", a ^ 1 << parseInt($(this).attr("id").substr(1)), 1, 0), $(this).click())
  }).closest("tr").addClass("trtitlecat")
});
Et mettre dans le CSS ( PA > Affichage > Couleurs > Feuille de style ) :

Code:
.tcat { float: left; padding-left: 10px; cursor: pointer; }
.toggledcat tr { display: none; }
.toggledcat tr.trtitlecat { display: table-row; }
Le script règle plusieurs problèmes de l'autre ( si on renomme, change l'ordre, se déconnecte il n'y a plus de problème que le script confonde une catégorie avec une autre, il n'y a qu'un cookie dans lequel on enregistre juste un seul chiffre et aussi pas d'édition de template ) et les images utilisées sont celles par défaut sur phpbb2.

Si par exemple je voulais remplacer le + par Faire des catégories rétractables, mais avec une icône +. Icon_cry je peux ajouter au CSS :

Code:
.tcat .sprite-tabs_more { background: url(http://2img.net/i/fa/i/smiles/icon_cry.gif); width: 15px; height: 15px; }
Et si je voulais remplacer le - par Faire des catégories rétractables, mais avec une icône +. Icon_biggrin je pourrais mettre dans le CSS :

Code:
.tcat .sprite-tabs_less { background: url(http://2img.net/i/fa/i/smiles/icon_biggrin.png); width: 15px; height: 15px; }
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des catégories rétractables, mais avec une icône +.

Message par AtsukiMD Dim 2 Oct 2011 - 1:22

Bonjour,

Je vais tenter votre astuce immédiatement, et double-posterai pour dire si mon problème est réglé Very Happy

Un grand merci à vous !

Amicalement,
Atsuki.
AtsukiMD

AtsukiMD
**

Masculin
Messages : 62
Inscrit(e) le : 25/09/2011

http://www.manga-destiny.com
AtsukiMD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des catégories rétractables, mais avec une icône +.

Message par AtsukiMD Dim 2 Oct 2011 - 12:56

Bonjour,

Comme prévu un double post Smile

J'ai tenté votre astuce mais cela ne semble pas fonctionner. Cela pourrait-il être dû au fait que j'ai modifié le template index_box ?

Toujours est-il que le [+] apparaît, mais que cliquer dessus, bien que faisant apparaître un [-], ne déroule pas la catégorie en question. Donc le système +/- fonctionne bien, mais la rétractation ne fonctionne pas.

Aussi, serait-il possible de faire apparaître l'icône + (ou - selon les circonstances) avant le titre, et pas collée à celui-ci, donc avec un ou deux espaces les séparant ?

En vous remerciant,
Atsuki.

PS : Pour voir ce que ça donne si vous le souhaitez, rendez-vous ici.
AtsukiMD

AtsukiMD
**

Masculin
Messages : 62
Inscrit(e) le : 25/09/2011

http://www.manga-destiny.com
AtsukiMD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des catégories rétractables, mais avec une icône +.

Message par Ea Dim 2 Oct 2011 - 13:05

Aussi, serait-il possible de faire apparaître l'icône + (ou - selon les circonstances) avant le titre, et pas collée à celui-ci, donc avec un ou deux espaces les séparant ?
En mettant par exemple :

Code:
<a class=tcat id=c0></a>Quelques essais...
C'est ce qu'il se passe ^^

Et pour ce qui est du "non" fonctionnement du script c'est parce qu'il y a aussi le script qui le fait ouvrir / fermer en cliquant sur la barre ( donc en cliquant sur le + / - la catégorie se ferme et s'ouvre donc reste ouverte ).
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des catégories rétractables, mais avec une icône +.

Message par AtsukiMD Dim 2 Oct 2011 - 15:42

Bonjour,

Le problème venait en effet de là Very Happy Merci bien ^^

Et oui, en effet, j'avais mal compris et mis le </a> derrière mon titre Smile

Dernière chose à vous demander : pourrais-je en faire de même avec le Qui est en ligne ? ainsi qu'avec le Message de bienvenue de la page d'accueil ? Et centrer le texte du "Qui est en ligne" pour qu'il soit semblable aux catégories ?

Merci à vous Very Happy

Atsuki.
AtsukiMD

AtsukiMD
**

Masculin
Messages : 62
Inscrit(e) le : 25/09/2011

http://www.manga-destiny.com
AtsukiMD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des catégories rétractables, mais avec une icône +.

Message par Ea Dim 2 Oct 2011 - 17:00

Il faudrait ajouter ceci :

Code:
   $(".catHead span.cattitle:contains(Message d'accueil)").prepend("<a class=tcat id=c3></a>");
   $(".catHead span.cattitle:contains(Qui est en ligne ?)").wrapInner("<center />").prepend("<a class=tcat id=c4></a>");
après le :

Code:
$(function() {
Du script.

Il faut que le c3 et c4 suivent le modèle des catégories ( donc qu'il n'y a pas le même chiffre après le c et que ça soit en dessous de 32 ).
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des catégories rétractables, mais avec une icône +.

Message par AtsukiMD Dim 2 Oct 2011 - 17:24

Ça marche !! Very Happy

Un énorme merci à toi, je t'en dois une ;D

Arigatô Gozaimasu ! C'est désormais parfait ! Razz

En te remerciant encore une fois,
Atsuki.
AtsukiMD

AtsukiMD
**

Masculin
Messages : 62
Inscrit(e) le : 25/09/2011

http://www.manga-destiny.com
AtsukiMD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des catégories rétractables, mais avec une icône +.

Message par AtsukiMD Dim 2 Oct 2011 - 19:13

Up

En fin de compte, j'aurais une dernière demande assez rapide Razz

Le Qui est en ligne étant un lien, il est chez moi de couleur verte. Comment faire pour le mettre simplement de couleur de noire ? =)

Merci à vous ^^
AtsukiMD

AtsukiMD
**

Masculin
Messages : 62
Inscrit(e) le : 25/09/2011

http://www.manga-destiny.com
AtsukiMD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des catégories rétractables, mais avec une icône +.

Message par Ea Dim 2 Oct 2011 - 21:03

Vu que le script rajoute un :

Code:
class="trtitlecat"
À la ligne de titre ( afin de pouvoir déterminer qu'il ne faut pas la fermer elle ), on peut l'utiliser par du CSS ( dans PA > Affichage > Couleurs > Feuille de style ) pour choisir la couleur du contenu :

Code:
.trtitlecat * { color: #000!important; }
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des catégories rétractables, mais avec une icône +.

Message par AtsukiMD Lun 3 Oct 2011 - 19:43

Bonjour,

J'ai rajouté la ligne en question dans le CSS mais cela ne marche pas...

Amicalement,
Atsuki.
AtsukiMD

AtsukiMD
**

Masculin
Messages : 62
Inscrit(e) le : 25/09/2011

http://www.manga-destiny.com
AtsukiMD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des catégories rétractables, mais avec une icône +.

Message par AtsukiMD Mer 5 Oct 2011 - 15:40

Up
AtsukiMD

AtsukiMD
**

Masculin
Messages : 62
Inscrit(e) le : 25/09/2011

http://www.manga-destiny.com
AtsukiMD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des catégories rétractables, mais avec une icône +.

Message par Invité Mer 5 Oct 2011 - 16:08

Salut AtsukiMD,

si ton forum est celui de ton profil:
Ajoutes ceci dans ta css:
#ffffff; représentant la couleur blanche Wink

Code:

a.cattitle
{
color: #ffffff;
}
a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des catégories rétractables, mais avec une icône +.

Message par AtsukiMD Mer 5 Oct 2011 - 21:31

Enfin de compte, le code d'Etana marche, au temps pour moi. J'avais mal du enregistrer xD

Un grand merci à Etana Very Happy Et merci à toi aussi Milouze Very Happy
AtsukiMD

AtsukiMD
**

Masculin
Messages : 62
Inscrit(e) le : 25/09/2011

http://www.manga-destiny.com
AtsukiMD a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum