Mettre des liens rapides dans l'image de catégorie.

[Elena Carter]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Moi uniquement
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

Je ne suis pas face à un problème à part entière mais plus un manque de connaissance. Je m'excuse si ce n'est pas le bon endroit. Quelqu'un saurait-il comment intégrer des liens rapides (qui remplacent les sous-forums) dans l'image de catégorie ? J'ai entouré en rouge l'emplacement exact dont je parle. J'aimerai y mettre des liens rapides portant vers un autre sujet en hover mais peine à trouver comment faire.

Merci d'avance à vous !

[Elena Carter]

Je précise que j'aimerai y mettre des liens rapides différents selon les catégories. J'ai essayé de passer par les descriptions dans le panneau d'administration mais ça me semble impossible. Peut-être m'y suis-je mal pris.

[Invité]

Hello Elena Carter,
bienvenue sur le forum des Forums .
alors le contenu du template concerné et sa c.s.s aurait été un plus.
Sinon, concernant la compression:

Affichage/Page d'acceuil/ Structure et hiérarchie/Niveau de compression de l'index

Comment est configuré ton fofo ?
Conserver les catégories sur l'index / Séparer les catégories sur l'index.


a++

[Elena Carter]

Coucou !

Merci pour ta réponse ! Pour le coup je peux sans souci fournir le CSS et le Template en privé, c'est juste que ce sont mes codes personnels alors j'avoue que je préfère les garder pour moi.

Pour répondre à ta question : Séparer les catégories sur l'index : moyen.

[Oka.mi]

Bonjour Elena Carter,

Je comprends et respecte votre souhait de garder pour vous vos codes, toutefois, voici quelques raisons pour lesquelles ce n'est pas pratique dans le cas présent :

• Pour quelqu'un qui souhaite vraiment récupérer votre CSS, la manœuvre est extrêmement simple.
  
• Pour le template, c'est plus compliqué mais il y a toujours moyen de le deviner en analysant les différents éléments. Néanmoins les personnes qui sont vraiment gênées ici sont celles qui cherchent à vous aider.
  
• Vous avez la possibilité de partager les codes sous balise hide, pour réserver son accès à ceux qui ont participé à ce sujet et aux membres du staff.
  

Pour ma part, je vais tout de même tenter de vous proposer quelque chose sur base de ce que je vois sur votre forum.
Pour commencer, assurez-vous d'avoir bien activé l'option "Afficher les liens vers les sous-forums".

Ensuite, dans votre template, cherchez les variables {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}, déplacez les à côté de votre image de catégorie. Nous allons créer un élément dans lequel figurera les liens rapides vers les sous-forums, et un ensemble qui englobera ce dernier ainsi que l'image de la catégorie.

Cela donnerait quelque chose comme ça :

Code:

<div class="conteneur_sf"><img src="https://i.servimg.com/u/f68/20/23/93/70/imgcat11.png" class="img-categorie"><div class="sousforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div>

Maintenant, dans votre feuille CSS, vous avez :

Code:

.img-categorie {
    background-color: var(--fond-deux);
    border: 1px solid var(--border);
    height: 77px;
    margin-right: 4px;
    margin-top: 7px;
    padding: 4px;
    width: 97px
}

Remplacez cela par le css des éléments que nous avons ajoutés dans votre template :

Code:

.conteneur_sf {
   width: 97px;
   height: 77px;
   overflow: hidden;
   margin-right: 12px;
   margin-top: 7px;
}

.img-categorie {
   background-color: var(--fond-deux);
   border: 1px solid var(--border);
   height: 77px;
   width: 97px;
   padding: 4px;
   position: absolute;
   z-index: 2;
   transition: .5s;
}

.img-categorie:hover {
    opacity: 0;
}

.sousforums {
   background: #111;
   color: #eee;
   width: 97px;
   height: 77px;
   padding: 4px;
   position: absolute;
   word-wrap: break-word;
}

[Invité]

Coucou Elena Carter,

Pour le coup je peux sans souci fournir le CSS et le Template en privé, c'est juste que ce sont mes codes personnels alors j'avoue que je préfère les garder pour moi.

Oui je comprend , il y a les balises hide (Caché) qui permettre de masquer le contenu que l'on désire.
Ou tu peux m'envoyer tout cela en MP   .
J'ai absolument besoin besoin de voir le rendu avec tes modifications avant de te donner une solution .

Voir sur mon fofo de tests


Édit:
Hello Oka.mi ,

Je précise que j'aimerai y mettre des liens rapides différents selon les catégories. J'ai essayé de passer par les descriptions dans le panneau d'administration mais ça me semble impossible. Peut-être m'y suis-je mal pris.

On ne parle pas des sous forums mais des liens divers .
J'ai faillit me faire avoir   .



a++

[Lixyr]

Bonsoir,

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

[Oka.mi]

Hello Milouze14,

Ok, je vois l'autre interprétation possible, merci pour la précision.

Elena Carter, si vous souhaitez mettre des liens personnalisés et différents pour chaque forum, et de faire qu'ils s'affichent après passage de la souris sur votre image, vous pouvez faire comme suit.

D'abord, dans votre template, au lieu de récupérer les variables susmentionnées, remplacez simplement la ligne qui concerne votre image par :

Code:

<div class="conteneur_lr"><img src="https://i.servimg.com/u/f68/20/23/93/70/imgcat11.png" class="img-categorie"><div class="liste_lr"></div></div>

J'ai adapté les noms des div et le css en fonction, en conséquence c'est ce code qu'il faut ajouter dans la feuille css (toujours à la place de votre ancien .img-categorie) :

Code:

.conteneur_lr {
    width: 97px;
    height: 77px;
    overflow: hidden;
    margin-right: 12px;
    margin-top: 7px;
}

.img-categorie {
    background-color: var(--fond-deux);
    border: 1px solid var(--border);
    height: 77px;
    width: 97px;
    padding: 4px;
    position: absolute;
}

.liste_lr {
    background: #111;
    color: #eee;
    width: 97px;
    height: 77px;
    padding: 4px;
    position: absolute;
    word-wrap: break-word;
    opacity: 0;
    transition: .5s;
}

.liste_lr:hover {
    opacity: 1;
}


Créez un JavaScript, collez ceci avec affichage sur toutes les pages :

Code:

$(function() {
      $(".fond-cate2").each(function(){
        $(this).find('.liste_lr').append($(this).find('.lrapide'));
        });
    });

Maintenant, pour ajouter vos liens, il vous suffit de passer par la description classique, et de mettre la class "lrapide" pour les liens que vous voulez voir déplacés. Exemple :

Code:

<a class="lrapide" href="https://forum.forumactif.com/">Forumactif</a>

[Invité]

Hello Oka.mi,
ah j'avais une autre idée de mon côté,
je plaçais une div avec un display none (css) dans la description de chaque forum:
Exemple:

Code:

<div class="M14_topics">
    <a title="Premier sujet mais le titre est vraiment très long" class="M14_link" href="LE LIEN 1">Premier sujet mais le titre est vraiment très long</a><a title="Deuxième sujet mais le titre est un peu long" class="M14_link" href="LE LIEN 2">Deuxième sujet mais le titre est un peu long</a><a title="Troisième sujet et le titre est court" class="M14_link" href="LE LIEN 3">Troisième sujet et le titre est court</a><a title="Quatrième sujet et le titre est court" class="M14_link" href="LE LIEN 4">Quatrième sujet et le titre est court</a> 
</div>


Dans le template dans la dernière cellule à droite, ce code html:

Code:

 <div class="M14_bloc"> <div class="M14_td_image"></div>
                  <div class="M14_recept_link"></div>
                  </div>


La c.s.s:

Code:

/* ON CACHE LA DIV PRESENTE DANS LE PA*/
.M14_topics{display:none;height:0px;width:0px;}
/*LE BLOC ENTOURANT LES DEUX DIVS DANS LE TEMPLATE*/
/*ON DONNE DES DIMENSIONS EN FONCTION DES VALEURS width et height DE L IMAGE*/
.M14_bloc
{
height:77px;
width:97px;
position: relative;
top: 0px;
  border: 1px solid #333;
}
/*SI PAS DE DIV */
/*ON DONNE DES DIMENSIONS EN FONCTION DES VALEURS width et height DE L IMAGE*/
.M14_topics_none
{
    position: absolute;
margin-top: 0px;
  background:#20aec8;
  display:none;
  font-size:10px;
  color:#000;
  text-align:center;
  line-height:77px;
  height:77px;
width:97px;
 
}
/*LA DIV QUI S AFFICHERA AU SURVOL*/
/*ON DONNE DES DIMENSIONS EN FONCTION DES VALEURS width et height DE L IMAGE*/
.M14_recept_link .M14_topics
{
background:#333;
height:77px;
width:97px;
overflow-y:auto;
text-align:left;

}
/*ON POSITIONNE LA DIV*/
/*ON DONNE DES DIMENSIONS EN FONCTION DES VALEURS width et height DE L IMAGE*/
.M14_recept_link
{ 
  margin-top:0px;
  position:absolute;
  height:77px;
width:97px;
 
}
.M14_recept_link .M14_topics a.M14_link
{
display:list-item;
font-size:10px;
color:#fff;
list-style:none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width:80px;
text-decoration:none!important;
}
 
/*ON DONNE UNE APPARENCE A LA DIV RECEVANT L IMAGE*/
/*ON DONNE DES DIMENSIONS EN FONCTION DES VALEURS width et height DE L IMAGE*/
div.M14_td_image
{
  background-image:url(https://i.servimg.com/u/f68/20/23/93/70/imgcat11.png);
  background-repeat:no-repeat;
  height:77px;
  width:97px;
  position: absolute;
margin-top: 0px;
    cursor:pointer;

}


Puis le script sur l'index vu que l'on est sur les catégories:

Code:

$(function(){
$('.M14_recept_link').each(function(){
var a=$(this).closest('tr').find('.M14_topics').length;
var $this=$(this).closest('tr').find('.M14_topics');
if(a)
{
$(this).closest('tr').find('.M14_recept_link').append($this).show(); 
$(this).closest('tr').find('.M14_bloc').hover(function(){
$(this).closest('tr').find('.M14_td_image').hide(300);
$(this).closest('tr').find('.M14_topics').show(300);  }, function(){
$(this).closest('tr').find('.M14_td_image').show(300);
$(this).closest('tr').find('.M14_topics').hide(300);
      });
}
 
else
{
var none="Aucun sujet";
$(this).closest('tr').find('.M14_recept_link').append('<div class="M14_topics_none">'+none+'</div>');
$(this).closest('tr').find('.M14_recept_link').append($this).show(); 
$(this).closest('tr').find('.M14_bloc').hover(function(){
$(this).closest('tr').find('.M14_td_image').hide(300);
$(this).closest('tr').find('.M14_topics_none').show(300);  }, function(){
$(this).closest('tr').find('.M14_td_image').show(300);
$(this).closest('tr').find('.M14_topics_none').hide(300);
      });
 
} 
 
 
  });
});

a++

[Elena Carter]

Merci beaucoup à tous pour vos réponses, il me semblait bien qu'il fallait que je passe par le Javascript (que je ne maîtrise pas) j'essaie ça dès que possible et vous tiens au courant !

Je me permets donc de suivre votre conseil en mettant mes codes en hide, il risque d'y avoir des erreurs de débutant dans mes codes, hein, je ne code pas depuis longtemps

Le CSS :



Le Template Index_box :

[Elena Carter]

Créez un JavaScript, collez ceci avec affichage sur toutes les pages :

Code:

$(".fond-cate2").each(function(){  

$(this).find('liste_lr').append($(this).find('.lrapide'));

});

Maintenant, pour ajouter vos liens, il vous suffit de passer par la description classique, et de mettre la class "lrapide" pour les liens que vous voulez voir déplacés. Exemple :

Code:

<a class="lrapide" href="https://forum.forumactif.com/">Forumactif</a>

Pour le coup j'ai essayé cette méthode, néanmoins les liens restent dans la description et ne viennent pas se greffer au hover de l'image. Peut-être est-ce parce qu'il faut que je fasse une ligne de CSS avec .lrapide ?

[Elena Carter]

Pour la méthode de Milouze14 , j'avoue que j'ai du mal à visualiser, je vois bien que c'est une sorte de bidouillage sur des objets rendus invisibles, qu'il y a un javascript mais j'avoue ne pas être suffisamment avancée, peut-être pour comprendre le cheminement. Peut-être pourrais-je être éclairée grâce aux codes que j'ai partagé !

En tous cas merci vraiment pour vos retours complets et votre aide, c'est vraiment agréable !

[Oka.mi]

Re,

Je ne suis pas chez moi pour l'instant donc je ne peux pas examiner le souci en détails, mais avez-vous bien modifié le template ?

Voici la nouvelle version à copier coller si vous n'êtes pas sûre

[Elena Carter]

Pour le coup oui il est modifié, le conteneur en hover se voit très bien, c'est vraiment le lien qui reste dans la description qui me pose souci, celui-ci n'étant pas dans le hover.

Aucun souci, ça ne presse pas du tout !

[Oka.mi]

Re !

En fait c'est tout bête, j'ai oublié un "." avant la class de liste_lr dans mon code JavaScript x)
Je faisais un changement d'appellation de dernière minute vu que j'ai fait mes tests avec mes anciens div et j'ai zappé le . au passage...

Avec ça comme JavaScript ça fonctionnera mieux ! :p

Code:

$(".fond-cate2").each(function(){  
    
    $(this).find('.liste_lr').append($(this).find('.lrapide'));
    
    });

[Elena Carter]

J'avoue que j'ai bien revérifié tout mais ça ne fonctionne pas plus Le lien reste dans la description

[Oka.mi]

Ah oui, en passant par le module JavaScript, le code s'exécute avant que la page ne se charge (du coup il ne fait rien), j'oublie toujours ce détail >_<
Du coup petit ajout pour qu'il le fasse après :

Code:

$(function() {
       $(".fond-cate2").each(function(){
        $(this).find('.liste_lr').append($(this).find('.lrapide'));
        });
    });

[Elena Carter]

Super ! Merci infiniment ça fonctionne !

[Oka.mi]

Désolée, je suis distraite parfois
Avec plaisir, bonne journée ~

(J'ai édité mon post récapitulatif pour ajouter la version corrigée du JavaScript, si d'autres personnes rencontrent le même besoin )