Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[PHPBB3] Remplacer les backgrounds image natifs par des images


2 participants

Page 2 sur 2 Précédent  1, 2

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

Roza
Roza
https://ami-ma.forumactif.com/

MessageRoza Dim 11 Oct 2020 - 18:11

Rappel du premier message :

  • Version du forum :
    PHPBB3
  • Templates modifiés :
    oui
  • Navigateur :
    Firefox
Bonjour Phil.

J'ai fait toutes les modifications (Templates, CSS, JS), enfin je pense... comme indiquées dans cette astuce :

=> https://www.milouze14.com/t32796-phpbb3-remplacer-les-backgrounds-image-natifs-par-des-images#anchor

Voici pour les Templates... ce qui pour moi, est le plus délicat !!!

Index_box (avant et après modif) :

Code:
Index_box

AVANT MODIF :

<!-- BEGIN forumrow -->
 <li class="row">
 <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
 <dd class="dterm">
 <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
 <h{catrow.forumrow.LEVEL} class="hierarchy">
 <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
 </h{catrow.forumrow.LEVEL}>
 <br />
 {catrow.forumrow.FORUM_DESC}

 <!-- BEGIN switch_moderators_links -->

APRES MODIF

<!-- BEGIN forumrow -->
 <li class="row">
    <dl class="icon">
     <dd class="M14_folder_img">
      <div  align="center" valign="middle"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}"/>  </div>
                                              </dd>                                        
                                          <dd class="dterm">
    <div style="display: block; margin-left:5px;">
 <h{catrow.forumrow.LEVEL} class="hierarchy">
 <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
 </h{catrow.forumrow.LEVEL}>
 <br />
 {catrow.forumrow.FORUM_DESC}

       <!-- BEGIN switch_moderators_links -->


Topics_list_box
(avant et après modif) :

Code:
Topics_list_box

AVANT MODIF

<!-- END table_sticky -->

 <li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
 <dl class="icon" style="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
 <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}" {topics_list_box.row.ICON}>
 <!-- BEGIN single_selection -->


APRES MODIF !

<!-- END table_sticky -->
<li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
    <dl class="icon">  <dd class="M14_folder_img">
                              <div  align="center" valign="middle"><img src="{topics_list_box.row.TOPIC_FOLDER_IMG}"/> </div>
                                              </dd>
 <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}" {topics_list_box.row.ICON}>
 <!-- BEGIN single_selection -->
 <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
 <!-- END single_selection -->

Hélas, le résultat n'est pas TOP :

1- les petites images indiquant des nouveaux messages dans les sujets (pas pour les MP) ne clignotent pas.

2- en outre, je constate une anomalie au niveau de l'affichage sur la page d'accueil : les sous-forums ne sont plus décalés vers la droite par rapport aux forums (les sous-rubriques par rapport aux rubriques). Tout est aligné verticalement de la même façon.
Ce qui ne facilite pas du tout la compréhension de l'architecture du forum... qui devrait se présenter ainsi :

[PHPBB3] Remplacer les backgrounds image natifs par des images - Page 2 2020-118

Alors que tout est aligné verticalement, actuellement.

Voilà...

Bonne soirée et bonnes recherches....


Dernière édition par Roza le Dim 11 Oct 2020 - 22:22, édité 1 fois

Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 13 Oct 2020 - 19:37

Ho, on ne connait pas assez le tit Milouze  MDR .


Alors j'ai quelque peu travailler avant de me sauver concernant la liste des MPS.


J'ai trouvé le lien de l'image, tu pourras le changer dans le script si un jour tu désires modifier cette image.



Dans le template privmsgs_body:
Affichage/Templates/Poster et messages privés/privmsgs_body

Remplaces tout le contenu du template par celui-ci:
Code:
<!-- BEGIN switch_user_logged_in --><p class="right rightside">{LAST_VISIT_DATE}</p><!-- END switch_user_logged_in -->
<p>{CURRENT_TIME}</p>

<ul id="privmsgs-menu">
 <li>{INBOX_IMG} {INBOX}</li>
 <li>{SENTBOX_IMG} {SENTBOX}</li>
 <li>{OUTBOX_IMG} {OUTBOX}</li>
 <li>{SAVEBOX_IMG} {SAVEBOX}</li>
</ul>

<form action="{S_PRIVMSGS_ACTION}" method="post" name="privmsg_list">

<div class="topic-actions">
 <div class="buttons">
 <div class="post-icon">{POST_PM_IMG}</div>
 </div>
</div>
<div class="clear"></div>

<div class="panel">
 <div class="inner"><span class="corners-top"><span></span></span>
 <!-- BEGIN switch_box_size_notice -->
 <p class="left-box">{BOX_SIZE_STATUS}</p>
 <!-- END switch_box_size_notice -->
 <p class="right-box">
 {L_DISPLAY_MESSAGES}: <select name="msgdays">
 {S_SELECT_MSG_DAYS}
 </select> <input class="button2" type="submit" name="submit_msgdays" value="{L_GO}" />
 </p>
 <div class="clear"></div>
 <span class="corners-bottom"><span></span></span></div>
</div>

<div class="forabg">
 <div class="inner"><span class="corners-top"><span></span></span>

 <ul class="topiclist">
 <li class="header">
 <dl>
 <dt>{L_SUBJECT}</dt>
 <dd class="mark">{L_MARK}</dd>
 </dl>
 </li>
 </ul>

 <ul class="topiclist pmlist bg_none">
 <!-- BEGIN listrow -->
 <li class="row {listrow.ROW_CLASS}">

 

 <dl class="icon">
           <dd class="M14_folder_img">
   <div  align="center" valign="middle"><img src="{listrow.PRIVMSG_FOLDER_IMG}"/>  </div>
                                          </dd>
 <dt>
 <a href="{listrow.U_READ}" class="topictitle">{listrow.SUBJECT}</a><br />
 <span style="margin: 0 5px"><em>{listrow.FROM} - {listrow.DATE}</em></span>
 </dt>
 <dd class="mark"><input type="checkbox" name="mark[]2" value="{listrow.S_MARK_ID}" /></dd>
 </dl>
 </li>
 <!-- END listrow -->
 <!-- BEGIN switch_no_messages -->
 <li class="row row1">
 <dl class="icon">
 <dt>
 <strong>{L_NO_MESSAGES}</strong>
 </dt>
 <dd class="mark"> </dd>
 </dl>
 </li>
 <!-- END switch_no_messages -->
 </ul>

 <span class="corners-bottom"><span></span></span></div>
</div>
<p class="right-box" style="margin: 0;"><a href="javascript:select_switch_privmsg(true);">{L_MARK_ALL}</a> :: <a href="javascript:select_switch_privmsg(false);">{L_UNMARK_ALL}</a></p>
<div class="clear"></div>
<p><span class="pagination">{PAGINATION}</span>{PAGE_NUMBER}</p>
<div class="clear"></div>
<div class="topic-actions">
 <div class="buttons">
 <div class="post-icon">{POST_PM_IMG}</div>
 </div>
 <div class="pagination">
 <p>{S_HIDDEN_FIELDS}
 <!-- BEGIN switch_save -->
 <input class="button1" type="submit" name="save" value="{L_SAVE_MARKED}" />  
 <!-- END switch_save -->
 <!-- BEGIN switch_move_profile -->
 <input class="button1" type="submit" name="moveprofile" value="{L_MOVE_PROFILE_MARKED}" />  
 <!-- END switch_move_profile -->
 <!-- BEGIN switch_mark_as_read -->
 <input class="button2" type="submit" name="mark_as_read" value="{switch_mark_as_read.L_MARK_AS_READ}" />  
 <input class="button2" type="submit" name="mark_as_unread" value="{switch_mark_as_read.L_MARK_AS_UNREAD}" />  
 <!-- END switch_mark_as_read -->
 <input class="button2" type="submit" name="delete" value="{L_DELETE_MARKED}" /> &nbsp;
 <input class="button2" type="submit" name="deleteall" value="{L_DELETE_ALL}" /></p>
 </div>
</div>
</form>

<div class="clear"></div>
{JUMPBOX}

<br style="clear:both" />


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


Puis ajoutes ce script:


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

Mettre un titre explicite.

Cocher sur toutes les pages.


Déposer ceci:

Code:

$(function(){
  //le lien de l image nouveau sujet du P.A
var img="https://i.servimg.com/u/f94/20/24/64/27/new_310.gif";
  $('.topiclist.pmlist.bg_none li').find('dd.M14_folder_img').find('img[src="'+img+'"]').each(function(){
    $(this).addClass('M14_blink ');
  });});

Penser a cliquer sur le bouton Valid


Comme mentionné plus haut, tu pourras remplacer le lien de l'image dans le script ici entre les doubles guillemets:
Code:
 //le lien de l image nouveau sujet du P.A
var img="https://i.servimg.com/u/f94/20/24/64/27/new_310.gif";
Roza
Roza
https://ami-ma.forumactif.com/

MessageRoza Mar 13 Oct 2020 - 19:42

A ce que je vois, tu n'aimes pas les choses inachevées !!!!
Et, à mes yeux, c'est une sacrée qualité !!! Mercibis

Je mets ça en place et je reviens vers toi, demain.

Merci et bonne soirée.
Roza
Roza
https://ami-ma.forumactif.com/

MessageRoza Mer 14 Oct 2020 - 0:14

Hello !

J'ai dû modifier l'adresse de l'image qui manifestement n'était pas la bonne, car pas de clignotement.
Maintenant, tout est OK !!!
J'ai envoyé un MP à "Essais" : tu pourras vérifier.

C'est super génial et je suis vraiment ravie Mercibis

Encore un immense Merci pour l'aide à toi !

Allez, bonne nuit, tu l'as bien mérité !  lOL
@+
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 14 Oct 2020 - 4:03

Hello Roza,

de rien chère amie.


Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil

Page 2 sur 2 Précédent  1, 2

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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