Cadre alentours des forum de sujet

[Kaela Naoki]

Bonjour , j'aimerais avoir de l'aide pour faire quelques chose comme ceci pour mon forum .

Spoiler:

Ou peut être quelques chose comme cela ,

Spoiler:

Serais ce possible ?

Quelques renseignement : Mon forum est de type PHBB . Je suis la fondatrice et je l'utilise normalement avec Firefox .
http://midori.rpg-guild.org/forum

[Lixyr]

Bonjour.

Mon forum est de type PHBB .

Mais encore ? Phpbb2, je présume ?


Pour faire ceci, il faudrait que je sache si vous avez déjà modifié votre template index_box.
Ensuite, il me faudrait quelques informations :

Les titres des forums, vous les voulez en image, c'est bien ça ?
Avez-vous ces images ?

Ensuite, voulez vous des couleurs particulières pour les cadres ? Ou des dimensions ? Des couleurs etc ?


Cordialement.

[Kaela Naoki]

Oui je pense que C'est Phpbb2 .

Pour la Template Index_Box je ne l'ai pas encore modifier. Hum pour les titres des forum je ne l'ai veux pas particulièrement en images mais j'aimerais que l'écriture avec le nom du forum soit plus grosse et sur la ligne du forum si possible .

Et bien pour les cadres , j'aimerais qu'il ne déforme pas le forum et qu'il soit de couleur rouge ou gris .

[Lixyr]

D'accord, très bien. J'explique ça demain.

[Kaela Naoki]

D'accord Merci bien

[Lixyr]

Alors, modification du template index_box :


Je vais expliquer tout cela pas à pas, avec vous, pour que ça profite à un maximum, et que l'on puisse comprendre un peu ce template, puisqu'il n'a pas été modifié, encore.


Alors déjà, y voir plus clair

vous allez rechercher cette ligne :

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

C'est le tableau de base qui entoure les catégories et englobe tout le contenu qui va nous servir dans les futurs modification. Pour y voir clair, vous allez afficher les bordures en modifiant border="0" par border="1". Les bordures entières seront ainsi affichées : que ce soit les lignes et les cellules, et ainsi, vous pourrez comprendre ce que je dis.

Ensuite, on va séparer les cellules, en modifiant cellspacing="1", qui, si on comprend bien l'anglais, quoi que là c'est relativement évident, parle de l'espace entre les cellules, par cellspacing="10"

Maintenant, enregistrez votre template, et regardez ce que ça donne.

Maintenant, on va retirer toute la ligne où sont inscrit : messages, sujets et derniers messages, pour ne garder que le titre des catégories.

Vous recherchez ces lignes :

<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
<th nowrap="nowrap" width="50">{L_TOPICS}</th>
<th nowrap="nowrap" width="50">{L_POSTS}</th>
<th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
</tr>

les balises tr correspondent à une ligne dans un tableau, et les balises td à une cellule. Les balises th à des titres de cellules.

Ici, nous avons :
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th> : cette ligne correspond au titre de la catégorie
<th nowrap="nowrap" width="50">{L_TOPICS}</th> : cette ligne correspond au nombre de sujets
<th nowrap="nowrap" width="50">{L_POSTS}</th> : cette ligne correspond au nombre de message
<th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th> : cette ligne correspond aux statistiques du dernier message.

Vous retirez donc les trois titres qui ne servent à rien, dans votre cas :

<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
<th nowrap="nowrap" width="50">{L_TOPICS}</th>
<th nowrap="nowrap" width="50">{L_POSTS}</th>
<th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
</tr>

Maintenant, si vous avez bien regardé, en dessous de vos titres se trouvent cinq cellules, dans l'ordre respectif :
- l'image statuant le message : nouveau, verrouillé etc
- la description du forum avec le titre
- le nombre de sujets
- le nombre de messages
- les statistiques du dernier message

Ça nous fait cinq cellules. Comme au dessus nous avons retiré des cellules de titres (quatre) pour ne plus en avoir qu'une seule, il faudra que cette dernière cellule qui vous reste, et qui se trouve être la cellule contenant le titre de la catégorie, prenne la place à l'horizontale des cinq cellules qui se trouvent en dessous (pour plus de compréhension sur les tableaux, allez lire ce [url=https://forum.forumactif.com/t308025-codes-css]sujet[/urll])

Donc il faut modifier la dernière cellule restante, de sorte qu'elle prenne à l'horizontale la place de cinq cellule.
On va donc modifier ceci :

<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>

par ceci :

<th colspan="5" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>

Vous enregistrez.
(pensez à enregistrer souvent votre template et à regarder ce que ça donne, pour bien comprendre la théorie par la pratique et les modifications que ça apporte.)
ps : on enregistre un template en cliquant sur puis sur la petite croix verte



Est-ce que ça va pour l'instant ?

[Kaela Naoki]

Pour l'instant ça me donne ceci , http://midori.rpg-guild.org/forum?tt=1
J'ai été capable de bien vous suivre .

[Lixyr]

Alors, ensuite, si j'en suis votre schéma, vous ne souhaitez voir apparaitre que deux cellules précises :
- la description des forums
- le dernier message posté

Donc, retour dans le template index_box :


nous allons retirer les trois cellules qui sont en trop : le nombres de sujets et de messages, qui sont ces cellules-ci :

nombre de sujet :

<td class="row3" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.TOPICS}</span>
</td>

nombre de messages :

<td class="row2" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.POSTS}</span>
</td>

et la cellule contenant l'image statuant le forum :

<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>

Vous enlevez ces trois cellules, et pour que le titre des catégories s'affiche correctement, on va modifier la ligne du titre de façon à ce qu'il ne prenne la plus la place horizontalement que pour deux cellules :

<th colspan="5" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>

<th colspan="2" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>

Ensuite, si on regarde bien, la cellule de droite contenant les statistiques est toute compactée. C'est à cause de la cellule contenant la description, qui prend toute la place, on va donc modifier cela :

<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink"> [...etc]

le width permet d'indiquer la place que prend la cellule à l'horizontale : la largeur.
Ici, nous allons mettre une valeur plus petite, comme 75. Mais vous pouvez mettre ce qui vous arrange. ^^

<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="75%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink"> [...etc]

et on enregistre.


ensuite, on va arrondir les cellules :

Pour cela, on va modifier les classes déjà prédéfinies à ces cellules pour avoir nos propres classes, qu'on pourra modifier via le css, directement.

pour les descriptions :

<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="75%" height="50">

mettez par exemple : arrondis1

<td class="arrondis1" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="75%" height="50">

pour les statistiques du dernier message :

<td class="row3 over" align="center" valign="middle" height="50">

mettez par exemple arrondis2

<td class="arrondis2" align="center" valign="middle" height="50">

et enregistrez.

Ensuite, dans le css (panneau d'administration >> affichage >> couleurs >> feuille de style css), ajoutez ceci :

Code:

.arrondis1 {border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;}

.arrondis2 {border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;}

vous remarquerez que chaque classe se trouve devant un point. C'est ce qui indique, justement, en css, que c'est une classe. On retrouve bien les deux classes arrondis1 et arrondis2, avec le code entre crochet : le border-radius à 20px pour un arrondis de 20px. Les autres codes sont pour que ça marchent sous d'autres navigateurs.

Vous enregistrez.

et pour que ce soit plus joli à regarder, vous pouvez

*mettre une bordure (à ajouter dans le css) :

Code:

border:1px solid black;

*mettre un espace entre la bordure et le texte :

Code:

padding:10px;

*centrer le texte :

Code:

text-align:center;

etc.

Jusque là tout va bien ?

[Kaela Naoki]

Est ce possible de laissée l'images statuant le forum dans le tout ?

[Lixyr]

Oui. Si vous avez compris mes explications, normalement, vous devriez réussir à la laisser.

- garder la cellule correspondante
- modifier la ligne du titre des catégories de façon à ce qu'elle prenne, du coup, non pas la place de deux cellules à l'horizontale, mais de trois.

Essayez.

[Kaela Naoki]

Oui je l'ai laissée et j'ai changer le 5 pour un 3 au lieu d'un deux ^^

[Kaela Naoki]

Oui je te suis ^^

[Lixyr]

Okay.

Alors ... que reste-t-il à faire ?

mettre le titre du forum au dessus du cadre :

recherchez ce passage dans le template :

<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

</span>

on reconnait la ligne de part la variable {catrow.forumrow.FORUM_NAME}

On va la déplacer de sorte qu'elle apparaisse au dessus du cadre.

Cherchez cette balise :

<!-- BEGIN forumrow -->

on va, en dessous, rajouter une ligne avec une cellule (qui prendra horizontalement la place de trois cellules) pour y mettre le code du titre des forums :

<!-- BEGIN forumrow -->
<tr><td colspan="3">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

</span>
</td></tr>

vous enregistrez.

Retirez le fond du titre des catégories

Dans votre css, ajoutez ceci :

Code:

.secondarytitle {background:none !important;}

secondarytitle étant la classe du titre des catégories :

<th colspan="2" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>

et background un code permettant de stipuler comment est le fond.


Voilà donc, pour le tout globale.

Voyez-vous quelque chose à peaufiner maintenant ?

[Kaela Naoki]

D'accord je vois ..Hum j'aimerais pouvoir changer les écritures et les grossir (Celle du nom du forum et de la Catégorie)

[Kaela Naoki]

J'aimerais également metre le fond transparent ou noir pour qu'il ne reste que les bulle et l'image.

[Lixyr]

Pour les écritures il suffit de mettre dans le css :

Code:

.secondarytitle {font-family:POLICE_DU_TITRE;
font-size:TAILLEpx;}

et

Code:

.forumlink a {font-family:POLICE_DU_TITRE;
font-size:TAILLEpx;}

pour le fond il suffit de mettre dans le css de la cellule concernée :

Code:

background-color:#0000; (pour noir)

Code:

background-color:transparent; (pour transparent)

[Kaela Naoki]

Je vois Merci
Je pense être capable de continuer seule pour améliorée ^^
J'en ai beaucoup appris alors merci beaucoup

Le sujet est Résolu
Cordialement