Aller en bas
Deco sapin
Deco renne
Mäven
Mäven
Informations : Idea Viens papoter avec nous sur le discord

Messages : 2278
https://tambouille-raleuses.forumactif.com/

Ajouter une image aux sous-forum sans la rendre visible sur l'index Empty Ajouter une image aux sous-forum sans la rendre visible sur l'index

le Ven 26 Juil - 14:58

Ajouter une image aux sous-forum sans la rendre visible sur l'index


Bonjour bonjour Smile

Aujourd’hui, je viens t'appendre à mettre en place des images de sous-forums, présentes au dessus de la liste des sujets mais invisible sur l'index. Pas très clair... Bon alors voilà un exemple :

Forum 1 :
Spoiler:
Ajouter une image aux sous-forum sans la rendre visible sur l'index Forum_10
Forum 2 :
Spoiler:
Ajouter une image aux sous-forum sans la rendre visible sur l'index Forum_11
Index :
Spoiler:
Ajouter une image aux sous-forum sans la rendre visible sur l'index Index11

Idea Tu dois avoir accès aux templates pour l'installation
Idea Tu ne dois pas être effrayé par le javascript

Modifions le template

Tout d'abord, on va aller modifier le template (PA > Affichage > Template) topics_list_box
Tu vas devoir coller ceci :
Code:
<div class="image-sous-forum"></div>
Juste avant la bonne balise, selon ta version :

Phpbb2

Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

PunBB

Code:
<div class="main-head">

Invision

Code:
<div class="maintitle floated dropped">

Phpbb3 & ModernBB

Code:
<div class="forumbg announcement">

AwesomeBB

Code:
<div class="posts">

Tu enregistres, et tu publies le template Smile

Du javascript

Dans PA > Modules > Gestion des codes javascript
On crée un nouveau javascript et on l'applique aux sous-forums uniquement :
Spoiler:
Ajouter une image aux sous-forum sans la rendre visible sur l'index Script10

Voilà le code à coller, il est commenté pour la compréhension mais si tu as un souci n'hésite pas à demander.
Code:
//Au chargement de la page
$(function(){
    // On déclare un tableau avec d'abord le numéro du forum, l'url de l'image que l'on veut afficher et enfin le nom du forum qui servira de texte alternatif
  // Pour ajouter une case au tableau, il faut dupliquer ce qu'il y a entre {} et séparer par une virgule.
  var imageTab = [{
              forum: "http://maven-test.forumactif.com/f1-votre-1er-forum",
            image: "https://i.servimg.com/u/f71/20/05/19/39/468x6010.png",
        nom: "nom du sous forum"
      },
      {
            forum: "http://maven-test.forumactif.com/f3-deuxieme-sous-forum",
            image: "http://pvereecken.fr/tambouille/88x31-logo.png",
        nom: "nom du sous forum 2"
      }];
 
    //Si la classe qu'on a ajouté dans le template est présente
        //On parcours le tableau d'image qu'on a déclaré
          //Si l'url de la page existe dans le tableau
              //On récupère l'url de l'image et on l'insère dans le HTML
  if($('.image-sous-forum').length){
      for(i=0;i<imageTab.length;i++){
          if( imageTab[i].forum==document.location.href){
            $('.image-sous-forum')[0].innerHTML='<img src="'+imageTab[i].image+'" alt="'+imageTab[i].nom+'" />';
          }
      }
       
      }
});

Arrow Pour paramétrer tes images, tu dois modifier le tableau déclaré et le compléter :
Code:
  {
              forum: "URL DE TON SOUS FORUM",
            image: "URL DE L'IMAGE A AFFICHER",
        nom: "NOM DU SOUS FORUM - SERA LE TEXTE ALTERNATIF SI l'IMAGE PLANTE"
      }
Et n'oublies pas la virgule entre chaque déclaration.

De la mise en page

Tu peux centrer ton image et écarter des bordes hauts et bas de son emplacement avec un peu de CSS : PA > Affichage > Couleurs > Feuille de style CSS :
Code:
  .image-sous-forum{
      text-align:center;
      margin:5px 0;
    }




Et voilà, tu peux personnaliser le haut de tes sous-forums simplement, sans sur-charger ton index, si tu le souhaites.
Si tu as des questions, ou un rendu à nous montrer, n'hésite pas Very Happy

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



A visiter

Post-It des Râleuses