AccueilMembres connectés récemment
[PHPBB2] Encadrer les sujets dans topics_list_box
2 participants
Page 1 sur 2
Page 1 sur 2 • 1, 2 
- Pizi
-
Mar 8 Sep 2020 - 17:51
- Version du forum :PHPBB2
- Templates modifiés :oui
- Navigateur :Firefox
Bonjour,
J'espère que vous avez passé un bel été.
Comme pour beaucoup c'est également la reprise pour moi.
Je tente de continuer à coder moi-même le design de mon forum mais je tombe sur un nouvel os concernant la liste des sujets :
Je ne parviens pas à mettre un cadre autour de mes sujets. J'avais déjà galéré quand j'avais fait une telle chose pour l'affichage des sujets mais là rien à faire... je me demande si ce n'est pas à cause de la balise table...
Habituellement j'ai au moins le cadre qui apparaît mais là même pas. Peu importe que je mette mon image en absolute ou non...
Voici le rendu (le background en noir c'était pour redimensionner le cadre car la graphiste a tout réalisé beaucoup trop gros) :
![[PHPBB2] Encadrer les sujets dans topics_list_box JVDPe5w](https://i.imgur.com/jVDPe5w.jpg)
Voici ce que je dois obtenir :
![[PHPBB2] Encadrer les sujets dans topics_list_box CrrRVoZ](https://i.imgur.com/CrrRVoZ.png)
et le cadre redimensionné :
![[PHPBB2] Encadrer les sujets dans topics_list_box BnkE1fo](https://i.imgur.com/BnkE1fo.png)
Merci beaucoup par avance pour vos conseils.
Pizi
J'espère que vous avez passé un bel été.
Comme pour beaucoup c'est également la reprise pour moi.
Je tente de continuer à coder moi-même le design de mon forum mais je tombe sur un nouvel os concernant la liste des sujets :
Je ne parviens pas à mettre un cadre autour de mes sujets. J'avais déjà galéré quand j'avais fait une telle chose pour l'affichage des sujets mais là rien à faire... je me demande si ce n'est pas à cause de la balise table...
Habituellement j'ai au moins le cadre qui apparaît mais là même pas. Peu importe que je mette mon image en absolute ou non...
Voici le rendu (le background en noir c'était pour redimensionner le cadre car la graphiste a tout réalisé beaucoup trop gros) :
Voici ce que je dois obtenir :
et le cadre redimensionné :
Merci beaucoup par avance pour vos conseils.
Pizi
- Milouze14
Fondateur -
Mar 8 Sep 2020 - 18:22
Coucou Pizi,
hum cela me paraît bien compliqué à coder avec l'image qui va contourner chaque sujet.
Cette façon de travailler en pixels n'est jamais bien chouette avec les différentes résolutions d'écran....
On peut sans problème le faire mais sans cette image ou du moins mettre les quatre coins de cette dernière.
Tu as du modifier le template donc merci de me le fournir avec la CSS associée.
hum cela me paraît bien compliqué à coder avec l'image qui va contourner chaque sujet.
Cette façon de travailler en pixels n'est jamais bien chouette avec les différentes résolutions d'écran....
On peut sans problème le faire mais sans cette image ou du moins mettre les quatre coins de cette dernière.
Tu as du modifier le template donc merci de me le fournir avec la CSS associée.
- Milouze14Fondateur
-
Mar 8 Sep 2020 - 20:01
Alors, j'ai revu quelque peu le template car j'aime avoir toutes les informations dès le départ comme le mentionne le règlement.
Il vaut mieux partir avec un pourcentage sur les balises table.
Comme les templates sont en relation avec la class .bodylinewidth
qui gère la largeur du forum quelque soit l'endroit ou nous sommes ,
il faut alors tricher et se baser quelque peu sur la largeur de ton image redimensionnée.
Ensuite sa hauteur (image) nous aidera a positionner via la CSS.
Tout est dimmensionné à 60% ( en relation avec ton image) .
Je te donne le template modifié:
topics_list_box:
Affichage/Templates/Général/topics_list_box
Penser a enregistrer puis à valider en cliquant respectivement sur
puis 
Puis dans le template viewtopic_body:
Affichage/Templates/Général/viewtopic_body
Ajoutes ceci:
Penser a enregistrer puis à valider en cliquant respectivement sur puis
Puis le style:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajouter ceci:
Penser a cliquer sur le bouton![[PHPBB2] Encadrer les sujets dans topics_list_box Sans_t10](https://i.servimg.com/u/f87/11/26/21/37/sans_t10.png)
Il vaut mieux partir avec un pourcentage sur les balises table.
Comme les templates sont en relation avec la class .bodylinewidth
qui gère la largeur du forum quelque soit l'endroit ou nous sommes ,
il faut alors tricher et se baser quelque peu sur la largeur de ton image redimensionnée.
Ensuite sa hauteur (image) nous aidera a positionner via la CSS.
Tout est dimmensionné à 60% ( en relation avec ton image) .
Je te donne le template modifié:
topics_list_box:
Affichage/Templates/Général/topics_list_box
- Code:
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
var all_checked = true;
for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
}
}
document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
}
}
}
</script>
<!-- END multi_selection -->
<table class="forumline" width="60%" border="0" cellspacing="0" cellpadding="0">
<!-- BEGIN pagination -->
<tr>
<td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
</tr>
<!-- END pagination -->
<!-- END header_table --><!-- BEGIN header_row -->
<tr>
<td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
</tr>
<!-- END header_row -->
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
<tr class="bloc_sujets">
<!-- BEGIN single_selection -->
<td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
<!-- END single_selection -->
<td class="{topics_list_box.row.ROW_FOLDER_CLASS}" align="center" valign="middle" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td>
<!-- BEGIN icon -->
<td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
<!-- END icon -->
<td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
<div class="topictitle">
{topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
<h2 class="topic-title">
<a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
</h2>
</div>
<!-- BEGIN switch_description -->
<span class="genmed">
<br />
{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
</span>
<!-- END switch_description -->
<span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
<span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
</td>
<td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.REPLIES}</span></td>
<td class="row3" align="center" valign="middle"><span class="name"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></td>
<td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.VIEWS}</span></td>
<td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap">
<!-- BEGIN avatar -->
<div style="width: 200px;"></div>
<span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
<!-- END avatar -->
<span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span>
</td>
<!-- BEGIN multi_selection -->
<td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
<!-- END multi_selection -->
</tr>
<!-- END topic --><!-- BEGIN no_topics -->
<tr>
<td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
</tr>
<!-- END no_topics --><!-- BEGIN bottom -->
<tr>
<td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <span class="gensmall">{PAGINATION}</span></td>
<td align="right"><a href="#top">{L_BACK_TO_TOP}</a> </td>
</tr>
</table>
</td>
</tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->
Penser a enregistrer puis à valider en cliquant respectivement sur
puis Puis dans le template viewtopic_body:
Affichage/Templates/Général/viewtopic_body
Ajoutes ceci:
- Code:
<style>
.bodylinewidth{width:60%;}
</style>
Penser a enregistrer puis à valider en cliquant respectivement sur
puis Puis le style:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajouter ceci:
- Code:
.bloc_sujets
{
position: relative;
background-image: url('https://i.servimg.com/u/f20/20/11/87/27/bnke1f10.png');
background-repeat: no-repeat;
background-position: top center;
height: 100px;
width: 959px;
z-index: 999;
display:inline-block;
}
.bloc_sujets td
{
background-color:#20aec8;
height: 70px;
position:relative;
top:15px;
}
.bloc_sujets td:first-child
{
left:30px;
}
.bloc_sujets td:last-child
{
right:30px;
}
Penser a cliquer sur le bouton
![[PHPBB2] Encadrer les sujets dans topics_list_box Sans_t10](https://servimg.com/r/8711262137/sans_t10.png)
- Pizi
-
Mar 8 Sep 2020 - 22:36
Bonjour,
Merci beaucoup Phil pour tes réponses.
Je me confonds en excuse, j'ai complètement oublié de t'avoir donné les codes, j'étais certaine pourtant de ne rien avoir oublié.
Vraiment je suis désolée.
J'ai tenté les codes que tu m'as communiqués mais j'obtiens ceci :
![[PHPBB2] Encadrer les sujets dans topics_list_box Rgsaorp](https://i.imgur.com/Rgsaorp.jpg)
J'ai bien publié les modifications des templates :
![[PHPBB2] Encadrer les sujets dans topics_list_box SsIktTs](vhttps://i.imgur.com/SsIktTs.jpg)
Voici les templates :
Le topics_list_box :
Le viewtopic_body :
et le CSS correspondant :
Encore merci pour ton aide.
Pizi
Merci beaucoup Phil pour tes réponses.
Je me confonds en excuse, j'ai complètement oublié de t'avoir donné les codes, j'étais certaine pourtant de ne rien avoir oublié.
Vraiment je suis désolée.
J'ai tenté les codes que tu m'as communiqués mais j'obtiens ceci :
J'ai bien publié les modifications des templates :
Voici les templates :
Le topics_list_box :
- Code:
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
var all_checked = true;
for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
}
}
document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
}
}
}
</script>
<!-- END multi_selection -->
<table class="forumline" width="60%" border="0" cellspacing="0" cellpadding="0">
<!-- BEGIN pagination -->
<tr>
<td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
</tr>
<!-- END pagination -->
<!-- END header_table --><!-- BEGIN header_row -->
<tr>
<td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
</tr>
<!-- END header_row -->
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
<tr class="bloc_sujets">
<!-- BEGIN single_selection -->
<td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
<!-- END single_selection -->
<td class="{topics_list_box.row.ROW_FOLDER_CLASS}" align="center" valign="middle" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td>
<!-- BEGIN icon -->
<td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
<!-- END icon -->
<td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
<div class="topictitle">
{topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
<h2 class="topic-title">
<a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
</h2>
</div>
<!-- BEGIN switch_description -->
<span class="genmed">
<br />
{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
</span>
<!-- END switch_description -->
<span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
<span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
</td>
<td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.REPLIES}</span></td>
<td class="row3" align="center" valign="middle"><span class="name"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></td>
<td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.VIEWS}</span></td>
<td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap">
<!-- BEGIN avatar -->
<div style="width: 200px;"></div>
<span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
<!-- END avatar -->
<span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span>
</td>
<!-- BEGIN multi_selection -->
<td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
<!-- END multi_selection -->
</tr>
<!-- END topic --><!-- BEGIN no_topics -->
<tr>
<td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
</tr>
<!-- END no_topics --><!-- BEGIN bottom -->
<tr>
<td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <span class="gensmall">{PAGINATION}</span></td>
<td align="right"><a href="#top">{L_BACK_TO_TOP}</a> </td>
</tr>
</table>
</td>
</tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->
Le viewtopic_body :
- Code:
<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){
if(typeof(_atc) == "undefined") {
_atc = { };
}
});
var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
try
{
var regId = parseInt(id, 10);
if( isNaN(regId) ) { regId = 0; }
if( regId > 0)
{
$('.post--' + id).toggle(0, function()
{
if( $(this).is(":visible") )
{
$('#hidden-title--' + id).html(hiddenMsgLabel.visible);
}
else
{
$('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
}
});
}
}
catch(e) { }
return false;
};
//]]>
</script>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr width="100%"><div class="bloctitreimg"><div class="bloctitre"><div class="nav">
<a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
<!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
{NAV_CAT_DESC_SECOND}
</div>
<div class="titre"> {TOPIC_TITLE}</div></div></div></tr>
</table>
<table class="bloc-boutons">
<td align="left" valign="middle" nowrap="nowrap">
<span class="nav">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authreply -->
</span>
</td>
<!-- BEGIN topicpagination -->
<td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall current_page_only">Page <span>{PAGE_NUMBER}</span></span><span class="gensmall paginer"><span class="remove_colon">{PAGINATION}</span></span></td>
<!-- END topicpagination -->
</table>
<table>
<!-- BEGIN postrow -->
<!-- BEGIN displayed -->
<table class="message" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td valign="top" nowrap="nowrap" align="center" width="100%"><span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
<span class="rang">{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}</span></td></tr>
<tr><td valign="top" nowrap="nowrap" class="post-options">
{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
</td>
</tr>
<tr>
<td colspan="2" class="hr">
<hr style="border:none; border-bottom: 1px solid #B89827;" />
</td>
</tr>
<tr>
<td><div class="bloc-avatar">{postrow.displayed.POSTER_AVATAR}<div class="avatarcadre"><img src="https://i.imgur.com/BCr9Apw.png" width="210px" height="330px" /></div><div class="icononline">{postrow.displayed.ONLINE_IMG}</div>
<div class="profil">
<!-- BEGIN profile_field -->
<div class="M14_profil_membre">
<span id="M14_label" class="M14_label">
{postrow.displayed.profile_field.LABEL}</span>
<script type="text/javascript">
jQuery('#M14_label').html(jQuery('#M14_label').html().replace(/: /g,' ')).removeAttr('id');
</script><br />
<span class="M14_content">{postrow.displayed.profile_field.CONTENT}</span>
</div>
<!-- END profile_field --></div></div>
</td>
</tr>
<tr>
<td align="center"><div class="details-sujet"><span class="sujetdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{postrow.displayed.POST_SUBJECT} <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></div></td>
</tr>
<tr>
<td colspan="2">
<!-- BEGIN switch_vote_active -->
<div class="vote gensmall">
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
<!-- END switch_vote -->
<!-- BEGIN switch_bar -->
<div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
<!-- BEGIN switch_vote_plus -->
<div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
<!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus -->
<div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
<!-- END switch_vote_minus -->
</div>
<!-- END switch_bar -->
<!-- BEGIN switch_no_bar -->
<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
<!-- END switch_no_bar -->
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
<!-- END switch_vote -->
</div>
<!-- END switch_vote_active -->
<div class="postbody">
<div>{postrow.displayed.MESSAGE}</div>
<!-- BEGIN switch_attachments -->
<dl class="attachbox">
<dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
<dd>
<!-- BEGIN switch_post_attachments -->
<dl class="file">
<dt>
<img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />
<!-- BEGIN switch_dl_att -->
<a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
<!-- END switch_dl_att -->
<!-- BEGIN switch_no_dl_att -->
{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
<!-- END switch_no_dl_att -->
</dt>
<!-- BEGIN switch_no_comment -->
<dd>
<em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
</dd>
<!-- END switch_no_comment -->
<!-- BEGIN switch_no_dl_att -->
<dd>
<em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
</dd>
<!-- END switch_no_dl_att -->
<dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
</dl>
<!-- END switch_post_attachments -->
</dd>
</dl>
<!-- END switch_attachments -->
<div class="clear"></div>
<!-- BEGIN switch_signature -->
<div class="signature_div">
{postrow.displayed.SIGNATURE}
</div>
<!-- END switch_signature -->
</div>
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" class="sujetbas">
<tr>
<td valign="middle" class="iconsujets">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
</td>
<td align="right"><div class="lastco"><span id="last-co">{LAST_VISIT_DATE}</span></div></td>
<script type="text/javascript">
document.getElementById('last-co').innerHTML= document.getElementById('last-co').innerHTML.replace(/Dernière visite/,"Dernière connexion");
</script>
</tr>
</table>
<!-- BEGIN first_post_br -->
</table>
<hr />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
<th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
</tr>
<!-- END first_post_br -->
<!-- END displayed -->
<!-- END postrow -->
<!-- BEGIN no_post -->
<tr align="center">
<td class="row1" colspan="2" height="28">
<span class="genmed">{no_post.L_NO_POST}</span>
</td>
</tr>
<!-- END no_post -->
<tr align="right">
<td colspan="2" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="fleches">
<tr>
<td width="9%" class="noprint"> </td>
<td align="right" nowrap="nowrap" width="9%" class="browse-arrows">
<!-- BEGIN switch_isconnect -->
<!-- END switch_isconnect -->
<a href="#top">{L_BACK_TO_TOP}</a><a href="#bottom">{L_GOTO_DOWN}</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="bloc-boutons2">
<tr><td align="left" valign="middle" nowrap="nowrap">
<span class="nav">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authreply -->
</span>
</td>
<!-- BEGIN topicpagination -->
<td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall current_page_only">Page <span>{PAGE_NUMBER}</span></span><span class="gensmall paginer"><span class="remove_colon">{PAGINATION}</span></span></td>
<!-- END topicpagination -->
<script type="text/javascript">
var elements = document.getElementsByClassName("remove_colon");
for (var i = 0; i < elements.length; ++i) {
elements[i].innerHTML = elements[i].innerHTML.replace(/ : /g,' |');
}
</script>
</tr>
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
<tr>
<td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
</tr>
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
</table>
<!-- BEGIN promot_trafic -->
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
<tr>
<td class="catBottom" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><div class="cattitle"> {PROMOT_TRAFIC_TITLE}</div></td>
<td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
<tr>
<td class="catBottom" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><div class="cattitle"> {PROMOT_TRAFIC_TITLE}</div></td>
<td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="row2 postbody" valign="top">
<!-- BEGIN link -->
» <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
<!-- END link -->
</td>
</tr>
</table>
<!-- END promot_trafic -->
<!-- BEGIN switch_forum_rules -->
<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
<tbody>
<tr>
<td class="catBottom">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top">
<div class="cattitle"> {L_FORUM_RULES}</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="row1 clearfix">
<table>
<tr>
<!-- BEGIN switch_forum_rule_image -->
<td class="logo">
<img src="{RULE_IMG_URL}" alt="" />
</td>
<!-- END switch_forum_rule_image -->
<td class="rules postbody">
{RULE_MSG}
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!-- END switch_forum_rules -->
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="row2" colspan="2" align="center" style="padding:0px">
<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}<br />
<!-- END switch_user_logged_in -->
</td>
</tr>
<!-- BEGIN show_permissions -->
<!-- END show_permissions -->
<!-- BEGIN show_permissions -->
<!-- END show_permissions -->
</table>
<tr>
<td style="margin:0; padding: 0;" colspan="2">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
<tbody>
<tr>
<td class="catBottom" colspan="2" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
<td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr valign="middle">
<td align="left" class="bloc-modo"><br />{S_TOPIC_ADMIN}<br /></td>
<td align="right"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
<!-- BEGIN moderation_panel -->
<td align="left" nowrap="nowrap"><span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span></td>
<!-- END moderation_panel -->
</tr>
</table>
</form>
<!-- BEGIN viewtopic_bottom -->
<!-- END viewtopic_bottom -->
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
et le CSS correspondant :
- Code:
/****************************************************
LISTE DES SUJETS
*****************************************************/
.blocknav {
background-color:#314E70;
margin-top: 10px;
margin-bottom: 10px;
height: 30px;
font-family: 'Playfair Display', sans serif;
font-size: 12px;
text-transform: uppercase;
font-style: normal !important;
color: #D5E5E4;
line-height: 30px;
}
.blocknav a{
font-family: 'Playfair Display', sans serif;
font-size: 12px;
text-transform: uppercase;
font-style: normal !important;
color: #D5E5E4;
top: 0;
}
.sujets {
background-color: #000000;
}
.blocksujimg {
blackground: url('https://i.imgur.com/BnkE1fo.png');
width: 959px;
height: 100px;
}
.bloc_sujets
{
position: relative;
background-image: url('https://i.servimg.com/u/f20/20/11/87/27/bnke1f10.png');
background-repeat: no-repeat;
background-position: top center;
height: 100px;
width: 959px;
z-index: 999;
display:inline-block;
}
.bloc_sujets td
{
background-color:#20aec8;
height: 70px;
position:relative;
top:15px;
}
.bloc_sujets td:first-child
{
left:30px;
}
.bloc_sujets td:last-child
{
right:30px;
}
Encore merci pour ton aide.
Pizi
- Milouze14Fondateur
-
Mer 9 Sep 2020 - 4:25
Hello Pizi,
hum, je me suis planté de template pour le style a ajouter :
Retires le et met le dans le template viewforum_body:
Affichage/Templates/Général/viewforum_body
Pour ton retour,
il faut jouer avec la couleur de fond( supprimer le background-color), réduire la taille des icônes de message en fonction de la hauteur de l'encadrement.
Avec ce style admettons:
hum, je me suis planté de template pour le style a ajouter :
- Code:
<style>
.bodylinewidth{width:60%;}
</style>
Retires le et met le dans le template viewforum_body:
Affichage/Templates/Général/viewforum_body
Pour ton retour,
il faut jouer avec la couleur de fond( supprimer le background-color), réduire la taille des icônes de message en fonction de la hauteur de l'encadrement.
Avec ce style admettons:
- Code:
.bloc_sujets
{
position: relative;
background-image: url('https://i.servimg.com/u/f20/20/11/87/27/bnke1f10.png');
background-repeat: no-repeat;
background-position: top center;
height: 100px;
width: 959px;
z-index: 999;
display:inline-block;
}
.bloc_sujets td
{
background-color:transparent!important;
height: 70px;
position:relative;
top:5px;
bottom:5px;
}
.bloc_sujets td:first-child
{
left:5px;
}
.bloc_sujets td:last-child
{
right:5px;
}
- Pizi
-
Mer 9 Sep 2020 - 12:24
Bonjour Phil,
J'avais bien compris que tu parlais du viewforum, ne t'en fais pas :)
Merci beaucoup pour le code. Du coup, je ne vais pas pouvoir du tout mettre le fond en bleu comme sur la maquette ? C'est dommage :/
En enrichissant un peu ce que tu m'as donné, j'ai réussi à mettre tout ça bien comme il faut :
le template :
Le CSS correspondant :
J'avais bien compris que tu parlais du viewforum, ne t'en fais pas :)
Merci beaucoup pour le code. Du coup, je ne vais pas pouvoir du tout mettre le fond en bleu comme sur la maquette ? C'est dommage :/
En enrichissant un peu ce que tu m'as donné, j'ai réussi à mettre tout ça bien comme il faut :
le template :
- Code:
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
var all_checked = true;
for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
}
}
document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
}
}
}
</script>
<!-- END multi_selection -->
<table class="forumline" width="60%" border="0" cellspacing="0" cellpadding="0">
<!-- BEGIN pagination -->
<tr>
<td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
</tr>
<!-- END pagination -->
<!-- END header_table --><!-- BEGIN header_row -->
<tr>
<td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
</tr>
<!-- END header_row -->
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
<tr class="bloc_sujets">
<!-- BEGIN single_selection -->
<td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
<!-- END single_selection -->
<td class="{topics_list_box.row.ROW_FOLDER_CLASS}" align="center" valign="middle" width="20"><div class="topicimg"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></div></td>
<!-- BEGIN icon -->
<td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
<!-- END icon -->
<td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
<div class="topictitle">
{topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
<h2 class="topic-title">
<a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
</h2>
</div>
<!-- BEGIN switch_description -->
<span class="genmed">
<br />
{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
</span>
<!-- END switch_description -->
<span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
<span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
</td>
<td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.REPLIES}</span></td>
<td class="row3" align="center" valign="middle"><span class="name"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></td>
<td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.VIEWS}</span></td>
<td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap">
<!-- BEGIN avatar -->
<div style="width: 200px;"></div>
<span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
<!-- END avatar -->
<span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span>
</td>
<!-- BEGIN multi_selection -->
<td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
<!-- END multi_selection -->
</tr>
<!-- END topic --><!-- BEGIN no_topics -->
<tr>
<td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
</tr>
<!-- END no_topics --><!-- BEGIN bottom -->
<tr>
<td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <span class="gensmall">{PAGINATION}</span></td>
<td align="right"><a href="#top">{L_BACK_TO_TOP}</a> </td>
</tr>
</table>
</td>
</tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->
Le CSS correspondant :
- Code:
/****************************************************
LISTE DES SUJETS
*****************************************************/
.blocknav {
background-color:#314E70;
margin-top: 10px;
margin-bottom: 10px;
height: 30px;
font-family: 'Playfair Display', sans serif;
font-size: 12px;
text-transform: uppercase;
font-style: normal !important;
color: #D5E5E4;
line-height: 30px;
}
.blocknav a{
font-family: 'Playfair Display', sans serif;
font-size: 12px;
text-transform: uppercase;
font-style: normal !important;
color: #D5E5E4;
top: 0;
}
.sujets {
background-color: #000000;
}
.blocksujimg {
blackground: url('https://i.imgur.com/BnkE1fo.png');
width: 959px;
height: 100px;
}
.bloc_sujets {
position: relative;
background-image: url('https://i.servimg.com/u/f20/20/11/87/27/bnke1f10.png');
background-repeat: no-repeat;
background-position: top center;
height: 100px;
width: 959px;
z-index: 999;
display:inline-block;
}
.bloc_sujets td {
background-color:transparent!important;
height: 70px;
position:relative;
top:15px;
bottom:5px;
}
.bloc_sujets td:first-child
{
left:5px;
}
.bloc_sujets td:last-child
{
right:5px;
}
.topicimg {
margin-left: 20px;
margin-right: 20px;
margin-top: -8px;
}
- Milouze14Fondateur
-
Mer 9 Sep 2020 - 19:07
Alors, j'ai trouvé une solution pour mettre un background-color.
On supprime toutes les class natives d'un sujet row1 etc par des class explicites:
Celle de gauche:
row_left
Les cellules centrale:
row_center
Celle de droite:
.row_right
De ce fait on supprime les background natif de la version.
Ensuite la cellule de gauche aura des arrondis:
Et celle de droite:
Ces bordures arrondies serviront a voir le background image dans sa totalité.
Si tu n'en veux pas il suffit de supprimer les styles que je viens de citer.
Ton template:
La CSS:
On supprime toutes les class natives d'un sujet row1 etc par des class explicites:
Celle de gauche:
row_left
Les cellules centrale:
row_center
Celle de droite:
.row_right
De ce fait on supprime les background natif de la version.
Ensuite la cellule de gauche aura des arrondis:
- Code:
.bloc_sujets td.row_left
- Code:
-webkit-border-top-left-radius: 40px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius-topleft:40px;
-moz-border-radius-bottomleft:40px;
border-top-left-radius:40px;
border-bottom-left-radius:40px;
Et celle de droite:
- Code:
.bloc_sujets td.row_right
- Code:
-webkit-border-top-right-radius: 40px;
-webkit-border-bottom-right-radius: 40px;
-moz-border-radius-topright: 40px;
-moz-border-radius-bottomright:40px;
border-top-right-radius:40px;
border-bottom-right-radius: 40px;
Ces bordures arrondies serviront a voir le background image dans sa totalité.
Si tu n'en veux pas il suffit de supprimer les styles que je viens de citer.
Ton template:
- Code:
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
var all_checked = true;
for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
}
}
document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
}
}
}
</script>
<!-- END multi_selection -->
<table class="forumline" width="60%" border="0" cellspacing="0" cellpadding="0">
<!-- BEGIN pagination -->
<tr>
<td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
</tr>
<!-- END pagination -->
<!-- END header_table --><!-- BEGIN header_row -->
<tr>
<td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
</tr>
<!-- END header_row -->
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
<tr class="bloc_sujets">
<!-- BEGIN single_selection -->
<td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
<!-- END single_selection -->
<td class="row_left" align="center" valign="middle" width="20"><div class="topicimg"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></div></td>
<!-- BEGIN icon -->
<td class="row_center" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
<!-- END icon -->
<td class="row_center" width="100%">
<div class="topictitle">
{topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
<h2 class="topic-title">
<a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
</h2>
</div>
<!-- BEGIN switch_description -->
<span class="genmed">
<br />
{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
</span>
<!-- END switch_description -->
<span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
<span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
</td>
<td class="row_center" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.REPLIES}</span></td>
<td class="row_center" align="center" valign="middle"><span class="name"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></td>
<td class="row_center" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.VIEWS}</span></td>
<td class="row_right" align="center" valign="middle" nowrap="nowrap">
<!-- BEGIN avatar -->
<div style="width: 200px;"></div>
<span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
<!-- END avatar -->
<span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span>
</td>
<!-- BEGIN multi_selection -->
<td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
<!-- END multi_selection -->
</tr>
<!-- END topic --><!-- BEGIN no_topics -->
<tr>
<td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
</tr>
<!-- END no_topics --><!-- BEGIN bottom -->
<tr>
<td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <span class="gensmall">{PAGINATION}</span></td>
<td align="right"><a href="#top">{L_BACK_TO_TOP}</a> </td>
</tr>
</table>
</td>
</tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->
La CSS:
- Code:
/****************************************************
LISTE DES SUJETS
*****************************************************/
.blocknav {
background-color:#314E70;
margin-top: 10px;
margin-bottom: 10px;
height: 30px;
font-family: 'Playfair Display', sans serif;
font-size: 12px;
text-transform: uppercase;
font-style: normal !important;
color: #D5E5E4;
line-height: 30px;
}
.blocknav a{
font-family: 'Playfair Display', sans serif;
font-size: 12px;
text-transform: uppercase;
font-style: normal !important;
color: #D5E5E4;
top: 0;
}
.sujets {
background-color: #000000;
}
.blocksujimg {
blackground: url('https://i.imgur.com/BnkE1fo.png');
width: 959px;
height: 100px;
}
.bloc_sujets {
position: relative;
background-image: url('https://i.servimg.com/u/f20/20/11/87/27/bnke1f10.png');
background-repeat: no-repeat;
background-position: top center;
height: 100px;
width: 959px;
z-index: 999;
display:inline-block;
}
.bloc_sujets td {
background-color:#20aec8;
height: 85px;
position:relative;
top: 8px;
}
.bloc_sujets td.row_left
{
left:10px;
-webkit-border-top-left-radius: 40px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius-topleft:40px;
-moz-border-radius-bottomleft:40px;
border-top-left-radius:40px;
border-bottom-left-radius:40px;
}
.bloc_sujets td.row_right
{
right:10px;
-webkit-border-top-right-radius: 40px;
-webkit-border-bottom-right-radius: 40px;
-moz-border-radius-topright: 40px;
-moz-border-radius-bottomright:40px;
border-top-right-radius:40px;
border-bottom-right-radius: 40px;
}
.topicimg {
margin-left: 20px;
margin-right: 20px;
margin-top: -8px;
}
- Pizi
-
Jeu 10 Sep 2020 - 9:42
Bonjour Phil,
Je sens qu'on tient un truc là mais ce n'est pas encore ça.
J'ai essayé avec les bords arrondis mais ce n'est pas tip top.
En revanche, sans eux ça a l'air bon.
Toutefois, le cadre se trouve sous le background, il est possible de le faire apparaître dessus sans que ça nous empêche de cliquer à l'intérieur ?
Voilà ce que ça donne :
![[PHPBB2] Encadrer les sujets dans topics_list_box Fv7Sjw5](https://i.imgur.com/Fv7Sjw5.jpg)
Cordialement
Pizi
Je sens qu'on tient un truc là mais ce n'est pas encore ça.
J'ai essayé avec les bords arrondis mais ce n'est pas tip top.
En revanche, sans eux ça a l'air bon.
Toutefois, le cadre se trouve sous le background, il est possible de le faire apparaître dessus sans que ça nous empêche de cliquer à l'intérieur ?
Voilà ce que ça donne :
Cordialement
Pizi
- Milouze14Fondateur
-
Jeu 10 Sep 2020 - 10:28
Re Pizi,
alors cela a était plus rapide que prévu.
Comme mentionné plus haut , j'ai découpé l'image en quatre parties.
Et ensuite , j'ai essayé comme j'ai pu de retranscrire au maximum le visu désiré mais avec la version phpbb2, c'est assez compliqué.
Alors la CSS:
Le template:
Puis ce script qui va rechercher si tu as une annonce globale, annonce ou note et attribuer la couleur de fond si necessaire.
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur les sous-forums
Déposer ceci:
Penser a cliquer sur le bouton
L'aperçu imagé:
![[PHPBB2] Encadrer les sujets dans topics_list_box 1201](https://i.servimg.com/u/f20/20/11/87/27/1201.png)
alors cela a était plus rapide que prévu.
Comme mentionné plus haut , j'ai découpé l'image en quatre parties.
Et ensuite , j'ai essayé comme j'ai pu de retranscrire au maximum le visu désiré mais avec la version phpbb2, c'est assez compliqué.
Alors la CSS:
- Code:
/****************************************************
LISTE DES SUJETS
*****************************************************/
.blocknav {
background-color:#314E70;
margin-top: 10px;
margin-bottom: 10px;
height: 30px;
font-family: 'Playfair Display', sans serif;
font-size: 12px;
text-transform: uppercase;
font-style: normal !important;
color: #D5E5E4;
line-height: 30px;
}
.blocknav a{
font-family: 'Playfair Display', sans serif;
font-size: 12px;
text-transform: uppercase;
font-style: normal !important;
color: #D5E5E4;
top: 0;
}
.sujets {
background-color: #000000;
}
.blocksujimg {
blackground: url('https://i.imgur.com/BnkE1fo.png');
width: 959px;
height: 100px;
}
.barre_haute
{
width: 887px;
margin: auto;
text-align: center;
height:12px;
bottom: -11px;
position: relative;
}
.barre_basse
{
width: 887px;
margin: auto;
text-align: center;
height: 12px;
top: -11px;
position: relative;
}
.not_background.left
{
position: absolute;
z-index: 999;
margin-left: -5px;
}
.not_background.right
{
position: relative;
z-index: 999;
right: -5px;
top: -87px;
}
#bloc_sujets {
height: 100px;
width: 945px;
display:inline-block;
}
#bloc_sujets td:not(.not_background)
{ border-top:1px solid #F7EC8C;
border-bottom:1px solid #F7EC8C;
background-color:#95A4C0;
height: 85px;
position:relative;
top: 8px;
font-size:10px!important;
color:white!important;
}
#bloc_sujets td.row_right div
{
width: 100%;
height: 10px;
position: relative;
top: -20px;
}
.topicimg {
margin-left: 20px;
margin-right: 20px;
margin-top: -8px;
}
/*LES STATS SUR LA LISTE DES SUJETS*/
.M14_stats
{
background-color:#3F5380;
padding:5px;
color:white!important;
width: 200px;
display: inline-block;
margin: 0px 5px 0px 5px;
text-align: center;
font-size:14px!important;
}
/*SI annonce globale, annonce ou note*/
.M14_topic_type.coloR
{
background-color:#3F5380;
padding:5px;
color:white!important;
width: 120px;
}
.auteur
{
background-color:#3F5380;
padding:3px;
color:white!important;
width: 120px;
display: inline-block;
margin: 0px 5px 0px 5px;
text-align: center;
}
.auteur a[href^="/u"],
.last_auteur a[href^="/u"]
{text-decoration:none!important;font-size:10px!important;}
.auteur a[href^="/u"] span,
.last_auteur a[href^="/u"] span
{color:white!important;font-size:10px!important;}
#bloc_sujets td h2.topic-title
{
width:60%;
display: inline-flex;
}
#bloc_sujets td h2.topic-title a.topictitle
{
color:white!important;
font-size:13px!important;
margin-left:5px;
}
#bloc_sujets .row_center hr.M14_hr
{
height:1px;
background-color:#3F5380;
border:none!important;
}
#bloc_sujets .row_right hr.M14_hr
{
height:1px;
background-color:#3F5380;
border:none!important;
width: 80%;
}
.M14_description
{
color:#3F5380!important;
font-size:8px!important;
}
Le template:
- Code:
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
var all_checked = true;
for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
}
}
document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
}
}
}
</script>
<!-- END multi_selection -->
<table class="forumline" width="60%" border="0" cellspacing="0" cellpadding="0">
<!-- BEGIN pagination -->
<tr>
<td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
</tr>
<!-- END pagination -->
<!-- END header_table --><!-- BEGIN header_row -->
<tr>
<td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
</tr>
<!-- END header_row -->
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
<tr><td class="barre_haute"><img src="https://i.servimg.com/u/f20/20/11/87/27/barrep10.png"/></td></tr>
<tr id="bloc_sujets">
<td class="not_background left"><img src="https://i.servimg.com/u/f20/20/11/87/27/gauche10.png" /></td>
<!-- BEGIN single_selection -->
<td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
<!-- END single_selection -->
<td class="row_left" align="center" valign="middle" width="20"><div class="topicimg"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></div></td>
<!-- BEGIN icon -->
<td class="row_center" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
<!-- END icon -->
<td class="row_center" width="55%">
<div class="topictitle">
{topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}<span class="M14_topic_type">{topics_list_box.row.TOPIC_TYPE}</span>
<h2 class="topic-title">
<a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
</h2>
<hr class="M14_hr"/>
<!-- BEGIN switch_description -->
<span class="M14_description">
{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
</span>
<!-- END switch_description -->
</div>
<span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
<span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
<br />
<span class="M14_stats reply">{topics_list_box.row.REPLIES} parchemins</span>
<span class="M14_stats views">{topics_list_box.row.VIEWS} vues</span>
</td>
<td class="row_right" width="35%" align="center" valign="middle" nowrap="nowrap">
<span class="titre_auteur">Posté par </span>
<hr class="M14_hr"/>
<span class="auteur">{topics_list_box.row.TOPIC_AUTHOR}</span><br />
<span class="titre_reponse">Dernière réponse par</span> {topics_list_box.row.LAST_POST_IMG}
<hr class="M14_hr"/>
<span class="last_auteur"> {topics_list_box.row.LAST_POST_AUTHOR}</span> - {topics_list_box.row.LAST_POST_TIME}
</td>
<td class="not_background right"><img src="https://i.servimg.com/u/f20/20/11/87/27/droite10.png" /></td>
<!-- BEGIN multi_selection -->
<td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
<!-- END multi_selection -->
</tr>
<tr>
<td class="barre_basse"><img src="https://i.servimg.com/u/f20/20/11/87/27/barrep10.png"/></td>
</tr>
<!-- END topic --><!-- BEGIN no_topics -->
<tr>
<td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
</tr>
<!-- END no_topics --><!-- BEGIN bottom -->
<tr>
<td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <span class="gensmall">{PAGINATION}</span></td>
<td align="right"><a href="#top">{L_BACK_TO_TOP}</a> </td>
</tr>
</table>
</td>
</tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer -->
<!-- END row --><!-- END topics_list_box -->
Puis ce script qui va rechercher si tu as une annonce globale, annonce ou note et attribuer la couleur de fond si necessaire.
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur les sous-forums
Déposer ceci:
- Code:
$(function(){
$('.M14_topic_type').each(function(){
var a=$(this).text().length;
if(a!=0)
{
$(this).addClass('coloR');;
}
});
});
Penser a cliquer sur le bouton
L'aperçu imagé:
![[PHPBB2] Encadrer les sujets dans topics_list_box 1201](https://servimg.com/r/2020118727/1201.png)
- Pizi
-
Jeu 10 Sep 2020 - 17:07
Bonjour Phil,
Oh merci tu es un chef !
J'ai peaufiné 2-3 choses et le résultat est parfait ! <3
Tu as anticipé sur ce qui allait me poser problème ahahah tu commences à trop bien me connaître ^^
J'ai juste un dernier souci sur ce code avec les flèches.
J'avais pas réussi non plus à bien les coder pour l'affichage des messages.
Voilà ce que ça me donne :
![[PHPBB2] Encadrer les sujets dans topics_list_box 1NfhSon](https://i.imgur.com/1NfhSon.jpg)
La flèche du bas n'apparaît pas et lorsque je monte et que je souhaite cliquer sur des boutons, je suis gênée par la flèche sur toute la ligne où elle se trouve :/
J'ai peut-être mal codé ça ...
le template :
le css correspondant :
Merci beaucoup :)
Oh merci tu es un chef !
J'ai peaufiné 2-3 choses et le résultat est parfait ! <3
Tu as anticipé sur ce qui allait me poser problème ahahah tu commences à trop bien me connaître ^^
J'ai juste un dernier souci sur ce code avec les flèches.
J'avais pas réussi non plus à bien les coder pour l'affichage des messages.
Voilà ce que ça me donne :
La flèche du bas n'apparaît pas et lorsque je monte et que je souhaite cliquer sur des boutons, je suis gênée par la flèche sur toute la ligne où elle se trouve :/
J'ai peut-être mal codé ça ...
le template :
- Code:
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
var all_checked = true;
for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
}
}
document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
}
}
}
</script>
<!-- END multi_selection -->
<table class="forumline" width="60%" border="0" cellspacing="0" cellpadding="0">
<!-- BEGIN pagination -->
<tr>
<td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
</tr>
<!-- END pagination -->
<!-- END header_table --><!-- BEGIN header_row -->
<tr>
<td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
</tr>
<!-- END header_row -->
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
<tr><td class="barre_haute"><img src="https://i.servimg.com/u/f20/20/11/87/27/barrep10.png"/></td></tr>
<tr id="bloc_sujets">
<td class="not_background left"><img src="https://i.imgur.com/Epahwlj.png" /></td>
<!-- BEGIN single_selection -->
<td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
<!-- END single_selection -->
<td class="row_left" align="center" valign="middle" width="20"><div class="topicimg"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></div></td>
<!-- BEGIN icon -->
<td class="row_center" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
<!-- END icon -->
<td class="row_center" width="55%">
<div class="topictitle">
<span class="M14_topic_type">{topics_list_box.row.TOPIC_TYPE}</span>
<h2 class="topic-title">
<a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
</h2>
<hr class="M14_hr" style="margin-bottom: -10px;" />
<!-- BEGIN switch_description -->
<!-- END switch_description -->
</div>
<span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
<span class="gotopage">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
<br />
<span class="M14_stats reply">{topics_list_box.row.REPLIES} parchemins</span>
<span class="M14_stats views">{topics_list_box.row.VIEWS} vues</span>
</td>
<td class="row_right" width="35%" align="center" valign="middle" nowrap="nowrap">
<span class="titre_auteur" style="font-family: 'Playfair Display', sans serif; font-size: 13px;">Posté par </span>
<hr class="M14_hr"/>
<span class="auteur">{topics_list_box.row.TOPIC_AUTHOR}</span><br />
<span class="titre_reponse" style="font-family: 'Playfair Display', sans serif; font-size: 13px;">Dernière réponse par</span> {topics_list_box.row.LAST_POST_IMG}
<hr class="M14_hr"/>
<span class="last_auteur"> {topics_list_box.row.LAST_POST_AUTHOR}</span> - {topics_list_box.row.LAST_POST_TIME}
</td>
<td class="not_background right"><img src="https://i.imgur.com/0wNUSHQ.png" /></td>
<!-- BEGIN multi_selection -->
<td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
<!-- END multi_selection -->
</tr>
<tr>
<td class="barre_basse"><img src="https://i.servimg.com/u/f20/20/11/87/27/barrep10.png"/></td>
</tr>
<!-- END topic --><!-- BEGIN no_topics -->
<!-- END no_topics --><!-- BEGIN bottom -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="fleches">
<tr>
<td width="9%" class="noprint"> </td>
<td align="right" nowrap="nowrap" width="9%" class="browse-arrows">
<a href="#top">{L_BACK_TO_TOP}</a><a href="#bottom">{L_GOTO_DOWN}</a>
</td>
</tr>
</table>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer -->
<!-- END row --><!-- END topics_list_box -->
le css correspondant :
- Code:
.fleches
{
position: fixed;
bottom: 15%;
right: 8%;
z-index: 100;
}
Merci beaucoup :)
- Milouze14Fondateur
-
Jeu 10 Sep 2020 - 19:09
De rien chère amie,
Je sais
.
Alors,c'est tout à fait normal car tu as placé les images dans un table ayant un width à 100% donc elle passe devant pas mal de choses....
J'ai donc supprimé la table pour la remplacer par une div est inséré directement les images dans le template ici :
Ton template modifié:
Ensuite, modifies le style en déposant un width et un height correspondant à la largeur et la hauteur des deux images en exagérant un peu afin de bien placer la div à l'endroit voulu:
Comme ceci:
Oh merci tu es un chef !
Je sais
.Alors,c'est tout à fait normal car tu as placé les images dans un table ayant un width à 100% donc elle passe devant pas mal de choses....
J'ai donc supprimé la table pour la remplacer par une div est inséré directement les images dans le template ici :
- Code:
<div class="fleches">
<a href="#top"><img src="https://2img.net/i.imgur.com/0L64vYB.png"/></a><a href="#bottom"><img src="https://i.imgur.com/Tt3ainz.png"/></a>
</div>
Ton template modifié:
- Code:
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
var all_checked = true;
for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
}
}
document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
}
}
}
</script>
<!-- END multi_selection -->
<table class="forumline" width="60%" border="0" cellspacing="0" cellpadding="0">
<!-- BEGIN pagination -->
<tr>
<td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
</tr>
<!-- END pagination -->
<!-- END header_table --><!-- BEGIN header_row -->
<tr>
<td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
</tr>
<!-- END header_row -->
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
<tr><td class="barre_haute"><img src="https://i.servimg.com/u/f20/20/11/87/27/barrep10.png"/></td></tr>
<tr id="bloc_sujets">
<td class="not_background left"><img src="https://i.imgur.com/Epahwlj.png" /></td>
<!-- BEGIN single_selection -->
<td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
<!-- END single_selection -->
<td class="row_left" align="center" valign="middle" width="20"><div class="topicimg"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></div></td>
<!-- BEGIN icon -->
<td class="row_center" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
<!-- END icon -->
<td class="row_center" width="55%">
<div class="topictitle">
<span class="M14_topic_type">{topics_list_box.row.TOPIC_TYPE}</span>
<h2 class="topic-title">
<a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
</h2>
<hr class="M14_hr" style="margin-bottom: -10px;" />
<!-- BEGIN switch_description -->
<!-- END switch_description -->
</div>
<span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
<span class="gotopage">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
<br />
<span class="M14_stats reply">{topics_list_box.row.REPLIES} parchemins</span>
<span class="M14_stats views">{topics_list_box.row.VIEWS} vues</span>
</td>
<td class="row_right" width="35%" align="center" valign="middle" nowrap="nowrap">
<span class="titre_auteur" style="font-family: 'Playfair Display', sans serif; font-size: 13px;">Posté par </span>
<hr class="M14_hr"/>
<span class="auteur">{topics_list_box.row.TOPIC_AUTHOR}</span><br />
<span class="titre_reponse" style="font-family: 'Playfair Display', sans serif; font-size: 13px;">Dernière réponse par</span> {topics_list_box.row.LAST_POST_IMG}
<hr class="M14_hr"/>
<span class="last_auteur"> {topics_list_box.row.LAST_POST_AUTHOR}</span> - {topics_list_box.row.LAST_POST_TIME}
</td>
<td class="not_background right"><img src="https://i.imgur.com/0wNUSHQ.png" /></td>
<!-- BEGIN multi_selection -->
<td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
<!-- END multi_selection -->
</tr>
<tr>
<td class="barre_basse"><img src="https://i.servimg.com/u/f20/20/11/87/27/barrep10.png"/></td>
</tr>
<!-- END topic --><!-- BEGIN no_topics -->
<!-- END no_topics --><!-- BEGIN bottom -->
<div class="fleches">
<a href="#top"><img src="https://2img.net/i.imgur.com/0L64vYB.png"/></a><a href="#bottom"><img src="https://i.imgur.com/Tt3ainz.png"/></a>
</div>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer -->
<!-- END row --><!-- END topics_list_box -->
Ensuite, modifies le style en déposant un width et un height correspondant à la largeur et la hauteur des deux images en exagérant un peu afin de bien placer la div à l'endroit voulu:
- Code:
.fleches
{
position: fixed;
bottom: 15%;
right: 8%;
z-index: 100;
}
Comme ceci:
- Code:
.fleches
{
position: fixed;
bottom: 15%;
right: 8%;
z-index: 100;
width:80px;
height:80px;
}
- Pizi
-
Ven 11 Sep 2020 - 11:39
Bonjour,
Merci beaucoup ça fonctionne parfaitement
Je me posais une question concernant les flèches.
Est-il possible d'indiquer que cet élément n'arrive pas en haut de la page plus haut qu'à une certaine hauteur et idem pour le bas ?
J'ai adapté le code pour qu'il s'affiche bien en haut :
![[PHPBB2] Encadrer les sujets dans topics_list_box H2TbH4A](https://i.imgur.com/H2TbH4A.jpg)
Mais quand je scroll et que j'arrive en bas de la page, du coup, je trouve que c'est trop bas :
![[PHPBB2] Encadrer les sujets dans topics_list_box Jt6gO0t](https://i.imgur.com/Jt6gO0t.jpg)
Qu'en penses-tu ?
Merci beaucoup ça fonctionne parfaitement
Je me posais une question concernant les flèches.
Est-il possible d'indiquer que cet élément n'arrive pas en haut de la page plus haut qu'à une certaine hauteur et idem pour le bas ?
J'ai adapté le code pour qu'il s'affiche bien en haut :
Mais quand je scroll et que j'arrive en bas de la page, du coup, je trouve que c'est trop bas :
Qu'en penses-tu ?
- Milouze14Fondateur
-
Ven 11 Sep 2020 - 15:32
Ah c'est logique Pizi, ton forum est comme un empilement de cubes et la liste des sujets se trouve à peu près au milieu, voilà pour l'image.
Donc si on part avec image il est difficile de mettre une flèche en bas du premier cube.
Il faut donc ajouter les flèches dans le template overall header après la balise d'ouverture :
Puis supprimer toutes les flèches dans les autres templates.
Donc si on part avec image il est difficile de mettre une flèche en bas du premier cube.
Il faut donc ajouter les flèches dans le template overall header après la balise d'ouverture :
- Code:
<body>
Puis supprimer toutes les flèches dans les autres templates.
- Milouze14Fondateur
-
Ven 11 Sep 2020 - 18:06
Dans le template, recherches ceci:
Juste avant déposes ceci:
Penses a enregistrer puis à valider en cliquant respectivement sur puis
- Code:
<a name="top"></a>
Juste avant déposes ceci:
- Code:
<div class="fleches">
<a href="#top"><img src="https://2img.net/i.imgur.com/0L64vYB.png"/></a><a href="#bottom"><img src="https://i.imgur.com/Tt3ainz.png"/></a>
</div>
Penses a enregistrer puis à valider en cliquant respectivement sur
puis - Milouze14Fondateur
-
Lun 14 Sep 2020 - 15:36
Hello Pizi,
Oui bien sûr sinon cela fait double emploi.
Pour le positionnement , c'est assez complexe est presque impossible, vu que l'on touche une ancre présente dans le bas de page.
On peut tester ceci:
Recherches ceci:
Repéres dans ce code html ceci:
Penses a enregistrer puis à valider en cliquant respectivement sur puis
Ensuite dans le template overall_footer_end
Recherches ceci:
Juste avant déposes ceci:
Ce qui va faire remonter quelque peu de 50px le bas.
Que tu pourras modifier dans son style:
Faut que je retire le code qu'on avait mis aussi du coup pour la liste des sujets pour ne pas les avoir en double ?
Oui bien sûr sinon cela fait double emploi.
Pour le positionnement , c'est assez complexe est presque impossible, vu que l'on touche une ancre présente dans le bas de page.
On peut tester ceci:
Recherches ceci:
- Code:
<div class="fleches">
<a href="#top"><img src="https://2img.net/i.imgur.com/0L64vYB.png"/></a><a href="#bottom"><img src="https://i.imgur.com/Tt3ainz.png"/></a>
</div>
Repéres dans ce code html ceci:
- Code:
<a href="#bottom">
- Code:
<a href="#Bottom">
Penses a enregistrer puis à valider en cliquant respectivement sur
puis Ensuite dans le template overall_footer_end
Recherches ceci:
- Code:
<!-- BEGIN switch_footer_links -->
<div align="center">
Juste avant déposes ceci:
- Code:
<a name="Bottom" style="position:absolute;bottom:50px;width:1px;height:1px;"></a>
Ce qui va faire remonter quelque peu de 50px le bas.
Que tu pourras modifier dans son style:
- Code:
bottom:50px;
.- Milouze14Fondateur
-
Mar 15 Sep 2020 - 19:10
@Pizi ,
Hello
Si ton sujet est résolu, merci de suivre la procédure suivante:
Un tag précédent ton premier message est présent.
Il te suffira de cliquer sur ce dernier pour mettre ton sujet en résolu.
Comme le mentionne le règlement.
Si ton sujet est résolu, merci de suivre la procédure suivante:
Un tag précédent ton premier message est présent.
Il te suffira de cliquer sur ce dernier pour mettre ton sujet en résolu.
Comme le mentionne le règlement.
Page 1 sur 2 • 1, 2
Sujets similaires
» [PHPBB2] Problèmes d'affichage des sujets dans le messenger
» [PhpBB2] Je n'ai pas le nombre de posts et sujets dans l'astuce...
» [PHPBB2] Diminuer le nombre de sujets dans le Widget
» [PHPBB2] Afficher la description du forum dans la liste des sujets
» [PHPBB2] Supprimer date et heure dans la liste des sujets
» [PhpBB2] Je n'ai pas le nombre de posts et sujets dans l'astuce...
» [PHPBB2] Diminuer le nombre de sujets dans le Widget
» [PHPBB2] Afficher la description du forum dans la liste des sujets
» [PHPBB2] Supprimer date et heure dans la liste des sujets
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum