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

[Electro0007]

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


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.

[Lixyr]

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.

[Electro0007]

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à Il n'a pas été modifié celui-là, pour le moment.

ViewTopic Body:

[Electro0007]

up

[Electro0007]

up

[Electro0007]

up

[Electro0007]

up

[Electro0007]

up

[Electro0007]

up

[Electro0007]

[Invité]

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://2img.net/i/fa/empty.gif"/></dd>
<dd class="M14_iconParti"><img style="width:48px;"src="https://2img.net/i/fa/empty.gif"/></dd>
<dd class="M14_iconIcone"><img style="width:100px;"src="https://2img.net/i/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 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://2img.net/i/fa/empty.gif"/></dd>
<dd class="M14_iconParti"><img style="width:48px;"src="https://2img.net/i/fa/empty.gif"/></dd>
<dd class="M14_iconIcone"><img style="width:100px;"src="https://2img.net/i/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é .

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;}

.

a++

[Electro0007]

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 Merci encore.

[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

[Invité]

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 .

a++

[Electro0007]

Bonsoir Milouze14,

Cela fonctionne à la perfection merci encore.