Cadre alentours des forum de sujet

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

Résolu Cadre alentours des forum de sujet

Message par Kaela Naoki le Mar 26 Juil 2011 - 4:43

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


Dernière édition par Kaela Naoki le Mer 27 Juil 2011 - 23:18, édité 1 fois

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://otoko-gakuen.forum-canada.com/
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre alentours des forum de sujet

Message par Lixyr le Mar 26 Juil 2011 - 11:17

Bonjour.

@Kaela Naoki a écrit: 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.

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre alentours des forum de sujet

Message par Kaela Naoki le Mar 26 Juil 2011 - 18:28

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 .


Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://otoko-gakuen.forum-canada.com/
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre alentours des forum de sujet

Message par Lixyr le Mar 26 Juil 2011 - 22:53

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





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre alentours des forum de sujet

Message par Kaela Naoki le Mar 26 Juil 2011 - 23:34

D'accord Merci bien Smile

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://otoko-gakuen.forum-canada.com/
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre alentours des forum de sujet

Message par Lixyr le Mer 27 Juil 2011 - 11:40

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.


Like a Star @ heaven 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.

Like a Star @ heaven 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=http://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 :enreg: puis sur la petite croix verte ajout



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

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre alentours des forum de sujet

Message par Kaela Naoki le Mer 27 Juil 2011 - 16:49

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


Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://otoko-gakuen.forum-canada.com/
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre alentours des forum de sujet

Message par Lixyr le Mer 27 Juil 2011 - 18:20

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 :


Like a Star @ heaven 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>



Like a Star @ heaven 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.


Like a Star @ heaven 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 ?

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre alentours des forum de sujet

Message par Kaela Naoki le Mer 27 Juil 2011 - 18:26

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

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://otoko-gakuen.forum-canada.com/
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre alentours des forum de sujet

Message par Lixyr le Mer 27 Juil 2011 - 18:37

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. ::fleur::





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre alentours des forum de sujet

Message par Kaela Naoki le Mer 27 Juil 2011 - 18:38

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

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://otoko-gakuen.forum-canada.com/
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre alentours des forum de sujet

Message par Kaela Naoki le Mer 27 Juil 2011 - 18:47

Oui je te suis ^^

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://otoko-gakuen.forum-canada.com/
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre alentours des forum de sujet

Message par Lixyr le Mer 27 Juil 2011 - 18:54

Okay.

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

Like a Star @ heaven 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.

Like a Star @ heaven 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 ? ::fleur::

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre alentours des forum de sujet

Message par Kaela Naoki le Mer 27 Juil 2011 - 19:34

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
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://otoko-gakuen.forum-canada.com/
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre alentours des forum de sujet

Message par Kaela Naoki le Mer 27 Juil 2011 - 19:41

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

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://otoko-gakuen.forum-canada.com/
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre alentours des forum de sujet

Message par Lixyr le Mer 27 Juil 2011 - 20:00

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)





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre alentours des forum de sujet

Message par Kaela Naoki le Mer 27 Juil 2011 - 23:17

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

Le sujet est Résolu Smile
Cordialement

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://otoko-gakuen.forum-canada.com/
Kaela Naoki 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