Créer colonne visible qui définit les emplacements des icônes sujet.

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

Résolu Créer colonne visible qui définit les emplacements des icônes sujet.

Message par Electro0007 le Ven 3 Nov 2017 - 14:32

Détails techniques


Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Salut,

J'aurais une petite question d'ordre visuel. Est-il possible de créer une colonne qui entourait les icônes sujets Question


L'exemple est pour les colonnes de gauche. Ils ont chacune des colonnes de séparation qui définit d'avantage leur emplacement et point de vue esthétique est nettement mieux.

Merci pour votre aide. Smile


Dernière édition par Electro0007 le Ven 24 Nov 2017 - 20:08, édité 1 fois
avatar

Electro0007
**

Messages : 94
Inscrit(e) le : 02/10/2017

http://serialcomputer2.forumactif.com/
Electro0007 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer colonne visible qui définit les emplacements des icônes sujet.

Message par Lixyr le Ven 3 Nov 2017 - 16:00

Bonjour,

Alors là en PHPBB3 il faudra passer par les templates, et modifier ce qui peut être modifier. Redonnez le contenu du template viewtopic_body.


EN PRÉSENCE RÉDUITE LA SEMAINE - RÉPOND AUX MP
avatar

Lixyr
Aidactive
Aidactive

Féminin
Messages : 6183
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer colonne visible qui définit les emplacements des icônes sujet.

Message par Electro0007 le Ven 3 Nov 2017 - 16:15

@Lixyr a écrit:Bonjour,

Alors là en PHPBB3 il faudra passer par les templates, et modifier ce qui peut être modifier. Redonnez le contenu du template viewtopic_body.
Voilà Very Happy Il n'a pas été modifié celui-là, pour le moment.


ViewTopic Body:
<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>

<h1 class="page-title">
<a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
</h1>
<div class="topic-actions">
<div class="buttons">

<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>&nbsp;&nbsp;&nbsp;
<!-- END switch_user_authpost -->

<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
<!-- END switch_user_authreply -->
</div>

<div class="pathname-box">
<p>
<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}
</p>
</div>

<p class="right">
<!-- BEGIN switch_twitter_btn -->
<span>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</span>
<!-- END switch_twitter_btn -->
<!-- BEGIN switch_fb_likebtn -->
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>
<!-- END switch_fb_likebtn -->
</p>

<div class="pagination">
{PAGE_NUMBER}
&nbsp;•&nbsp;
<a class="addthis_button" href="#">{L_SHARE}</a>
<!-- BEGIN switch_plus_menu -->
&nbsp;•&nbsp;
<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_new('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
//]]>
</script>
<!-- END switch_plus_menu -->
</div>
<div class="clear"></div>
</div>

<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->
<p class="left-box"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a></p>
<div class="clear"></div>
{POLL_DISPLAY}

<!-- BEGIN postrow -->
<!-- BEGIN hidden -->
<div class="post {postrow.hidden.ROW_COUNT}">
<div class="inner">
<span class="corners-top"><span></span></span>
<p style="text-align:center">{postrow.hidden.MESSAGE}</p>
<div class="clear"></div>
<span class="corners-bottom"><span></span></span>
</div>
</div>
<!-- END hidden -->
<!-- BEGIN displayed -->
<div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
<div class="inner"><span class="corners-top"><span></span></span>
<div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
<div class="postbody">

<ul class="profile-icons">
<li>{postrow.displayed.THANK_IMG}</li>
<li>{postrow.displayed.MULTIQUOTE_IMG}</li>
<li>{postrow.displayed.QUOTE_IMG}</li>
<li>{postrow.displayed.EDIT_IMG}</li>
<li>{postrow.displayed.DELETE_IMG}</li>
<li>{postrow.displayed.IP_IMG}</li>
<li>{postrow.displayed.REPORT_IMG_NEW}</li>
</ul>

<h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h2>
<p class="author"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" />&nbsp;{L_TOPIC_BY}&nbsp;{postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</p>
<div class="clearfix"></div>

<!-- 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 style="display:none"></div>
<div class="content clearfix">
<div>{postrow.displayed.MESSAGE}</div>
<!-- BEGIN switch_attachments -->
<dl class="attachbox">
<dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
<dd class="attachments">
<!-- BEGIN switch_post_attachments -->
<dl class="file clearfix">
<dt>
<img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
</dt>
<dd>
<!-- BEGIN switch_dl_att -->
<span><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}</span>
<!-- END switch_dl_att -->

<!-- BEGIN switch_no_dl_att -->
<span>{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}</span>
<!-- END switch_no_dl_att -->

<!-- BEGIN switch_no_comment -->
<span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</span>
<!-- END switch_no_comment -->

<!-- BEGIN switch_no_dl_att -->
<span><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></span>
<!-- END switch_no_dl_att -->

<span>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span>
</dd>
</dl>
<!-- END switch_post_attachments -->
</dd>
</dl>
<!-- END switch_attachments -->
</div>
{postrow.displayed.EDITED_MESSAGE}
<!-- BEGIN switch_signature -->
<div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
<!-- END switch_signature -->
</div>

<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
<!-- div class="online2"></div-->
<dl>
<dt>
{postrow.displayed.POSTER_AVATAR}
<br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
</dt>
<dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
<dd><br /></dd>
<dd>
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</dd>
<dd><br /></dd>
<dd>
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
</dd>
</dl>
</div>

<div class="clear"></div>

<p class="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a></p>
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- BEGIN first_post_br -->
<hr id="first-post-br" />
<!-- END first_post_br -->
<!-- END displayed -->
<!-- END postrow -->

<a name="bottomtitle"></a>

<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->

<p class="left-box"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;<a href="#top">{L_BACK_TO_TOP}</a></p>

<div class="clear"></div>

<div class="noprint">
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
<p class="right">{S_WATCH_TOPIC}</p>
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
</div>

<!-- BEGIN promot_trafic -->
<div class="post row2" id="ptrafic_close" style="display:none;font-size:1.3em;line-height:1.4em">
<span class="corners-top"><span></span></span>
<span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a></span>
<span class="ptrafic">&nbsp;{PROMOT_TRAFIC_TITLE}</span>
<span class="corners-bottom"><span></span></span>
</div>
<div class="post row2" id="ptrafic_open" style="display:'';font-size:1.3em;line-height:1.4em">
<span class="corners-top"><span></span></span>
<span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a></span>
<span class="ptrafic">&nbsp;{PROMOT_TRAFIC_TITLE}</span>
<div class="clear"></div>
<div>
<!-- BEGIN link -->
»&nbsp;<a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
<!-- END link -->
</div>
<span class="corners-bottom"><span></span></span>
</div>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<div class="post row1" id="forum_rules">
<span class="corners-top"><span></span></span>
<div class="h3">&nbsp;{L_FORUM_RULES}</div>
<div class="clear"></div>
<table class="postbody">
<tr>
<!-- BEGIN switch_forum_rule_image -->
<td class="logo">
<img src="{RULE_IMG_URL}" alt="" />
</td>
<!-- END switch_forum_rule_image -->
<td class="rules content">
{RULE_MSG}
</td>
</tr>
</table>
<span class="corners-bottom"><span></span></span>
</div>
<!-- END switch_forum_rules -->

<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->

<hr />

<div class="topic-actions">
<div class="buttons">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>&nbsp;&nbsp;&nbsp;
<!-- END switch_user_authpost -->

<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
<!-- END switch_user_authreply -->
</div>

<div class="pathname-box">
<p><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC}</p>
</div>

<div class="pagination">
{PAGE_NUMBER}
</div>
</div>
<div class="clear"></div>

<form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<fieldset class="jumpbox">
<label>{L_JUMP_TO}:&nbsp;</label>
{S_JUMPBOX_SELECT}&nbsp;
<input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>

<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}">
<fieldset class="quickmod">
<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}" />
<label>{L_MOD_TOOLS}:&nbsp;</label>
{S_SELECT_MOD}&nbsp;
<input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
<div class="clear"></div>
<p class="right">{S_TOPIC_ADMIN}</p>
<!-- END viewtopic_bottom -->

<!-- BEGIN show_permissions -->
<div class="h3">{L_TABS_PERMISSIONS}</div>
{S_AUTH_LIST}
<!-- END show_permissions -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->

<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>
avatar

Electro0007
**

Messages : 94
Inscrit(e) le : 02/10/2017

http://serialcomputer2.forumactif.com/
Electro0007 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer colonne visible qui définit les emplacements des icônes sujet.

Message par Electro0007 le Dim 5 Nov 2017 - 16:34

up Smile
avatar

Electro0007
**

Messages : 94
Inscrit(e) le : 02/10/2017

http://serialcomputer2.forumactif.com/
Electro0007 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer colonne visible qui définit les emplacements des icônes sujet.

Message par Electro0007 le Mar 7 Nov 2017 - 17:01

up Sad
avatar

Electro0007
**

Messages : 94
Inscrit(e) le : 02/10/2017

http://serialcomputer2.forumactif.com/
Electro0007 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer colonne visible qui définit les emplacements des icônes sujet.

Message par Electro0007 le Jeu 9 Nov 2017 - 15:09

up Sad
avatar

Electro0007
**

Messages : 94
Inscrit(e) le : 02/10/2017

http://serialcomputer2.forumactif.com/
Electro0007 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer colonne visible qui définit les emplacements des icônes sujet.

Message par Electro0007 le Lun 13 Nov 2017 - 20:32

up Confused
avatar

Electro0007
**

Messages : 94
Inscrit(e) le : 02/10/2017

http://serialcomputer2.forumactif.com/
Electro0007 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer colonne visible qui définit les emplacements des icônes sujet.

Message par Electro0007 le Mer 15 Nov 2017 - 23:45

up Crying or Very sad
avatar

Electro0007
**

Messages : 94
Inscrit(e) le : 02/10/2017

http://serialcomputer2.forumactif.com/
Electro0007 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer colonne visible qui définit les emplacements des icônes sujet.

Message par Electro0007 le Lun 20 Nov 2017 - 2:23

up
avatar

Electro0007
**

Messages : 94
Inscrit(e) le : 02/10/2017

http://serialcomputer2.forumactif.com/
Electro0007 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer colonne visible qui définit les emplacements des icônes sujet.

Message par Electro0007 le Jeu 23 Nov 2017 - 1:09

Confused
avatar

Electro0007
**

Messages : 94
Inscrit(e) le : 02/10/2017

http://serialcomputer2.forumactif.com/
Electro0007 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer colonne visible qui définit les emplacements des icônes sujet.

Message par Milouze14 le Jeu 23 Nov 2017 - 18:01

Hello Electro0007,
ta version ne permet pas d'obtenir ce que tu souhaites sauf si on modifies quelque peu sa structure.
La version phpbb3 gère les icônes de sujets et de messages avec un background-image et non une image en elle même.

Il faut un script et une intervention dans le template concerné, puis du style pour remédier aux multiples padding etc etc.

Il faut donc que tu saches que les icônes:
De sujet
De participation
De message
auront tous une bordure par défaut avec la css de base.

L'aperçu imagé:


Dans le template topics_list_box:
Affichage/Templates/Général/topics_list_box

Recherches cette ligne (102 environ) :
Code:

<dl class="icon" style="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">

Juste après

Déposes ceci:
Code:

<dd class="M14_iconSujet"><img style="width:48px;"src="https://illiweb.com/fa/empty.gif"/></dd>
<dd class="M14_iconParti"><img style="width:48px;"src="https://illiweb.com/fa/empty.gif"/></dd>
<dd class="M14_iconIcone"><img style="width:100px;"src="https://illiweb.com/fa/empty.gif"/></dd>


Recherches cette ligne 105 (environ)
Code:
<!-- END single_selection -->

Juste après déposes ceci:
Code:
<div class="M14_bloc_topic">

Recherches cette ligne 119 (environ)
Code:

<!-- END nav_tree -->

Juste après déposes ceci:

Code:
</div>



Penses à enregistrer puis à valider en cliquant respectivement sur :enreg: puis


Il est impératif de respecter cette partie dans le template:
Les images vides ont une largeur de définie 48px pour les deux premières
et la troisième (icônes de message légèrement plus larges) à 100px.
Code:

<dd class="M14_iconSujet"><img style="width:48px;"src="https://illiweb.com/fa/empty.gif"/></dd>
<dd class="M14_iconParti"><img style="width:48px;"src="https://illiweb.com/fa/empty.gif"/></dd>
<dd class="M14_iconIcone"><img style="width:100px;"src="https://illiweb.com/fa/empty.gif"/></dd>



Il faut donc avoir l'identique dans la c.s.s suivante:

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:


Code:

ul.topics .M14_li  dd.dterm{padding-left:0px;}
/*on donne une largeur a 37% au bloc du sujet*/
.M14_li .dterm{width:37% !important;}
/*on dépose un padding left a 15px pour laisser la place aux icones*/
.M14_li .M14_bloc_topic{padding-left: 15px !important;}

/*Premiere ligne dans le template
/*on donne une largeur a la cellule sujet*/
.M14_iconSujet
{
text-align: center;
width:48px;
}
/*Deuxieme ligne dans le template
/*on donne une largeur a la cellule participation*/
.M14_iconParti
{
text-align: center;
width:48px;
}
/* Troisieme ligne dans le template
/* on donne une largeur a la cellule Icone de message*/
.M14_iconIcone
{
text-align: center;
width:100px;
}

/*les images des icones*/
.M14_iconSujet img ,
.M14_iconParti img,
.M14_iconIcone img
{
min-width: 16px;
width:auto;
max-width: 100px;
min-height: 16px;
height:auto;
max-height:38px;
padding:0px 2px 0px 2px;
}


/*On decale du haut l image de participation et icone de message*/
.M14_iconIcone img,.M14_iconParti img{margin-top: 8px;}

Penses à cliquer sur le bouton

Puis pour terminer le script qui va gérer tout cela:

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Codes Javascript

Mets un titre explicite.
Coches sur les sous-forums


Déposes ceci:
Code:
$(function(){

//ICONE DE SUJET
$('dl.icon[style*="background-image"]').each(function(){
var M14_iconSujet=$(this).css('background-image').replace(/^url\(['"](.+)['"]\)/, '$1');
if(M14_iconSujet)
{
$(this).closest('li').addClass('M14_li'); 
$(this).css('background-image','none');
$(this).closest('li').find('.M14_iconSujet img').replaceWith('<img src="'+M14_iconSujet+'"/>'); 
}
});
  var test=$('.M14_li').width();
//ICONE DE PARTICIPATION
$('dd.dterm').find('img[alt="Vous avez posté dans ce sujet."]').each(function(){
var M14_iconParti=$(this).attr('src');
if(M14_iconParti)
{
$(this).hide();

$(this).closest('li').find('.M14_iconParti img').replaceWith('<img src="'+M14_iconParti+'"/>'); 
}

});
 
//ICONE DE MESSAGE
$('dd.dterm[style*="background-image"]').each(function(){
var M14_iconIcone=$(this).css('background-image').replace(/^url\(['"](.+)['"]\)/, '$1');
if(M14_iconIcone)
{

$(this).css('background-image','none');
$(this).closest('li').find('.M14_iconIcone img').replaceWith('<img src="'+M14_iconIcone+'"/>'); 
}

});
});

Penses a cliquer sur le bouton VALIDER

Et voilà , c'est terminé Wink .

Afin de pallier à de petits désagrément il faudra peut revoir la largeur des class ainsi que dans la css
et ajuster la largeur du bloc et le padding left ici:
Code:
/*on donne une largeur a 37% au bloc du sujet*/
.M14_li .dterm{width:37% !important;}
/*on dépose un padding left a 15px pour laisser la place aux icones*/
.M14_li .M14_bloc_topic{padding-left: 15px !important;}

Wink .

a++
avatar

Milouze14
Membre actif

Masculin
Messages : 5030
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer colonne visible qui définit les emplacements des icônes sujet.

Message par Electro0007 le Ven 24 Nov 2017 - 14:46

Merci énormément, pour ton aide. Je vais tout de suite l'essayer, en fin de semaine. Aussitôt fait, je vais donner des nouvelles, avec image à l'appuie Wink Merci encore. Smile
avatar

Electro0007
**

Messages : 94
Inscrit(e) le : 02/10/2017

http://serialcomputer2.forumactif.com/
Electro0007 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer colonne visible qui définit les emplacements des icônes sujet.

Message par Electro0007 le Ven 24 Nov 2017 - 16:54

Tout fonctionne à merveille merci. Il me reste que deux éléments à ajusté. La largeur de la colonne "Titre", l'agrandir et celle de la colonne "DERNIER MESSAGE" et la réduire.

J'imagine que c'est un code CSS Question
avatar

Electro0007
**

Messages : 94
Inscrit(e) le : 02/10/2017

http://serialcomputer2.forumactif.com/
Electro0007 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer colonne visible qui définit les emplacements des icônes sujet.

Message par Milouze14 le Ven 24 Nov 2017 - 19:32

Hello Electro0007,

Tout fonctionne à merveille merci. Il me reste que deux éléments à ajusté. La largeur de la colonne "Titre", l'agrandir et celle de la colonne "DERNIER MESSAGE" et la réduire.

J'imagine que c'est un code CSS
Effectivement, il faut modifier la valeur 37% par 46% ici:

Code:

.M14_li .dterm
{
    width: 37% !important;
}

Code:
.M14_li .dterm {
    width: 46% !important;
}

Dernier message suivra Wink .

a++
avatar

Milouze14
Membre actif

Masculin
Messages : 5030
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Créer colonne visible qui définit les emplacements des icônes sujet.

Message par Electro0007 le Ven 24 Nov 2017 - 20:06

Bonsoir Milouze14,

Cela fonctionne à la perfection merci encore. Smile
avatar

Electro0007
**

Messages : 94
Inscrit(e) le : 02/10/2017

http://serialcomputer2.forumactif.com/
Electro0007 a été remercié(e) par l'auteur de ce sujet.

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


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