Le Deal du moment : -38%
Ecran PC gaming 23,8″ – ACER KG241Y P3bip ...
Voir le deal
99.99 €

RANG ● sous-titre rang
ice and fire.
RANG ● sous-titre rang
ice and fire.
FEUILLE DE PERSONNAGE

Feuille de personnage
CHAMP UN:
CHAMP 2:
MESSAGES : 76
PSEUDO : ice and fire. (manon)
CRÉDITS : av/@oam, sign/@oam
PAGE D'ACCUEIL NR. 1  Tumblr_oui8gbm3Aw1rcqpk7o5_r1_400
https://iceandfire-forumtest.forumieren.de
PA NUMÉRO 1
PREMIER ÉLÉMENT DU "PINK" THEME
en cas de question n'hésitez pas à me contacter
Bonjour, bonsoir -- voici la première PA en libre-service que je poste. Étant donné qu'elle est codée en grid, qu'elle comporte plusieurs éléments qui peuvent être un peu compliqués, j'ai décidé de faire un petit tutoriel pour que vous puissiez l'installer sans problème.

VERSION LIVE DE LA PA
LIEN VERS LES CATÉGORIES QUI VONT AVEC



(1) Avant toute chose, voici les informations importantes:

Avant toute chose, s'il vous plaît ne supprimez pas le crédit dans la PA. Si je remarque qu'il a été supprimé, je vais le notifier à FA. C'est une PA, pas une signature et ça m'a pris beaucoup de temps pour la terminer, du coup s'il vous plaît respectez le travail qui a été fait.

Codée en ● grid, ce qui facilitera donc en soit le redimensionnage s'il y a besoin.

Éléments ● les onglets du staff ainsi que le hover défilement vers le haut par-dessus le contexte.

Besoin de ● la feuille css, html et Javascript (JS)

Largeur du forum sur lequel la PA a été codé ● 870px

Construction ● une partie intrigue/actualité, partie staff, partie contexte, 6 liens navigation, une partie règles/conditions, partie timeline, membres du mois, soutenir le forum, partenariats et période de jeu.

font utilisée et conseillée ● Nunito sans (lien google font)

Si vous avez des questions je vous renvoie à mon tumblr et/ou ce sujet sur le forum.



(2) LES CODES

HTML

Pour installer l'HTML, il vous suffit d'aller dans le panneau d'administration, affichage, page d'accueil, généralités.

Code:
<div class="pa_1">
                                                                                                                              
 <div class="item_13">
                                                                                                                          
 <div class="texte_4">
 Ici un texte sur l'actualité ou l'intrigue du forum.                                          
 </div>
                                                                                                                    
 <div class="titre_1">
                                                           WHAT'S GOING ON?                                                          
 </div>
                                                                                                                      
 </div>
                                                                                                                              
 <div class="item_14">
                                                                                                        
 <div class="onglets_pa">
                                                                                            
 <div class="boutons_pa">
                                                                                              
 <div class="lab onglet1 visible">
                                                     <img class="staff" src="https://images2.imgbox.com/d1/1b/v1XgkDZB_o.png" />                                                  
 </div>
                                                                                              
 <div class="lab onglet2">
                                                 <img class="staff" src="https://images2.imgbox.com/d1/1b/v1XgkDZB_o.png" />                                                        
 </div>
                                                                                              
 <div class="lab onglet3">
                                                <img class="staff" src="https://images2.imgbox.com/d1/1b/v1XgkDZB_o.png" />                                                        
 </div>
                                                                                  
 <div class="lab onglet4">
                                                <img class="staff" src="https://images2.imgbox.com/d1/1b/v1XgkDZB_o.png" />                                                        
 </div>
                                                                                  
 <div class="lab onglet5">
                                                <img class="staff" src="https://images2.imgbox.com/d1/1b/v1XgkDZB_o.png" />                                                        
 </div>
                                                                                            
 </div>
                                                                                            
 <div class="interne">
                                                                                              
 <div class="contenu onglet1 visible">
                                                   <h>PRÉNOM <j>NOM</j></h>                                          
 <div class="sous_titre">
                                       ADMINISTRATEUR — <a href="uc">PROFIL</a>                                      
 </div>
                                                                                  
 </div>
                                                                                              
 <div class="contenu onglet2">
                                                    <h>PRÉNOM <j>NOM2</j></h>                                          
 <div class="sous_titre">
                                       ADMINISTRATEUR — <a href="uc">PROFIL</a>                                      
 </div>
                                                                            
 </div>
                                                                                              
 <div class="contenu onglet3">
                                                  <h>PRÉNOM <j>NOM3</j></h>                                          
 <div class="sous_titre">
                                       ADMINISTRATEUR — <a href="uc">PROFIL</a>                                      
 </div>
                                                                      
 </div>
                                                                    
 <div class="contenu onglet4">
                                                  <h>PRÉNOM <j>NOM4</j></h>                                          
 <div class="sous_titre">
                                       ADMINISTRATEUR — <a href="uc">PROFIL</a>                                      
 </div>
                                                                              
 </div>
                                                                    
 <div class="contenu onglet5">
                                                  <h>PRÉNOM <j>NOM5</j></h>                                          
 <div class="sous_titre">
                                       ADMINISTRATEUR — <a href="uc">PROFIL</a>                                      
 </div>
                                                                            
 </div>
                                                                                            
 </div>
                                                                                        
 </div>
                                                                                                              
 </div>
                                                                                                                              
 <div class="item_15">
                                                                                                                          
 <div class="titre_3">
                                                                FORUM OPTIMISÉ POUR CHROME & SAFARI                                                                
 </div>
                                                                                                                                                                              
 </div>
                                                                                                                                              
 <div class="item_1">
                                                                  
 <div class="link_pa">
                              <a class="link1" href="LIEN ICI">LIEN 1</a>                                      
 </div>
                                                                
 <div class="link_pa">
                              <a class="link2" href="LIEN ICI">LIEN 2</a>                                      
 </div>
                                                              
 <div class="link_pa">
                              <a class="link1" href="LIEN ICI">LIEN 3</a>                                  
 </div>
                                                              
 <div class="item_5">
                         Partie règles du forum (avatar, initiales, réservations, etc.)                                  
 </div>
                                                        
 <div class="link_pa">
                              <a class="link2" href="LIEN ICI">LIEN 4</a>                                      
 </div>
                                                              
 <div class="link_pa">
                              <a class="link1" href="LIEN ICI">LIEN 5</a>                                  
 </div>
                                                              
 <div class="link_pa">
                              <a class="link2" href="LIEN ICI">LIEN 6</a>                                      
 </div>
                                                                                    
 </div>
                                                                                                                                                                                                                            
 <div class="gif_pa">
                                                                                                                                                            
 <div class="img_pa">
                                                                                      <img class="paimg" src="METTRE ICI L'IMAGE DU CONTEXTE" />                                                                                                      
 <div class="overflow">
                                                                                                                                                                
 <div class="container_txt">
 Ici mettre le contexte.                                                                          
 </div>
                                                                                                                                                                  
 </div>
                                                                                                                                                                                                                                                                                                      
 </div>
                                                                                                                                                            
 </div>
                                                                                                                                                                                          
 <div class="item_8">
                                              
 <div class="texte_1">
                             ici mettre la timeline (ouverture, maintenance, etc.)          
 </div>
                              
 <div class="titre_4">
                  1ÈRE VERSION SIGNÉE XXX.                  
 </div>
                                                                                                                                                                                                                                                                                                                
 </div>
                                                                                                                                    
 <div class="item_9">
                                                                      période de jeu: <j>mois 2xxx</j>                                                                  
 </div>
                                                                                                                                    
 <div class="item_10">
                
 <div class="float_pa">
                  
 <div class="float_pa1">
                                                                                                                                          
 <div class="titre_2">
                                                                    membres du mois                                                                    
 </div><a href="LIEN PROFIL MDM 1"><img src="IMG ICI" class="mdm1" /></a><a href="LIEN PROFIL MDM2"><img src="IMG ICI" class="mdm2" /></a><a href="LIEN PROFIL MDM 3"><img src="IMG ICI" class="mdm1" /></a>            
 </div>
                  
 <div class="float_pa2">
                  
 <div class="titre_1">
                                                                    nous soutenir                                                                  
 </div><a href="LIEN DISCORD"><img class="discord_pa" src="IMG DISCORD ICI" /></a> <a href="LIEN TUMBLR"><img class="discord_pa" src="IMG TUMBLR ICI" /></a><br />votez <a targer="_blank" href="LIEN SUJET VOTES">ici</a>.        
 </div>
                
 </div>
                                                                                                                                                                    
 <div class="item_11">
                                       <a href="LIEN LISTE PARTENAIRES" target="_blank"><w>NOS PARTENAIRES &</w></a> <a href="LIEN SUJET DEMANDES" target="_blank"><y>DEMANDES</y></a> <br />                   <select onchange="location = this.value" class="select_pa">  <option selected="selected">NOS PARTENAIRES D'AILLEURS</option>  <option value="LIEN FORUM">FORUM</option> </select>                                                                                                                                                                    
 <div class="vote_pa">
                                                                                                                                                                                                                                                                                                                  
 </div>
                                                                                                                                                                                                                                                                
 </div>
                                            
 </div>
    
 <div class="item_12">
   PAGE D'ACCUEIL CRÉÉE PAR ICE AND FIRE. (2021)  
 </div>
 
</div>

CSS

Pour installer le CSS, il faut que vous vous rendiez dans panneau d'administration, affichage, couleurs, onglet feuille de style css. Vous copiez/collez le code dans son entièreté.

Code:
/* PA */

:root {
    --accc1: #000;
    --accc2:#DD9F8C;
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --background: #f1f1f1;
    --degrag: #ccc9c7;
}

/**************** CORPS DE LA PA AVEC GRID *****************/

.pa_1 {          background-color: var(--white);
    border-radius: 10px;
    display: grid;
text-align:center;
    grid-gap: 7px;
    grid-template: 18px 40px 20px 75px 18px 10px / 220px 102px 115px 132px 110px 110px;
    padding: 10px;}


/**************** PARTIE À GAUCHE (actualité/intrigue, staff, forum optimisé) *****************/

/* CONTAINER ACTUALITÉ */
.item_13 {  border: 1px solid var(--border);
    border-radius: 4px;
    grid-area: 1 / 1 / span 3 /span 1;
    padding: 4px 4px 0;
    text-align: justify;}

.texte_4 {       height: 69px;
    line-height: 15px;
    overflow: auto;}

/* PARTIE STAFF ET ONGLETS */

/*container de la partie staff, ne pas toucher*/
.item_14 {grid-area: 4 / 1 / span 1 /span 1;}

/*container des onglets*/
.onglets_pa { display: flex;
    flex-direction: column;
    height: 75px;
    position: relative;
    text-align: justify;
    width: 220px; /*à ne modifier que si vous changez la largeur du grid / votre forum n'a pas la même largeur que le mien*/
}

/*les boutons de la PA, ne pas toucher*/
.onglets_pa .boutons_pa {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: -8px; /*éventuellement à modifier si vous ajoutez des images*/
}

/*les images du staff, à modifier si vous voulez changer la largeur des images et/ou ajouter une image*/
.staff {      border-radius: 50px;
    width: 28px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--border);
    object-fit: cover;}

/*décide de la largeur de la séparation entre les images*/
.lab {     cursor: pointer;
    margin-left: 8px;
}
.lab:hover {
    opacity:0.8;
}

/*la partie avec prénom, nom, en gros les informations du staff*/
.contenu {  
      border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
    box-sizing: border-box;
    margin-top: 5px;
    opacity: 0;
    padding: 4px 0;
    position: absolute;
    scrollbar-width: none;
    text-align: center;
    visibility: hidden;
    width: 220px; /*à modifier que si vous changez la largeur de onglets_pa / doit avoir la même largeur */
    height: 36px;
}

.contenu.visible {
  opacity: 1;
  visibility: visible;
}

/*balise déco du prénom, nom*/
h {     color: var(--accc1);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 12px;}

/*balise de la partie admin / profil*/
.sous_titre {    font-size: 9px;
  letter-spacing: 1px;}

/*CONTAINER FORUM OPTIMISÉ*/
.item_15 {grid-area: 5 / 1 / span 1 /span 1;}

/*container déco de la partie optimisée pour*/
.titre_3 {
         background-color: var(--background);
    border-radius: 4px;
    color: var(--accc1);
    font-size: 9px;
    font-weight: 500;
    margin-bottom: 3px;
    padding: 3px 0;
}


/**************** PARTIE CENTRALE (contexte, liens navigation, règles *****************/


/*CONTEXTE ET HOVER*/

/* corps du contexte (container en gros qui tient tout*/
.gif_pa {     border: 1px solid var(--border);
    border-radius: 7px;
    display: inline-block;
    grid-area: 1 / 2 / span 5 /span 2;
    height: 192px;
    line-height: 110%;
    overflow: auto;
    padding: 3px;
    width: 216px; } /* à modifier si vous modifiez la largeur de la grid */

/*container de l'image du contexte*/
.img_pa {
    width: 100%;
margin: 0 auto;
position: relative;
      overflow: hidden;
  border-radius:7px;
}

/*taille de l'image dans le container, à modifier seulement si vous modifiez la taille de gif_pa*/
.paimg {
display: block;
    height: 192px;
    object-fit: cover;
    width: 216px; /* même largeur que gif_pa*/
}

/*container du contexte, si vous modifiez la taille, alors n'oubliez pas de modifier le left et le top*/
.container_txt {  background-color: var(--white);
    height: 192px;
    left: 108px;
    line-height: 16px;
    overflow: auto;
    padding: 5px;
    position: absolute;
    scrollbar-width: none;
    text-align: justify;
    top: 96px;
    transform: translate(-50%,-50%);
    width: 206px;} /*à modifier si vous modifiez la largeur de gif_pa */

/*ce qui déclenche le hover qui part vers le haut, ne pas toucher*/
.overflow {
background-color: var(--background);
    bottom: 0;
    height: 0;
    left: 0;
    overflow: hidden auto;
    position: absolute;
    scrollbar-width:none;
    right: 0;
    transition: .5s ease;
    width: 100%;
}
.img_pa:hover .overflow {
  height: 100%}

/*pas de scroll dans la partie contexte // ne supprimez pas le overflow*/
.container_txt::-webkit-scrollbar,.overflow::-webkit-scrollbar  {width:0px;height:0px;}


/*PARTIE NAVIGATION / LIENS*/

.item_1 {    grid-area: 1 / 4 / span 5 /span 1;}

/*liens navigation*/
.link_pa {        background-color: var(--background);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
  text-transform:uppercase;
    margin-bottom: 6px;
    line-height: 10px;
    padding: 1px 0;}

/*container avec les règles*/
.item_5 {       border: 1px solid var(--border);
    border-radius: 4px;
    height: 77px;
    line-height: 15px;
    overflow: auto;
    padding: 5px 7px 3px;
    text-align: justify;
    margin: 8px 0;}



/**************** PARTIE DROITE (timeline, periode de jeu, mdm, soutenir, partenariats) *****************/

/*TIMELINE*/

/*container timeline*/
.item_8 {      border: 1px solid var(--border);
    border-radius: 5px;
    grid-area: 1 / 5 / span 2 /span 2;
    height: 57px;
    padding: 2px 5px;
    text-align: justify;}

/*container texte timeline*/
.texte_1 {   height: 43px;
    line-height: 13px;
    overflow: auto;
    text-align: justify;}

/*partie premiere version signée xx*/
.titre_4 {    background-color: var(--background);
    border-radius: 4px;
    color: var(--accc1);
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;}


/*PARTIE PÉRIODE DE JEU*/

/*container période de jeu*/
.item_9 {      border-bottom: 1px solid var(--border);
    color: var(--accc1);
    font-size: 11px;
    font-weight: 600;
    grid-area: 3 / 5 / span 1 /span 2;
    letter-spacing: 1px;
    margin-top: -2px;
    text-transform: uppercase;}

/*déco de texte pour rendre rose*/
j {color:var(--accc2);
  font-style: italic;
}


/*PARTIE MEMBRES DU MOIS, NOUS SOUTENIR, PARTENARIATS*/

/*container du tout*/
.item_10 {   grid-area: 4 / 5 / span 2 /span 2;}

/*CONTAINER MEMBRES DU MOIS ET NOUS SOUTENIR*/
.float_pa {height: 56px;}

/*container des membres du mois (colonne gauche)*/
.float_pa1 {    float: left;
    width: 111px; /*à modifier si vous modifiez la largeur de la pa / a la même largeur que float_pa2*/
    height: 56px;}

/*style des images des membres du mois*/
.mdm1, .mdm2 {
          border: 1px solid var(--border);
    border-radius: 10px;
    height: 30px;
    object-fit: cover;
    padding: 3px;
    width: 21px;
}
.mdm2 {margin:0 5px;}

/*container de la partie nous soutenir*/
.float_pa2 {float: left;
    height: 56px;
    margin-left: 4px;
    line-height: 12px;
    width: 111px; /*à modifier si vous modifiez la largeur de la pa / a la même largeur que float_pa1*/}

/*icons discord et tumblr*/
.discord_pa {    width: 21px;}

/*PARTIE PARTENARIATS*/

/*container de la partie partenariats*/
.item_11 {          border-top: 1px solid var(--border);
    margin-top: 5px;
    padding-top: 3px;}

/*partie où y a les top sites dedans*/
.select_pa {margin-top: 3px;
  border-width: 1px;
  border-radius: 5px;
  border: 1px solid var(--border);
  width: 175px;
  letter-spacing: 1px;
  font-size: 8px;
  text-transform: uppercase;}


/*LES TITRES AVEC DÉGRADES ROSE ET NOIR ET LES DÉCOS TEXTE*/

.titre_1, .titre_2 {
   border-radius: 4px;
    color: var(--white);
    font-size: 9px;
    letter-spacing: 1px;
    margin-bottom: 4px;
    text-align: center;
    text-transform: uppercase;
}

.titre_1 {margin-bottom: 5px;background-image: linear-gradient(-45deg,var(--degrag),var(--accc2))!important;} /*dégradé rose*/
.titre_2 {background-image: linear-gradient(-45deg,var(--degrag),var(--accc1))!important;} /*dégradé noir*/

w,y {font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
  text-transform:uppercase;
}

w {  color: var(--accc2);}
y {  color: var(--accc1);}

/*PARTIE CRÉDITS / NE PAS TOUCHER */
.item_12 {    grid-area: 6 / 1 / span 1 /span 6;
    font-size: 7px;
    border-top: 1px solid var(--border);
    letter-spacing: 1px;
    padding-top: 5px;
  color: #d1d1d1;}

JAVASCRIPT

Pour ajouter le JS, vous devez vous rendre dans le panneau d'administration, modules, tout en bas HTML & JAVASCRIPT, gestion des codes Javascript.

Code:
$(document).ready(function() {
  $(".onglets_pa").each(function() {
    $(".lab").click(function() {
      $(this)
        .addClass("visible")
        .siblings()
        .removeClass("visible");
      if ($(this).hasClass("onglet1")) {
        $(this)
          .parent()
          .next()
          .find(".onglet1")
          .addClass("visible")
          .siblings()
          .removeClass("visible");
      } else if ($(this).hasClass("onglet2")) {
        $(this)
          .parent()
          .next()
          .find(".onglet2")
          .addClass("visible")
          .siblings()
          .removeClass("visible");
         } else if ($(this).hasClass("onglet3")) {
        $(this)
          .parent()
          .next()
          .find(".onglet3")
          .addClass("visible")
          .siblings()
          .removeClass("visible");
           } else if ($(this).hasClass("onglet4")) {
        $(this)
          .parent()
          .next()
          .find(".onglet4")
          .addClass("visible")
          .siblings()
          .removeClass("visible");
      } else {
        $(this)
          .parent()
          .next()
          .find(".onglet5")
          .addClass("visible")
          .siblings()
          .removeClass("visible");
      }
    });
  });
});

Assurez vous que la case "Activer la gestion des codes Javascript" est bien cochée sur oui et d'enregistrer avant de c/c le code. Ensuite vous devez cliquer sur "Créer un nouveau Javascript". Quand c'est fait, donnez lui un nom et cliquez sur index au niveau du placement. Enregistrez quand vous avec c/c le code.



(3) le grid

Je vais pas expliquer en détails ce qu'est le grid, mais je vais vous filer les tutoriels qui m'ont aidé quand j'ai commencé à me plonger dans cette façon de coder:
tutoriel (1)
tutoriel (2)
Comme vous pouvez le voir, la PA a six rangées et six colonnes. La taille de chacune se trouve dans ce code:

Code:
grid-template: 18px 40px 20px 75px 18px 10px / 220px 102px 115px 132px 110px 110px;

La largeur du forum sur lequel j'ai codé la PA est de 870px. Pour modifier votre largeur si vous voulez la mettre à la même taille que mon forum est ici: panneau d'administration, général, forum, configuration. En bas vous avez la partie "Structure des pages" et là vous écrivez 870.

Si vous souhaitez garder la largeur telle que vous l'avez, alors il faudra modifier le code ci-dessous du grid. Ces informations sont aussi dans le CSS. Si vous modifiez la largeur des colonnes (pas celles des rangées), vous devez modifier la largeur de ces variables:

.onglets_pa
.contenu
.gif_pa
.paimg
.container_txt
.float_pa1
.float_pa2

Encore une fois, tout est expliquée dans le CSS et les conditions des largeurs également. Vous n'avez pas besoin d'ajouter des colonnes ou des rangées, et vous n'avez pas besoin de modifier la hauteur des colonnes non plus.



(4) les onglets

Pour le moment vous avez cinq images dans le staff, si vous voulez en retirer une, il suffit de supprimer le bouton de l'image et la case où il y a le prénom et nom. (Possible que vous ayez à modifier la largeur des images pour que le tout reste unit).

ajouter une image:

Si vous souhaitez ajouter une image, ça se corse un peu, étant donné qu'il faut modifier l'HTML et le JS.

Pour ajouter une image vous devez ajouter ce code:

Code:
<div class="lab onglet6"><img src="https://images2.imgbox.com/d1/1b/v1XgkDZB_o.png" class="staff" /></div>

À la suite de ce code:

Code:
<div class="lab onglet5">
                                               <img src="https://images2.imgbox.com/d1/1b/v1XgkDZB_o.png" class="staff" />                                                      
 </div>

Si vous voulez ajouter une seconde image, c'est le même principe, mais vous devez lui donner un autre nom, donc à la place de lab onglet6, vous mettez lab onglet7. Et ainsi de suite.

Dans cette exemple, on part du principe que vous ajouterez deux onglets, si vous avez besoin de plus et que vous ne savez pas comment en ajouter encore un, alors contactez moi.

ajouter contenu des onglets:

Dès que vous avez ajouté les images, vous devez encore ajouter le contenu qui vont se trouver dans les deux nouveaux onglets, pour se faire, vous devez ajouter ce code:

Code:
<div class="contenu onglet6"><h>PRÉNOM <j>NOM6</j></h> <div class="sous_titre">ADMINISTRATEUR — <a href="uc">PROFIL</a></div></div><div class="contenu onglet7"><h>PRÉNOM <j>NOM7</j></h> <div class="sous_titre">ADMINISTRATEUR — <a href="uc">PROFIL</a></div></div>

À la suite de ce code:

Code:
<div class="contenu onglet5">
  <h>PRÉNOM <j>NOM5</j></h>                                          
   <div class="sous_titre">ADMINISTRATEUR — <a href="uc">PROFIL</a></div>
</div>

modifier le code javascript:

Quand ca c'est fait vous devez encore modifier le JS, c/c ce code et remplacez tout votre code JS par celui-ci:

Code:
$(document).ready(function() {
  $(".onglets_pa").each(function() {
    $(".lab").click(function() {
      $(this)
        .addClass("visible")
        .siblings()
        .removeClass("visible");
      if ($(this).hasClass("onglet1")) {
        $(this)
          .parent()
          .next()
          .find(".onglet1")
          .addClass("visible")
          .siblings()
          .removeClass("visible");
      } else if ($(this).hasClass("onglet2")) {
        $(this)
          .parent()
          .next()
          .find(".onglet2")
          .addClass("visible")
          .siblings()
          .removeClass("visible");
         } else if ($(this).hasClass("onglet3")) {
        $(this)
          .parent()
          .next()
          .find(".onglet3")
          .addClass("visible")
          .siblings()
          .removeClass("visible");
           } else if ($(this).hasClass("onglet4")) {
        $(this)
          .parent()
          .next()
          .find(".onglet4")
          .addClass("visible")
          .siblings()
          .removeClass("visible");
          } else if ($(this).hasClass("onglet5")) {
        $(this)
          .parent()
          .next()
          .find(".onglet5")
          .addClass("visible")
          .siblings()
          .removeClass("visible");
          } else if ($(this).hasClass("onglet6")) {
        $(this)
          .parent()
          .next()
          .find(".onglet6")
          .addClass("visible")
          .siblings()
          .removeClass("visible");
      } else {
        $(this)
          .parent()
          .next()
          .find(".onglet7")
          .addClass("visible")
          .siblings()
          .removeClass("visible");
      }
    });
  });
});

modifier le CSS:

Quand cette partie est terminée, vous n'aurez plus qu'à modifier le width des images de staff. Pour ca je vous conseille de remplacer le code css de la balise .lab ainsi que .staff par ce code:

Code:
.lab {
    cursor: pointer;
    margin-left: 5px;
}

.staff {
    border-radius: 50px;
    width: 20px;
    height: 27px;
    padding: 2px;
    border: 1px solid #ededed;
    object-fit: cover;
}

Encore une fois si vous avez des questions n'hésitez pas à me contacter. La suggestion pour la modification de la largeur des images staff est une suggestion, vous pouvez la modifier comme vous le souhaitez.



(5) mot de fin

Je le redis, mais vraiment si vous avez un problème ou une question, surtout n'hésitez pas. Je vous conseille dans un premier temps de reprendre la largeur du forum ainsi que la font si vous n'avez pas encore trop d'expérience dans le codage, comme ca vous avez très peu à modifier.

Je serais bien entendu très heureuse de voir le résultat final dans le cas où vous utilisez la PA, donc n'hésitez vraiment pas à me l'envoyer. I love you Vous pouvez également laisser une suggestion dans ce sujet.
FORMULAIRE CRÉÉ PAR ICE AND FIRE. (2021)


#pink-theme
Sauter vers: