Connexion

Récupérer mon mot de passe

Derniers sujets
» *RESOLU*[PHPBB3] Bouton Voter disparu
par Milouze14 Hier à 20:09

» *RESOLU*[PHPBB2] Popup de connexion
par Milouze14 Hier à 11:14

» *RESOLU*[PHPBB3] Remplacer un bouton poster sur sujet
par Milouze14 Hier à 3:23

» *RESOLU*[PHPBB3] Remplacer un bouton par un autre
par Milouze14 Dim 5 Avr 2020 - 19:28

» [TOUTES VERSIONS]Afficher de belles infobulles Tooltipster
par soleda Sam 4 Avr 2020 - 9:44

» [BESTOF] Hiérarchie sur sous forum et les sujets
par Milouze14 Ven 3 Avr 2020 - 19:41

» [TOUTES VERSIONS]Afficher un message aux membres ayant moins de X messages
par Ptite_Perle Ven 3 Avr 2020 - 14:52

» *RESOLU*[PHPBB3] Cadre des messages dans un sujet
par Milouze14 Jeu 2 Avr 2020 - 18:43

» [BESTOF] Supprimer le qui est en ligne sur la droite
par Milouze14 Jeu 2 Avr 2020 - 10:14

» *RESOLU*[PHPBB3] Message au dessus de l'éditeur
par Milouze14 Mer 1 Avr 2020 - 11:56

» *RESOLU*[PHPBB2] Fenetres en haut du forum suite
par Milouze14 Mar 31 Mar 2020 - 19:39

» *RESOLU*[PHPBB3] Smiley dans miniatures
par Milouze14 Sam 28 Mar 2020 - 18:23

» [PHPBB2] Petites précisions script remplace terme invité
par Milouze14 Sam 28 Mar 2020 - 18:22

» [PHPBB2] Remplacer le mot Invité
par Mi Neth Sam 28 Mar 2020 - 14:42

» [TOUTES VERSIONS] Edition rapide
par Mi Neth Ven 27 Mar 2020 - 13:05

» [TOUTES VERSIONS] Recherche de texte dans les templates
par Mi Neth Jeu 26 Mar 2020 - 17:07

» [PHPBB3] Cacher les boutons citer et multi-citation pour un membre spécifique
par Milouze14 Jeu 26 Mar 2020 - 15:53

» [PHPBB2] Descendre des infos dans le profil simple,
par Milouze14 Mar 24 Mar 2020 - 15:26

» [PHPBB2] Modifier un menu section membres
par Milouze14 Sam 21 Mar 2020 - 15:06

» *RESOLU*[PHPBB3] Modifier couleur titre de colonne dans les catégories
par Milouze14 Ven 20 Mar 2020 - 18:33

*RESOLU*[MODERNBB] Modification des catégories et des sous-catégories ( Thème ModernBB )

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

Eldär
Eldär
Milouzien

MessageEldär le Jeu 27 Fév 2020 - 19:52

  • Version du forum :
    MODERNBB
  • Templates modifiés :
    oui
  • Navigateur :
    Firefox
Hello !

J'ai une nouvelle fois besoin de votre aide pour mon forum ! Je fais donc appelle à vos compétences dans le codage ! :)

Actuellement, j'ai réussi à modifier mon forum modernBB pour afficher les catégories de cette manière :

*RESOLU*[MODERNBB] Modification des catégories et des sous-catégories ( Thème ModernBB ) Annota11

Vous remarquerez le rectangle gris, entre les images, permettant de faire une séparation ( gros niveau avec photoshop, comme vous pouvez le constater... ).

Cette modification a été possible en changeant le contenu du template index-box par ce code :

Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>
<div class="index_fc">
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="categorie">{catrow.tablehead.L_FORUM}</div>
   <!-- END tablehead -->
   <!-- BEGIN forumrow -->
      <div class="forum">
                <div class="forum_case">
                     <div class="description">
                        {catrow.forumrow.FORUM_DESC}
                     </div>
                     <div class="bottom_section"></div>
                     <div class="bottom_border"></div>                  
                     <div class="forum_name">
                           <a class="forum_link" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                     </div>
                     <div class="tnm">
                        {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
                     </div>
                </div>
      </div>
   <!-- END forumrow -->

<!-- END catrow -->
</div>

En ajoutant ce CSS :

Code:
.index_fc::after {
  clear: both;
  content: "";
  display:block;
}

.categorie {
  position: relative;
  clear: both;
  height: 50px;
  position: relative;
  margin-top: 50px;
  margin-bottom: -18px;
  margin-left: 35px;
  z-index: 2;
}

.categorie_txt {
  position: relative;
  font-size: 40px;
  font-family: 'Josefin Slab', Georgia, serif;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  text-align: right;
}

.forum {
  width: 980px;
  margin: auto !important;
}

.forum_case {
  float: left;
  width: 490px;
  height: 245px;
  background-color: #111418;
}

.description {
  position: relative;
  width:490px;
  height: 245px;
  margin: 0 !important;
  padding: 0 !important;
}

.bottom_section {
  position: relative;
  margin-top: -40px;
  width: 490px;
  height: 40px;
  background-color: #fff;
  opacity: 0.3;
}

.bottom_border {
  position: relative;
  margin-top: -40px;
  width: 490px;
  height: 40px;
  border-top: 1px solid #fff;
}

.tnm {
  position: relative;
  margin-top: -30px;
  height: 30px;
  width: 480px;
  margin-right: 11px;
  text-align: right;
  font-size: 12px;
  color: #ffffff;
  text-shadow: 1px 1px 2px #000;
  font-family: Georgia, Arial, serif;
}

.forum_name {
  position: relative;
  margin-top: -30px;
  height: 30px;
  width: 480px;
  margin-left: 10px;
  z-index: 2;
}

.forum_link {
  color: #fff !important;
  text-shadow: 1px 1px 2px #000;
  font-variant: small-caps !important;
  text-decoration: none;
  font-size: 16px;
  font-family: Georgia, Arial, serif;
}

.description_img {
  position: relative;
  width: 490px;
  height: 245px;
  margin-top: -245px;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transform: all;
  transform: all;
}

.description_img:hover {
  position: relative;
  width: 490px;
  height: 245px;
  margin-top: -245px;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transform: all;
  transform: all;
  opacity: 0.2;
}

.description_txt {
  position: relative;
  width: 460px;
  height: 215px;
  padding: 15px;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  font-size: 12px;
  font-family: Georgia, Arial, serif;
  text-align: justify;
}

De ce fait, pour les noms des catégories je dois mettre cela en titre :


Code:
<span class="categorie_txt">Nom de votre catégorie</span>

Et cela en description de forum :


Code:
<div class="description_txt">
 
      Lorem impsum dolor sit amet lorem impsum dolor sit amet lorem
impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit
 amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem
impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit
 amet lorem impsum dolor sit amet.    
</div>
<div class="description_img">
      <img alt="**" src="URL DE L'IMAGE 490*245" />
</div>


J'ai modifié un peu le code pour ajouter des espaces par ci par là, mais je bloque pour deux choses. J'aimerai pouvoir couper en deux les catégories, comme cela :

*RESOLU*[MODERNBB] Modification des catégories et des sous-catégories ( Thème ModernBB ) Mm10


Dernière édition par Eldär le Jeu 5 Mar 2020 - 20:48, édité 1 fois
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Jeu 27 Fév 2020 - 20:05

Hello Timothée,
je serais absent jusqu'à Dimanche.
Avant toute intervention de ma part.
Tu veux simplement déposer tes catégories à l'horizontal?

Pour cela comment as tu configuré la compression sur l'index ?:

Affichage/Page d'acceuil/ Structure et hiérarchie/Niveau de compression de l'index


Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Ven 28 Fév 2020 - 5:36

Hello Timothée,
juste avant de me sauver,
en partant d'avoir une compression de l'index :
Séparer les catégories sur l'index coché sur "Complet" :

Avec ce template modifié:
Code:
    <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
      <tr>
          <td valign="bottom">
            <!-- BEGIN switch_user_logged_in -->
            <span class="gensmall">{LAST_VISIT_DATE}<br />
            {CURRENT_TIME}<br />
            </span>
            <!-- END switch_user_logged_in -->
            <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
          </td>
          <td class="gensmall" align="right" valign="bottom">
            <!-- BEGIN switch_user_logged_in -->
            <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
            <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
            <!-- END switch_user_logged_in -->
            <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
          </td>
      </tr>
    </table>
<!-- BEGIN catrow -->
    <!-- BEGIN tablehead -->
    <div class="index_fc">

          <div class="categorie">{catrow.tablehead.L_FORUM}</div>
      <!-- END tablehead -->
      <!-- BEGIN forumrow -->
          <div class="forum">
                    <div class="forum_case">
                        <div class="description">{catrow.forumrow.FORUM_DESC}</div>
                        <div class="bottom_section"></div>
                        <div class="bottom_border"></div>                 
                        <div class="forum_name"><a class="forum_link" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
                        <div class="tnm">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets</div>
                    </div>
               
          </div>
  <!-- END forumrow -->
<!-- BEGIN tablefoot -->
 
    </div>
<!-- END tablefoot -->
 <!-- END catrow -->

Et cette C.S.S:
(donc supprimer celle que tu as fournie).

Code:
.index_fc{width:40%;display: inline-block;margin:5%;background-color: #111418;}

    .categorie {
      position: relative;
      clear: both;
      height: 50px;
      position: relative;
      margin-top: 50px;
      margin-bottom: -18px;
      margin-left: 35px;
      z-index: 2;
    }

    .categorie_txt {
      position: relative;
      font-size: 40px;
      font-family: 'Josefin Slab', Georgia, serif;
      color: #fff;
      text-shadow: 1px 1px 2px #000;
      text-align: right;
    }

    .forum {
     
      margin: auto !important;
    }

    .forum_case {
   
   
      height: 245px;
     
    }

    .description {
      position: relative;
      width:100%;
      height: 245px;
      margin: 0 !important;
      padding: 0 !important;
    }

    .bottom_section {
      position: relative;
      margin-top: -40px;
      width:100%;
      height: 40px;
      background-color: #fff;
      opacity: 0.3;
    }

    .bottom_border {
      position: relative;
      margin-top: -40px;
    width:100%;
      height: 40px;
      border-top: 1px solid #fff;
    }

    .tnm {
      position: relative;
      margin-top: -30px;
      height: 30px;
      width:90%;
      margin-right: 11px;
      text-align: right;
      font-size: 12px;
      color: #ffffff;
      text-shadow: 1px 1px 2px #000;
      font-family: Georgia, Arial, serif;
    }

    .forum_name {
      position: relative;
      margin-top: -30px;
      height: 30px;
      width:90%;
      margin-left: 10px;
      z-index: 2;
    }

    .forum_link {
      color: #fff !important;
      text-shadow: 1px 1px 2px #000;
      font-variant: small-caps !important;
      text-decoration: none;
      font-size: 16px;
      font-family: Georgia, Arial, serif;
    }

    .description_img {
      position: relative;
      width: 490px;
      height: 245px;
      margin-top: -245px;
      -webkit-transition: 1s;
      transition: 1s;
      -webkit-transform: all;
      transform: all;
    }

    .description_img:hover {
      position: relative;
      width: 490px;
      height: 245px;
      margin-top: -245px;
      -webkit-transition: 1s;
      transition: 1s;
      -webkit-transform: all;
      transform: all;
      opacity: 0.2;
    }

    .description_txt {
      position: relative;
      width:90%;
      height: 215px;
      padding: 15px;
      color: #fff;
      text-shadow: 1px 1px 2px #000;
      font-size: 12px;
      font-family: Georgia, Arial, serif;
      text-align: justify;
    }

On obtient les catégories côte à côte
Il faudra faire des ajustements mais il est impératif de travailler en pourcentage.
Dans ce cas les pixels sont a proscrire.

A Dimanche.



Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).
Eldär
Eldär
Milouzien

MessageEldär le Ven 28 Fév 2020 - 19:26

Hello Phill !

Avant tout, merci pour ton aide ! :)

Pour le niveau de compression, je suis en Moyen dans la section " Séparer les catégories sur l'index ". C'est celle qui correspond le mieux à ce que je recherche.

Pour être plus exacte, j'aimerai pouvoir afficher les forums des catégories, les uns à côté des autres ( toujours avec 980px en largeur malgré la séparation  et 245px en hauteur ) :

*RESOLU*[MODERNBB] Modification des catégories et des sous-catégories ( Thème ModernBB ) 910

Ensuite, pour la deuxième modification. Si c'est possible, j'aimerai que, quand je clique sur un des forums, les sous-forum soient dans le même style que les forum décrit juste avant, mais seuls. Et cette fois ci n'ont pas les un à côté des autres, mais les uns en dessous des autres.

*RESOLU*[MODERNBB] Modification des catégories et des sous-catégories ( Thème ModernBB ) 12312310
Je suppose que c'est possible, peut être en reprenant l'idée des catégories...


Merci encore et bon weekend à vous !! coucou
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Sam 29 Fév 2020 - 18:48

Hello Timothée,

alors pour toutes tes demandes, il est impératif de travailler en pourcentage comme je l'ai mentionnais plus haut.
Ensuite, tu mentionnes de déposer chaque catégorie avec un forum à l’intérieur et les autres à côté:

*RESOLU*[MODERNBB] Modification des catégories et des sous-catégories ( Thème ModernBB ) 910

Comment fais-ton si tu as plus de 2 forums dans une catégorie ?

Pour la compression il faut aussi qu'elle soit sur complet.
Malheureusement on ne pourra avoir la même apparence sur les sous fofos et les catégories, leurs structures et totalement différentes...
Les pixels sont à proscrire.
Pour être certain d'obtenir quelque chose de correcte il faut mettre


Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).
Eldär
Eldär
Milouzien

MessageEldär le Dim 1 Mar 2020 - 19:38

Hello Phil !


En fait, avec le code que je t'ai passé, les forums dans les catégories se mettent automatiquement les uns en dessous de autres :
*RESOLU*[MODERNBB] Modification des catégories et des sous-catégories ( Thème ModernBB ) 444410


Donc en moyen comme mode de compression, je peux en ajouter autant que je veux, ils se mettront toujours les uns en dessous des autres.

Quand tu dis qu'il est impératif de travailler en pourcentage, tu veux dire que les dimensions que j'ai précisé dans mon premier en post en px, doivent être converti en % ? IL y a un truc que je dois mal comprendre puisque si je me fie à ce site( https://nekocalc.com/fr/px-a-pourcentage-convertisseur ), mes 980px donnent 6125% ! ^^"


Merci encore de prendre le temps de m'aider et bonne fin de week end ! :)
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Lun 2 Mar 2020 - 4:19

Hello Timothée,
tu peux tester ce style en remplacement du tien:
Code:
.index_fc
{
width: 80%;
margin-left: 10%;
}
.forum
{
margin-top:30px; 
}


    .forum_case {
      float: left;
      width: 45%;
      height: 245px;
      background-color: #111418;
  padding-left:2%;
    }



.index_fc::after {
      clear: both;
      content: "";
      display:block;
    }

    .categorie {
      position: relative;
      clear: both;
      height: 50px;
      position: relative;
      margin-top: 50px;
      margin-bottom: -18px;
      margin-left: 35px;
      z-index: 2;
    }

    .categorie_txt {
      position: relative;
      font-size: 40px;
      font-family: 'Josefin Slab', Georgia, serif;
      color: #fff;
      text-shadow: 1px 1px 2px #000;
      text-align: right;
    }

 


    .description {
      position: relative;
      width: 95%;
      height: 245px;
      margin: 0 !important;
      padding: 0 !important;
    }

    .bottom_section {
      position: relative;
      margin-top: -40px;
      width: 95%;
      height: 40px;
      background-color: #fff;
      opacity: 0.3;
    }

    .bottom_border {
      position: relative;
      margin-top: -40px;
    width: 95%;
      height: 40px;
      border-top: 1px solid #fff;
    }

    .tnm {
      position: relative;
      margin-top: -30px;
      height: 30px;
    width: 90%;
      margin-right: 11px;
      text-align: right;
      font-size: 12px;
      color: #ffffff;
      text-shadow: 1px 1px 2px #000;
      font-family: Georgia, Arial, serif;
    }

    .forum_name {
      position: relative;
      margin-top: -30px;
      height: 30px;
    width: 95%;
      margin-left: 10px;
      z-index: 2;
    }

    .forum_link {
      color: #fff !important;
      text-shadow: 1px 1px 2px #000;
      font-variant: small-caps !important;
      text-decoration: none;
      font-size: 16px;
      font-family: Georgia, Arial, serif;
    }

    .description_img {
      position: relative;
      width: 95%;
      height: 245px;
      margin-top: -245px;
      -webkit-transition: 1s;
      transition: 1s;
      -webkit-transform: all;
      transform: all;
    }

    .description_img:hover {
      position: relative;
      width: 95%;
      height: 245px;
      margin-top: -245px;
      -webkit-transition: 1s;
      transition: 1s;
      -webkit-transform: all;
      transform: all;
      opacity: 0.2;
    }

    .description_txt {
      position: relative;
    width: 95%;
      height: 215px;
      padding: 15px;
      color: #fff;
      text-shadow: 1px 1px 2px #000;
      font-size: 12px;
      font-family: Georgia, Arial, serif;
      text-align: justify;
    }

Il faut travailler en pourcentage.

La class index_fc regroupe toutes tes catégories et forum.
Il faut lui attribuer une largeur 80% puis on décale de 10% de la gauche pour centrer les forums.

La class forum_case concerne les forums qui est dans la class index_fc.
On a donc deux forums et chacun d'entre eux auront à peine le moitié car il faut compter les espaces.


On lui donne la largeur 45% et un padding-left de 2% .

Pour deux forums:

On arrive donc 45X 2 = 90 et 2 padding-left a 2% =99%

On ne pourra guère faire mieux.




Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Jeu 5 Mar 2020 - 4:27


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.



Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).
Eldär
Eldär
Milouzien

MessageEldär le Jeu 5 Mar 2020 - 20:48

Hello Phil !

Désolé pour la réponse tardive !

C'est niquel pour moi ! Merci beaucoup !


Bonne soirée ! :)
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Ven 6 Mar 2020 - 6:10

Hello Timothée,

de rien cher ami.


Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil





Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).

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