Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[AWESOMEBB] Modifier les en-têtes des catégories


2 participants

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

Noxys
Noxys
https://isomnos-test.forumactif.com/

MessageNoxys 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


Dernière édition par Noxys le Jeu 29 Juil 2021 - 17:05, édité 2 fois

Milouze14 aime ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 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.


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é hinhin .



Noxys
Noxys
https://isomnos-test.forumactif.com/

MessageNoxys 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

Milouze14 aime ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 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:

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

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 ok .

L'aperçu pour les deux première catégories:

[AWESOMEBB] Modifier les en-têtes des catégories 114



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)
Le 2 signifie la deuxième
Code:
.forum.type-table-forum:nth-of-type(2)

Pour la troisième
Code:
.forum.type-table-forum:nth-of-type(3)

Etc etc MDR

Noxys aime ce message

Noxys
Noxys
https://isomnos-test.forumactif.com/

MessageNoxys 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
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 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:

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 ok .
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


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


Dernière édition par Milouze14 le Mar 3 Aoû 2021 - 8:02, édité 1 fois
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 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

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');}
Et il faudra reproduire cela pour chaque catégorie:


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 Valid

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

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 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

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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