AccueilMembres connectés récemment
[PUNBB] Codage catégorie
Page 1 sur 1 • Partagez
- croklivre
-
croklivre Mer 27 Mai 2020 - 16:06
- Version du forum :PUNBB
- Templates modifiés :oui
- Navigateur :Firefox
Coucou,
J'ai vu un truc carrément cool que je n'aurai pas du voir.
J'aimerai que les catégories soient pareil si cela est faisable. Il est trop beau ce style.
Avec les images à gauche qui changent de couleurs et les sous forums qui coulissent vers la droite.
Comme ici https://another-day.forum-canada.com/
Merci d'avance,
Bon mercredi.
J'ai vu un truc carrément cool que je n'aurai pas du voir.
J'aimerai que les catégories soient pareil si cela est faisable. Il est trop beau ce style.
Avec les images à gauche qui changent de couleurs et les sous forums qui coulissent vers la droite.
Comme ici https://another-day.forum-canada.com/
Merci d'avance,
Bon mercredi.
- Milouze14
Fondateur -
Milouze14 Mer 27 Mai 2020 - 17:48
Hello Christelle,
je ne suis pas fan de copier le travail des autres, je préfère travailler sur l'existant et
donner mes propres envies( enfin sur mon fofo).
Donc, il faut que tu choisisses ce que tu souhaites réellement sur ton fofo avec l'apparence actuelle.
De plus il faut avoir beaucoup de connaissances en C.S.S afin de palier au codage et design du fofo et je crois que ce n'est pas ton fort sur ce point.
Le forum que tu mentionnes est une version PHPBB2 et tu as une version PUNBB donc la structure est totalement différente.
je ne suis pas fan de copier le travail des autres, je préfère travailler sur l'existant et
donner mes propres envies( enfin sur mon fofo).
Donc, il faut que tu choisisses ce que tu souhaites réellement sur ton fofo avec l'apparence actuelle.
De plus il faut avoir beaucoup de connaissances en C.S.S afin de palier au codage et design du fofo et je crois que ce n'est pas ton fort sur ce point.
Le forum que tu mentionnes est une version PHPBB2 et tu as une version PUNBB donc la structure est totalement différente.
.
- croklivre
-
croklivre Ven 29 Mai 2020 - 17:54
Coucou Phil,
j'ai mis du temps à savoir ce que je voulais vraiment et à savoir si c'est faisable.
J'ai fait une petite ébauche j’espère que c'est bien expliqué.
J'aimerai bien que les sous-forums soient recouvert d'un onglet coulissant vers la droite. Pour que les membres le sache noté en bas à gauche sur l'onglet "sous-fourms"
Que toutes les catégories soient de la même dimensions. Tout dépend des sous-forums.
Le nom des catégories centrées.
J'espère que l'image t'aidera.
![[PUNBB] Codage catégorie Sf10](https://i.servimg.com/u/f48/20/21/78/12/sf10.png)
Les images à gauche des catégories est-ce possible de les faire changer de couleur au passage de la souris ? Du noir et blanc vers la couleur originale de l'image.
Merci d'avance pour ton aide
j'ai mis du temps à savoir ce que je voulais vraiment et à savoir si c'est faisable.
J'ai fait une petite ébauche j’espère que c'est bien expliqué.
J'aimerai bien que les sous-forums soient recouvert d'un onglet coulissant vers la droite. Pour que les membres le sache noté en bas à gauche sur l'onglet "sous-fourms"
Que toutes les catégories soient de la même dimensions. Tout dépend des sous-forums.
Le nom des catégories centrées.
J'espère que l'image t'aidera.
Les images à gauche des catégories est-ce possible de les faire changer de couleur au passage de la souris ? Du noir et blanc vers la couleur originale de l'image.
Merci d'avance pour ton aide
- Milouze14Fondateur
-
Milouze14 Ven 29 Mai 2020 - 18:42
Coucou Christelle,
peux tu me dire comment la niveau de compression :
Affichage/Page d'acceuil/ Structure et hiérarchie/Niveau de compression de l'index
Conserver les catégories sur l'index :
et
Séparer les catégories sur l'index :
L'image que tu mentionnes à gauche correspond à la description de chaque forum, en as tu actuellement ?
Du noir et blanc à la couleur initiale,
ce ne sera pas possible mais d'une opacité important à zéro oui
Je ne vois pas la case "Dernier messages"?
Je vais m’atteler à ta demande chère amie.
peux tu me dire comment la niveau de compression :
Affichage/Page d'acceuil/ Structure et hiérarchie/Niveau de compression de l'index
Conserver les catégories sur l'index :
et
Séparer les catégories sur l'index :
L'image que tu mentionnes à gauche correspond à la description de chaque forum, en as tu actuellement ?
Les images à gauche des catégories est-ce possible de les faire changer de couleur au passage de la souris ? Du noir et blanc vers la couleur originale de l'image.
Du noir et blanc à la couleur initiale,
ce ne sera pas possible mais d'une opacité important à zéro oui
Je ne vois pas la case "Dernier messages"?
Je vais m’atteler à ta demande chère amie.
- croklivre
-
croklivre Ven 29 Mai 2020 - 20:21
Recoucou Phil,
la compression est celle d'en bas, en complet.
C'est des images provisoires, je mettrai des images illustrées. J'aimerai qu'elles soient dans un beau petit cadre.
Je suis ok pour l'opacité.
Les images il les faut de suite ?
Je n'ai pas mis la case derniers messages car je ne veux pa qu'elle soit cachée par l'onglet.
Ton aide m'est précieuse cher ami.
Bonne soirée et
la compression est celle d'en bas, en complet.
C'est des images provisoires, je mettrai des images illustrées. J'aimerai qu'elles soient dans un beau petit cadre.
Je suis ok pour l'opacité.
Les images il les faut de suite ?
Je n'ai pas mis la case derniers messages car je ne veux pa qu'elle soit cachée par l'onglet.
Ton aide m'est précieuse cher ami.
Bonne soirée et
- Milouze14Fondateur
-
Milouze14 Sam 30 Mai 2020 - 3:51
Coucou Christelle,
Hum, oui ce serait un avancement.
Donc si je me fie à ton dessin, on ne n'affiche pas ce contenu ?
Je vais voir ce que je peux faire et reviendrais vers toi ensuite car
il me manque beaucoup d'informations pour avancer Christelle.
Les images il les faut de suite ?
Hum, oui ce serait un avancement.
Je n'ai pas mis la case derniers messages car je ne veux pas qu'elle soit cachée par l'onglet.
Donc si je me fie à ton dessin, on ne n'affiche pas ce contenu ?
Je vais voir ce que je peux faire et reviendrais vers toi ensuite car
il me manque beaucoup d'informations pour avancer Christelle.
- Milouze14Fondateur
-
Milouze14 Sam 30 Mai 2020 - 18:03
Voilou, il va falloir désormais travailler de ton côté ,
3h30 sur ta demande , j'ai les yeux en vrac
.
Voir le résultat ici Christelle:
https://punbb.forumactif.org/
Alors remplaces tout le contenu du template index_box:
Affichage/Templates/Général/index_box
Par ceci:
Penses a enregistrer puis à valider en cliquant respectivement sur
puis 
Puis tout le style commenté afin que tu puisses te repérer.
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajouter ceci:
Penser a cliquer sur le bouton![[PUNBB] Codage catégorie Sans_t10](https://i.servimg.com/u/f87/11/26/21/37/sans_t10.png)
Ton template est conçu pour recevoir donc une image à gauche(noir et blanc) qui au survol affichera les couleurs.
Ensuite il est donc préférable de mettre une image pour chaque catégorie:
Général/Catégories et Forums/Catégories et Forums
Il faut donc mettre une image pour chaque catégorie que compte ton forum.
![[PUNBB] Codage catégorie 011](https://i.servimg.com/u/f20/20/11/87/27/011.png)
Cliques sur le petit engrenage orange:
.
Dans le champs Description : tu as l'éditeur , il suffit de mettre l'image .
3h30 sur ta demande , j'ai les yeux en vrac
.Voir le résultat ici Christelle:
https://punbb.forumactif.org/
Alors remplaces tout le contenu du template index_box:
Affichage/Templates/Général/index_box
Par ceci:
- Code:
<div class="pun-crumbs">
<p class="crumbs"><a href="{U_INDEX}"><span>{L_INDEX}</span></a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="M14_categorie">
<table cellspacing="0" class="M14_table">
<tbody class="statused">
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<tr class="M14_tr">
<td class="M14_gauche" width="20%" align="center" valign="middle">
<div class="M14_description">{catrow.forumrow.FORUM_DESC}</div>
</td>
<td class="M14_centre" width="40%">
<div class="M14_cat">{catrow.forumrow.FORUM_NAME}</div>
<div class="M14_sous_forums" title="Les sous forums">
{catrow.forumrow.L_LINKS}
{catrow.forumrow.LINKS}
<script type="text/javascript">$('.M14_sous_forums').each(function(){$(this).html($(this).html().replace(/,/g,""));});</script>
</div>
<div class="M14_bloc_central">
<div class="M14_informations">
<span class="M14_topics">{catrow.forumrow.TOPICS} sujets </span>
<span class="M14_posts">{catrow.forumrow.POSTS} messages </span><span class="M14_status">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</span></div>
</div>
</td>
<td class="M14_right" width="40%">
<!-- BEGIN ads -->
<span class="AD_LastPA">
<span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
<span class="AD_LastInfos">
<b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b><br />
{catrow.forumrow.ads.DATE}<br />
{catrow.forumrow.ads.LOCATION}
</span></span>
<!-- END ads -->
<div class="M14_avatar_cat">
<!-- BEGIN avatar -->
<span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
<!-- END avatar -->
</div>
<div class="M14_last_topic">
<div>
<span>
<!-- BEGIN switch_topic_title -->
<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
<!-- END switch_topic_title -->
{catrow.forumrow.USER_LAST_POST}
</span>
</div>
</div>
</td>
</tr>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
</tbody>
</table>
</div>
<div class="M14_border"></div>
<!-- END tablefoot -->
<!-- END catrow -->
</div>
<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
<ul>
<li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
<li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
<li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
</ul>
<!-- BEGIN switch_delete_cookies -->
<p class="right">
<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
</p>
<!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->
Penses a enregistrer puis à valider en cliquant respectivement sur
puis Puis tout le style commenté afin que tu puisses te repérer.
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajouter ceci:
- Code:
/*LE CONTENEUR*/
.M14_table{width: 100%;}
/*LES CATEGORIES*/
.M14_categorie
{
width: 80%;
margin-left: 10%;
margin-top:10px;
padding:5px;
min-height:140px;
height:auto;
max-height: 220px;
background-color:#eee;
border:2px solid #420400;
}
/*ON SUPPRIME LES BORDURES*/
.M14_categorie td{border:none!important;}
/*LES TITRES DE CATEGORIE*/
.M14_cat
{
text-align:center;
color: #420400;
font-size:28px;
letter-spacing: 0;
height: 30px;
position:relative;
top:15px;
transition: all 0.5s ease-in-out;
opacity:1;
}
/*LES IMAGES*/
.M14_description img
{
width:150px;
height:150px;
filter: grayscale(1);
transition: all 0.5s ease-in-out;
}
/*AU SURVOL DES IMAGES*/
.M14_description:hover img
{
filter: grayscale(0);
}
/*LES TEXTES SUJETS ET MESSAGES*/
.M14_informations
{text-align:center;}
.M14_topics
{
color: #420400;
font-size:14px;
}
.M14_posts
{
color: #420400;
font-size:14px;
}
/*LE SYMBOLE DE SEPARATION*/
.M14_posts:before
{
content:"&";
margin-right: 5px;
}
/*L ICONE AFFICHANT LES NOTIFICATIONS DES FORUMS*/
.M14_status
{
float: right;
border-radius: 100%;
padding: 5px;
background-color: #420400;
}
.M14_status img
{
border-radius: 100%;
}
/*LES SOUS FORUMS*/
.M14_sous_forums:before
{
content:"";
border-top : 9px solid transparent;
border-bottom : 11px solid transparent;
border-left : 20px solid #420400;
position: absolute;
margin-top:5px;
margin-left: 8px;
transition: all 0.5s ease-in-out;
}
.M14_sous_forums
{
width:20px;
min-height:40px;
}
.M14_sous_forums div
{
background:#420400;
min-height:40px;
height:auto;
max-height:140px;
overflow:hidden;
width: 0%;
padding: 5px 2px 2px 8px;
transition: all 0.5s ease-in-out;
}
.M14_sous_forums:hover{width: 100%;}
.M14_sous_forums:hover div
{
overflow-y:auto;
width: 100%;
border-left:0px;
}
/*AU SURVOL*/
.M14_centre:hover .M14_cat
{
opacity:0.5;
font-size:14px;
letter-spacing:1;
top:5px;
}
.M14_sous_forums:hover:before
{
content:"";
border-top : 9px solid transparent;
border-bottom : 11px solid transparent;
border-left : 20px solid transparent;
margin-left:-3px;
}
/*ON SUPPRIME LES LIENS DES DERNIERES REPONSES DES SOUS FORUMS*/
.M14_sous_forums a[href]:not(.gensmall){display:none;}
/*LES LIENS DES SOUS FORUMS*/
.M14_sous_forums a.gensmall
{
text-align:center;
width:90%;
height:30px;
line-height:30px;
margin-left:5%;
margin-right:5%;
margin-top:5px;
display:list-item;
color:#420400!important;
background:white;
list-style: none;
text-decoration:none!important;
}
/*LES BORDURES APRES CHAQUE CATEGORIE*/
.M14_border
{
width:30%;
margin-top:5px;
margin-left:35%;
height:5px;
background-color:#420400;
}
/*LA CASE DERNIER MESSAGES*/
.M14_last_topic
{
background: #420400;
height: 70px;
margin: 0 10px;
padding: 10px;
width: 140px;
float: right;
margin-right: 30px;
}
/*INTERIEUR DE LA CASE DERNIER MESSAGES*/
.M14_last_topic div
{
background: #fff;
color: #420400;
font-size: 11px;
height: 60px;
padding: 5px;
text-align: center;
text-transform: uppercase;
}
/*L AVATAR DANS LA PARTIE DROITE*/
.M14_avatar_cat{float: right;}
Penser a cliquer sur le bouton
![[PUNBB] Codage catégorie Sans_t10](https://servimg.com/r/8711262137/sans_t10.png)
Ton template est conçu pour recevoir donc une image à gauche(noir et blanc) qui au survol affichera les couleurs.
Ensuite il est donc préférable de mettre une image pour chaque catégorie:
Général/Catégories et Forums/Catégories et Forums
Il faut donc mettre une image pour chaque catégorie que compte ton forum.
![[PUNBB] Codage catégorie 011](https://servimg.com/r/2020118727/011.png)
Cliques sur le petit engrenage orange:
.Dans le champs Description : tu as l'éditeur , il suffit de mettre l'image .
- Milouze14Fondateur
-
Milouze14 Lun 1 Juin 2020 - 17:30
Hello
Si ton sujet est résolu, merci de suivre la procédure suivante:
Un tag précédent ton premier message est présent.
Il te suffira de cliquer sur ce dernier pour mettre ton sujet en résolu.
Comme le mentionne le règlement.
Si ton sujet est résolu, merci de suivre la procédure suivante:
Un tag précédent ton premier message est présent.
Il te suffira de cliquer sur ce dernier pour mettre ton sujet en résolu.
Comme le mentionne le règlement.
- Milouze14Fondateur
-
Milouze14 Mer 3 Juin 2020 - 3:46
Hello
Si ton sujet est résolu, merci de suivre la procédure suivante:
Un tag précédent ton premier message est présent.
Il te suffira de cliquer sur ce dernier pour mettre ton sujet en résolu.
Comme le mentionne le règlement.
Si ton sujet est résolu, merci de suivre la procédure suivante:
Un tag précédent ton premier message est présent.
Il te suffira de cliquer sur ce dernier pour mettre ton sujet en résolu.
Comme le mentionne le règlement.
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