Deplacer le titre des sous forums

par Mikki Lun 25 Nov 2024, 00:37

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Internet Explorer
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : le jour de l'installation
Lien du forum : https://santabarbara-rpg.forumactif.com/

Description du problème

Bonjour,

J'ai installé un codage pour avoir une personnalisation sur mon forum. Hors y'a une chose qui ne me plait pas.

J'aurais aimé que le "TITRE FORUM" se retrouve au dessus de la description du forum. Hors avec le tuto de base, le titre se retrouve sur la "droite".

Auriez vous une idée pour m'aider à déplacer le lien ?

Voici ce que j'aimerais avoir : "Capture écran/montage"

Voici mon CSS :

Code:: /************************************** CATEGORIE **************************************/ /* Catégorie par KoalaVolant */ /* Titre de catégories */ .cate-title *{ box-sizing:border-box; } .cate-title{ padding:20px 0px; text-align:center; background-image:url('https://i.servimg.com/u/f30/19/45/51/53/c5834510.jpg'); border-bottom:5px solid #FFFFFFF; background-size:cover; } .cate-title h2{ padding:10px; font-family: 'Libre Baskerville', serif; text-transform:uppercase; font-size:21px; background-color:#fff; width:97%; margin:0 auto; } /* Flex structure */ .forum-encart *{box-sizing:border-box; } .forum-encart{ width:800px; display:flex ;justify-content:space-between; padding:10px; background-color:#09286B; position:relative; } .cate-sous{ width:152px; padding:5px; } .cate-infos{ height:87px; padding:5px; width:265px; background-color:#09286B; display:flex; justify-content:center; flex-wrap:wrap; align-items:center; border: 2px dashed #FDB837} .cate-size{ width:72px; height:72px; } /* Gauche sous forums tout ça */ .cate-sous{ background-color:#09286B; height:87px; overflow:auto; border: 2px dashed #FDB837; } .ssfo a{ display:block; background-color:#061E51; text-align:center; text-transform:uppercase; font-size:10px; padding:2px; font-family: 'Libre Baskerville', serif; color:#FDB837; margin:2px 0px; } /* Description */ .cate-descr{ width:290px; height:87px; overflow:auto; padding:10px; background-color:#061E51; color:#FFFFFF; font-family: 'Libre Baskerville', serif; text-align:justify; font-size:11px; line-height:15px; } .cate-descr h3{ display:inline-block; background-color:#061E51; font-size:11px; padding:1px; margin:0px; } .cate-descr img{ display: block; width: 72px; height: 72px; object-fit: cover; position: absolute; left:169px; top: 50%; transform: translateY(-50%); } /* Droite avec les stats */ .cate-messder{ display:flex; justify-content:center; align-items:center;} .cate-messvue{ width:199px; background-color:#061E51; margin:3px 0px; font-size:8px; text-align:center; color:#dedede; font-family: 'Libre Baskerville', serif; text-transform:uppercase; } .lastpost-avatar img{ width:31px; height:31px; border-radius:50%; margin-left:2px; object-fit:cover; } .cate-no{ height:37px; width:25px; object-fit:cover; margin-left:10px; display:block; } a.forumlink{ color:#FDB837 !important; letter-spacing:2px; font-size:10px; font-family: 'Libre Baskerville', serif; text-transform:uppercase; text-align:left; display:block;} .cate-dermess{ font-size:11px; font-family: 'Libre Baskerville', serif; padding:0px 5px; color:#dedede; } .cate-dermess a{ color:#dedede; font-weight:bold; } .cate-dermess .gensmall{ font-size:13px; } /* Ascenseur */ ::-webkit-scrollbar-track, ::-webkit-scrollbar { background-color: #061E51 !important ; /*couleur du fond de la scrollbar*/} ::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/ background-color: #1C408D !important /*couleur de l'ascenseur*/;}

Et le template "viewbody" :

Code::  <script type="text/javascript"> //<![CDATA[ var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}'; </script>  <script type="text/javascript"> 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>  <div id="push-answer" class="jqmWindow"></div> <script src="{JQUERY_DIR}jqmodal/jqmodal.js" type="text/javascript"></script> <script> //<![CDATA[ $(document).ready(function() { $('#push-answer').jqm({toTop: true}); $('#push-bell').click(function () { return sendWebPush({TOPIC_ID}); }); function sendWebPush(tId) { $.get("/ajax_push.php?topicID=" + tId).done(showPushAnswer); } function showPushAnswer(data) { $('#push-answer').html(data).jqmShow(); $('.jqmOverlay').bgiframe(); $('#push-answer').bgiframe(); } }); //]]> </script>  <table width="100%" border="0" cellspacing="2" cellpadding="0"> <tr> <td align="left" valign="middle" nowrap="nowrap"> <span class="nav">  <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>      <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>  </span> </td> <td class="nav" valign="middle" width="100%"> <span class="nav"> <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>  {NAV_CAT_DESC_SECOND} </span> </td> <td align="right" valign="bottom" nowrap="nowrap" width="100%"> <span class="gensmall bold">    <div id="addthis-toolbar" style="display: inline-block;"> <div class="btn-floating-left" tabindex="100"> {L_SHARE} </div> <div class="addthis-toolbar-btn" style="display:none;"> {switch_plus_menu.SOCIAL_BUTTONS} </div> </div>  |  <script type="text/javascript">//<![CDATA[ var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}'; var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}'; var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}'; var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}'; var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}'; insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES}); //]]> </script> {switch_plus_menu.JS_SOCIAL_BUTTONS}  </span> </td> </tr> </table> <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" > <tr align="right"> <td class="catHead" colspan="2" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="9%" class="noprint"> </td> <td align="center" class="t-title"> <h1 class="cattitle"> {TOPIC_TITLE} <span id="push-bell" title="{switch_push_direct_send.L_PUSH_SEND}"></span></h1> </td> <td align="right" width="9%" class="browse-arrows">  <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>   <a href="#bottom">{L_GOTO_DOWN}</a>  </td> </tr> </table> </td> </tr> <tr> <td class="row1" colspan="2"><span class="gensmall">{POSTERS_LIST}</span></td> </tr>  <tr> <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td> </tr>  {POLL_DISPLAY} <tr> <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th> <th class="thRight" nowrap="nowrap">{L_MESSAGE}</th> </tr>   <tr> <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td> </tr>   <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}"> <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> <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="postdetails poster-profile"> {postrow.displayed.POSTER_RANK}<br /> {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br /> <div {postrow.displayed.AWARDS_SHOW} class="dd_award {postrow.displayed.PROFILE_POSITION}">{postrow.displayed.AWARDS}</div> <div class="award_more"></div> <br>  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}  {postrow.displayed.POSTER_RPG} </span><br /> <img src="https://2img.net/i/empty.gif" alt="" style="width:150px;height:1px" /> </td> <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="100%"> <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td> <td valign="top" nowrap="nowrap" class="post-options"> <a href="{postrow.displayed.POST_URL}"title="Clique droit pour copier le lien de ce message"><img src="https://i.postimg.cc/gkSfKR11/image.png"/></a> {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 /> </td> </tr> <tr height="100%" valign="top"> <td colspan="2">  <div class="vote gensmall">  <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>   <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">  <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>   <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>  </div>   <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>   <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>  </div>  <div class="postbody"> <div>{postrow.displayed.MESSAGE}</div>  <dl class="attachbox"> <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt> <dd>  <dl class="file"> <dt> <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />  <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}   {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}  </dt>  <dd> <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em> </dd>   <dd> <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em> </dd>  <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd> </dl>  </dd> </dl>  <div class="clear"></div>  <div class="signature_div"> {postrow.displayed.SIGNATURE} </div>  </div> <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span> </td> </tr>  <tr><td colspan="2"> <div class="fa_like_div">  {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}   {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}  <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}" data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}"> <svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg> <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE} </button>  <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}"> <svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg> <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE} </button>  </div></td></tr>  </table> </td> </tr> <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}"> <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150"> <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td> <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="middle"> {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT} {postrow.displayed.ONLINE_IMG} </td> </tr> </table> </td> </tr>  </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>     <tr align="center"> <td class="row1" colspan="2" height="28"> <span class="genmed">{no_post.L_NO_POST}</span> </td> </tr>  <tr align="right"> <td class="catBottom" colspan="2" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="9%" class="noprint"> </td> <td align="center" class="t-title"><a name="bottomtitle"></a><div class="cattitle">{TOPIC_TITLE}</div></td> <td align="right" nowrap="nowrap" width="9%" class="browse-arrows">  <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>   <a href="#top">{L_BACK_TO_TOP}</a>  </td> </tr> </table> </td> </tr> </table>

Je ne sais pas ou modifier.
J'ai vu que dans le CSS, la partie à modifier aurais la class "a.formunlink" non ? Mais je ne sais pas ou elle est dans le template et où la déplacer pour qu'elle se retrouve ou j'aimerais.

Pouvez-vous m'aider ?

Merci d'avance !!!

par **Toryudo** Lun 25 Nov 2024, 12:40

Bonjour !

L'affichage des catégories, ce serait plutôt dans le Template index_box que ça se passe, est-ce que vous pouvez le fournir également ?
Il faudra jouer avec le lien :

Code:: <span class="forumlink"> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br /> </span>

C'est {catrow.forumrow.FORUM_NAME} qui contient le nom du forum.
Soit il faudra placer ce code juste après <div class="cate-descr"> chez vous, pour mettre le titre dans la zone description, soit il faudra modifier un peu plus pour que le titre "sorte du cadre un peu plus foncé de la description".

par Mikki Lun 25 Nov 2024, 18:30

Oh j'avais pas chercher dans le bon template. Déjà c'était un mauvais début pour moi, je me suis embrouiller toute seule.

Alors j'ai suivi votre conseil, j'ai déplacé la "class="forumlink" après le "<div class="cate-descr"> " et c'est un super début, car c'est presque là ou je voulais.

Maintenant j'ai ceci : capture écran

Et effectivement j'aurais aimé que le lien soit au dessus du cadre, sur la gauche. J'ai pas osé décaler plus dans le template pour ne pas faire de bêtise.
Voici ce que j'aimerais : Montage/capture écran

Du coup, voici le bon Template avec ma modif (grâce à votre aide) :

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center"> <tr> <td valign="bottom">  <span class="gensmall">{LAST_VISIT_DATE}<br /> {CURRENT_TIME}<br /> </span>  <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div> </td> <td class="gensmall" align="right" valign="bottom">  <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br /> <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />  <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> </td> </tr> </table>   <div class="cate-title"> {catrow.tablehead.L_FORUM} </div> <div class="cate-bloc">     <div class="cate-forum"> <div class="forum-encart"> <div class="cate-sous">  <div class="ssfo" id="subforums"> {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} </div> </div> <div class="cate-size"></div> <div class="cate-descr"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> {catrow.forumrow.FORUM_DESC}</div> <div class="cate-infos"> <div class="forum-title"> <div class="cate-messvue"> {catrow.forumrow.TOPICS} messages - {catrow.forumrow.POSTS} sujets </div> </div> <div class="cate-messder"> <div class="cate-vava">  <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>  </div> <div class="cate-dermess"> {catrow.forumrow.LAST_POST} </div> <img class="cate-no" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> </div> </div> </div> </div> </div> <script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');</script>

Merci énormément pour votre aide ! Bizz

Deplacer le titre des sous forums