Opale quincite Messages : 181 Date d'inscription : 02/06/2020 Age : 30
| | Sujet: Affichage d'un sujet#1 Sam 19 Fév - 18:33 | Affichage d'un sujet ◈ Petit rendu en image ◈
A savoir sur cet affichage d'un sujet ◈ Le crédit n'a pas été installé sur le code. Je vous fais confiance pour ajouter ce code dans vos crédits ! - Code:
-
<a href="https://tourmaline.forumactif.com/" target="_blank">Affichage des sujets réalisés par Loukoum</a> ◈ Le code s'adapte à la largeur de votre forum. ◈ Le CSS est normalement détaillé pour que vous puissiez le modifier aisément. ◈ Dans l'idéal, les rangs sont courts. Mais c'est expliqué si vous avez des rangs long pour modifier correctement le code. ◈ Le système de like n'est pas prit en compte. ◈ La liste des participants au sujet n'est pas prise en compte. ◈ Vous pouvez modifier : les couleurs et le style d'écriture ainsi que quelques tailles, selon ce qui est indiqué dans le CSS. ◈ Si jamais vous avez besoin un soucis ou besoin de modifications, c'est par ici que je m'occuperai de vous ! Le code Merci à vous de l'utiliser ! Modifier le viewtopic_body complètement : - Code:
-
<!-- BEGIN switch_plus_menu --> <script type="text/javascript"> //<![CDATA[ var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}'; </script> <!-- END switch_plus_menu --> <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 class="NewRep"> <span class="nav"> <!-- BEGIN switch_user_authpost --> <a href="{U_POST_NEW_TOPIC}" rel="nofollow" style="text-decoration:none!important;"><div class="Nouveau">Nouveau</div></a> <!-- END switch_user_authpost --> <!-- BEGIN switch_user_authreply --> <a href="{U_POST_REPLY_TOPIC}" style="text-decoration:none!important;"><div class="Repondre">Répondre</div></a> <!-- END switch_user_authreply --> </span> </div> <div class="liensforums"> <span 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} </span> </div> <div style="clear:both;"></div>
<table class="forumline" width="100%" cellspacing="1" cellpadding="0" > <tr align="right"> <td class="catHead" colspan="2" height="28"> <table width="100%"cellspacing="0" cellpadding="0"> <tr> <td width="9%" class="noprint"> </td> <td align="center" class="t-title"> <h1 class="cattitle"> {TOPIC_TITLE}</h1> </td> </tr> </table> <div class="pagination"> <span class="gensmall">{PAGINATION}</span> </div> </td> </tr> {POLL_DISPLAY} <!-- BEGIN postrow --> <!-- BEGIN hidden --> <tr> <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td> </tr> <!-- END hidden --> <!-- BEGIN displayed --> <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"> <div class="sujetprofilcomplet"> <div class="sujetavatar"> <span class="postdetails poster-profile"> {postrow.displayed.POSTER_AVATAR} </span> </div> <div class="sujetrang"> Localisation<br/> {postrow.displayed.POSTER_RANK} </div> <div class="sujetinfos"> <span class="postdetails poster-profile"><!-- BEGIN profile_field --> <span class="sujetlabel">{postrow.displayed.profile_field.LABEL}</span> {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field --> {postrow.displayed.POSTER_RPG} </span> </div> <br /> <img src="https://2img.net/i/empty.gif" alt="" style="width:150px;height:1px" /> </div> </td> <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="100%"> <div class="sujetpseudo"> <span class="name"> <a name="{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong> </span> </div> <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div class="sujetconges"> <div class="sujetcontact"> {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG} </div> <div class="sujetgestion"> {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} </div> <div style="clear:both;"></div> </div> </td> </tr> <tr> <td> <div class="sujetdate"> <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} </div> </td> </tr> <tr height="100%" valign="top"> <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> <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span> </td> </tr> </table> </td> </tr> <!-- 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 class="catBottom" colspan="2" height="28" style="border:none!important;"> <table width="100%" cellspacing="0" cellpadding="0" class="sujetfin"> <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"> <!-- BEGIN switch_isconnect --> <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <!-- END switch_isconnect --> <a href="#top">{L_BACK_TO_TOP}</a> </td> </tr> </table> </td> </tr> </table> <table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;"> <tr> <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td> <!-- BEGIN topicpagination --> <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td> <!-- END topicpagination --> </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}" 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> <tr> <td style="margin:0; padding: 0;" colspan="2"> <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''"> <tbody> <!-- BEGIN show_permissions --> <tr> <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td> <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td> </tr> <!-- END show_permissions --> <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> <!-- BEGIN show_permissions --> <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td> <!-- END show_permissions --> </tr> </table> </td> </tr> </tbody> </table> </td> </tr> <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="2" cellpadding="0" align="center"> <tr> <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}> <span class="nav"> <!-- BEGIN switch_user_authpost --> <a href="{U_POST_NEW_TOPIC}" rel="nofollow" style="text-decoration:none!important;"><div class="Nouveau">Nouveau</div></a> <!-- END switch_user_authpost --> <!-- BEGIN switch_user_authreply --> <a href="{U_POST_REPLY_TOPIC}" style="text-decoration:none!important;"><div class="Repondre">Répondre</div></a> <!-- END switch_user_authreply --> </span> </td>
<td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
<!-- BEGIN moderation_panel --> <td align="center"> <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span> </td> <td align="center" width="250"> <span class="gensmall"> </span> </td> <!-- END moderation_panel --> </tr> </table> </form>
<!-- BEGIN viewtopic_bottom --> <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center"> <tr> <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br /> <form name="action" method="get" action="{S_FORM_MOD_ACTION}"> <input type="hidden" name="t" value="{TOPIC_ID}" />
<!-- <input type="hidden" name="sid" value="{S_SID}" /> --> <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
<span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span> </form> </td> </tr> </table> <!-- 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 --> A mettre dans votre CSS : - Code:
-
/*--------------------------------------------------------*/ /*------------------Affichage des sujets------------------*/ /*-----------------Loukoum sur Tourmaline-----------------*/ /*--------------------------------------------------------*/
.NewRep { float:left; }
.Nouveau, .Repondre { /*Les boutons nouveau / répondre*/ background-image: linear-gradient(to right, #e9ebf0, #dcdbe8, #d5cadc, #d3b8cc, #d1a6b7, #d1a6b7, #d1a6b7, #d1a6b7, #d3b8cc, #d5cadc, #dcdbe8, #e9ebf0); /*Modifiable*/ width:150px; height:20px; color:#E9EBF0!important; /*Modifiable*/ padding:10px; font-family: 'Share Tech Mono', monospace; /*Modifiable*/ font-size:20px; /*Modifiable*/ text-align:center; text-decoration:none!important; margin-right:10px; display:inline-block; }
.liensforums { width:50%; float:right; text-align:right; }
.catHead { border:none!important; }
.catHead, .sujetfin { /*Haut et bas des sujets - Titre*/ width:100%; background-color:#B4B1B5; /*Modifiable*/ padding:10px; }
.cattitle { /*Titre du sujet*/ color:#E9EBF0!important; /*Modifiable*/ font-family: 'Shadows Into Light', cursive; /*Modifiable*/ font-size:20px; /*Modifiable*/ text-align:center; }
.pagination { /*Affichage de la pagination sous le titre*/ width:100%; text-align:right; font-family: 'Share Tech Mono', monospace; /*Modifiable*/ font-size:10px; /*Modifiable*/ }
.pagination a { /*Couleur des liens de la pagination*/ color:#E9EBF0!important; /*Modifiable*/ }
.sujetprofilcomplet { /*Affichage complet du profil sur la gauche*/ width:220px; height:570px; /*A modifier si vous avez des rangs sur deux / trois lignes*/ background-color:#B4B1B5; /*Modifiable*/ }
.sujetavatar { /*Ne pas toucher*/ width:200px; height:320px; padding:10px; }
.sujetrang { /*Mise en forme du rang*/ width:200px; font-family: 'Share Tech Mono', monospace; /*Modifiable*/ font-size:12px; /*Modifiable*/ color:#E9EBF0; /*Modifiable*/ padding:0px 10px 10px 10px; text-align:center; }
.sujetinfos { /*Contenu des informations sur le membre*/ width:200px; height:185px; /*Peut être agrandi, attention à agrandir la hauteur profil complet*/ overflow:auto; margin-left:10px; background-color:#E9EBF0; /*Modifiable*/ color:#CB9093; /*Modifiable*/ font-family: 'Frank Ruhl Libre', serif; /*Modifiable*/ font-size:12px; /*Modifiable*/ text-align:justify; word-wrap: break-word; }
.sujetinfos img { /*Ne pas toucher*/ max-width:100%; }
.sujetlabel { /*La couleur des titres de vos champs profil*/ background-image: linear-gradient(to right, #706150, #816a59, #927363, #a47b6f, #b5847d, #b5847d, #b5847d, #b5847d, #a47b6f, #927363, #816a59, #706150); /*Modifiable*/ -webkit-background-clip: text; /*A supprimer si vous utilisez une couleur sans dégradé*/ -webkit-text-fill-color: transparent; /*A supprimer si vous utilisez une couleur sans dégradé*/ }
.sujetpseudo { /*Le cadre pseudo*/ width:100%; background-color:#B4B1B5; /*Modifiable*/ text-align:center; }
.name { /*Le pseudo*/ font-family: 'Shadows Into Light', cursive; /*Modifiable*/ font-size:20px; }
.sujetconges { /*Ligne champs contact / Edition du message*/ background-color:#B4B1B5; /*Modifiable*/ width:100%; }
.sujetcontact { /*Ne pas toucher*/ float:left; padding:10px; }
.sujetgestion { /*Ne pas toucher*/ float:right; padding:10px; }
.sujetdate { /*Ligne de la date*/ background-color:#B4B1B5; /*Modifiable*/ color:#000000; /*Modifiable*/ font-family: 'Share Tech Mono', monospace; /*Modifiable*/ font-size:12px; /*Modifiable*/ text-align:right; padding:10px; }
.postbody { /*contenu du message*/ max-width:525px; min-height:432px; /*A modifier pour correspondre à la hauteur profil complet. 140px de décalage entre les deux*/ background-color:#E9EBF0; /*Modifiable*/ border:10px solid #B4B1B5; /*Modifiable*/ border-top:none!important; color:#000000; /*Modifiable*/ font-family: 'Frank Ruhl Libre', serif; /*Modifiable*/ font-size:12px; /*Modifiable*/ text-align:justify; /*Modifiable*/ padding:10px; }
.postbody img { /*Ne pas toucher*/ max-width:100%; } | |