Archives FluxBB.fr

Les archives de FluxBB.fr

Recherche rapide

Vous n'êtes pas identifié(e).

Version 1.4.13 : [.tar.gz][.zip] (maj 20/10/2014)
Pack langue française pour 1.4.x : [.zip] (maj 06/01/2012)

Branche 1.5.x : fluxbb.org

Version 1.2.24 fr (entièrement en français) : [.zip] (maj 26/08/2011)
Pack langue française pour 1.2.x : [.zip] [.rar] (maj 15/10/2006)

Vous avez un problème ?
Avant de poser votre question sur les forums d'entraide nous vous invitons à consulter :

#1 18-06-2007 12:38:49

.LuD.
Membre

Icone à côté des noms de forums

Bonjour, je propose une petite astuce permettant de mettre une icone à côté des noms de forums, qui en mon sens permet une meilleure visibilité de ceux-ci (une séparation plus nette)

pour un exemple voir ici:

http://www.bce-tech.fr/french/communaute/Forums/

##
##
##          Titre mod :  Ajouter une icone à gauche des noms des forums.
##
##        Version mod :  1.0
##         Pour PunBB :  1.2.15
##               Date :  18/06/2007
##
##             Auteur :  .LuD. http://bce-tech.fr
##
##        Description :  Permet d'ajouter une icone à côté des noms des forums pour une meilleure visibilité
##                       
##
##  Fichiers affectés :  viewforum.php
##                       index.php
##
##      Affecte la BD :  non
##
##      Démonstration :  Visible sur le forum de .LuD. : 
##                       http://www.bce-tech.fr/communaute/Forums/
##
##         DISCLAIMER :  Veuillez noter que ces mods ne sont pas
##                       officiellement supportés par PunBB. L'installation
##                       de ces modifications est à vos risques et périls.
##                       N'oubliez pas de sauvegarder la base de données et
##                       les fichiers affectés avant de procéder à
##                       l'installation de cette modification.
##

Envoyer l'icone sur le serveur:

#
#---------[ 1. ENVOYER SUR LE SERVEUR ]-------------------------------------------------------
#

upload/img/votre_icone.png

Ensuite:

#
#---------[ 2. OUVRIR ]-------------------------------------------------------
#

viewforum.php

#
#---------[ 3. TROUVER LIGNE 94 ]-----------------------------------------------------
#

    <h2><span><?php echo pun_htmlspecialchars($cur_forum['forum_name']) ?></span></h2>

#
#---------[ 4. REMPLACER PAR ]-----------------------------------------
#

    <h2><span><img style="vertical-align: middle;" src="img/votre_icone.png" alt="ICONE" border="0" /><?php echo pun_htmlspecialchars($cur_forum['forum_name']) ?></span></h2>

Puis:

#
#---------[ 5. OUVRIR ]-------------------------------------------------------
#

index.php

#
#---------[ 6. TROUVER LIGNE 59 ]-----------------------------------------------------
#

    <h2><span><?php echo pun_htmlspecialchars($cur_forum['cat_name']) ?></span></h2>

#
#---------[ 7. REMPLACER PAR ]-----------------------------------------
#

    <h2><span><img style="vertical-align: middle;" src="img/votre_icone.png" alt="ICONE" border="0" /><?php echo pun_htmlspecialchars($cur_forum['cat_name']) ?></span></h2>

et pour finir:

#
#---------[ 9. ENREGISTRER/ENVOYER SUR LE SERVEUR ]----------------------------
#


upload/viewforum.php
upload/index.php

Et voila !!

@++

.LuD.


kendo-iaido.fr

Hors ligne

#2 18-06-2007 13:08:04

Ishido
Habitué actif

Re : Icone à côté des noms de forums

Il me semble avoir déjà vu une MOD pour ça.
A vérifier.


Chez Wam
Message tapé en Bépo avec un TypeMatrix 2030 USB smile

Hors ligne

#3 18-06-2007 14:15:58

.LuD.
Membre

Re : Icone à côté des noms de forums

Ne confonds-tu pas avec cette mod ? Mod Icones à côté des textes ?
@++

.LuD.


kendo-iaido.fr

Hors ligne

#4 18-06-2007 22:27:00

TLP
Habitué actif

Re : Icone à côté des noms de forums

Bonjour,

Oui mais...

<img style="vertical-align: middle;" src="img/votre_icone.png" alt="ICONE" border="0" />

C'est vilain ! Très vilain fouet

Il me semble que le plus simple c'est d'utiliser les ID des forums de punBB d'origine et de faire les modif dans le CSS. Par exemple sur ce site :

<div id="idx1" class="blocktable">
     <h2><span>PunBB en Français</span></h2>
          <div class="box">

Chaque forum est identifié avec son IDX + numéro (première ligne de DIV).
Il suffit donc de faire un padding dans le H2 span de ce div et de mettre une image en fond, comme ceci :

#idx1 h2 span, #idx1 h2 span a {padding-left:20px;background:url(TON_IMAGE) no-repeat 0 0;}

Hors ligne

#5 19-06-2007 00:01:49

MT
Admin rasé

Re : Icone à côté des noms de forums

En fait ce sont les catégories qui sont identifiées par les idx1, idx2, idxn etc
Ce qu'il faudrait, c'est faire une modif en mettant l'id de forum dans une id pour chaque h2, et ensuite faire la modif css comme tu le préconises.

Bonne idée de départ donc, mais à améliorer wink


(s) MT
ex-Apupv
faq recherche
Gra.

Hors ligne

#6 19-06-2007 01:16:13

TLP
Habitué actif

Re : Icone à côté des noms de forums

MT a écrit :

En fait ce sont les catégories qui sont identifiées par les idx1, idx2, idxn etc
Ce qu'il faudrait, c'est faire une modif en mettant l'id de forum dans une id pour chaque h2, et ensuite faire la modif css comme tu le préconises.

Ben non, il modifie le <h2><span> en ajoutant une balise image donc c'est bien les catégories, car les forums sont en H3.

Me semble-t-il...à moins que...oh une bière biere

Hors ligne

#7 19-06-2007 08:50:48

norisknimo
Régulier

Re : Icone à côté des noms de forums

Merci moi je trouve ça plutôt intérréssant ! et pour mettre un icône à côté des titre du menu horizontal (liste membres, recherche, profil, etc ...)  en haut comme sur ton forum ! on fais comment ?

G-ROM

Dernière modification par norisknimo (19-06-2007 08:52:53)

Hors ligne

#8 19-06-2007 09:10:15

MT
Admin rasé

Re : Icone à côté des noms de forums

Effectivement TLP, tu as raison. Mais c'est le titre de la mod qui m'a induit en erreur : il ne s'agit donc pas de mettre une icône à côté des forums, mais bel et bien à côté des catégories.
Mieux vaudrait donc passer par les css. Mais par contre, sur viewforum.php, on ne retrouve plus le idxn, donc pour garder l'icône, il faudrait effectivement faire une une modification pour le rajouter.


(s) MT
ex-Apupv
faq recherche
Gra.

Hors ligne

#9 19-06-2007 09:23:33

.LuD.
Membre

Re : Icone à côté des noms de forums

TLP a écrit :

Bonjour,

Oui mais...

<img style="vertical-align: middle;" src="img/votre_icone.png" alt="ICONE" border="0" />

C'est vilain ! Très vilain fouet

Il me semble que le plus simple c'est d'utiliser les ID des forums de punBB d'origine et de faire les modif dans le CSS. Par exemple sur ce site :

<div id="idx1" class="blocktable">
     <h2><span>PunBB en Français</span></h2>
          <div class="box">

Chaque forum est identifié avec son IDX + numéro (première ligne de DIV).
Il suffit donc de faire un padding dans le H2 span de ce div et de mettre une image en fond, comme ceci :

#idx1 h2 span, #idx1 h2 span a {padding-left:20px;background:url(TON_IMAGE) no-repeat 0 0;}

Pourquoi vilain ? dans ce qui est exposé, nous avons deux cas de figure:

- Une icone répétable sur tous les noms des catégories <h2> (ce que j'ai fait), mis en brut.
- une icone variable selon le id de la catégorie et dont l'image peut etre changée selon la feuille de style (idée à creuser et c'est  ce que je vais faire..)

Après tout dépend de ton intêret et de ta mise en page..

Dernière modification par .LuD. (19-06-2007 09:24:31)


kendo-iaido.fr

Hors ligne

#10 19-06-2007 09:32:33

MT
Admin rasé

Re : Icone à côté des noms de forums

Ce qui est vilain c'est d'utiliser une balise img plutôt que de passer par les css.
Les css sont là pour permettre de séparer le design du contenu, et avec une balise img on se retrouve avec la même icône sur tous les styles. Or, quand on a des styles vraiment différent, il est avantageux de pouvoir changer d'icône.
Enfin, mettre une balise img fera qu'elle sera interprétée comme du contenu, et sa balise alt sera lue par les lecteurs d'écrans. Ceux qui naviguent avec ce genre de dispositifs entendront "ICONE", alors qu'en passant par les Css, ils ne remarqueront rien.


(s) MT
ex-Apupv
faq recherche
Gra.

Hors ligne

#11 19-06-2007 09:43:59

norisknimo
Régulier

Re : Icone à côté des noms de forums

Heu ...Lud peux tu m'expliquer comment tu as fait pour mettre des icones sur la menu de navigation horizontal en haut de ton site ?

Merci !

G-ROM

Dernière modification par norisknimo (19-06-2007 09:48:29)

Hors ligne

#12 19-06-2007 10:02:38

.LuD.
Membre

Re : Icone à côté des noms de forums

norisknimo a écrit :

Heu ...Lud peux tu m'expliquer comment tu as fait pour mettre des icones sur la menu de navigation horizontal en haut de ton site ?

Merci !

G-ROM

Oui, en reprenant le principe de cette mod, mais en l'appliquant sur ce fichier:

upload/lang/French/common.php, ligne 114:

// Stuff for the navigator (top of every page)
'Index'                    =>    'Accueil forums',
'User list'                =>    'Liste des membres',
'Rules'                    =>  'Règles',
'Search'                =>  'Recherche',
'Register'                =>  'Inscription',
'Login'                    =>  'S\'identifier',
'Not logged in'            =>  'Vous n\'êtes pas identifié.',
'Profile'                =>    'Profil',
'Logout'                =>    'Déconnexion',
'Logged in as'            =>    'Connecté en tant que',
'Admin'                    =>    'Administration',
'Last visit'            =>    'Dernière visite',
'Show new posts'        =>    'Afficher les nouveaux messages depuis la dernière visite',
'Mark all as read'        =>    'Marquer toutes les discussions comme lues',
'Link separator'        =>    '',    // The text that separates links in the navigator
MT a écrit :

Ce qui est vilain c'est d'utiliser une balise img plutôt que de passer par les css.
Les css sont là pour permettre de séparer le design du contenu, et avec une balise img on se retrouve avec la même icône sur tous les styles. Or, quand on a des styles vraiment différent, il est avantageux de pouvoir changer d'icône.
Enfin, mettre une balise img fera qu'elle sera interprétée comme du contenu, et sa balise alt sera lue par les lecteurs d'écrans. Ceux qui naviguent avec ce genre de dispositifs entendront "ICONE", alors qu'en passant par les Css, ils ne remarqueront rien.

Soit, dans ce cas, pour rester conforme à punbb, je vais voir comment modifier ca dans le css et dans le fichier brut..
si vous avez des idées ...:D

A bientôt pour de nouvelles aventures !

.LuD.

Dernière modification par .LuD. (19-06-2007 10:05:25)


kendo-iaido.fr

Hors ligne

#13 19-06-2007 10:13:34

norisknimo
Régulier

Re : Icone à côté des noms de forums

Heu...tu vas me trouver nul mais la mod que tu m'as indiqué c'est pour modifier le css alors que là tu me dis de modifier common.php, je comprends pas trop !! tu peux m'expliquer ?

Merci encore !

Hors ligne

#14 19-06-2007 10:22:54

.LuD.
Membre

Re : Icone à côté des noms de forums

Exemple de modification du fichier common.php:

// Stuff for the navigator (top of every page)
'Index'                    =>    '<img style="vertical-align: middle;" src="img/ton_image.png" alt="X"> Accueil forums',
'User list'                =>    '<img style="vertical-align: middle;" src="img/ton_image.png" alt="X"> Liste des membres',
'Rules'                    =>  '<img style="vertical-align: middle;" src="img/ton_image.png" alt="X"> Règles',
'Search'                =>  '<img style="vertical-align: middle;" src="img/ton_image.png" alt="X"> Recherche',
'Register'                =>  '<img style="vertical-align: middle;" src="img/ton_image.png" alt="X"> Inscription',
'Login'                    =>  'S\'identifier',
'Not logged in'            =>  'Vous n\'êtes pas identifié.',
'Profile'                =>    '<img style="vertical-align: middle;" src="img/ton_image.png" alt="X"> Profil',
'Logout'                =>    '<img style="vertical-align: middle;" src="img/ton_image.png" alt="X"> Déconnexion',
'Logged in as'            =>    'Connecté en tant que',
'Admin'                    =>    '<img style="vertical-align: middle;" src="img/ton_image.png" alt="X"> Administration',
'Last visit'            =>    'Dernière visite',
'Show new posts'        =>    'Afficher les nouveaux messages depuis la dernière visite',
'Mark all as read'        =>    'Marquer toutes les discussions comme lues',
'Link separator'        =>    '',    // The text that separates links in the navigator

Si ca peut aider.

Dernière modification par .LuD. (19-06-2007 10:23:50)


kendo-iaido.fr

Hors ligne

#15 19-06-2007 10:36:23

norisknimo
Régulier

Re : Icone à côté des noms de forums

Merci beaucoup pour ta réponse et de ta gentillesse ! j'ais compris !!!

G-ROM

Hors ligne

#16 19-06-2007 11:31:28

TLP
Habitué actif

Re : Icone à côté des noms de forums

.LuD. a écrit :

Exemple de modification du fichier common.php:

// Stuff for the navigator (top of every page)
'Index'                    =>    '<img style="vertical-align: middle;" src="img/ton_image.png" alt="X"> Accueil forums',
'User list'                =>    '<img style="vertical-align: middle;" src="img/ton_image.png" alt="X"> Liste des membres',
'Rules'                    =>  '<img style="vertical-align: middle;" src="img/ton_image.png" alt="X"> Règles',
'Search'                =>  '<img style="vertical-align: middle;" src="img/ton_image.png" alt="X"> Recherche',
'Register'                =>  '<img style="vertical-align: middle;" src="img/ton_image.png" alt="X"> Inscription',
'Login'                    =>  'S\'identifier',
'Not logged in'            =>  'Vous n\'êtes pas identifié.',
'Profile'                =>    '<img style="vertical-align: middle;" src="img/ton_image.png" alt="X"> Profil',
'Logout'                =>    '<img style="vertical-align: middle;" src="img/ton_image.png" alt="X"> Déconnexion',
'Logged in as'            =>    'Connecté en tant que',
'Admin'                    =>    '<img style="vertical-align: middle;" src="img/ton_image.png" alt="X"> Administration',
'Last visit'            =>    'Dernière visite',
'Show new posts'        =>    'Afficher les nouveaux messages depuis la dernière visite',
'Mark all as read'        =>    'Marquer toutes les discussions comme lues',
'Link separator'        =>    '',    // The text that separates links in the navigator

Si ca peut aider.

Rofl mais c'est de plus en plus vilain siffle (je dis pas cela pour être méchant, c'est vos forums vous faites ce que vous voulez smile )

MT a écrit :

Mieux vaudrait donc passer par les css.

100% d'accord big_smile

MT a écrit :

Mais par contre, sur viewforum.php, on ne retrouve plus le idxn, donc pour garder l'icône, il faudrait effectivement faire une une modification pour le rajouter.

Oui et non car on retrouve :

<div id="vf" class="blocktable">

Le seul soucis c'est qu'il n'y a pas de différenciation entre les différents vf donc tous les forums auront la même icône. D'où ma réponse "oui et non" big_smile

norisknimo a écrit :

et pour mettre un icône à côté des titre du menu horizontal (liste membres, recherche, profil, etc ...)  en haut comme sur ton forum ! on fais comment ?

Si cette question s'adresse à moi, c'est simple. Je mets le texte à -9999px (pour l'accessibilité, parce que display:none c'est très vilain aussi), ensuite je fais de jolis rectangle en CSS et j'y incorpore une image coulissante. C'est tout bête donc.

Voici le code si cela t'intéresse :

#brdmenu {
margin:25px 0 0;
border-bottom:1px solid #ADADAD;
}
#brdmenu ul {
height:50px;
margin:0 0 0 10px;
text-align:center;
list-style:none;
}
#brdmenu li a {
height:50px;
float:left;
display:block;
background:url(brdmenu.gif) no-repeat 0 -100px;
border-bottom:1px solid #ADADAD;
text-indent:-9999px;
}
#brdmenu li a:hover {border-bottom:1px solid #EEEEEE;}
li#navindex a {width:102px;background-position:0 0;}
li#navindex a:hover {background-position:0 -50px;}
li#navuserlist a {width:115px;background-position:-102px 0;}
li#navuserlist a:hover {background-position:-102px -50px;}
li#navrules a {width:93px;background-position:-217px 0;}
li#navrules a:hover {background-position:-217px -50px;}
li#navsearch a {width:126px;background-position:-310px 0;}
li#navsearch a:hover {background-position:-310px -50px;}
li#navprofile a {width:87px;background-position:-436px 0;}
li#navprofile a:hover {background-position:-436px -50px;}
li#navadmin a {width:96px;background-position:-523px 0;}
li#navadmin a:hover {background-position:-523px -50px;}
li#navregister a {width:122px;background-position:-619px 0;}
li#navregister a:hover {background-position:-619px -50px;}
li#navlogin a {width:125px;background-position:-741px 0;}
li#navlogin a:hover {background-position:-741px -50px;}
li#navlogout a {width:143px;background-position:-866px 0;}
li#navlogout a:hover {background-position:-866px -50px;}

Pour la brève explication, il n'y a qu'une seule image "brdmenu.gif" que l'on place en fonction des ID des listes. J'utilise une bordure en bas qui change avec le hover, j'aurai pu le faire dans l'image mais ca me fait gagner une ligne entière de pixel, donc quelques octets pour le poids de l'image. big_smile Psychopathe ? Oui et alors !?
Aucune modification du code de punBB, donc parfait pour les futures mises à jour.

Dernière modification par TLP (19-06-2007 11:37:01)

Hors ligne

#17 19-06-2007 11:49:27

.LuD.
Membre

Re : Icone à côté des noms de forums

Dans ton cas TLP, tu utilises un rollover, soit une image qui remplace l'intitulé de chaque menu, et dans notre cas, ce serait une image à côté de cet intitulé.

Bien que les modifications que j'ai faites ont l'air de bidouille, j'attends de voir et/ou comment procéder autrement. Ce n'est qu'une exploration pour le moment (mais qui fonctionne, même si celle-ci en défrise plus d'un!). Des améliorations sont à venir mais dans ce sujet donc.
A part modifier dans ce fichier common, je n'ai pas encore trouvé comment faire..

Je propose que tu ouvres un nouveau topic pour ta modif TLP, qui est forte intéressante, voire mettre à jour le wiki ?

Je suis tout ouï.

@++

.LuD.


kendo-iaido.fr

Hors ligne

#18 19-06-2007 12:26:17

TLP
Habitué actif

Re : Icone à côté des noms de forums

.LuD. a écrit :

Bien que les modifications que j'ai faites ont l'air de bidouille, j'attends de voir et/ou comment procéder autrement. Ce n'est qu'une exploration pour le moment (mais qui fonctionne, même si celle-ci en défrise plus d'un!).

Même si je ne suis pas frisé, cela me fait quand même sursauté big_smile Certes, ta modification fonctionne, mais c'est tellement plus simple avec le CSS car il suffit de faire un padding-left et de mettre une image de fond pour avoir le même effet c'est ce que j'explique au début, le principe est le même.
Explications : http://css.alsacreations.com/Constructi … les-en-CSS

Tu peux aussi, autre méthode, utiliser "list-style-image", plus facile à mettre en place, mais la tabulation dépend des navigateurs.
Explications : http://pompage.net/pompe/cssdezero-5/

Hors ligne

#19 20-06-2007 11:38:07

.LuD.
Membre

Re : Icone à côté des noms de forums

Suite aux conseils de TLP, je vais passer par la feuille de style pour modifier les images à côté des catégories, soit rajouter ceci dans imports/feuilledestyle_cs.css

Danc ce cas présent, il y aurait une image par catégorie, ce qui permettrait de bien les séparer.

#idx1 h2 span, #idx1 h2 span a {
background: transparent url(../../img/image.png) no-repeat 0 0;
padding-left: 25px;
}

Un problème persiste, l'image utilisée dans mon cas fait 22x22px, et dans l'affichage, cette même image est tronquée en bas, et pour résoudre cela, il faudrait définir la div en 22px de haut (j'ai essayé avec witdh: 22px; mais ne fonctionne pas).

Des idées ?

.LuD.


kendo-iaido.fr

Hors ligne

#20 20-06-2007 11:49:40

Ishido
Habitué actif

Re : Icone à côté des noms de forums

.LuD. a écrit :

Un problème persiste, l'image utilisée dans mon cas fait 22x22px, et dans l'affichage, cette même image est tronquée en bas, et pour résoudre cela, il faudrait définir la div en 22px de haut (j'ai essayé avec witdh: 22px; mais ne fonctionne pas).

Des idées ?

.LuD.

width


Chez Wam
Message tapé en Bépo avec un TypeMatrix 2030 USB smile

Hors ligne

#21 20-06-2007 11:52:49

MT
Admin rasé

Re : Icone à côté des noms de forums

Pas la peine de le mettre à la fois sur [c]#idx1 h2 span[/c] et sur [c]#idx1 h2 span a[/c], le premier est suffisant.
Et pour régler la hauteur, c'est height, pas width wink


(s) MT
ex-Apupv
faq recherche
Gra.

Hors ligne

#22 20-06-2007 11:55:15

.LuD.
Membre

Re : Icone à côté des noms de forums

MT a écrit :

Pas la peine de le mettre à la fois sur [c]#idx1 h2 span[/c] et sur [c]#idx1 h2 span a[/c], le premier est suffisant.

big_smile

MT a écrit :

Et pour régler la hauteur, c'est height, pas width wink

siffle, exact, mais cela ne fonctionne pas non plus.:huh:


kendo-iaido.fr

Hors ligne

#23 20-06-2007 11:56:26

Ishido
Habitué actif

Re : Icone à côté des noms de forums

Ouh là, je l'ai même pas vu celui-là, je dois être fatigué...
sad


Chez Wam
Message tapé en Bépo avec un TypeMatrix 2030 USB smile

Hors ligne

#24 20-06-2007 12:03:10

MT
Admin rasé

Re : Icone à côté des noms de forums

Depuis firebug, ça a à peu près marché sur ton forum en ligne.
Mais comme il n'y a pas l'image de fond, c'est sûr que je ne peux pas totalement vérifier !
Mais bon, t'es pas loin de la bonne solution à mon avis.

Edit :
j'oubliais de préciser : il faut mettre un display: block.
ça devrait être mieux big_smile

Dernière modification par MT (20-06-2007 12:04:20)


(s) MT
ex-Apupv
faq recherche
Gra.

Hors ligne

#25 20-06-2007 13:16:46

.LuD.
Membre

Re : Icone à côté des noms de forums

Voilà !!
Merci à tous, j'ai fini les modifs (en local pour le moment, je les ferais en ligne ce soir...) et sans plus attendre les voila, en éspérant que cela puisse aider (pas sûr, certains avaient trouvés bien avant moi big_smile ) :

1- Charger les images correspondantes aux catégories, dans le répertoire upoload/img/

2- Ajouter ces lignes dans la feuille de style dans style/imports/votre_feuille_de_style_cs.css

#idx1 h2 span {
background: transparent url(../../img/image_idx1.png) no-repeat 0 0;
padding-left: 25px;
height: 22px;
display: block;
}

#idx2 h2 span {
background: transparent url(../../img/image_idx2.png) no-repeat 0 0;
padding-left: 25px;
height: 22px;
display: block;
}

#idx3 h2 span {
background: transparent url(../../img/image_idx3.png) no-repeat 0 0;
padding-left: 25px;
height: 22px;
display: block;
}

[...]

#idxX h2 span {
background: transparent url(../../img/image_idxX.png) no-repeat 0 0;
padding-left: 25px;
height: 22px;
display: block;
}

3- infos:
idx1, idx2, idx3, idxX , correspondants à votre ID de votre catégorie et est dans l'ordre d'affichage des catégories..


Yeepee, merci à tous !

.LuD.

Dernière modification par .LuD. (20-06-2007 13:21:08)


kendo-iaido.fr

Hors ligne

Pied de page des forums