|
|
ninadobrevfan
{ Membre }
Messages : 37
| Bonjour, je reviens avec une autre question, j'aimerais savoir comment rassembler les trois partie ou quatre partie qui compose le forum, c'est a dire le bouton qui indique un nouveau message, la description, le nombre de message posté et le dernier message posté. Pour un exemple voici deux forums, je ne souhaite pas connaitre leur code mais simplement comme faire pour tout assemble =) http://www.berkeley-u.com/ ou http://www.providence-people.com/forum.htm
Vous remarquerez aussi que la barre dernier message a disparu, est ce que tout a été supprimer et transférer dans un autre template ?
Merci <3 | | |
|
| |
Kaiji
Blanche-Neige
Messages : 5578
| Bonjour,
Sans être sûre de ma réponse à 100%, je pense qu'il s'agit simplement d'un système de tableau à l'intérieur du template. Les fondateurs de ceux deux forums ont du jouer avec le template index_body et y insérer un tableau. =) | | |
|
| |
.Little Lady
{ Membre actif }
Messages : 564
| Alors je peux t'expliquer comment faire mais ça risque d'être long. | | |
|
| |
ninadobrevfan
{ Membre }
Messages : 37
| Little Lady, je veux bien, c'est pas grave si c'est long =) | | |
|
| |
.Little Lady
{ Membre actif }
Messages : 564
| Alors voici une première partie: Pour commencer, il faut être le Fondateur du forum car il nous faudra modifier les templates. Allez dans le Panneau d'Administration >> Affichage >> Général >> Index_BoxI: - Suppression de la colonne "Derniers Messages" -Pour commencer, nous allons supprimer ce qui sera inutile. Dans votre template, cherchez et supprimez cette ligne. - Code:
-
<th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th> Pour aller plus vite, vous pouvez utilisez Ctrl + F. Ensuite, cherchez ceci: - Code:
-
<td class="row3 over" align="center" valign="middle" height="50"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span> </td> Supprimez ceci: - Code:
-
<td class="row3 over" align="center" valign="middle" height="50"> et ceci: - Code:
-
</td> A ce moment, la colonne "Derniers Messages" n'existe plus sur votre forum. Maintenant, il faut bien mettre le texte de cette colonne quelque part. Je vous propose donc de le mettre dans la case de la description des sous-forums. II: - Replacer les Statistiques -Maintenant, il faut replacer les statistiques. Je vous propose donc de le mettre dans la case de la description des sous-forums. Et pour cela nous avons besoin de la variable représentant ces statistiques; soit: - Code:
-
<span class="gensmall">{catrow.forumrow.LAST_POST}</span> Dans votre template, il vous faut donc localiser l'endroit où nous souhaitons le mettre, c'est-à-dire ici: - Code:
-
<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> <h{catrow.forumrow.LEVEL} class="hierarchy"> <span class="forumlink"> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span> </h{catrow.forumrow.LEVEL}> <span class="genmed">{catrow.forumrow.FORUM_DESC}</span> <span class="gensmall"> <!-- BEGIN switch_moderators_links --> {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS} <!-- END switch_moderators_links --> {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} Une fois que vous avez repéré ce morceau de code, il vous suffit de le remplacer par celui-ci: - Code:
-
<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> <h{catrow.forumrow.LEVEL} class="hierarchy"> <span class="forumlink"> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span> </h{catrow.forumrow.LEVEL}> <table> <tr> <td><span class="genmed">{catrow.forumrow.FORUM_DESC}</span> <span class="gensmall"> <!-- BEGIN switch_moderators_links --> {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS} <!-- END switch_moderators_links --> {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} </td> <td> <div class="messages_sujets_derniers_sujets"> <div class="derniers_sujets"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div> </div> </td> </tr> </table> Vous avez pu vous apercevoir que j'ai ajouté deux div dans le code: messages_sujets_derniers_sujets & derniers_sujets. Ces deux balises vous permettront de personnaliser l'affiche des statistiques avec du CSS. Ça y est, vous avez bien suivi le tuto ?? Alors vous pouvez enregistrer et publier votre template. III: - Personnaliser avec du CSS -Il est évident que cela sera plus joli avec du CSS. Nous allons donc personnaliser tout ça alors préparez-vous. Pour cela, il faut ouvrir votre feuille CSS. Allez donc dans le Panneau d'Administration >> Affichage >> Couleurs >> Feuille de Style CSSMaintenant, il faut mettre la class relative à nos "div" dans le template modifié; soit la class "messages_sujets_derniers_sujets" et la class "derniers_sujets". Bien évidemment, vous pouvez personnaliser à votre façon ces div. - Code:
-
.messages_sujets_derniers_sujets { margin-left: VALEURpx; /*espace entre le bord gauche et la bordure*/ padding-top: VALEURpx; /*espace entre le texte et la bordure du haut*/ padding-left: VALEURpx; /*espace entre le texte et la bordure gauche*/ padding-bottom: VALEURpx; /*espace entre le texte et la bordure du bas*/ padding-right: VALEURpx; /*espace entre le texte et la bordure droite*/ border-top: VALEURpx solid #COULEUR; border-left: VALEURpx solid #COULEUR; border-bottom: VALEURpx solid #COULEUR; -moz-border-radius-topleft: VALEURpx; /*arrondir l'angle gauche du haut*/ -moz-border-radius-bottomleft: VALEURpx;/*arrondir l'angle gauche du bas*/ }
/*affichage derniers messages*/ .derniers_sujets { padding: VALEURpx; /*espace entre le texte et la bordure*/ margin: VALEURpx; /*espace entre le bord et la bordure*/ border: VALEURpx dashed #COULEUR; -moz-border-radius-topleft: VALEURpx; /*arrondir l'angle gauche du haut*/ -moz-border-radius-bottomright: VALEURpx; /*arrondir l'angle droit du bas*/ text-align: center; } | | |
|
| |
ninadobrevfan
{ Membre }
Messages : 37
| Merci beaucoup j'avais un soucis mais finalement j'ai trouvé d'où ce venait, vous aviez oublié de placer cette balise : - Code:
-
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"> Je cite le passage avec la correction pour ceux que ça intéresse. - Spoiler:
- .Little Lady a écrit:
II: - Replacer les Statistiques -
Maintenant, il faut replacer les statistiques. Je vous propose donc de le mettre dans la case de la description des sous-forums.
Et pour cela nous avons besoin de la variable représentant ces statistiques; soit: - Code:
-
<span class="gensmall">{catrow.forumrow.LAST_POST}</span> Dans votre template, il vous faut donc localiser l'endroit où nous souhaitons le mettre, c'est-à-dire ici: - Code:
-
<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> <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"> <h{catrow.forumrow.LEVEL} class="hierarchy"> <span class="forumlink"> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span> </h{catrow.forumrow.LEVEL}> <span class="genmed">{catrow.forumrow.FORUM_DESC}</span> <span class="gensmall"> <!-- BEGIN switch_moderators_links --> {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS} <!-- END switch_moderators_links --> {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} Une fois que vous avez repéré ce morceau de code, il vous suffit de le remplacer par celui-ci: - Code:
-
<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> <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"> <h{catrow.forumrow.LEVEL} class="hierarchy"> <span class="forumlink"> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span> </h{catrow.forumrow.LEVEL}> <table> <tr> <td><span class="genmed">{catrow.forumrow.FORUM_DESC}</span> <span class="gensmall"> <!-- BEGIN switch_moderators_links --> {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS} <!-- END switch_moderators_links --> {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} </td> <td> <div class="messages_sujets_derniers_sujets"> <div class="derniers_sujets"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div> </div> </td> </tr> </table> Vous avez pu vous apercevoir que j'ai ajouté deux div dans le code: messages_sujets_derniers_sujets & derniers_sujets. Ces deux balises vous permettront de personnaliser l'affiche des statistiques avec du CSS.
Ça y est, vous avez bien suivi le tuto ?? Alors vous pouvez enregistrer et publier votre template.
Tout marche parfaitement. J'aurais une dernière question, comment intégrer aussi la partie sur la gauche avec les images des nouveau messages ... et faire en sorte que la partie "titre des catégories" soit plus rataché au bloc prévu ? |
Dernière édition par ninadobrevfan le Mar 22 Juin 2010, 09:48, édité 1 fois | |
|
| |
.Little Lady
{ Membre actif }
Messages : 564
| Tu as finis cette partie ?? Alors je commence à préparer la suite en tuto. | | |
|
| |
ninadobrevfan
{ Membre }
Messages : 37
| Oui oui j'ai fini et j'ai déjà commencer a faire des modifs ^^
Je sais pas si ce que je vais demander fera partie de la suite du tuto mais au cas ou :
Comment intégrer aussi la partie sur la gauche avec les images des nouveau messages ... et faire en sorte que la partie "titre des catégories" soit plus rattaché au bloc prévu ? | | |
|
| |
.Little Lady
{ Membre actif }
Messages : 564
| T'inquiète pas, tout sera prévu. Par contre qu'entends-tu par les titres des catégories soient plus rattachés au bloc prévu ?? | | |
|
| |
ninadobrevfan
{ Membre }
Messages : 37
| je t'avais envoyé l'adresse de mon forum il me semble pour un autre soucis, tu verras les barres verte avec les divers titre comme "contrat de licence", "administration" ... J'aimerais les coller en quelque sorte au cadre beige en dessous avec la description et les derniers messages ... Comme cela tu pourras voir mon avancement ^^ | | |
|
| |
.Little Lady
{ Membre actif }
Messages : 564
| Il faut peut-être que tu supprimes les sauts à la ligne. | | |
|
| |
ninadobrevfan
{ Membre }
Messages : 37
| Surement mais je ne connais pas le nom de cette partie dans le template ^^ j'aimerais l'intégrer dans une class comme la description ou le nombre de message si possible | | |
|
| |
.Little Lady
{ Membre actif }
Messages : 564
| Peux-tu me faire un schéma de ce que tu souhaites parce que là j'ai du mal à voir ce que tu souhaites ?? | | |
|
| |
ninadobrevfan
{ Membre }
Messages : 37
| Alors actuellement j'ai ça : https://2img.net/h/oi50.tinypic.com/22z5sk.jpg
et j'aimerais quelque chose dans ce genre que j'adapterai après en css comme je le souhaite : https://2img.net/h/oi45.tinypic.com/hu5awx.jpg | | |
|
| |
.Little Lady
{ Membre actif }
Messages : 564
| Alors déjà pour corriger la taille du cadre des stats, tu devrais mettre dans ton CSS width: auto;
Pour le reste c'est une organisation en type onglet. Je te fais un tuto dès que possible. | | |
|
| |
ninadobrevfan
{ Membre }
Messages : 37
| Heu merci mais avec une class comme je fais actuellement ça ne peux pas marcher ? Je connais un peu le système en onglet en javascript, j'en ai un pour ma page d'accueil mais y aurai pas plus simple ? Par ce que je veux pas te prendre tout ton temps =) | | |
|
| |
.Little Lady
{ Membre actif }
Messages : 564
| Pour mettre une class à une div ou une span il faut d'abord définir les caractéristiques de cette class donc en mettant width: auto; et height: auto; dans ton CSS à la class appropriée, la largeur et la longueur s'ajusteront automatiquement.
Mais ce ne sont les onglets auxquels tu penses. | | |
|
| |
ninadobrevfan
{ Membre }
Messages : 37
| Tout ceci est déjà fait, j'ai juste besoin de savoir où se trouve la balise du titre de catégorie et si on peux la déplacer juste au dessus du tableau de la description =) Comme sur l'image en fait. C'est pas un onglet en lui même, c'est simplement le CSS qui est comme ça.
Edit : C'est bon j'ai trouver toute seule =)
Me reste plus qu'a savoir pour les image de gauche ^^ | | |
|
| |
.Little Lady
{ Membre actif }
Messages : 564
| Alors cherche dans ton template index_box ceci: Cela correspond aux images de gauche. Supprime ceci: < td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle"> et ceci: < /td> puis replace ceci: où tu le souhaites. | | |
|
| |
ninadobrevfan
{ Membre }
Messages : 37
| Youpi j'ai tout réussi comme je le souhaitais merci infiniment ! Sinon j'aurais une dernière petite interrogation, lorsque j'ai déplacer mon titre de catégorie, tout c'est mis en gras, je peux t'envoyer mes code pour que tu me dises si il y a un problème quelque part car j'ai bien regardé et toutes les balises sont bien fermé pourtant -_- | | |
|
| |
.Little Lady
{ Membre actif }
Messages : 564
| Oui oui y a pas de soucis. | | |
|
| |
ninadobrevfan
{ Membre }
Messages : 37
| Merci je t'envoi ça tout de suite alors.
Sinon pour le credit, je met .Little Lady ? Ou tu as un autre pseudo que tu préfèrerais que je mette. Vu que tu m'as beaucoup aidé, c'est normal que je te crédite donc j'aimerai bien savoir =) | | |
|
| |
.Little Lady
{ Membre actif }
Messages : 564
| Tu peux mettre .Little Lady ou alors .Little C ce sera pareil. | | |
|
| |
ninadobrevfan
{ Membre }
Messages : 37
| Merci =)
J'ai dernier petit soucis, tout es parfaitement comme je le souhaitais sauf que quand j'ai déplacé le titre dans mon template pour qu'il soit au dessus de mon tableau pour les descriptions et derniers messages, tout s'est mis en gras. J'ai demandé a .Little Lady si elle pouvait m'aider et après avoir regarder mon code template et css, elle n'a rien trouvé, je vous met une capture, si vous pensez pouvoir m'aider, envoyer moi un mp et je vous enverrai ces mêmes codes.
Merci d'avance <3
Caps : https://2img.net/h/oi47.tinypic.com/2nw28mc.png | | |
|
| |
Kaiji
Blanche-Neige
Messages : 5578
| Bonjour,
Votre problème est-il résolu ?
| | |
|
| |
Contenu sponsorisé
| |
| |
|