Changer la position des images, de la description et du titre d'un forum

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

Résolu Changer la position des images, de la description et du titre d'un forum

Message par Clemsi le Ven 16 Mar 2018 - 0:30

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://espace-series.forumactif.com/

Description du problème

Bonsoir,

J'aimerais savoir si c'est possible de faire en sorte que les images des forums d'une catégorie soient mises derrière le titre du forum et de sa description.

En gros, j'aimerais avoir un résultat similaire à ce forum :
http://fan-kai-cie.leforum.tv/index.php
Il y a l'image, et à côté le titre du forum.
En dessous du titre du forum, il y a les description et il peut y avoir des sous-forums.

Si c'est possible, cela serait cool, car ça me permettrait de mettre des images plus grosses sans que cela agrandisse la cellule.


Dernière édition par Clemsi le Lun 19 Mar 2018 - 22:14, édité 1 fois
avatar

Clemsi
*****

Masculin
Messages : 526
Inscrit(e) le : 08/07/2016

Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Faline le Ven 16 Mar 2018 - 3:06

Bonsoir,

Cela doit être possible, mais je n'ai pas de recette toute faite.

Comme tu as les titres de forums sur tes images, tu pourrais faire des liens images sans répéter le titre en plus, juste le mettre en
Code:
alt="titre"
pour ceux qui ne verraient pas les images (récupérer les adresses url en inspectant la source) et écrire la description... à côté (tableau avec une ligne et 2 cellules).

Et le style
Code:
.forumlink {
    display:none;
}
pour serrer en haut.

Si l'image est assez grande et qu'il y a la place, on peut évidemment répéter le lien en titre de la description, voire renoncer au lien par l'image.
avatar

Faline
*****

Féminin
Messages : 756
Inscrit(e) le : 16/08/2006

http://faline.conceptbb.com/
Faline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par capsovore le Ven 16 Mar 2018 - 8:51

Bonjour,

Moi aussi je suis intéressé par le problème de Clemsi, j'aimerai bien avoir sur le côté gauche du titre des forums et de leur descriptions une image comme sur le forum que Clemsi a donné en exemple:
http://fan-kai-cie.leforum.tv/index.php
J'ai cherché sur le forum mais je n'ai pas trouvé
(Mon forum est un modernbb)

Si quelqu'un a une idée merci par avance
avatar

capsovore
Nouveau membre

Messages : 13
Inscrit(e) le : 29/12/2017

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

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Clemsi le Ven 16 Mar 2018 - 14:41

Je n'avais pas pensé à mettre des liens sur des images, @Faline !

Mais je n'ai pas compris où je dois rentrer les codes que tu m'as donné.
Dans le css ?
avatar

Clemsi
*****

Masculin
Messages : 526
Inscrit(e) le : 08/07/2016

Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Faline le Ven 16 Mar 2018 - 15:51

Le alt=... va dans le lien image
et le style forumlink va dans la feuille de styles.

A voir et à cliquer dedans provisoirement sur mon forum test (depuis chez moi, j'ai dû mettre le lien complet pour que ça mène jusque sur ton fofo à toi, toi tu mettras à partir de "/f..." comme dans ton texte source).

Code:
<a href="/f7-outlander" alt="Outlander"><img style="float: left;" alt="Outlander" src="https://i62.servimg.com/u/f62/11/04/34/05/zzzzzz10.jpg" /></a>
On peut aussi donner les dimensions de l'image dans le code image pour ne pas avoir besoin de la redimensionner...

Oups, j'ai fait pour le forum Outlander avant de voir ton nouveau message.


Dernière édition par Faline le Sam 17 Mar 2018 - 1:18, édité 6 fois (Raison : enlevé lien forum test)
avatar

Faline
*****

Féminin
Messages : 756
Inscrit(e) le : 16/08/2006

http://faline.conceptbb.com/
Faline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Clemsi le Ven 16 Mar 2018 - 16:30

Par exemple, pour le forum Fear the Walking dead, je dois mettre quel code dans "adresse de l'image" ?
L'image : http://image.noelshack.com/fichiers/2018/11/5/1521213272-pgqsxh9.jpeg

Est-ce que c'est le même code pour les boutons de partenariat ?
avatar

Clemsi
*****

Masculin
Messages : 526
Inscrit(e) le : 08/07/2016

Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Faline le Ven 16 Mar 2018 - 16:45

C'est le même code que pour les boutons partenariats, sauf que chez toi tu tronques l'adresse du forum en interne comme ton code source l'indique.

J'ai édité mon message plus haut.

Le alt va dans le lien <a href...> quand il n'y a pas d'image (lien texte).
avatar

Faline
*****

Féminin
Messages : 756
Inscrit(e) le : 16/08/2006

http://faline.conceptbb.com/
Faline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Clemsi le Ven 16 Mar 2018 - 17:13

J'ai essayé avec le forum Fear the Walking Dead, mais ça ne marche pas.
On ne voit pas l'image, mais juste un petit carré blanc, comme si le lien était mort...

J'ai mis ça dans l'adresse de l'image du forum :
Code:
<a href="http/f15-fear-the-walking-dead" alt="Fear the Walking Dead"><img style="float: left;" alt="Fear the Walking Dead" src="http://image.noelshack.com/fichiers/2018/11/5/1521213272-pgqsxh9.jpeg"></a>
avatar

Clemsi
*****

Masculin
Messages : 526
Inscrit(e) le : 08/07/2016

Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Faline le Ven 16 Mar 2018 - 19:20

Il n'a pas trouvé d'image avec l'extension .jpeg à la place de .png .

Chez moi, l'image marche en .png (je l'ai juste étirée en vitesse par code, et le lien dessous est toujours celui du forum mis précédamment) :



Dernière édition par Faline le Ven 16 Mar 2018 - 21:29, édité 1 fois (Raison : emlevé lien forum test)
avatar

Faline
*****

Féminin
Messages : 756
Inscrit(e) le : 16/08/2006

http://faline.conceptbb.com/
Faline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Clemsi le Ven 16 Mar 2018 - 19:34

Ah, donc j'ai juste à remplacer tous les "jpeg" par des "png" ?
avatar

Clemsi
*****

Masculin
Messages : 526
Inscrit(e) le : 08/07/2016

Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Faline le Ven 16 Mar 2018 - 19:55

Pas aveuglément toutes ! Il faut regarder pour chaque image, quelle extension elle a : clic droit, propriétés.

Tu peux laisser l'image telle qu'elle est et mettre un code pour l'agrandir à la taille voulue :
Code:
<img src="url_de_ton_image" style="width: 300px; height: 70px; float: left;" ...  />
taille en nombre de px à adapter.


@capsovore (version ModernBB):
@Capsovore : pour ModernBB le style à mettre est probablement

Code:
.forumtitle {
    display:none;
}

Pour le reste, c'est probablement comme ici, du moins tant qu'il n'y a pas de sous-forums...


Dernière édition par Faline le Ven 16 Mar 2018 - 22:29, édité 1 fois (Raison : mis dans le spoiler la réponse pour ModernBB pour éviter la confusion.)
avatar

Faline
*****

Féminin
Messages : 756
Inscrit(e) le : 16/08/2006

http://faline.conceptbb.com/
Faline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Clemsi le Ven 16 Mar 2018 - 21:09

Et si je n'ai pas envie de modifier la résolution des images ?
C'est quoi "float" ?
avatar

Clemsi
*****

Masculin
Messages : 526
Inscrit(e) le : 08/07/2016

Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Faline le Ven 16 Mar 2018 - 21:36

Le "float" est pour que l'image flotte à gauche quelle que soit la suite des opérations Very Happy . Mais tu peux l'enlever s'il te gêne.

@Clemsi a écrit:Et si je n'ai pas envie de modifier la résolution des images ?
Eh bien, tu laisses l'image comme elle est. J'avais compris dans ton premier message que tu les voulais en plus grand :

@Clemsi a écrit:
Si c'est possible, cela serait cool, car ça me permettrait de mettre des images plus grosses sans que cela agrandisse la cellule.
. Tu peux aussi en mettre une autre, mais après il faudra de nouveau chercher après l'extension qu'elle peut avoir...
avatar

Faline
*****

Féminin
Messages : 756
Inscrit(e) le : 16/08/2006

http://faline.conceptbb.com/
Faline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Clemsi le Ven 16 Mar 2018 - 21:53

Ok !
Merci pour tout !

Je te tiens au courant...
avatar

Clemsi
*****

Masculin
Messages : 526
Inscrit(e) le : 08/07/2016

Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Clemsi le Sam 17 Mar 2018 - 0:23

Non, même en remplaçant "jpeg" par "png" dans le code, ça ne marche pas.

Je vais attendre que quelqu'un apporte la solution pour ce que je voulais à la base du coup.
Quelque chose comme ça : http://fan-kai-cie.leforum.tv/index.php

Merci quand même, @Faline. I love you
avatar

Clemsi
*****

Masculin
Messages : 526
Inscrit(e) le : 08/07/2016

Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Faline le Sam 17 Mar 2018 - 0:35

Si tu préfères travailler sur les styles plutôt que de faire des codes html, tu peux aussi mettre le lien direct vers limage dans le champ prévu dans la description du forum et mettre juste un lien texte vers le forum dans la description.



ce qui donnera



avec un lien texte cliquable.

Ne pas oublier de mettre aussi le style
Code:
.forumlink {
    display:none;
}

pour effacer la ligne au-dessus de l'image.

A la place du style "genmed" que j'ai pris pour l'exemple, tu peux en mettre un autre.





Edit 1 :
Dans ton code pour le lien, il y a encore le
Code:
http
de trop, donc à effacer, et la balise image n'est pas fermée (l'éditeur devrait la corriger).

Sur le forum que tu donnes comme modèle, l'image est aussi sur le lien !


Edit 2 :
Voici encore un tutoriel du support forumactif en italien, qui correspond peut-être plus à tes attentes  :

http://aiuto.forumattivo.it/t16070-categoria-a-3-forum-con-immagine-a-destra

Là, tu as un
Code:
rowspan="2"
pour avoir deux cellules distinctes pour le lien et la description (pas besoin d'en faire 3 sur une même ligne). Mais il faut aussi apporter soi-même ses propres images avec leur extension, ainsi que les liens internes vers les forums.
avatar

Faline
*****

Féminin
Messages : 756
Inscrit(e) le : 16/08/2006

http://faline.conceptbb.com/
Faline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Clemsi le Sam 17 Mar 2018 - 20:43

C'est quoi "class=genmed", @Faline ?
avatar

Clemsi
*****

Masculin
Messages : 526
Inscrit(e) le : 08/07/2016

Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Faline le Sam 17 Mar 2018 - 22:23

C'est un des styles les plus courants du forum (entre autres utilisé pour la description des forums).

Pour avoir exactement la même apparence que les liens forum actuels, il faudrait un style de remplacement identique à
Code:
.forumlink
(à voir dans la feuille de styles de base) pour pouvoir ne pas afficher celui par défaut, qui se trouve au-dessus de la description.

Je viens d'ailleurs de croiser un forum qui a juste l'image dans la description (forum dans le profil de @Scoubifitz) et du style genmed à côté, et je trouve que ça fait très joli :

http://scoubidous.superforum.fr/
avatar

Faline
*****

Féminin
Messages : 756
Inscrit(e) le : 16/08/2006

http://faline.conceptbb.com/
Faline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Clemsi le Dim 18 Mar 2018 - 0:31

Le problème avec ta solution, @Faline, c'est que j'ai des forums et des sous-forums sans images...

Je pense que je vais attendre que quelqu'un ait la solution pour juste avoir l'image des forums à gauche et son titre et sa description à côté.
avatar

Clemsi
*****

Masculin
Messages : 526
Inscrit(e) le : 08/07/2016

Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Faline le Dim 18 Mar 2018 - 1:19

Ok !

(Pour les sous-forums sans images on utiliserait le style de remplacement pour afficher le titre, exactement comme pour les forums avec image.)


Dernière édition par Faline le Lun 19 Mar 2018 - 3:46, édité 1 fois
avatar

Faline
*****

Féminin
Messages : 756
Inscrit(e) le : 16/08/2006

http://faline.conceptbb.com/
Faline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Clemsi le Dim 18 Mar 2018 - 3:54

Ce que tu m'a proposé avec les styles me convient, @Faline.
Quels sont les autres styles à part Genmed ? C'est possible d'augmenter la taille de la police ?
avatar

Clemsi
*****

Masculin
Messages : 526
Inscrit(e) le : 08/07/2016

Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Faline le Dim 18 Mar 2018 - 7:04



J'ai juste entrevu le début de tes travaux avant que tu a mis le fofo en maintenance. Pour avoir rapidement des titres de forums en gras, tu pourrais ajouter dans les liens

Code:
class="cattitle"
donc
Code:
<a class="cattitle" href=...
Ça te fera la même présentation des titres de forums que pour les titres de catégories.

réponses diverses :
Il y a beaucoup de styles (et tu peux aussi en créer toi-même). Voici déjà les principaux :

http://forum.forumactif.com/t278845-les-principaux-identifiants-css-phpbb2-phpbb3

Et pour les autres : clic droit et inspecter la source pour trouver l'identifiant.

J'ai écrit genmed dans le code juste pour signaler qu'il faudra mettre un style (à moins de vouloir garder genmed, qui est le style par défaut dans cette zone). Bien sûr qu'on peut le modifier. Dans un premier temps tu pourrais utiliser le style
Code:
cattitle
, qui est celui des titres de catégories et qui m'a l'air pas mal ressembler à celui que tu as pour les forums.

Exemple qui devrait être prêt à être copié pour le forum Game of Thrones :
Code:
<table align="left"><tr><td rowspan="2" class="clemsi-image"><img src="http://image.noelshack.com/fichiers/2018/11/4/1521082348-gameofthrones.png" /></td><td class="cattitle"><a href="/f31-game-of-thrones">Game of Thrones</a></td></tr><tr><td>description</td></tr></table>
Il faudra vivre pour le moment avec des codes <tbody></tbody> que l'éditeur crache automatiquement. Et tout ça sera étalé sur un tas de lignes. Le staff a pris note du problème. Il ne faut simplement pas en tenir compte et recoller dans chaque forum un code neuf et y changer l'adresse de l'image et du forum.

Et dans la feuille de styles tu mets :
Code:

.clemsi-image {
    vertical-align:middle;
}
Le style clemsi-image sert à aligner l'image verticalement en centré quelle que soit la longueur du titre et de la description.

J'ai fait un tableau avec 3 cellules : 1 pour l'image, 1 pour le lien et 1 pour la description comme sur le forum modèle et pour facilement s'y retrouver.

alternative :
Si jamais tu souhaiterais au fond que la page d'accueil de ton forum ressemble à un écran de télévision, où on peut cliquer sur les séries dont on veut parler, on peut revenir sur le tutoriel du support italien que j'ai mentionné plus haut :

http://aiuto.forumattivo.it/t16070-categoria-a-3-forum-con-immagine-a-destra

pour compacter tout ça (plusieurs forums par ligne...).
avatar

Faline
*****

Féminin
Messages : 756
Inscrit(e) le : 16/08/2006

http://faline.conceptbb.com/
Faline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Clemsi le Lun 19 Mar 2018 - 3:06

Merci pour tous tes edits, @Faline.
J'ai tout lu.

Finalement, j'ai utilisé ces codes :

Dans le css :
Code:
.forumlink {
    display:none;
}

Dans la description des forums avec images :
Code:
<a href="/f15-fear-the-walking-dead" classe="cattitle">Forum Fear the Walking Dead</a><br />Le forum pour parler de la série Fear the Walking Dead.

Je suis satisfait du résultat obtenu.
Je mets le topic en résolu.

Merci beaucoup, @Faline? Smile
avatar

Clemsi
*****

Masculin
Messages : 526
Inscrit(e) le : 08/07/2016

Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Faline le Lun 19 Mar 2018 - 3:29

Pour avoir le titre en gras, il faut écrire
Code:
class
en anglais et non pas "classe" en français.

C'est valable aussi bien pour les forums sans images que pour ceux avec image.
avatar

Faline
*****

Féminin
Messages : 756
Inscrit(e) le : 16/08/2006

http://faline.conceptbb.com/
Faline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la position des images, de la description et du titre d'un forum

Message par Clemsi le Lun 19 Mar 2018 - 22:14

Ok ! Merci pour tout, @Faline !
avatar

Clemsi
*****

Masculin
Messages : 526
Inscrit(e) le : 08/07/2016

Clemsi 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