AccueilMembres connectés récemment
[AWESOMEBB] Modifier les en-têtes des catégories
Page 1 sur 1 • Partagez
- Noxys
-
Noxys Jeu 29 Juil 2021 - 15:47
- Version du forum :AWESOMEBB
- Templates modifiés :oui
- Navigateur :Chrome
Bonjour à tous !
Ayant résolu mon premier "casse-tête codesque", je me permets d'en ouvrir un second. Je constate en effet que la version AwesomeBB est, contrairement àson ancêtre son aînée la version phpBB2, bien moins riche en tutoriels et codages en libre service.
Voici donc ma deuxième question. Ou plutôt mes deux deuxièmes questions :
1) Comment pourrais-je personnaliser les en-têtes des catégories, en modifiant par exemple la forme du titre, le fond, etc., voire leur mettre une image de fond qui soit différente selon la catégorie ?
2) De la même manière, je souhaiterais également styliser l'affichage des différents forums et sous-forums, en ajoutant entre autres une image d'illustration et du texte. Quelles seraient les codes CSS me permettant de faire tout cela ?
Pour illustrer mes questions, voici le forum en phpBB2 que j'avais construit par le passé (avec l'aide d'un vieil ami qui aujourd'hui ne fait plus ce genre de choses) : https://isomnos.forumsrpg.com/
Je souhaiterais si possible reproduire le même type d'affichage des forums / sous-forums, avec notamment le texte descriptif et l'illustration sur le côté.
Concernant l'affichage des catégorie, en fouillant un peu, je suis tombé par hasard sur celui-ci (https://chocolate-frog.forumactif.org/) qui semble avoir été réalisé sous la version AwesomeBB et qui a un affichage plutôt esthétique des différentes catégories.
Ainsi, je souhaiterais savoir, pour la version AwesomeBB, quels codes me permettraient de recréer quelque chose de similaire aux deux exemples ci-dessus, et pour l'affichage des catégories (en-têtes avec images et texte stylisé par exemple), et pour l'affichage des différents forums / sous-forums (texte descriptif et illustrations).
Merci beaucoup par avance pour vos lumières une fois de plus ! :)
Noxys ~ / Stéphane
Ayant résolu mon premier "casse-tête codesque", je me permets d'en ouvrir un second. Je constate en effet que la version AwesomeBB est, contrairement à
Voici donc ma deuxième question. Ou plutôt mes deux deuxièmes questions :
1) Comment pourrais-je personnaliser les en-têtes des catégories, en modifiant par exemple la forme du titre, le fond, etc., voire leur mettre une image de fond qui soit différente selon la catégorie ?
Pour illustrer mes questions, voici le forum en phpBB2 que j'avais construit par le passé (avec l'aide d'un vieil ami qui aujourd'hui ne fait plus ce genre de choses) : https://isomnos.forumsrpg.com/
Je souhaiterais si possible reproduire le même type d'affichage des forums / sous-forums, avec notamment le texte descriptif et l'illustration sur le côté.
Concernant l'affichage des catégorie, en fouillant un peu, je suis tombé par hasard sur celui-ci (https://chocolate-frog.forumactif.org/) qui semble avoir été réalisé sous la version AwesomeBB et qui a un affichage plutôt esthétique des différentes catégories.
Ainsi, je souhaiterais savoir, pour la version AwesomeBB, quels codes me permettraient de recréer quelque chose de similaire aux deux exemples ci-dessus, et pour l'affichage des catégories (en-têtes avec images et texte stylisé par exemple), et pour l'affichage des différents forums / sous-forums (texte descriptif et illustrations).
Merci beaucoup par avance pour vos lumières une fois de plus ! :)
Noxys ~ / Stéphane
Milouze14 aime ce message
- Milouze14
Fondateur -
Milouze14 Jeu 29 Juil 2021 - 16:51
Hello Stéphane,
alors sur l'entraide, ce sera une question par sujet cher ami.
C'est bien plus explicite lors de la recherche d'un sujet quelconque.
Merci de fournir le lien du forum dans ton profil comme le spécifie le règlement.
Si je ne vois pas ton forum, je ne pourrais t'aider déjà sur ce point car il est surement déjà personnalisé
.
alors sur l'entraide, ce sera une question par sujet cher ami.
C'est bien plus explicite lors de la recherche d'un sujet quelconque.
Merci de fournir le lien du forum dans ton profil comme le spécifie le règlement.
Comment pourrais-je personnaliser les en-têtes des catégories,
en modifiant par exemple la forme du titre,
le fond, etc.
voire leur mettre une image de fond qui soit différente selon la catégorie ?
Si je ne vois pas ton forum, je ne pourrais t'aider déjà sur ce point car il est surement déjà personnalisé
.- Noxys
-
Noxys Jeu 29 Juil 2021 - 17:05
Hello Phil!
En effet, j'ai voulu aller un peu vite... ^^'
J'ai donc édité le titre en "Modifier les en-têtes des catégories" pour commencer avec ce premier point !
J'ai également modifié dans mon profil le lien menant à mon forum (qui n'était pas bon). Je le remets ici au cas où : https://isomnos-test.forumactif.com/
Ce forum me sert surtout à expérimenter mille et une choses en vue de les intégrer à mon forum d'origine (iSomnos, dont le lien a été donné un peu plus haut).
Je reprends donc ma question : comment pourrai-je modifier les en-têtes des différents catégories, leur ajouter une image, styliser le texte, voire même attribuer une image particulière selon la catégorie ! :)
Merci beaucoup par avance pour vos retours, et désolé pour le petit contretemps !
Noxys ~ / Stéphane
En effet, j'ai voulu aller un peu vite... ^^'
J'ai donc édité le titre en "Modifier les en-têtes des catégories" pour commencer avec ce premier point !
J'ai également modifié dans mon profil le lien menant à mon forum (qui n'était pas bon). Je le remets ici au cas où : https://isomnos-test.forumactif.com/
Ce forum me sert surtout à expérimenter mille et une choses en vue de les intégrer à mon forum d'origine (iSomnos, dont le lien a été donné un peu plus haut).
Je reprends donc ma question : comment pourrai-je modifier les en-têtes des différents catégories, leur ajouter une image, styliser le texte, voire même attribuer une image particulière selon la catégorie ! :)
Merci beaucoup par avance pour vos retours, et désolé pour le petit contretemps !
Noxys ~ / Stéphane
Milouze14 aime ce message
- Milouze14Fondateur
-
Milouze14 Jeu 29 Juil 2021 - 19:09
Re Stéphane,
alors tout d'abord, merci pour ta compréhension.
On peut avec ce style et ce pour les deux premières catégories:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajouter ceci:
Penser a cliquer sur le bouton![[AWESOMEBB] Modifier les en-têtes des catégories Sans_t10](https://i.servimg.com/u/f87/11/26/21/37/sans_t10.png)
Tout est commenté, il faut donc modifié les images de fond (trouvé sur le FDF) et mettre les couleurs en du fond de l'image
.
L'aperçu pour les deux première catégories:
![[AWESOMEBB] Modifier les en-têtes des catégories 114](https://i.servimg.com/u/f57/20/34/14/42/114.jpg)
Je pense que tu as dû saisir la fonctionnalité de la css concernant la première, deuxième:
Le 1 signifie la première
Pour la troisième
Etc etc
alors tout d'abord, merci pour ta compréhension.
On peut avec ce style et ce pour les deux premières catégories:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajouter ceci:
- Code:
/*Image premiere categorie*/
.forum.type-table-forum:nth-of-type(1) .forum-header
{
background-color:transparent!important;
background-image:url(https://i.servimg.com/u/f39/13/73/53/17/52493910.jpg) ;
background-repeat:no-repeat;
background-position:center center;
background-size: 100%;
color:white!important;
}
/*Apparence titre premiere categorie*/
.forum.type-table-forum:nth-of-type(1) .category-title h2
{
font-family: Orbitron, cursive;
font-weight: 400;
letter-spacing: 3px;
text-shadow: 0 0 1px #6f737d;
color:white!important;
text-transform: uppercase;
}
/*Les petites images premiere categorie*/
.forum.type-table-forum:nth-of-type(1) .forum-header .material-icons
{
color:white!important;
}
/*Image deuxieme categorie*/
.forum.type-table-forum:nth-of-type(2) .forum-header
{
background-color:transparent!important;
background-image:url(https://i.servimg.com/u/f39/13/73/53/17/15065510.jpg) ;
background-repeat:no-repeat;
background-position:center center;
background-size: 100%;
color:orange!important;
}
/*Apparence titre deuxieme categorie*/
.forum.type-table-forum:nth-of-type(2) .category-title h2
{
font-family: Orbitron, cursive;
font-weight: 400;
letter-spacing: 3px;
text-shadow: 0 0 1px #6f737d;
color:orange!important;
text-transform: uppercase;
}
/*Les petites images deuxieme categorie*/
.forum.type-table-forum:nth-of-type(2) .forum-header .material-icons
{
color:orange!important;
}
Penser a cliquer sur le bouton
![[AWESOMEBB] Modifier les en-têtes des catégories Sans_t10](https://servimg.com/r/8711262137/sans_t10.png)
Tout est commenté, il faut donc modifié les images de fond (trouvé sur le FDF) et mettre les couleurs en du fond de l'image
.L'aperçu pour les deux première catégories:
![[AWESOMEBB] Modifier les en-têtes des catégories 114](https://servimg.com/r/5720341442/114.jpg)
Je pense que tu as dû saisir la fonctionnalité de la css concernant la première, deuxième:
Le 1 signifie la première
- Code:
.forum.type-table-forum:nth-of-type(1)
- Code:
.forum.type-table-forum:nth-of-type(2)
Pour la troisième
- Code:
.forum.type-table-forum:nth-of-type(3)
Etc etc
Noxys aime ce message
- Noxys
-
Noxys Lun 2 Aoû 2021 - 15:04
Salut salut Phil !
Merci beaucoup pour cette réponse, cela me permet déjà d'y voir un peu plus clair et de comprendre quelles lignes me seront utiles pour faire mes bidouillages !
J'ai toutefois un "hic" : sur le code que tu m'as envoyé, il y a donc deux catégories, avec pour chacune une image précise. Or, dans mon cas, il semble que la catégorie 1 n'existe pas (du moins sur mon forum) puisque le code de la seconde (image 2) s'applique à la catégorie 1 (sur mon forum).
Ce n'est pas très clair, mais si je reformule via une question, peut-être que cela sera plus limpide : si jamais je décide de supprimer toutes mes catégories, et que je repars de zéro sur le plan / la structure du forum, est-ce que cela change l'ordre ou les numéros de chaque catégorie ?
Par exemple : au moment de la création du forum, il y a si je ne dis pas de bêtises une ou deux catégorie(s), qui doivent donc être #1 et #2. Si je les supprime pour en recréer, est-ce que cela repart automatiquement à #3, puis #4 et ainsi de suite ?
Merci d'avance pour ton retour ! :)
Noxys ~ / Stéphane
Merci beaucoup pour cette réponse, cela me permet déjà d'y voir un peu plus clair et de comprendre quelles lignes me seront utiles pour faire mes bidouillages !
J'ai toutefois un "hic" : sur le code que tu m'as envoyé, il y a donc deux catégories, avec pour chacune une image précise. Or, dans mon cas, il semble que la catégorie 1 n'existe pas (du moins sur mon forum) puisque le code de la seconde (image 2) s'applique à la catégorie 1 (sur mon forum).
Ce n'est pas très clair, mais si je reformule via une question, peut-être que cela sera plus limpide : si jamais je décide de supprimer toutes mes catégories, et que je repars de zéro sur le plan / la structure du forum, est-ce que cela change l'ordre ou les numéros de chaque catégorie ?
Par exemple : au moment de la création du forum, il y a si je ne dis pas de bêtises une ou deux catégorie(s), qui doivent donc être #1 et #2. Si je les supprime pour en recréer, est-ce que cela repart automatiquement à #3, puis #4 et ainsi de suite ?
Merci d'avance pour ton retour ! :)
Noxys ~ / Stéphane
- Milouze14Fondateur
-
Milouze14 Mar 3 Aoû 2021 - 7:10
Hello Stéphane
Je ne vois aucun style donné sur ton fofo de tests!!!!! :
https://isomnos-test.forumactif.com/
Pour tes questions:
La css va trouver le premier:
Donc si tu mets ta dernière catégorie en premier , c'est elle qui aura l'apparence désormais .
Il faut simplement avoir ce style dans ton P.A:
Général/Catégories et Forums/Catégories et Forums
![[AWESOMEBB] Modifier les en-têtes des catégories 117](https://i.servimg.com/u/f57/20/34/14/42/117.jpg)
Il faut juste déplacer les forums qui sont en dehors d'une catégorie
et les placer dans l'une d'entre elle.
Mais à priori, ce n'est pas le cas sur ton fofo de tests:
https://isomnos-test.forumactif.com/
Tout est bon il faut donc voir avec la css utilisée.
Merci de me la fournir si tu as modifié celle ci.
Ensuite il vaut mieux utiliser un script et prendre le lien du premier forum et attribuer un id à chaque catégorie.
Par contre il est donc obligatoire que tous les forums soient visible par toutes les personnes visitant ton forum (invité et membre).
Voir le script:
https://www.milouze14.com/t33086-awesomebb-modifier-les-en-tetes-des-categories#631473
Je ne vois aucun style donné sur ton fofo de tests!!!!! :
https://isomnos-test.forumactif.com/
Pour tes questions:
est-ce que cela change l'ordre ou les numéros de chaque catégorie ?
La css va trouver le premier:
- Code:
.forum.type-table-forum:nth-of-type(1)
Donc si tu mets ta dernière catégorie en premier , c'est elle qui aura l'apparence désormais
.Il faut simplement avoir ce style dans ton P.A:
Général/Catégories et Forums/Catégories et Forums
![[AWESOMEBB] Modifier les en-têtes des catégories 117](https://servimg.com/r/5720341442/117.jpg)
Il faut juste déplacer les forums qui sont en dehors d'une catégorie
et les placer dans l'une d'entre elle.
Mais à priori, ce n'est pas le cas sur ton fofo de tests:
https://isomnos-test.forumactif.com/
Tout est bon il faut donc voir avec la css utilisée.
Merci de me la fournir si tu as modifié celle ci.
Ensuite il vaut mieux utiliser un script et prendre le lien du premier forum et attribuer un id à chaque catégorie.
Par contre il est donc obligatoire que tous les forums soient visible par toutes les personnes visitant ton forum (invité et membre).
Voir le script:
https://www.milouze14.com/t33086-awesomebb-modifier-les-en-tetes-des-categories#631473
- Milouze14Fondateur
-
Milouze14 Mar 3 Aoû 2021 - 8:02
Partons d'un script avec les explications:
L'idée et d'être certain de mettre un fond spécifique à une catégorie.
Il faut donc laisser le forum qui servira de base comme le montre la capture
car c'est lui qui va trouver la catégorie et lui attribuer un identifiant.
Donc il faudra laisser le forum "Forum #1" dans cette catégorie .
et ainsi de suite pour tous les autres:
"Codex" dans la deuxième catégorie.
"Présentations" dans la troisième.
"Embarcadère - Début du RP" dans la quatrième
"Dream Nexus" dans la cinquième
"Flood" dans la sixième
"Archives" dans la septième.
Il faut donc juste survoler le lien du premier forum de la catégorie et trouver le chiffre ou le nombre.
Exemple pour ta première catégorie:
![[AWESOMEBB] Modifier les en-têtes des catégories 118](https://i.servimg.com/u/f57/20/34/14/42/118.jpg)
On voit donc le nombre 33 entre le f et le petit tiret.
Ensuite dans le script on va rechercher le forum via une variable "a":
Je dépose donc le chiffre ou le nombre trouvé 33 entre le f et le petit tiret (important)
Si j'ai le chiffre ou le nombre alors j'attribue l'identifiant:
Le script est prêt pour ton forum de tests:
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur l'index.
Déposer ceci:
Penser a cliquer sur le bouton
La css deviendra lors:
Pour la première catégorie:
Pour la deuxième catégorie:
et ainsi de suite..
L'avantage avec cette structure et que tu pourras déplacer les catégories comme bon te semble sans que son apparence change.
L'idée et d'être certain de mettre un fond spécifique à une catégorie.
Il faut donc laisser le forum qui servira de base comme le montre la capture
car c'est lui qui va trouver la catégorie et lui attribuer un identifiant.
Donc il faudra laisser le forum "Forum #1" dans cette catégorie .
et ainsi de suite pour tous les autres:
"Codex" dans la deuxième catégorie.
"Présentations" dans la troisième.
"Embarcadère - Début du RP" dans la quatrième
"Dream Nexus" dans la cinquième
"Flood" dans la sixième
"Archives" dans la septième.
Il faut donc juste survoler le lien du premier forum de la catégorie et trouver le chiffre ou le nombre.
Exemple pour ta première catégorie:
![[AWESOMEBB] Modifier les en-têtes des catégories 118](https://servimg.com/r/5720341442/118.jpg)
On voit donc le nombre 33 entre le f et le petit tiret.
Ensuite dans le script on va rechercher le forum via une variable "a":
Je dépose donc le chiffre ou le nombre trouvé 33 entre le f et le petit tiret (important)
- Code:
var a=$(this).find('a[href^="/f33-"]').length;
Si j'ai le chiffre ou le nombre alors j'attribue l'identifiant:
- Code:
if(a){$this.attr('id','C_1');}
Le script est prêt pour ton forum de tests:
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur l'index.
Déposer ceci:
- Code:
$(function(){
$('div.forum-description').each(function(){
var $this=$(this).closest('.forum.type-table-forum');
var a=$(this).find('a[href^="/f33-"]').length;
var b=$(this).find('a[href^="/f2-"]').length;
var c=$(this).find('a[href^="/f9-"]').length;
var d=$(this).find('a[href^="/f15-"]').length;
var e=$(this).find('a[href^="/f27-"]').length;
var f=$(this).find('a[href^="/f28-"]').length;
var g=$(this).find('a[href^="/f32-"]').length;
if(a){$this.attr('id','C_1');}
if(b){$this.attr('id','C_2');}
if(c){$this.attr('id','C_3');}
if(d){$this.attr('id','C_4');}
if(e){$this.attr('id','C_5');}
if(f){$this.attr('id','C_6');}
if(g){$this.attr('id','C_7');}
});});
Penser a cliquer sur le bouton
La css deviendra lors:
Pour la première catégorie:
- Code:
div#C_1
Pour la deuxième catégorie:
- Code:
div#C_2
et ainsi de suite..
L'avantage avec cette structure et que tu pourras déplacer les catégories comme bon te semble sans que son apparence change.
- Code:
/*Image premiere categorie*/
div#C_1 .forum-header
{
background-color:transparent!important;
background-image:url(https://i.servimg.com/u/f39/13/73/53/17/52493910.jpg) ;
background-repeat:no-repeat;
background-position:center center;
background-size: 100%;
color:white!important;
}
/*Apparence titre premiere categorie*/
div#C_1 .category-title h2
{
font-family: Orbitron, cursive;
font-weight: 400;
letter-spacing: 3px;
text-shadow: 0 0 1px #6f737d;
color:white!important;
text-transform: uppercase;
}
/*Les petites images premiere categorie*/
div#C_1 .forum-header .material-icons
{
color:white!important;
}
/*Image deuxieme categorie*/
div#C_2 .forum-header
{
background-color:transparent!important;
background-image:url(https://i.servimg.com/u/f39/13/73/53/17/15065510.jpg) ;
background-repeat:no-repeat;
background-position:center center;
background-size: 100%;
color:orange!important;
}
/*Apparence titre deuxieme categorie*/
div#C_2 .category-title h2
{
font-family: Orbitron, cursive;
font-weight: 400;
letter-spacing: 3px;
text-shadow: 0 0 1px #6f737d;
color:orange!important;
text-transform: uppercase;
}
/*Les petites images deuxieme categorie*/
div#C_2 .forum-header .material-icons
{
color:orange!important;
}
- Milouze14Fondateur
-
Milouze14 Sam 7 Aoû 2021 - 6:14
Hello
Entraide corbeillée
5 jours sans réponse de ta part
Merci de lire à nouveau le règlement.
Un avertissement reçu
Entraide corbeillée
5 jours sans réponse de ta part
Merci de lire à nouveau le règlement.
Un avertissement reçu
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum