Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Astuces Forumactif

EDGE/ PHPBB2 / PHPBB3/ PUNBB / INVISION/ MODERNBB/ AWESOMEBB
 
AccueilAccueil  PortailPortail  Connexion  S'enregistrerS'enregistrer  
Le Deal du moment :
Fire Emblem : où précommander Fire ...
Voir le deal
99.90 €

 

 [PHPBB3] Remplacer les backgrounds image natifs par des images

Aller en bas 
2 participants
AuteurMessage
Milouze14
Fondateur

Milouze14



[PHPBB3] Remplacer les backgrounds image natifs par des images Empty
MessageSujet: [PHPBB3] Remplacer les backgrounds image natifs par des images   [PHPBB3] Remplacer les backgrounds image natifs par des images EmptyMar 6 Oct 2020 - 17:45

Hello les ami(e)s,

alors c'est quoi encore ce truc!!

La version PHPBB3 par défaut est basée sur des icones ayant un background image, ce qui rend impossible de personnaliser la partie concernée:

Est-ce plus clair ainsi les ami(e)s?

[PHPBB3] Remplacer les backgrounds image natifs par des images 135


Cette astuce va vous permettre de créer une cellule et insérer la variable qui gère les icones du forum:

Ce qui donnera ceci:

[PHPBB3] Remplacer les backgrounds image natifs par des images 215

Donc ceci sera valable sur l'index et les sous forums.




A la fin de l'astuce je vous donnerais une option pour faire clignoter les icônes lors de nouveau messages.
Un script pour ajouter une class et la css qui fera l'animation.

Bref, on va donc faire des modifications dans 2 templates:


Dans le template index_box:
Affichage/Templates/Général/index_box

Rechercher ceci:
Code:
<dd class="dterm">

Juste avant déposer ceci:
Code:

 <dd class="M14_folder_img">
   <div  align="center" valign="middle"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}"/>  </div>
                                          </dd>

Rechercher ceci:
Code:

<dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">

Supprimer et remplacer par:

Code:

<dl class="icon">

Rechercher ceci:
Code:
<div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">

Remplacer par:
Code:

<div class="M14_margin" style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">



Penser a enregistrer puis à valider en cliquant respectivement sur   Enregistr puis Ajout



Dans le template topics_list_box:
Affichage/Templates/Général/topics_list_box
Rechercher ceci:

Code:
<dl class="icon" style="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">

Supprimer et remplacer par:
Code:
<dl class="icon">  <dd class="M14_folder_img">
   <div  align="center" valign="middle"><img src="{topics_list_box.row.TOPIC_FOLDER_IMG}"/> </div> 
                                          </dd>



Penser a enregistrer puis à valider en cliquant respectivement sur   Enregistr puis Ajout

Voilou pour les templates.
Un peu de style:


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:

ul.topiclist.forums dd.dterm
{
  width:55%!important;
  padding-left:15px!important;
}
dd.M14_folder_img{width:5%;height:auto;}

Penser a cliquer sur le bouton [PHPBB3] Remplacer les backgrounds image natifs par des images Sans_t10


Optionnel:

Si vous souhaitez faire clignoter l'icône en cas de nouveaux messages.


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:

.M14_blink  {
  /*on anime toute les 1 seconde*/
   animation-duration: 1s;
   animation-name: clignote;
   animation-iteration-count: infinite;
   transition: none;
}
@keyframes clignote {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }}

Penser a cliquer sur le bouton [PHPBB3] Remplacer les backgrounds image natifs par des images Sans_t10




Puis ce script:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Cocher sur l'index et sur les sous-forums



Déposer ceci:

Code:

$(function(){
$('img[class="sprite-icon_topic_newest"]').each(function(){
 $(this).closest('dl').find('dd.M14_folder_img img').addClass('M14_blink ');
});});

Penser a cliquer sur le bouton Valid




Afin de personnaliser les sous forums car ces derniers seront affichés comme les autres et si toutefois vous avez dans votre P.A coché le niveau de compression à "Aucun" quelque soit le mode.

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


Il y aura un décalage effectif sur les sous forums.

Ensuite suivant la marge donnée dans ton PA:


Général/Configuration/Structure des pages

Largeur de la cellule image catégorie/forum :

La valeur par défaut est de 45px, si tu la même valeur, le style ci dessous sera correcte.


Vous pouvez ajuster en réduisant la marge avec ce style:
Code:
/*LES FORUMS*/
div.M14_margin[style*="margin : 0 0px 0 45px;"]{margin-left:5px!important;}
/*LES SOUS FORUMS*/
div.M14_margin[style*="margin : 0 0px 0 90px;"]{margin-left:45px!important;}


Si toutefois elle est différente il faut aussi modifier cette dernière.
Exemple avec 80px
On la retrouve sur la première ligne et pour la deuxième( sous forums), on multiplie par 2

Tu peux ajuster en réduisant la marge avec ce style:
Code:
/*LES FORUMS*/
div.M14_margin[style*="margin : 0 0px 0 80px;"]{margin-left:5px!important;}
/*LES SOUS FORUMS*/
div.M14_margin[style*="margin : 0 0px 0 160px;"]{margin-left:45px!important;}








Dernière édition par Milouze14 le Mar 30 Nov 2021 - 19:28, édité 3 fois
Revenir en haut Aller en bas
https://www.milouze14.com
Roza
Milouzien

Roza



[PHPBB3] Remplacer les backgrounds image natifs par des images Empty
MessageSujet: Re: [PHPBB3] Remplacer les backgrounds image natifs par des images   [PHPBB3] Remplacer les backgrounds image natifs par des images EmptyJeu 8 Oct 2020 - 17:29

Bonjour Phil !

Est-ce que cette astuce répondrait à la question que je t'avais posée dans un autre sujet, ici :
 => https://www.milouze14.com/t32795-phpbb3-faire-clignoter-les-images-des-nouveaux-messages  ?

Roza a écrit:
Par contre pour les nouveaux messages dans les sujets ou dans les rubriques ... ce qui clignote, c'est la mini-icône  "Voir le dernier message le plus récent" et elle est si petite qu'on la voit à peine.
Je voudrais que ce soit l'image que j'ai choisie pour signaler les nouveaux messages (qui apparaît dans la colonne de gauche), qui clignote, pas cette mini-icône quasi invisible.

Si oui, c'est génial !!

Revenir en haut Aller en bas
https://ami-ma.forumactif.com/
Milouze14
Fondateur

Milouze14



[PHPBB3] Remplacer les backgrounds image natifs par des images Empty
MessageSujet: Re: [PHPBB3] Remplacer les backgrounds image natifs par des images   [PHPBB3] Remplacer les backgrounds image natifs par des images EmptyJeu 8 Oct 2020 - 17:35

Coucou Roza,
vi, j'avais anticipé ta demande MDR .
Revenir en haut Aller en bas
https://www.milouze14.com
Roza
Milouzien

Roza



[PHPBB3] Remplacer les backgrounds image natifs par des images Empty
MessageSujet: Re: [PHPBB3] Remplacer les backgrounds image natifs par des images   [PHPBB3] Remplacer les backgrounds image natifs par des images EmptyJeu 8 Oct 2020 - 17:39

Re...
Mais c'est SUPER, ça ! Merci

Je m'y colle dès que j'ai une minute.
Je te dirai le résultat.

Bonne soirée et @+

Revenir en haut Aller en bas
https://ami-ma.forumactif.com/
Roza
Milouzien

Roza



[PHPBB3] Remplacer les backgrounds image natifs par des images Empty
MessageSujet: Re: [PHPBB3] Remplacer les backgrounds image natifs par des images   [PHPBB3] Remplacer les backgrounds image natifs par des images EmptyJeu 8 Oct 2020 - 23:21

Re..

Souci ... donc direction l'entraide, demain.

Bonne nuit !

Revenir en haut Aller en bas
https://ami-ma.forumactif.com/
Milouze14
Fondateur

Milouze14



[PHPBB3] Remplacer les backgrounds image natifs par des images Empty
MessageSujet: Re: [PHPBB3] Remplacer les backgrounds image natifs par des images   [PHPBB3] Remplacer les backgrounds image natifs par des images EmptyVen 9 Oct 2020 - 6:07

Coucou Roza,
je serais absent jusqu'à Samedi soir.
Revenir en haut Aller en bas
https://www.milouze14.com
Roza
Milouzien

Roza



[PHPBB3] Remplacer les backgrounds image natifs par des images Empty
MessageSujet: Re: [PHPBB3] Remplacer les backgrounds image natifs par des images   [PHPBB3] Remplacer les backgrounds image natifs par des images EmptyVen 9 Oct 2020 - 10:04

Bonjour Phil !

Pas de souci. J'attendrai ton retour.
Ca me laissera le temps de tout bien revérifier dans les modifs que j'ai faites.

@+.

Revenir en haut Aller en bas
https://ami-ma.forumactif.com/
Milouze14
Fondateur

Milouze14



[PHPBB3] Remplacer les backgrounds image natifs par des images Empty
MessageSujet: Re: [PHPBB3] Remplacer les backgrounds image natifs par des images   [PHPBB3] Remplacer les backgrounds image natifs par des images EmptySam 10 Oct 2020 - 20:26

Coucou Roza,
tu peux poster ton sujet hinhin .

A demain chère amie.
Revenir en haut Aller en bas
https://www.milouze14.com
Roza
Milouzien

Roza



[PHPBB3] Remplacer les backgrounds image natifs par des images Empty
MessageSujet: Re: [PHPBB3] Remplacer les backgrounds image natifs par des images   [PHPBB3] Remplacer les backgrounds image natifs par des images EmptyDim 11 Oct 2020 - 10:54

Coucou Phil !

Merci à toi.
Je fais ça dans la journée.

Bon dimanche ! MDR

Revenir en haut Aller en bas
https://ami-ma.forumactif.com/
Contenu sponsorisé





[PHPBB3] Remplacer les backgrounds image natifs par des images Empty
MessageSujet: Re: [PHPBB3] Remplacer les backgrounds image natifs par des images   [PHPBB3] Remplacer les backgrounds image natifs par des images Empty

Revenir en haut Aller en bas
 
[PHPBB3] Remplacer les backgrounds image natifs par des images
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [PHPBB3] Remplacer le mot Invité
» [PHPBB3] Redimensionnement des images personnalisé
» [BESTOF][PHPBB3] Images favorites
» [PHPBB2] Remplacer le mot Invité
» [PUNBB] Remplacer le mot Invité

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Astuces Forumactif :: Astuces Forumactif :: Les astuces Phpbb3-
Sauter vers: