Membres connectés récemment
[PHPBB3] Remplacer les backgrounds image natifs par des images
2 participants
Page 2 sur 2 • Partagez
Page 2 sur 2 • 1, 2
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) :
Topics_list_box (avant et après modif) :
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 :
Alors que tout est aligné verticalement, actuellement.
Voilà...
Bonne soirée et bonnes recherches....
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 :
Alors que tout est aligné verticalement, actuellement.
Voilà...
Bonne soirée et bonnes recherches....
Ho, on ne connait pas assez le tit Milouze .
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:
Penses a enregistrer puis à valider en cliquant respectivement sur puis
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:
Penser a cliquer sur le bouton
Comme mentionné plus haut, tu pourras remplacer le lien de l'image dans le script ici entre les doubles guillemets:
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}" />
<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 puis
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
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";
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
Encore un immense à toi !
Allez, bonne nuit, tu l'as bien mérité !
@+
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
Encore un immense à toi !
Allez, bonne nuit, tu l'as bien mérité !
@+
Page 2 sur 2 • 1, 2
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 2 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum