AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


27 résultats trouvés pour auteur_Onyx

Onyx

Boîte de messagerie originale - Mar 17 Oct 2017 - 17:24




Boîte de réception originale


Salut !

Voici un LS de boîte de réception qui a été fait pour la demande de R.Falsworth.

Voilà l'aperçu de la boîte de réception : cliquez ici pour voir.
Voilà l'aperçu des MPs : cliquez ici pour voir.


Ce LS est en quatre parties.
  • Tout d'abord, nous allons installer la boîte de réception dans le template.
  • Ensuite, nous allons installer la revue de MPs dans le template.
  • Puis, nous allons installer l'affichage des MPS dans le template.
  • Enfin, nous allons mettre en forme les catégories à l'aide du CSS.


Mettre un crédit vers Never-Utopia est obligatoire si vous utilisez ce LS.



1. La boîte de réception (Template Privmsgs_Body)


Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > POSTER & MESSAGES PRIVÉS
> > > > > PRIVMSGS_BODY

On met le code suivant et on enregistre :
Code:
<link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet" />
<div class="main_mp">
  <div class="mp_new_post">{POST_PM_IMG}</div>
  <div class="mp_types">
    <div class="mp_type">{INBOX}</div>
    <div class="mp_type">{SENTBOX}</div>
    <div class="mp_type">{OUTBOX}</div>
    <div class="mp_type">{SAVEBOX}</div>
  </div>
  <form action="{S_PRIVMSGS_ACTION}" method="post" name="privmsg_list" class="mp_list_form">
    <div class="mp_list">
      <div class="mp_list_top">
        <!-- BEGIN switch_box_size_notice -->
        <div class="mp_list_100">{BOX_SIZE_STATUS}</div>
        <!-- END switch_box_size_notice -->
        <div class="mp_list_select">
          {L_DISPLAY_MESSAGES}: 
          <select name="msgdays">
            {S_SELECT_MSG_DAYS}
          </select> 
          <input class="liteoption" type="submit" name="submit_msgdays" value="{L_GO}" />
        </div>
        <div style="clear: both;"></div>
      </div>
      <!-- BEGIN listrow -->
      <div class="mp_list_one">
        <span class="mp_list_img">
          <img title="{listrow.L_PRIVMSG_FOLDER_ALT}" src="{listrow.PRIVMSG_FOLDER_IMG}" alt="{listrow.L_PRIVMSG_FOLDER_ALT}" />
        </span>
        <span class="mp_list_title">
          <a class="topictitle" href="{listrow.U_READ}">{listrow.SUBJECT}</a> par {listrow.FROM} le {listrow.DATE}
        </span>
        <span class="mp_list_one_select">
          <input type="checkbox" name="mark[]2" value="{listrow.S_MARK_ID}" />
        </span>
        <div style="clear: both;"></div>
      </div>
      <!-- END listrow -->
      <!-- BEGIN switch_no_messages -->
      <div class="mp_nothing">{L_NO_MESSAGES}</div>
      <!-- END switch_no_messages -->
      <div class="mp_pagination">
        <span class="nav">{PAGE_NUMBER} {PAGINATION}</span>
      </div>
    </div>
    <div class="mp_list_bottom">
      {S_HIDDEN_FIELDS}
      <!-- BEGIN switch_save -->
      <input class="mainoption" type="submit" name="save" value="{L_SAVE_MARKED}" />  
      <!-- END switch_save -->
      <!-- BEGIN switch_move_profile -->
      <input class="mainoption" type="submit" name="moveprofile" value="{L_MOVE_PROFILE_MARKED}" />  
      <!-- END switch_move_profile -->
      <input class="liteoption" type="submit" name="delete" value="{L_DELETE_MARKED}" />  
      <input class="liteoption" type="submit" name="deleteall" value="{L_DELETE_ALL}" />  
      <div class="mp_bottom_right">
        <a class="gensmall" href="javascript:select_switch_privmsg(true);">{L_MARK_ALL}</a> :: 
        <a class="gensmall" href="javascript:select_switch_privmsg(false);">{L_UNMARK_ALL}</a>
      </div>
      <div style="clear: both;"></div>
    </div>
  </form>
  <div style="clear: both;"></div>
</div>

<table width="100%" border="0">
    <tr>
        <td align="right" valign="top">{JUMPBOX}</td>
    </tr>
</table>




2. Revue des messages privés (Template Privmsg_Topic_Review)


Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > POSTER & MESSAGES PRIVÉS
> > > > > PRIVMSGS_TOPIC_REVIEW

On met le code suivant et on enregistre :
Code:
<div class="me_review_bloc">
  <div class="mp_sent_boite">Revue des messages</div>
  <!-- BEGIN postrow -->
  <div class="mp_revue_space"></div>
  <div class="mp_sent_pseudo_title">
    <div class="mp_sent_pseudo">{postrow.POSTER_NAME}</div>
    <div class="mp_sent_title">{postrow.POST_SUBJECT} / {postrow.POST_DATE}</div>
    <div style="clear: both;"></div>
  </div>
  <div class="mp_sent_ava_mess">
    <div class="mp_sent_ava">
      {postrow.POSTER_AVATAR}
    </div>
    <div class="mp_sent_mess">
      {postrow.MESSAGE}
    </div>
    <div style="clear: both;"></div>
  </div>
  <!-- END postrow -->
</div>




3. Affichage du message privé (Template Privmsgs_Read_Body)


Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > POSTER & MESSAGES PRIVÉS
> > > > > PRIVMSGS_READ_BODY

On met le code suivant et on enregistre :
Code:
<link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet" />
<div class="mp_sent_topbloc">
  <div class="mp_sent_types">
    <div class="mp_sent_type">{INBOX}</div>
    <div class="mp_sent_type">{SENTBOX}</div>
    <div class="mp_sent_type">{OUTBOX}</div>
    <div class="mp_sent_type">{SAVEBOX}</div>
    <div class="clear: both;"></div>
  </div>
  <!-- BEGIN switch_post_reply -->
  <div class="mp_sent_reply">{REPLY_PM_IMG}</div>
  <!-- END switch_post_reply -->
  <div style="clear: both;"></div>
</div>

<form action="{S_PRIVMSGS_ACTION}" method="post" class="mp_sent_bloc">
  <div class="mp_sent_boite">{BOX_NAME}</div>
  <div class="mp_sent_pseudo_title">
    <div class="mp_sent_pseudo">{MESSAGE_FROM}</div>
    <div class="mp_sent_title">{POST_SUBJECT} / {POST_DATE}</div>
    <div class="mp_sent_quote_edit">
    <!-- BEGIN switch_quote -->{QUOTE_PM_IMG} <!-- END switch_quote -->{EDIT_PM_IMG}
    </div>
    <div style="clear: both;"></div>
  </div>
  <div class="mp_sent_ava_mess">
    <div class="mp_sent_ava">
      {AVATAR_FROM}
    </div>
    <div class="mp_sent_mess">
      <div class="mp__sent_message">
        {MESSAGE}
      </div>
      <!-- BEGIN switch_user_contact -->
      <div class="mp__sent_contact">
        {PROFILE_IMG} {PM_IMG} {EMAIL_IMG} {WWW_IMG} {AIM_IMG} {YIM_IMG} {MSN_IMG} {SKYPE_IMG}
      </div>
      <!-- END switch_user_contact -->
    </div>
    <div style="clear: both;"></div>
  </div>
  <div class="mp_sent_bottom">
    {S_HIDDEN_FIELDS}
    <!-- BEGIN switch_save -->
    <input class="liteoption" type="submit" name="save" value="{L_SAVE_MSG}" />  
    <!-- END switch_save -->
    <!-- BEGIN switch_move_profile -->
    <input class="liteoption" type="submit" name="moveprofile" value="{L_MOVE_PROFILE}" />  
    <!-- END switch_move_profile -->
    <input class="liteoption" type="submit" name="delete" value="{L_DELETE_MSG}" />
  </div>
  <br />
  <br />
  <!-- BEGIN switch_review_box -->
  <div class="mp_sent_review">
    {TOPIC_REVIEW_BOX}
  </div>
  <!-- END switch_review_box -->
</form>
<table width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td align="right" valign="top"><span class="gensmall">{JUMPBOX}</span></td>
   </tr>
</table>

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->




4. Mise en forme (CSS)


Si vous regardez votre boîte de messagerie, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre le totu en forme à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Pour cela, vous devez vous rendre là où vous voulez que le lecteur soit soit et y mettre le code suivant :
Code:
/*** Bloc de tous les mps ***/
.main_mp {
  width: 95%;
  margin: auto;
  margin-bottom: 10px;
  font-size: 12px;
  font-family: verdana;
  color: white;
}
.mp_new_post {
  text-align: right;
  padding-bottom: 5px;
}

/** Bloc des types de boite **/
.mp_types {
  background: #56739a;
  float: left;
  width: 20%;
  box-sizing: border-box;
  margin-right: 1%;
}
/*Type de boite*/
.mp_type {
  margin: 5px;
  display: block;
  background: #24445c;
  color: #e67e30;
  text-align: center;
  padding: 2px;
  font-family: 'Bangers', cursive;
  font-size: 16px;
  padding-top: 5px;
}
/*Type de boite pas choisi*/
.mp_type a {
  display: block;
  margin: -5px -2px -2px -2px;
  padding: 2px;
  color: white;
  text-align: center;
  text-decoration: none!important;
  font-family: 'Bangers', cursive;
  font-size: 16px;
  padding-top: 5px;
}
/*Type de boite pas choisi au survol*/
.mp_type a:hover {
  color: #e67e30;
  font-family: 'Bangers', cursive;
  font-size: 16px;
  padding-top: 5px;
}

/**Section de droite**/
.mp_list_form {
  float: left;
  width: 79%;
  box-sizing: border-box;
}

/*Bloc de droite avec la liste*/
.mp_list {
  background: #56739a;
}
/*Top de la liste*/
.mp_list_top {
  padding: 5px;
  text-align: left;
  font-size: 11px;
  margin-bottom: 5px;
}
/*Pourcentage de la boite*/
.mp_list_100 {
  float: left;
  padding-top: 2px;
  width: 235px;
}
/*Selectionner date message*/
.mp_list_select {
  float: right;
  text-align: right;
}

/** Un message prive **/
.mp_list_one {
  margin: 5px;
  background: #24445c;
  padding: 2px;
  text-align: left;
  height: 20px;
  line-height: 20px;
  vertical_align: middle;
  font-size: 12px;
  font-family: verdana;
}
/*Bloc image*/
.mp_list_img {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  vertical_align: middle;
  float: left;
  padding-right: 5px;
  width: 20px;
}
/*Image*/
.mp_list_img img {
  width: 20px;
  height: 20px;
}
/*Bloc info*/
.mp_list_title {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  vertical_align: middle;
  float: left;
  padding-right: 5px;
}
/*Titre à la bonne taille*/
.mp_list_title .topictitle {
  font-size: 12px;
}
/*Select droite*/
.mp_list_one_select {
  float: right;
}
/*Pagination*/
.mp_pagination {
  padding: 0px 2px 2px 2px;
  text-align: left;
}
.mp_pagination .nav {
  color: white;
}

/*En bas de la liste des mp*/
.mp_list_bottom {
  margin-top: 5px;
}
/*Mettre les selectionner a droite*/
.mp_bottom_right {
  float: right;
}



/*Top message envoye*/
.mp_sent_topbloc {
  width: 95%;
  margin: auto;
  margin-bottom: 10px;
  font-size: 12px;
  font-family: verdana;
}
/*Bloc type de boite*/
.mp_sent_types {
  float: left;
  text-align: left;
}
/*Type de boite*/
.mp_sent_type {
  float: left;
  margin-right: 5px;
  width: 150px;
  background: #56739a;
  color: #e67e30;
  font-family: 'Bangers', cursive;
  font-size: 16px;
  text-align: center;
}
/*Lien Type de boite*/
.mp_sent_type a {
  display: block;
  padding: 2px;
  padding-top: 5px;
  color: white;
  background: #56739a;
  text-align: center;
  text-decoration: none!important;
}
/*Lien Type de boite pas choisi au survol*/
.mp_sent_type a:hover {
  background: #24445c;
  color: #e67e30;
}
/*Bouton repondre*/
.mp_sent_reply {
  float: right;
}

/*Bloc message envoye*/
.mp_sent_bloc {
  width: 95%;
  margin: auto;
  margin-bottom: 10px;
  font-size: 12px;
  font-family: verdana;
  color: white;
}
/*Boite message envoye*/
.mp_sent_boite {
  box-sizing: border-box;
  background: #24445c;
  color: #e67e30;
  font-family: 'Bangers', cursive;
  font-size: 22px;
  width: 100%;
  margin: 5px 0px;
  padding: 5px;
  padding-top: 10px;
  text-align: center;
}
/*Bloc pseudo et titre*/
.mp_sent_pseudo_title {
  box-sizing: border-box;
  background: #56739a;
  width: 100%;
  margin: 5px 0px;
  color: #ffffff;
  padding: 5px;
  font-size: 13px;
  text-left: center;
}
/*Bloc pseudo*/
.mp_sent_pseudo {
  float: left;
  width: 200px;
  padding: 0px 5px;
  text-align: center;
}
/*Bloc titre*/
.mp_sent_title {
  float: left;
  padding-left: 5px;
  text-align: left;
}
/*Bloc citer et éditer*/
.mp_sent_quote_edit {
  width: 150px;
  float: right;
  padding-right: 5px;
  text-align: right;
}

/*Bloc avatar et message*/
.mp_sent_ava_mess {
  width: 100%;
  margin: 5px 0px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
}
/*Avatar message envoye*/
.mp_sent_ava {
  order: 1;
  flex-grow: 1;
  flex-shrink: 1;
  background: #56739a;
  width: 200px;
  margin-right: 5px;
  color: #ffffff;
  padding: 5px;
  font-size: 12px;
  text-align: center;
}
/*Bloc message*/
.mp_sent_mess {
  order: 2;
  flex-grow: 10;
  flex-shrink: 10;
  flex-basis: 100%;
  box-sizing: border-box;
  background: #56739a;
  color: #ffffff;
  padding: 5px;
  font-size: 12px;
  text-align: left;
}
/*Bloc contacts*/
.mp__sent_contact {
  margin-top: 10px;
}
/*mp_sent_bottom*/
.mp_sent_bottom {
  box-sizing: border-box;
  background: #56739a;
  width: 100%;
  margin: 5px 0px;
  color: #ffffff;
  padding: 5px;
  font-size: 11px;
  text-align: center;
}

/*Bloc espace entre posts*/
.mp_revue_space {
  box-sizing: border-box;
  background: #56739a;
  width: 100%;
  margin: 5px 0px;
  color: #ffffff;
  padding: 5px;
  font-size: 11px;
  text-align: center;
}


C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous avez besoin d'aide pour personnaliser le code.

À plus !


Merci de laisser un message pour donner vos impressions/commentaires/remerciements ^^

Comment personnaliser l'apparence de la chatbox - Mar 11 Avr 2017 - 22:06



Comment personnaliser l'apparence de la chatbox



Bonjour !

Nous avions précédemment une tonne de petits tutoriels qui donnaient des trucs sur la chatbox et qui, très souvent, se répétaient. Du coup, ce tutoriel a été fait pour but d'être plus complet et de rassembler en un endroit la majorité astuces.

Je vous réfère quand même à plusieurs astuces intéressantes :
- Styliser les messages de connexion / déconnexion (CSS)
- Empêcher les soucis des messages dans la Chatbox ForumActif

Tout les codes donnés ci-bas se mettent dans la feuille de style CSS.




Le bloc de la chatbox


Voilà le bloc qui contient toute la chatbox :
Code:
/*Contient toute la CB*/
body.chatbox {
}



En-tête de la chatbox


Voilà l'en-tête de la chat-box :
Code:
/*Barre de titre*/
#chatbox_header .catBottom {
  border: none; /*Enlève la bordure*/
  background-image: none; /*Enlève image de fond*/
  background-color: transparent; /*Enlève couleur de fond*/
  height: 30px;
}

/*Titre normal */
#chatbox_header .catBottom .cattitle {
}
/*Titre normal au survol*/
#chatbox_header .catBottom .cattitle:hover {
}

/*Liens de droite de la barre de titre*/
#chatbox_header .catBottom .chatbox-options a {
}
/*Liens de droite de la barre de titre au survol*/
#chatbox_header .catBottom .chatbox-options a:hover {
}



Pour remplacer le texte dans l'en-tête de la chatbox :
Code:
/*Pour cacher le titre normal*/
#chatbox_header .cattitle strong {
  font-size: 0px;
}
/*Titre Personnalisé*/
#chatbox_header .cattitle:before {
  content: "NOM"; /* Modifiez NOM par le titre que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien pour accéder aux archives normal*/
#chatbox_option_with_archives a {
  font-size: 0;
}
/*Lien pour accéder aux archives Personnalisé*/
#chatbox_option_with_archives a:before {
  content: "HISTORIQUE"; /* Modifiez HISTORIQUE par ce que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien pour sortir des archives normal*/
#chatbox_option_without_archives a {
  font-size: 0px;
}
/*Lien pour sortir des archives Personnalisé*/
#chatbox_option_without_archives a:before {
  content: "QUITTER HISTORIQUE"; /* Modifiez QUITTER HISTORIQUE par ce que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien de la connexion*/
#chatbox_option_co strong {
  font-size: 0px;
}
/*Lien de la connexion Personnalisé*/
#chatbox_option_co strong:before {
  content: "ENTRER SUR LA CB"; /* Modifiez ENTRER SUR LA CB par ce que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien de la déconnexion*/
#chatbox_option_disco {
  font-size: 0px;
}
/*Lien de la déconnexion Personnalisé*/
#chatbox_option_disco:before {
  content: "QUITTER LA CB"; /* Modifiez QUITTER LA CB par ce que vous désirez */
  font-size: 12px;
}





La liste des membres de la chatbox


Voilà la liste des membres de la chat-box :
Code:
/*Bloc de la liste des membres*/
#chatbox_members {
  background-color: transparent; /*Enlève couleur de fond*/
  border-right: 1px solid #000; /*Bordure entre la liste des membres et les messages*/
}

/*Ligne de titre des membres en ligne*/
#chatbox_members .online {
}
/*Liste qui contient les membres en ligne*/
#chatbox_members .online-users {
}
/*Ligne du nom du membre en ligne*/
#chatbox_members .online-users li {
}

/*Ligne de titre des membres absents*/
#chatbox_members .away {
}
/*Liste qui contient les membres absents*/
#chatbox_members .away-users {
}
/*Ligne du nom du membre absent*/
#chatbox_members .away-users li {
}
/* Menu au clic droit des pseudos */
#chatbox_contextmenu {
}



Pour remplacer le texte de "En ligne" et de "Absents" dans la liste des membres
Code:
/*Pour cacher le titre des membres en ligne*/
#chatbox_members .online {
  font-size: 0px;
}
/*Titre des membres en ligne personnalisé*/
#chatbox_members .online:before {
  content: "MEMBRES ACTIFS"; /* Modifiez MEMBRES ACTIFS par ce que vous désirez */
  font-size: 12px;
  color: green; /*Couleur de la police*/
}

/*Pour cacher le titre des membres absents*/
#chatbox_members .away {
  font-size: 0px;
}
/*Titre des membres absents personnalisé*/
#chatbox_members .away:before {
  content: "PROIES DE TIMMY"; /* Modifiez PROIES DE TIMMY par ce que vous désirez */
  font-size: 12px;
  color: darkred; /*Couleur de la police*/
}





L'intérieur de la chatbox où il y a les messages


Voilà l'intérieur où il y a les messages :
Code:
/*Partie centrale de la chatbox où il y a les messages*/
#chatbox {
}

/*Lignes des message impairs*/
#chatbox .chatbox_row_1 {
  margin: 0px;
}
/*Lignes de messages pairs*/
#chatbox .chatbox_row_2 {
  margin: 0px;
}

/*Empêcher le bug des textes trop longs*/
#chatbox .msg{word-wrap: break-word;}
#chatbox .user, #chatbox .date-and-time{white-space: nowrap;}

/* Mise en forme de la date */
#chatbox .date-and-time {
}

/*Bloc du pseudo du membre incluant le @ des modos et admins*/
#chatbox .user {
}
/*Pseudo du membre*/
#chatbox .chatbox-message-username {
}

/*Le message du membre*/
#chatbox .msg {
}



Les avatars de la chatbox :
Code:
/*Bloc avatar du membre*/
#chatbox .cb-avatar {
  padding: 1px!important; /*Padding*/
  border: 1px solid #d5d5d5!important; /*Bordure*/
  width:30px!important; /*Largeur*/
  height:30px!important; /*Hauteur*/
  overflow:hidden; /*Cache ce qui dépasse*/
  box-shadow: 0 2px 2px rgba(0,0,0,0.1)!important; /*Ombre du bloc*/
  transform: translateZ(0); /* empeche bug Chrome */
}
/*Avatar du membre*/
#chatbox .cb-avatar > img {
  width:30px!important;
  height:30px!important;
}





Barre de bas du forum


Voilà la barre du bas du forum :
Code:
/*Pour arranger la hauteur de la barre du bas*/
#chatbox_footer {
  height: 29px!important;
}
/*Barre du bas*/
#chatbox_footer .catBottom {
  border: none; /*Enlève la bordure*/
  background-image: none; /*Enlève image de fond*/
  background-color: transparent; /*Enlève couleur de fond*/
  height: 29px;
}

/*Bouton Aide tout à gauche*/
#chatbox_footer #help-button {
}

/*Bouton Gras*/
#chatbox_footer .text-styles label[title="Gras"] {
  background-color: pink;
}
/*Bouton Italique*/
#chatbox_footer .text-styles label[title="Ital."] {
}
/*Bouton Surligné*/
#chatbox_footer .text-styles label[title="Soulig."] {
}
/*Bouton Barré*/
#chatbox_footer .text-styles label[title="Barré"] {
}
/*Bouton Couleur de police*/
#chatbox_footer #divcolor {
}
/*Bouton Smiley*/
#chatbox_footer #divsmilies {
}

/*Texte avant le message*/
#chatbox_footer label[for="message"] {
}
/*Champ texte pour le message*/
#chatbox_footer #message {
}
/*Bouton pour envoyer le message*/
#chatbox_footer #submit_button {
}





C'est tout! Si jamais vous avez des problèmes avec ce tutoriel, n'hésitez pas à passer dans "Problème avec mon code".

À plus !

Onyx

Lecteur audio personnalisable - Lun 3 Avr 2017 - 1:14




Lecteur audio personnalisable


Salut !

Voici un LS d'un lecteur audio qui a été fait pour la demande de Mimio.

Le lecteur a un bouton Play/Pause ainsi qu'un bouton Repeat pour écouter une chanson en boucle.
Vous pouvez modifier le volume du lecteur (survolez l'icône du volume).
Le lecteur indique la progression de la chanson sous forme numérique (0:00) et sous forme barre de progression.
La barre de progression de la musique peut être déplacée pour avancer/reculer la chanson.
Il est possible de naviguer entre les chansons de la liste en cliquant sur le titre des chansons.
Le lecteur passe automatiquement à la prochaine chanson lorsqu'une chanson est terminée.
Lorsque la liste des chansons est terminée, cela recommence automatiquement au début.

Voilà l'aperçu :


Voilà l'aperçu de la version claire :


Voilà l'aperçu de la version sombre :


À noter que le rendu peut être différent selon les différents navigateurs.


Ce code est en trois parties.
  • Tout d'abord, nous allons mettre le lecteur audio dans une page html.
  • Ensuite, nous allons voir comment mettre des chansons dans le lecteur audio.
  • Enfin, nous allons mettre placer le lecteur audio dans un iframe pour pouvoir le placer où on veut.


Mettre un crédit vers Never-Utopia est obligatoire si vous utilisez ce LS.



1. Lecteur audio (Page HTML)


Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre lecteur audio.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML

Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)".
On choisit un titre quelconque.
On coche "Non" aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?".

On met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
  <head>
    <base target="_blank" />
    <meta name="author" content="Onyx" />
    <meta charset="UTF-8" />
    <title>Lecteur de musique</title>
    <style>
      body {
      margin: 0px;
      }
     
      /*Bloc qui contient tout*/
      #audiobloc {
      width: 300px;
      margin: auto;
      position: relative;
      background: #a3a3a3;
      border: 1px solid #858585;
      font-size: 14px;
      font-family: 'Times New Roman';
      }

      /*Bloc des commandes du lecteur*/
      #audiocommands {
      padding: 10px 0px 10px 10px;
      text-align: left;
      height: 14px;
      color: #656565;
      }
      /*Quand on passe sur les images de commandes*/
      #audiocommands img {
      cursor: pointer;
      }
      /*Bouton repeat*/
      #audiocommand_loopstart {
      opacity: 0.5;
      margin-left: 5px;
      }
      /*Bouton repeat survolé*/
      #audiocommand_loopstart:hover {
      opacity: 1;
      margin-left: 5px;
      }
      /*Bouton arrêter le repeat*/
      #audiocommand_loopstop {
      margin-left: 5px;
      }
     
     
      /*Bloc du temps en chiffres*/
      #audio_time {
      display: inline-block;
      margin-left: 5px;
      width: 31px;
      margin-top: 1px;
      text-align: left;
      height: 13px;
      line-height: 13px;
      vertical-align: top;
      font-size: 13px;
      font-family: 'Times New Roman';
      }
      /*Espace à gauche de la barre de temps*/
      #audiocommand_time {
      margin-left: 0px;
      }
     

      /*Liste des chansons*/
      #musiclist {
      max-height: 100px; /*Hauteur maximale de la liste des chansons*/
      overflow: auto;
      border-bottom: 1px solid #858585;
      }
      /*Ligne de chaque chanson*/
      .music_line {
      text-align: left;
      padding: 1px 5px 1px 5px;
      border-bottom: 1px dotted #858585;
      background: #c4c4c4;
      color: #757575;
      }
      .music_line:nth-last-of-type(1) {
      border: none;
      }
      /*Ligne survolée des chansons*/
      .music_line:hover {
      background: #dfdfdf;
      }
      /*Titre des chansons*/
      .music_song {
      cursor: pointer;
      }
      /*La ligne de la chanson active*/
      #current_songline {
      background: #dfdfdf;
      color: #656565;
      }


      /*Enlever le style de base de la barre de temps pour mettre notre propre style*/
      input[type=range] {
      display: inline-block;
      vertical-align: top;
      -webkit-appearance: none;
      width: 175px;
      height: 12px;
      background: transparent;
      padding: 0px;
      margin-top: 1px;
      }
      input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      }
      input[type=range]:focus {
      outline: none;
      }
      input[type=range]::-ms-track {
      width: 175px;
      vertical-align: top;
      display: inline-block;
      cursor: pointer;
      background: transparent;
      border-color: transparent;
      color: transparent;
      padding: 0px;
      }


      /*Bouton de la barre de temps*/
      /*Pour Chrome*/
      input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      border: none;
      height: 12px;
      width: 12px;
      margin: -4px;
      border-radius: 50%;
      background: #757575;
      cursor: pointer;
      }
      /*Pour Firefox*/
      input[type=range]::-moz-range-thumb {
      -webkit-appearance: none;
      border: none;
      height: 12px;
      width: 12px;
      border-radius: 50%;
      background: #757575;
      font-size: 0px;
      cursor: pointer;
      }
      /*Pour Internet Explorer*/
      input[type=range]::-ms-thumb {
      -webkit-appearance: none;
      border: none;
      height: 12px;
      width: 12px;
      border-radius: 50%;
      background: #757575;
      cursor: pointer;
      }

      /*Barre de temps*/
      /*Pour Chrome*/
      input[type=range]::-webkit-slider-runnable-track {
      width: 175px;
      height: 4px;
      cursor: pointer;
      background: #c1c1c1;
      border-radius: 2px;
      margin: 1px;
      }
      /*Pour Firefox*/
      input[type=range]::-moz-range-track {
      width: 175px;
      height: 4px;
      cursor: pointer;
      background: #c1c1c1;
      border-radius: 2px;
      }
      /*Pour Internet Explorer - Toutes la ligne de temps*/
      input[type=range]::-ms-track {
      width: 175px;
      height: 12px;
      cursor: pointer;
      border-radius: 2px;
      border: none;
      cursor: pointer;
      }
      /*Pour Internet Explorer - Partie avant le bouton de la ligne de temps*/
      input[type=range]::-ms-fill-lower {
      width: 175px;
      height: 4px;
      cursor: pointer;
      background: #c1c1c1;
      border-radius: 2px 0px 0px 2px;
      border: none;
      }
      /*Pour Internet Explorer - Partie après le bouton de la ligne de temps*/
      input[type=range]::-ms-fill-upper {
      width: 175px;
      height: 4px;
      cursor: pointer;
      background: #c1c1c1;
      border-radius: 0px 2px 2px 0px;
      border: none;
      }
     
     
      /*Bloc volume*/
      #audiocommand_volume_bloc {
      display: inline-bloc;
      margin-left: 5px;
      width: 14px;
      height: 14px;
      position: relative;
      }
      /*Image volume*/
      #audiocommand_volume_bloc img {
      width: 14px;
      height: 14px;
      }
      /*Bloc barre volume*/
      #audiocommand_volume_rangebloc {
      position: absolute;
      display: none;
      bottom: 51px;
      left: -37px;
      background: #a3a3a3;
      border: 1px solid #858585;
      width: 80px;
      padding: 3px;
      height: 12px;
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
      }
      /*Apparition barre volume*/
      #audiocommand_volume_bloc:hover #audiocommand_volume_rangebloc {
      display: block;
      }
 
     
      /*Barre de volume*/
      /*Pour Chrome*/
      #audiocommand_volume {
      width: 80px;
      margin: 0px;
      }
      #audiocommand_volume[type=range]::-webkit-slider-runnable-track {
      width: 80px;
      }
      /*Pour Firefox*/
      #audiocommand_volume[type=range]::-moz-range-track {
      width: 80px;
      }
      /*Pour Internet Explorer*/
      #audiocommand_volume[type=range]::-ms-track {
      width: 80px;
      }
      /*Pour Internet Explorer - Partie avant le bouton*/
      #audiocommand_volume[type=range]::-ms-fill-lower {
      width: 80px;
      }
      /*Pour Internet Explorer - Partie après le bouton*/
      #audiocommand_volume[type=range]::-ms-fill-upper {
      width: 80px;
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script type="text/javascript">
      //<!--
        /*Faire fonctionner le lecteur audio*/
        function playsong() {
          $('#lecteuraudio').trigger('play');
          $('#audiocommand_play').css('display', 'none');
          $('#audiocommand_pause').css('display', 'inline-block');
        }

        /*Mettre le lecteur audio sur pause*/
        function pausesong() {
          $('#lecteuraudio').trigger('pause');
          $('#audiocommand_pause').css('display', 'none');
          $('#audiocommand_play').css('display', 'inline-block');
        }
     
        /*Mettre la chanson du lecteur audio en repeat*/
        function loopsongstart() {
          $('#lecteuraudio').attr('loop', 'loop');
          $('#audiocommand_loopstart').css('display', 'none');
          $('#audiocommand_loopstop').css('display', 'inline-block');
        }
     
      /*Enlever le repeat de la chanson du lecteur*/
        function loopsongstop() {
          $('#lecteuraudio').removeAttr('loop');
          $('#audiocommand_loopstop').css('display', 'none');
          $('#audiocommand_loopstart').css('display', 'inline-block');
        }

        /*Passer à la chanson suivante*/
        function nextsong() {
          var src_music;
          var name_music;
          var next_song;
          var lecteur = $('#lecteuraudio');
          next_song = $('#current_song').parent().next().find('.music_song:first');
          if (next_song.length != 1) {
            next_song = $('.music_song:eq(0)');
          }
          $('#current_song').removeAttr('id');
          $('#current_songline').removeAttr('id');
          next_song.attr('id', 'current_song');
          next_song.parent().attr('id', 'current_songline');
          src_music = next_song.attr('data-music-src');
          lecteur.attr('src', src_music);
          lecteur.attr('autoplay', 'autoplay');
          lecteur.load();
          $('#audiocommand_time').attr('max', $('#lecteuraudio')[0].duration);
        }

        /*Changer de musique au click + Barre de temps*/
        $(function(){
          var lecteur = $('#lecteuraudio');
          var src_music;
          var next_song;
     
          /*Changer de musique au click*/
          $('.music_song').click(function(){
            src_music = $(this).attr('data-music-src');
            $('#current_song').removeAttr('id');
            $('#current_songline').removeAttr('id');
            $(this).attr('id', 'current_song');
            $(this).parent().attr('id', 'current_songline');
            lecteur.attr('src', src_music);
            lecteur.attr('autoplay', 'autoplay');
            $('#audiocommand_play').css('display', 'none');
            $('#audiocommand_pause').css('display', 'inline-block');
            lecteur.load();
            $('#audiocommand_time').attr('max', $('#lecteuraudio')[0].duration);
          });
     
     
          /*Mettre le volume à la valeur choisie*/
          $('#lecteuraudio')[0].volume = $('#audiocommand_volume').val()/10;
     
          /*Changer le volume*/
          $('#audiocommand_volume').on('change', function() {
            $('#lecteuraudio')[0].volume = $('#audiocommand_volume').val()/10;
          });
     
          /*Au changement de volume - changement icône*/
          $('#lecteuraudio').on('volumechange', function(){
            if ($('#lecteuraudio')[0].volume*10 > 7) {
              $('#audiocommand_volume_full').css('display', 'inline-block');
              $('#audiocommand_volume_middle').css('display', 'none');
              $('#audiocommand_volume_low').css('display', 'none');
              $('#audiocommand_volume_off').css('display', 'none');
            }
            else if ($('#lecteuraudio')[0].volume*10 > 3) {
              $('#audiocommand_volume_full').css('display', 'none');
              $('#audiocommand_volume_middle').css('display', 'inline-block');
              $('#audiocommand_volume_low').css('display', 'none');
              $('#audiocommand_volume_off').css('display', 'none');
            }
            else if ($('#lecteuraudio')[0].volume*10 > 0) {
              $('#audiocommand_volume_full').css('display', 'none');
              $('#audiocommand_volume_middle').css('display', 'none');
              $('#audiocommand_volume_low').css('display', 'inline-block');
              $('#audiocommand_volume_off').css('display', 'none');
            }
            else  {
              $('#audiocommand_volume_full').css('display', 'none');
              $('#audiocommand_volume_middle').css('display', 'none');
              $('#audiocommand_volume_low').css('display', 'none');
              $('#audiocommand_volume_off').css('display', 'inline-block');
            }
          });
     
     
          /*Mettre la durée totale de la chanson sur la barre de temps*/
          $('#lecteuraudio').on('loadedmetadata', function() {
            $('#audiocommand_time').attr('max', $('#lecteuraudio')[0].duration);
          });
 
          /*Changer la position de la chanson quand on bouge le pointeur de la ligne de temps*/
          $('#audiocommand_time').on('change', function() {
            $('#lecteuraudio')[0].currentTime = $('#audiocommand_time').val();
            $('#audiocommand_time').attr('max', $('#lecteuraudio')[0].duration);
          });
 
          /*Faire avancer la barre de temps*/
          $('#lecteuraudio').on('timeupdate', function(){
            var curtime = parseInt($('#lecteuraudio')[0].currentTime, 10);
            $('#audiocommand_time').val(curtime);
            $('#audio_time').html(formatTime(curtime));
            function formatTime(seconds) {
              minutes = Math.floor(seconds / 60);
              seconds = Math.floor(seconds % 60);
              seconds = (seconds >= 10) ? seconds : "0" + seconds;
              return minutes + ":" + seconds;
            }
          });
     
        });
      //-->
    </script>
  </head>
  <body>
    <div id="audiobloc">
      <div id="musiclist">
   
        <!-- DÉBUT DE TOUTES LES CHANSONS -->
   
        <!-- CHANSON 1 -->
        <div class="music_line" id="current_songline">
          <span data-music-src="URL DE LA CHANSON (EN FORMAT MP3)" class="music_song" id="current_song">
            0:00 - TITRE DE LA CHANSON
          </span>
        </div>
        <!-- FIN CHANSON 1 -->

        <!-- CHANSON XXX -->
        <div class="music_line">
          <span data-music-src="URL DE LA CHANSON (EN FORMAT MP3)" class="music_song">
            0:00 - TITRE DE LA CHANSON
          </span>
        </div>
        <!-- FIN CHANSON XXX -->
   
        <!-- FIN DE TOUTES LES CHANSONS -->
      </div>
 
     
      <!-- COMMANDES DU LECTEUR AUDIO -->
      <div id="audiocommands">
               
        <!-- COMMANDE PLAY -->
        <span onclick="playsong()" id="audiocommand_play"><img src="http://www.aht.li/3055457/Play_Gris.png" alt="Play" /></span>
       
        <!-- COMMANDE PAUSE -->
        <span onclick="pausesong()" id="audiocommand_pause" style="display: none;"><img src="http://www.aht.li/3055456/Pause_gris.png" alt="Pause" /></span>
               
        <!-- TEMPS DE LA CHANSON -->
        <span id="audio_time">0:00</span>
       
        <!-- BARRE DE PROGRESSION DE LA CHANSON -->
        <input type="range" id="audiocommand_time" value="0" max=""></input>
       
        <!-- COMMANDE VOLUME -->
        <span id="audiocommand_volume_bloc">
          <img id="audiocommand_volume_full" src="http://www.aht.li/3055459/Volume_Max_Gris.png" alt="Volume Maxumum" />
          <img id="audiocommand_volume_middle" src="http://www.aht.li/3055460/Volume_Middle_Gris.png" alt="Volume Middle" style="display: none;" />
          <img id="audiocommand_volume_low" src="http://www.aht.li/3055458/Volume_Low_Gris.png" alt="Volume Minimum" style="display: none;" />
          <img id="audiocommand_volume_off" src="http://www.aht.li/3055461/Volume_No_gris.png" alt="Volume Off" style="display: none;" />
          <span id="audiocommand_volume_rangebloc">
            <input type="range" id="audiocommand_volume" value="10" max="10"></input>
          </span>
        </span>
       
        <!-- COMMANDE RÉPÉTER LA CHANSON -->
        <span onclick="loopsongstart()" id="audiocommand_loopstart"><img src="http://www.aht.li/3055455/Loop_gris.png" alt="Repeat" /></span>
       
        <!-- COMMANDE ARRÊTER DE RÉPÉTER LA CHANSON -->
        <span onclick="loopsongstop()" id="audiocommand_loopstop" style="display: none;"><img src="http://www.aht.li/3055455/Loop_gris.png" alt="No Repeat" /></span>

      </div>
      <!-- FIN COMMANDES DU LECTEUR AUDIO -->
 

      <!-- LECTEUR AUDIO -->
      <audio id="lecteuraudio" preload="none" onended="nextsong()" src="URL DE LA PREMIÈRE CHANSON">
        Votre navigateur ne supporte pas ce lecteur audio.
      </audio>
      <!-- FIN LECTEUR AUDIO -->
 
    </div>
  </body>
</html>


Lorsque vous modifiez votre lecteur audio, il faut cliquer sur le triple engrenage (), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.


Si vous le souhaitez, vous pouvez modifier l'apparence de toutes les parties du lecteur. J'ai annoté le CSS, alors je vais vous laissez travailler dessus pour essayer d'arriver à un résultat qui vous convient ^^

Sinon, vous pouvez également utiliser une des deux autres versions déjà faites (version claire et version sombre) qui sont dans le 2e post.



2. Comment mettre des chansons dans le lecteur audio


Un lecteur audio sans musique ne sert pas à grand chose, vous serez sûrement d'accord. Du coup, nous allons voir comment ajouter des chansons.

Important : Les chansons ajoutées doivent absolument être au format MP3, donc elles doivent avoir l'extention ".mp3" à la fin.

La première étape est d'héberger les chansons sur le web. Pour cela, vous pouvez utiliser un hébergeur quelconque. Personnellement, j'utilise Archive-Host qui a une option gratuite pour les particuliers.

Bref, vous vous rendez sur l'hébergeur de votre choix et vous hébergez votre chanson. Puis, vous prenez le lien direct et vous allez le mettre dans le lecteur audio.


Pour cela, il vous suffit de retrouver ce bout de code :
Code:
        <!-- CHANSON XXX -->
        <div class="music_line">
          <span data-music-src="URL DE LA CHANSON (EN FORMAT MP3)" class="music_song">
            0:00 - TITRE DE LA CHANSON
          </span>
        </div>
        <!-- FIN CHANSON XXX -->


Et de mettre le lien de votre chanson à la place de "URL DE LA CHANSON (EN FORMAT MP3)".
Vous pouvez en profiter pour mettre la durée totale de la chanson à la place de "0:00".
Enfin, vous pouvez mettre le titre de la chanson à la place de "TITRE DE LA CHANSON".

Pour chaque nouvelle chanson dans votre liste, vous copiez/collez le code ci-haut et le mettez à la suite de la chanson précédente.


Évidemment, il y a une exception (parce que sinon c'est trop simple, non?)

Pour la première chanson de la liste, il faut que vous la mettiez dans ce bout de code :
Code:
        <!-- CHANSON 1 -->
        <div class="music_line" id="current_songline">
          <span data-music-src="URL DE LA CHANSON (EN FORMAT MP3)" class="music_song" id="current_song">
            0:00 - TITRE DE LA CHANSON
          </span>
        </div>
        <!-- FIN CHANSON 1 -->


Et il faut également mettre le lien de la chanson directement dans le lecteur audio de départ à cet endroit :
Code:
      <!-- LECTEUR AUDIO -->
      <audio id="lecteuraudio" preload="none" onended="nextsong()" src="URL DE LA PREMIÈRE CHANSON">
        Votre navigateur ne supporte pas ce lecteur audio.
      </audio>
      <!-- FIN LECTEUR AUDIO -->


C'est tout pour cette partie ~



3. Mettre le lecteur audio dans un iframe


Maintenant que la page HTML est créée avec le lecteur audio, il faut la mettre accessible aux membres.

Pour cela, vous devez vous rendre là où vous voulez que le lecteur soit soit et y mettre le code suivant :
Code:
<iframe style="display: block; height: 150px; width: 302px; margin: auto; border: none;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>


Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre lecteur audio), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink





C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous avez besoin d'aide pour personnaliser le code.

À plus !



Un petit oubli - Rappel sur le droit d'auteur


Bien qu'il n'y ait aucun problème à avoir un lecteur audio sur un site (dieu sait qu'on trouve 72 codes juste en tapant sur google), le contenu qu'on y met est une autre histoire. Si les musiques que vous mettez dans le lecteur ne sont pas libres de droit ou ne vous appartiennent pas, c'est contre le droit d'auteur. Voir le message de TiGraou ci-bas qui résume tout :

@TiGraou a écrit:Je trouve que c'est une bonne idée un lecteur musique mais il faut faire attention: La musique (MP3, radio…), les archives, les logiciels, sont protégés par le droit d’auteur. Il n’est donc pas possible de les reproduire ou de les diffuser sans autorisation de l’auteur.
Vous avez le risque de voir votre forum clôturé, je dis ça je dis rien. ^^ (voici le lien en question: http://forum.forumactif.com/t221386-mettre-de-la-musique-sur-votre-forum-vos-droits-a-connaitre

Pour ceux qui cherchent des musiques à télécharger et en toute légalité: Taper juste sur google "musique gratuite et libre de droit" ( quoi? ce n'est pas ce que vous voulez? \o/ )



Merci de laisser un message pour donner vos impressions/commentaires/remerciements ^^

Système de profil à 2 personnages qui change selon la catégorie - Mer 21 Déc 2016 - 22:12




Système de profil à 2 personnages qui change selon la catégorie


Salut !

Suite à la demande de 24nono38, j'ai conçu un code qui permet l'affichage de 2 personnages différent selon la catégorie où un message est posté.

Je m'explique :
Disons que vous avez un forum rpg avec section "monde des rêves" et "monde réel" et que vos joueurs incarnent un personnage différent selon le monde où ils sont. Vous voulez que le profil de vos joueurs affichent les données du personnage qu'ils jouent selon la catégorie où ils jouent.
Il vous suffira de créer des champs de profil où les joueurs mettront les informations du 2e personnage, soit les champs généraux comme âge, humeur, métier ainsi que des champs plus spéciaux comme rang, url de l'avatar, nom du 2e personnage.
Ensuite, le javascript s'occupera de faire apparaître les bons champs et les bonnes informations selon la catégorie où ils postent.
Utile, non?

Pour voir l'aperçu du premier profil : cliquez ici.
Pour voir l'aperçu du 2e profil : cliquez ici.

Ce LS est en quatre parties.
  • Tout d'abord, nous allons installer le profil dans le template.
  • Puis, nous allons mettre en forme le profil à l'aide du CSS.
  • Ensuite, nous allons créer les champs du 2e personnage dans le profil.
  • Enfin, nous allons installer et modifier le javascript qui fera fonctionner le tout.


- La version du forum est PhpBB2.

Mettre un crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Le profil (Template Viewtopic_Body)


Nous allons commencer par aller dans les templates, plus précisément dans le template "Viewtopic_Body" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > VIEWTOPIC_BODY

Vous devez trouver ce bout de code (lignes 61 à 67) :
Code:
      <td class="nav" valign="middle" width="100%">
         <span class="nav">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                {NAV_CAT_DESC_SECOND}
            </span>
      </td>   


Et le remplacer par ceci :
Code:
      <td class="nav" valign="middle" width="100%">
         <span class="nav">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                <span class="profil_navig">{NAV_CAT_DESC_SECOND}</span>
            </span>
      </td>   



Puis, vous devez trouver ceci (lignes 139 à 150) :
Code:
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}
         </span><br />
         <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>


Et le remplacer par ceci :
Code:
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
            <div class="postdetails poster-profile">
              <div class="profil_utilisateur">
                <div class="name">
                  <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
                  <div class="profil_pseudo">
                    <strong>{postrow.displayed.POSTER_NAME}</strong>
                  </div>
                </div>
                <div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div>
                <div class="profil_rang">{postrow.displayed.POSTER_RANK}</div>
                <div class="profil_contact">
                  <!-- BEGIN contact_field -->
                  {postrow.displayed.contact_field.CONTENT}
                  <!-- END contact_field -->
                  {postrow.displayed.PROFILE_IMG}
                  {postrow.displayed.PM_IMG}
                  {postrow.displayed.EMAIL_IMG}
                  {postrow.displayed.ONLINE_IMG}
                </div>
                <div class="profil_infos">
                  <div class="profil_champs">
                    <!-- BEGIN profile_field -->
                    <span class="profil_champ">
                      {postrow.displayed.profile_field.LABEL} <span>{postrow.displayed.profile_field.CONTENT}</span>
                    </span>
                    <!-- END profile_field -->
                  </div>
                </div>
              </div>
        </div>
      </td>



Enfin, vous devez trouvez ceci (lignes 253 à 261) :
Code:
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="middle">
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
               </td>
            </tr>
         </table>
      </td>


Et le remplacer par cela :
Code:
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="middle">
               </td>
            </tr>
         </table>
      </td>




2. Mise en forme (CSS)


Si vous regardez votre profil, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons le mettre en forme à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:

/*Bloc profil*/
.profil_utilisateur {
  width: 200px;
  margin: auto;
  position: relative;
}

/*Pseudo*/
.profil_pseudo {
  border-bottom: 1px solid #635f5f;
  padding: 5px 2px 5px 2px;
  font-size: 20px;
  margin: auto;
  text-align: center;
}

/*Bloc avatar*/
.profil_avatar {
  margin: 5px auto;
  box-shadow: 0px 0px 5px #635f5f;
  width: 200px;
  height: 320px;
  background: #ffffff;
}
/*Image avatar*/
.profil_avatar img {
  width: 200px;
  height: 320px;
}

/*Rang*/
.profil_rang {
  border-bottom: 1px solid #635f5f;
  border-top: 1px solid #635f5f;
  padding: 3px;
  font-size: 20px;
  margin: 5px auto;
  text-align: center;
  color: #41506f;
  font-family: 'Verdana';
  font-size: 14px;
  font-style: italic;
}

/*Liens sous le rang*/
.profil_contact {
  text-align: center;
}

/*Bloc qui contient les infos*/
.profil_infos {
  margin: 10px auto 5px auto;
  width: 190px;
  padding: 5px;
  background: #ffffff;
  border-bottom: 1px solid #635f5f;
  border-top: 1px solid #635f5f;
}
.profil_champ {
  color: #6f6f6f;
  font-size: 11px;
  display: none;
}
.profil_champ .label {
  color: #000000!important;
}




3. Créer les champs du 2e personnage (profil)


Maintenant, il faut créer les champs qui vont correspondrent aux informations du 2e personnage.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > UTILISATEURS & GROUPES
> > > UTILISATEURS
> > > > PROFILS

Puis vous créez les champs. Je suppose que je n'ai pas besoin de vous expliquer comment faire? La seule chose que je vous conseille, c'est de les mettre en ordre. À l'exception du rang, de l'image de l'avatar et du pseudo du 2e personnage, les informations s'affichent dans l'ordre où vous les mettez.

Voilà mon résultat si cela peut vous aider :
Spoiler:




4. Faire fonctionner le système de double profil (Javascript)


Enfin, on passe au javascript.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Système de double profil".
On choisit le placement "Sur les sujets".

Enfin, on met le javascript suivant et on enregistre :
Code:
$(function(){
   
      /*Noms des champs du profil NORMAL*/
      var champnamenormal = [
        "Je suis né(e) le : ",
        "Age du personnage : ",
        "Coté coeur : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Dans l'animus je suis : ",
        "Métier : ",
        "Avatar : ",
        "Crédit kit : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation : ",
        "Emploi : ",
        "Humeur : ",
        "Let's rock : "
      ];
   
      /*Nom des champs du profil SPÉCIAL tels qu'ils sont créés*/
      var champnamespecial = [
        "Je suis né(e) le (2e perso) : ",
        "Age du personnage (2e perso) : ",
        "Coté coeur (2e perso) : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Hors de l'animus je suis (2e perso) : ",
        "Métier (2e perso) : ",
        "Avatar (2e perso) : ",
        "Crédit kit (2e perso) : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation (2e perso) : ",
        "Emploi : ",
        "Humeur (2e perso) : ",
        "Let's rock (2e perso) : "
      ];
   
      /*Nom des champs du profil SPÉCIAL tels qu'ils doivent apparaîtrent*/
      var champnamespecialvrai = [
        "Je suis né(e) le : ",
        "Age du personnage : ",
        "Coté coeur : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Hors de l'animus je suis : ",
        "Métier : ",
        "Avatar : ",
        "Crédit kit : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation : ",
        "Emploi : ",
        "Humeur : ",
        "Let's rock : "
      ];
   
      /*Variables*/
      var champs;
      var champ;
      var champnormal;
      var champspecial;
      var champtext;
      var nouvellevaleur;
      var principal;
      var pseudomachin;
      var cate = $('.profil_navig:first').find('a:first').attr('href');

      /*Catégorie où le profil spécial doit être affiché*/
      var catespecial = "URL DE LA CATÉGORIE SPÉCIALE";
   
      /*Nom du champ du l'image de l'avatar du profil spécial*/
      var avatar2 = "Image avatar (2e perso) : ";
   
      /*Nom du champ du Nom du personnage du profil spécial*/
      var pseudo2 = "Prénom et Nom (2e perso) : ";
   
      /*Nom du champ du rang du personnage du profil spécial*/
      var rang2 = "Rang (2e perso) : ";
   
   
      /*Code à ne pas toucher qui affiche les bonnes données dans le profil SPÉCIAL*/
      if (cate == catespecial) {
        $('.profil_utilisateur').each(function(){
          principal = $(this);
          champs = principal.find('.profil_champ');
          for (y = 0; y < champs.length; y++) {
            champ = champs.eq(y);
            if (champ.find('span.label:first').text() == avatar2) {
              nouvellevaleur = champ.find('img:first').attr('src');
              if (principal.find('.profil_avatar').find('img:first').length > 0) {
                principal.find('.profil_avatar').find('img:first').attr('src', nouvellevaleur);
              }
              else {
                pseudomachin = principal.find('.profil_pseudo a:first').attr('href');
                principal.find('.profil_avatar').append('<a href="' + pseudomachin + '"><img src="' + nouvellevaleur + '" /></a>');
              }
            }
            else if (champ.find('span.label:first').text() == pseudo2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              if ($(this).find('.profil_pseudo:first').find('a strong:first').length > 0) {
                $(this).find('.profil_pseudo:first').find('a strong:first').text(nouvellevaleur);
              }
              else {
                $(this).find('.profil_pseudo:first').find('a:first').text(nouvellevaleur);
              }
            }
            else if (champ.find('span.label:first').text() == rang2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              $(this).find('.profil_rang:first').text(nouvellevaleur);
            }
            else {
              for (z = 0; z < champnamespecial.length; z++) {
                champspecial = champnamespecial[z];
                if (champ.find('span.label:first').text() == champspecial) {
                  champ.css('display', 'block');
                  champtext = champnamespecialvrai[z];
                  champ.find('span.label:first').text(champtext);
                }
              }
            }
          }
        });
      }
   
      /*Code à ne pas toucher qui affiche les bonnes données dans le profil NORMAL*/
      else {
        $('.profil_utilisateur').each(function(){
          champs = $(this).find('.profil_champ');
          for (y = 0; y < champs.length; y++) {
            champ = champs.eq(y);
            for (z = 1; z < champnamenormal.length; z++) {
              champnormal = champnamenormal[z];
              if (champ.find('span.label:first').text() == champnormal) {
                champ.css('display', 'block');
              }
            }
          }
        });
      }
    });


Il y a 4 choses à modifier dans ce javascript.

La première section correspond aux champs du profil normal qui apparaît dans presque toutes les catégories. Il s'agit de cette section :
Code:
      /*Noms des champs du profil NORMAL*/
      var champnamenormal = [
        "Je suis né(e) le : ",
        "Age du personnage : ",
        "Coté coeur : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Dans l'animus je suis : ",
        "Métier : ",
        "Avatar : ",
        "Crédit kit : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation : ",
        "Emploi : ",
        "Humeur : ",
        "Let's rock : "
      ];



Même chose pour la section /*Nom des champs du profil SPÉCIAL tels qu'ils sont créés*/ qui contient les champs du profil spécial tels que vous les avez créés dans le profil.


La section /*Nom des champs du profil SPÉCIAL tels qu'ils doivent apparaîtrent*/ contient les noms des champs du profil spécial tels que vous voulez qu'ils apparaîssent dans le profil. Les champs doivent être dans le même ordre que la section précédente.


Enfin, vous devez remplacer le URL DE LA CATÉGORIE SPÉCIALE de ce bout de code par l'url de votre propre catégorie.
Code:
      /*Catégorie où le profil spécial doit être affiché*/
      var catespecial = "URL DE LA CATÉGORIE SPÉCIALE";


Pour cela, allez sur la catégorie où le profil spécial doit s'afficher et regarder l'url de la page. Cela vous donnera quelque chose comme "http://www.never-utopia.com/c31-les-ateliers". Vous gardez seulement le / et ce qu'il y après, comme "/c31-les-ateliers" et c'est ce que vous utilisez pour remplacer le URL DE LA CATÉGORIE SPÉCIALE.




Si jamais vous voulez que le profil spécial s'affiche dans plus qu'une catégorie spécifique, vous ajoutez ce bout de code pour chaque forum/catégorie supplémentaire juste avant le "/*Code à ne pas toucher qui affiche les bonnes données dans le profil NORMAL*/" :
Code:
/*Code à ne pas toucher qui affiche les bonnes données dans le profil SPÉCIAL*/
      else if (cate == "URL DE CATÉGORIE") {
        $('.profil_utilisateur').each(function(){
          principal = $(this);
          champs = principal.find('.profil_champ');
          for (y = 0; y < champs.length; y++) {
            champ = champs.eq(y);
            if (champ.find('span.label:first').text() == avatar2) {
              nouvellevaleur = champ.find('img:first').attr('src');
              if (principal.find('.profil_avatar').find('img:first').length > 0) {
                principal.find('.profil_avatar').find('img:first').attr('src', nouvellevaleur);
              }
              else {
                pseudomachin = principal.find('.profil_pseudo a:first').attr('href');
                principal.find('.profil_avatar').append('<a href="' + pseudomachin + '"><img src="' + nouvellevaleur + '" /></a>');
              }
            }
            else if (champ.find('span.label:first').text() == pseudo2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              if ($(this).find('.profil_pseudo:first').find('a strong:first').length > 0) {
                $(this).find('.profil_pseudo:first').find('a strong:first').text(nouvellevaleur);
              }
              else {
                $(this).find('.profil_pseudo:first').find('a:first').text(nouvellevaleur);
              }
            }
            else if (champ.find('span.label:first').text() == rang2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              $(this).find('.profil_rang:first').text(nouvellevaleur);
            }
            else {
              for (z = 0; z < champnamespecial.length; z++) {
                champspecial = champnamespecial[z];
                if (champ.find('span.label:first').text() == champspecial) {
                  champ.css('display', 'block');
                  champtext = champnamespecialvrai[z];
                  champ.find('span.label:first').text(champtext);
                }
              }
            }
          }
        });
      }


Il vous suffira de modifier le "URL DE CATÉGORIE" par l'url de la catégorie où vous voulez que le profil spécial s'affiche.




C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !

Onyx

Qeel Carrousel (4 blocs) - css & html - Ven 30 Sep 2016 - 1:16




Qeel Carrousel


Salut !

Voici un petit LS de Qeel que j'ai fait pour la demande de P'tit loup. Le code vient de cette cette PA (page d'accueil) de Okhmhaka qui a été adaptée pour un qeel.

Pour voir l'aperçu du bloc de devant (bloc 1): cliquez ici.
Pour voir l'aperçu du bloc de droite (bloc 2) : cliquez ici.
Pour voir l'aperçu du bloc de droite (bloc 2) au survol d'une image de groupe : cliquez ici.
Pour voir l'aperçu du bloc de gauche (bloc 3) : cliquez ici.
Pour voir l'aperçu du bloc de gauche (3) au survol de l'image : cliquez ici.
Pour voir l'aperçu du bloc de derrière (4) : cliquez ici.

Ce LS est en deux parties.
  • Tout d'abord, nous allons installer le qeel dans le template et regarder comment ajouter/supprimer/modifier des groupes.
  • Puis, nous allons le mettre en forme à l'aide du CSS.


La largeur du Qeel est de 850 pixels et la hauteur 450px.
- La version du forum est PhpBB2.

Mettre un crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Corps du qeel (Template Index_Body)


Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_body" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > INDEX_BODY

Puis, il va nous falloir trouver le "BEGIN disable_viewonline" et le "END disable_viewonline". Normalement, ils sont respectivement aux lignes 173 et 220 du template.

Nous allons remplacer tout ce qu'il y a entre ces deux lignes par :
Code:
<script type="text/javascript">
        //<!--
                function change_qeelonglet(name)
                {
                        document.getElementById('qeelonglet_'+anc_qeelonglet).className = 'qeelonglet_0 qeelonglet';
                        document.getElementById('qeelonglet_'+name).className = 'qeelonglet_1 qeelonglet';
                        document.getElementById('contenu_qeelonglet_'+anc_qeelonglet).style.display = 'none';
                        document.getElementById('contenu_qeelonglet_'+name).style.display = 'block';
                        anc_qeelonglet = name;
                }
        //-->
</script>
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace" rel="stylesheet" />
<div id="qeeltarget1">
  <div id="qeeltarget2">
    <div id="qeeltarget3">
      <div id="qeeltarget4">
        <div id="qeelespace_top">
          <a href="{U_VIEWONLINE}" rel="nofollow">Qui se cache dans l'ombre ?</a>
        </div>
        <div id="qeelespace_carousel">
         
          <!-- ZONE 1 - DEFAUT -->
          <div id="qeelcarousel_1">
            <a href="#qeeltarget1" class="qeellien1"></a>
            <div class="qeelcarousel_1_content">
              <div class="qeel_subtitle">Statistiques</div>
              <div class="qeel_bloc">
                Bienvenue à<span id="newuser">{NEWEST_USER}</span> !
                <div id="loggedlist">{LOGGED_IN_USER_LIST}</div>
                <table id="connlist" cellspacing="0">{L_CONNECTED_MEMBERS}</table>
              </div>
            </div>
          </div>
         
          <!-- ZONE 2 -->
          <div id="qeelcarousel_2">
            <a href="#qeeltarget2" class="qeellien2"></a>
            <div class="qeelcarousel_2_content">
              <div class="qeel_subtitle">Groupes</div>
              <div class="qeel_bloc">
                <span class="qeelonglet_1 qeelonglet" id="qeelonglet_Groupe1" onmouseover="javascript:change_qeelonglet('Groupe1');">
                  <a href="#">NOM DU GROUPE 1</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe2" onmouseover="javascript:change_qeelonglet('Groupe2');">
                  <a href="#">NOM DU GROUPE 2</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe3" onmouseover="javascript:change_qeelonglet('Groupe3');">
                  <a href="#">NOM DU GROUPE 3</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe4" onmouseover="javascript:change_qeelonglet('Groupe4');">
                  <a href="#">NOM DU GROUPE 4</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe5" onmouseover="javascript:change_qeelonglet('Groupe5');">
                  <a href="#">NOM DU GROUPE 5</a>
                </span>
              </div>
              <div class="qeel_bloc">
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe1">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 1" alt="Image du groupe 1" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 1
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe2">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 2" alt="Image du groupe 2" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 2
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe3">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 3" alt="Image du groupe 3" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 3
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe4">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 4" alt="Image du groupe 4" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 4
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe5">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 5" alt="Image du groupe 5" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 5
                  </div>
                </div>
              </div>
              <div class="clear"></div>
            </div>
          </div>
         
          <!-- ZONE 3 -->
          <div id="qeelcarousel_3">
            <a href="#qeeltarget3" class="qeellien3"></a>
            <div class="qeelcarousel_3_content">
              <div class="qeel_subtitle">Anniversaires</div>
              <div class="qeel_bloc">
                <table id="qeelbirthday" cellspacing="0">
                  {L_WHOSBIRTHDAY_TODAY}
                  {L_WHOSBIRTHDAY_WEEK}
                </table>
              </div>
              <div class="qeel_anniv_bas">
                <img class="qeel_img_anniv" src="URL IMAGE SOUS LES ANNIVERSAIRES" alt="machin" />
                <div class="qeel_anniv_texte">
                  Codage du Qeel par Okhmhaka et Onyx de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>.
                </div>
              </div>
            </div>
          </div>
         
          <!-- ZONE 4 -->
          <div id="qeelcarousel_4">
            <a href="#qeeltarget4" class="qeellien4"></a>
            <div class="qeelcarousel_4_content">
              <div class="qeel_subtitle">Partenaires</div>
              <div class="qeel_bloc">
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 1" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 2" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 3" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 4" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 5" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 6" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 7" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 8" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 9" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 10" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 11" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 12" /></a>
              </div>
            </div>
          </div>
         
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");
</script>
    <script type="text/javascript">
        //<!--
                var anc_qeelonglet = 'Groupe1';
                change_qeelonglet(anc_qeelonglet);
        //-->
    </script>


Pour ce qui est rajouter, d'enlever ou de modifier un groupe, cela se fait par trois manipulations. Premièrement, on ajoute/enlève/modifie le nom du groupe. Puis, on enlève/ajoute/modifie la description du groupe. Enfin, on modifie la hauteur des groupes.

Les noms des groupes ressemblent à ceci :
Code:
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe5" onmouseover="javascript:change_qeelonglet('Groupe5');">
                  <a href="#">NOM DU GROUPE 5</a>
                </span>


Quant aux descriptions des groupes, elles correspondent à ceci :
Code:
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe5">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 5" alt="Image du groupe 5" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 5
                  </div>
                </div>


Il suffit de changer le 5 à tous les endroits où il y en a un par un nouveau chiffre.

Pour la hauteur des groupes, il faut se rendre à cet endroit dans le CSS (que nous allons ajouter à la prochaine étape) :
Code:
/*Nom des groupes*/
.qeelonglet {
  display: block;
  font-size: 18px;
  height: 38px;
  padding: 15px 3px 0px 3px;
  margin-bottom: 1px;
  text-align: center;
  background: #E9E8E8;
  font-weight: bold;
  text-transform: uppercase;
}


Et vous devez modifier le "height" et le "padding" pour arriver à une hauteur des onglets qui vous convient.



2. Mise en forme (CSS)


Si vous regardez votre qeel, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme notre qeel à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/************************************************************ DÉBUT QEEL ************************************************************/

/*Fond du qeel*/
#qeel {
  position: relative;
  width: 800px;
  height: 680px;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  background: #141313 url('http://img15.hostingpics.net/pics/570241qeel2.png') no-repeat top center;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #000000;
}


/*Titre du qeel*/
#qeel_title {
  color: goldenrod;
  font-size: 44px;
  font-family: 'Great Vibes', cursive;
  text-shadow: 1px 1px 2px #000000;
  padding-left: 15px;
}


/*Carré des informations sur les membres*/
#qeel_info_members {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 320px;
  height: 290px;
  background-color: rgba(20, 19, 19, 0.6);
  border-radius: 10px;
  box-shadow: 0px 0px 3px #141313;
  padding: 10px;
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: left;
}


/*Mise en forme des listes des membres connectés*/
#userlists {
  margin-top: 5px;
  height: 205px;
  overflow: auto;
}
#totalconn {
  margin-top: 5px;
}
#totalconn .row1{
  background: transparent;
  vertical-align: top;
}
#totalconn .gensmall {
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: left;
}


/*Section des groupes*/
#qeel_bottom {
  position: absolute;
  top: 418px;
  left: 0px;
  width: 800px;
  text-align: center; 
}


/*Nom des groupes*/
.qeelonglet {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 2px;
  height: 40px;
  font-size: 38px;
  font-family: 'Great Vibes', cursive;
  letter-spacing: 1px;
  text-shadow: 0px 0px 3px #000000;
  opacity: 0.6;
}
/*Groupe au survol*/
.qeelonglet_0:hover {
  cursor: pointer;
  opacity: 0.8;
}
/*Groupe actif*/
.qeelonglet_1 {
  opacity: 1;
}


/*Description des groupes*/
.contenu_qeelonglet {
  position: relative;
  width: 800px;
  height: 200px;
  margin-top: 20px;
  display: none;
}
/*Images des groupes*/
.contenu_qeelonglet img {
  width: 800px;
  height: 200px;
  border-radius: 0px 0px 20px 20px;
}
/*Descriptions des groupes*/
.qeel_desc {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 780px;
  height: 180px;
  background-color: rgba(20, 19, 19, 0.6);
  border-radius: 0px 0px 20px 20px;
  padding: 10px;
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: justify;
  overflow: auto;
  transition: 0.5s;
  opacity: 0;
}
/*Descriptions des groupes au survol*/
.contenu_qeelonglet:hover .qeel_desc {
  opacity: 1;
}

/************************************************************ FIN QEEL ************************************************************/





C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !

Onyx

Fiche de Prédéfini avec onglets - Ven 30 Sep 2016 - 0:48




Fiche de Prédéfini avec onglets


Salut !

Voici un petit LS d'une fiche de prédéfini à onglets que j'ai faite suite à la demande de MPGuenette.

Pour voir l'aperçu : cliquez ici.
Pour voir l'aperçu, onglet Histoire : cliquez ici.
Pour voir l'aperçu, onglet Autres : cliquez ici.

Ce LS est en trois parties.
  • Tout d'abord, nous allons ajouter le javascript qui permet de faire fonctionner les onglets.
  • Puis, nous allons mettre en forme la fiche avec du CSS.
  • Enfin, nous allons poster la fiche.


Laisser le crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Ajouter le javascript


Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Système d'onglets des prédéfinis".
On choisit le placement "Sur les sujets".

Enfin, on met le javascript suivant et on enregistre :
Code:
$(function() {
  var index_onglet;
  $('.predef_onglet').click(function(){
    $(this).parent().find('.predef_actif').removeClass('predef_actif');
    $(this).parent().find('.predef_contenu_actif').removeClass('predef_contenu_actif');
    index_onglet = $(this).index();
    $(this).parent().find('.predef_contenu').eq(index_onglet).addClass('predef_contenu_actif');
    $(this).addClass('predef_actif');
  });
});




2. Mise en forme (CSS)


Il est maintenant temps de mettre en forme notre fiche à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/*Bloc de predef*/
.predef_bloc {
  width: 500px;
  margin: auto;
  background: url('http://www.zupimages.net/up/16/36/ss1h.jpg') center top;
  font-family: 'Playfair Display SC', serif;
  padding-bottom: 25px;
  font-size: 14px;
  position: relative;
}
/*Titre de predef*/
.predef_title {
  background: #101010;
  padding: 10px 5px 5px 5px;
  font-family: 'UnifrakturCook', cursive;
  margin-bottom: 25px;
  font-size: 32px;
  color: #656565;
  text-align: center;
}
/*Citation de predef*/
.predef_cite {
  padding-top: 5px;
  font-size: 20px;
  color: #454545;
}
/*Bloc milieu*/
.predef_bloc_middle {
  padding-top: 5px;
  margin: auto;
  width: 450px;
  background-color: rgb(53, 53, 53);
  background-color: rgba(53, 53, 53, 0.75);
  text-align: center;
}
/*Onglet predef*/
.predef_onglet {
  display: inline-block;
  width: 120px;
  margin: 10px;
  text-align: center;
  font-size: 24px;
  color: #959595;
  cursor: pointer;
}
.predef_onglet:hover {
  color: #a3a3a3;
}
/*Onglet predef actif*/
.predef_actif {
  color: #b5b5b5!important;
  cursor: default;
}
/*Contenu de onglet*/
.predef_contenu {
  display: none;
  margin: auto;
  padding: 5px 15px 15px 15px;
  width: 420px;
  text-align: justify;
}
.predef_contenu_actif {
  display: block;
}
/*Image*/
.predef_img {
  float: left;
  height: 320px;
  width: 200px;
}
/*Bloc de texte*/
.predef_text {
  border: 2px solid #b5b5b5;
  color: #b5b5b5;
  float: left;
  width: 196px;
  margin-left: 10px;
  height: 306px;
  padding: 5px;
  overflow: auto;
}
.predef_contenu:nth-of-type(2) .predef_text {
  margin-left: 0px;
  width: 406px;
}
.predef_contenu:nth-of-type(3) .predef_text {
  margin-left: 0px;
  margin-right: 10px;
}
/*Crédits*/
.predef_credit {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 1px;
  left: 0px;
  font-size: 10px;
  color: #000000;
}
.predef_credit a {
  color: #c4c4c4;
}
.predef_credit a:hover {
  color: #ffffff;
}




3. Poster la fiche (html)


Il suffit de vous rendre là où vous voulez poster la fiche et d'y mettre ce code :
Code:
<link href="https://fonts.googleapis.com/css?family=Playfair+Display+SC|UnifrakturCook:700" rel="stylesheet" /><div class="predef_bloc"><div class="predef_title">TITRE OU NOM DU PRÉDÉFINI<div class="predef_cite">SOUS-TITRE OU CITATION</div></div><div class="predef_bloc_middle"><span class="predef_onglet predef_actif">Général</span><span class="predef_onglet">Histoire</span><span class="predef_onglet">Autres</span><div class="predef_contenu predef_contenu_actif"><img class="predef_img" src="URL IMAGE 1ER ONGLET" alt="avatar1" /><div class="predef_text">TEXTE DU 1ER ONGLET</div><div style="clear: both;"></div></div><div class="predef_contenu"><div class="predef_text">TEXTE DU 2E ONGLET</div><div style="clear: both;"></div></div><div class="predef_contenu"><div class="predef_text">TEXTE DU 3E ONGLET</div><img class="predef_img" src="URL IMAGE 3E ONGLET" alt="avatar2" /><div style="clear: both;"></div></div></div><div class="predef_credit">Par Onyx de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a></div></div>


Les majuscules servent à indiquer où mettre le contenu.




C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !

Onyx

Catégories sombres turquoises - Jeu 29 Sep 2016 - 23:43




Catégories sombres turquoises


Salut !

Voici un petit LS de catégories que j'ai faites pour la demande de TénébreuseRP.

Pour voir l'aperçu : cliquez ici.
Pour voir l'aperçu au survol du bloc de gauche, de sujets et de messages : cliquez ici.

Ce LS est en deux parties.
  • Tout d'abord, nous allons installer les catégories dans le template.
  • Puis, nous allons mettre en forme les catégories à l'aide du CSS.


- Pour ce qui est de l'hiérarchie et la structure des catégories, il faut choisir "Séparer les catégories sur l'index : Moyen".
- La version du forum est PhpBB3.

Mettre un crédit vers Never-Utopia est obligatoire.



1. Les catégories (Template Index_Box)


Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_box" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > INDEX_BOX

Puis, on va entièrement remplacer le template "Index_Box" par ceci :
Code:
<ul class="linklist">
  <!-- BEGIN switch_user_logged_in -->
  <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> • </li>
  <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a> • </li>
  <!-- END switch_user_logged_in -->
  <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
  <!-- BEGIN switch_user_logged_in -->
  <li class="rightside"><a href="{U_MARK_READ}" accesskey="m">{L_MARK_FORUMS_READ}</a></li>
  <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="cate_bloc">
  <div class="cate_title">
    <img class="cate_title_img" src="http://img4.hostingpics.net/pics/376602lastchaospng.png" />
    {catrow.tablehead.L_FORUM}
    <img class="cate_title_img" src="http://img4.hostingpics.net/pics/376602lastchaospng.png" />
  </div>
  <!-- END tablehead -->
  <!-- BEGIN forumrow -->
  <div class="forum_bloc">
    <div class="forum_bloc_left">
      <a href="{catrow.forumrow.U_VIEWFORUM}" class="forum_title">
        {catrow.forumrow.FORUM_NAME}
      </a>
      <div class="forum_sf">
        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
      </div>
      <div class="forum_oldnewlock">
        <img src="{catrow.forumrow.FORUM_FOLDER_IMG}" />
      </div>
    </div>
    <div class="forum_bloc_middle">
      <div class="forum_desc">
        {catrow.forumrow.FORUM_DESC}
      </div>
    </div>
    <div class="forum_bloc_right">
      <div class="forum_lastmess">
        <!-- 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}
      </div>
      <div class="forum_nbsujets">
        Sujets
        <div class="forum_nbsujets_hide">
          {catrow.forumrow.TOPICS}
        </div>
      </div>
      <div class="forum_nbmessages">
        Messages
        <div class="forum_nbmessages_hide">
          {catrow.forumrow.POSTS}
        </div>
      </div>
    </div>
    <div style="clear: both;"></div>
  </div>
  <!-- END forumrow -->
  <!-- BEGIN tablefoot -->
</div>
<!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<ul class="linklist">
  <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a> • </li>
  <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a> • </li>
  <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
  <!-- BEGIN switch_delete_cookies -->
  <li class="rightside"><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
  <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->




2. Mise en forme (CSS)


Si vous regardez vos catégories, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme nos catégories à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/*Bloc de 1 catégorie*/
.cate_bloc {
  width: 100%;
  margin: 20px auto 10px auto;
}
/*Haut de catégorie*/
.cate_title {
  text-align: center;
  margin-bottom: 15px;
}
/*Images de titre de catégorie*/
.cate_title_img {
  width: 120px;
  height: 76px;
  vertical-align: middle;
}
/*Titre de catégorie*/
.cate_title h2 {
  display: inline-block;
  margin: 0px;
  padding: 0px 10px 0px 10px;
  line-height: 76px;
  vertical-align: middle;
  font-family: 'Dancing Script', cursive;
  font-size: 45px;
  color: #c4c4c4;
  text-shadow: 1px 1px 1px #000000;
}

/*Bloc de 1 forum*/
.forum_bloc {
  position: relative;
  width: 100%;
  margin: auto;
  height: 200px;
  margin-bottom: 20px;
  background: #172326;
  border: 2px solid #26464d;
  font-size: 13px;
  font-family: 'Verdana';
  color: #a3a3a3;
}

/*Bloc de droite*/
.forum_bloc_left {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 250px;
  height: 200px;
  border-right: 2px solid #1b4f59;
}
/*Titre de forum*/
.forum_title {
  dislay: block;
  position: absolute;
  width: 240px;
  padding: 5px 5px 10px 5px;
  text-align: center;
  top: 0px;
  left: 0px;
  z-index: 4;
  font-family: 'Dancing Script', cursive;
  font-size: 30px;
  color: #2a858c!important;
  text-decoration: none;
  text-shadow: 1px 1px 1px #000000;
}
/*Titre survolé*/
.forum_title:hover {
  color: #35a9b3!important;
}
/*Bloc Image OldNewLock*/
.forum_oldnewlock {
  position: absolute;
  width: 152px;
  height: 154px;
  top: 10px;
  left: -52px;
  z-index: 2;
  background: url('http://img4.hostingpics.net/pics/774596Normal.png');
}
/*Image OldNewLock*/
.forum_oldnewlock img {
  display: inline-block;
  margin: 2px 0px 0px 2px;
  visibility: visible;
  opacity: 1;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
/*Bloc des sous-forums*/
.forum_sf {
  dislay: block;
  position: absolute;
  width: 240px;
  padding-right: 5px;
  height: 105px;
  bottom: 5px;
  left: 5px;
  z-index: 3;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  font-size: 13px;
  font-family: 'Verdana';
  text-align: center;
  color: #2a858c;
}
/*Liens des sous-forums*/
.forum_sf .gensmall {
  font-size: 13px;
  font-family: 'Verdana';
  color: #2a858c;
}
.forum_sf .gensmall:hover {
  color: #35a9b3;
}
/*Actions au hover du titre*/
.forum_bloc_left:hover .forum_sf {
  visibility: visible;
  opacity: 1;
}
.forum_bloc_left:hover .forum_oldnewlock img {
  visibility: hidden;
  opacity: 0;
}

/*Bloc de milieu*/
.forum_bloc_middle {
  margin-left: 252px;
  margin-right: 202px;
}
/*description des forums*/
.forum_desc {
  margin: 5px 0px 5px 5px;
  padding-right: 5px;
  overflow: auto;
  height: 190px;
  text-align: justify;
}

/*Bloc de gauche*/
.forum_bloc_right {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 200px;
  height: 200px;
  border-left: 2px solid #1b4f59;
  text-align: center;
}
/*Dernier message*/
.forum_lastmess {
  height: 73px;
  padding: 25px 5px 0px 5px;
  line-height: 16px;
  vertical-align: middle;
}
/*Lien de dernier message*/
.forum_lastmess a {
  color: #2a858c;
}
.forum_lastmess a:hover {
  color: #35a9b3;
}
/*Bloc de sujets et messages*/
.forum_nbsujets, .forum_nbmessages {
  position: relative;
  width: 180px;
  height: 29px;
  font-size: 14px;
  padding: 10px;
  line-height: 29px;
  vertical-align: middle;
  border-top: 2px solid #1b4f59;
}
/*Bloc du nombre de sujets et messages*/
.forum_nbsujets_hide, .forum_nbmessages_hide {
  position: absolute;
  width: 180px;
  height: 29px;
  line-height: 29px;
  vertical-align: middle;
  padding: 10px;
  top: 0px;
  left: 0px;
  opacity: 0;
  background: #172326;
  text-shadow: 1px 1px 1px #000000;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
/*Apparition des nombres*/
.forum_nbsujets:hover .forum_nbsujets_hide,
.forum_nbmessages:hover .forum_nbmessages_hide {
  opacity: 1;
}


Voilà les boutons Nouveau, Pas de de Nouveaux Messages et Verrouillé :
https://redcdn.net/hpimg4/pics/233690CatgorieForum.png
https://redcdn.net/hpimg4/pics/881805CatgorieNouveau.png
https://redcdn.net/hpimg4/pics/231407CatgorieVerrouill.png

Sinon, dans le CSS, vous avez une image dans la class "forum_oldnewlock" que vous voudrez peut-être modifier si vous voulez personnaliser le tout :
https://redcdn.net/hpimg4/pics/774596Normal.png




C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Cacher/révéler certains forums de différentes catégories (onglets) - Mar 20 Sep 2016 - 6:38




Cacher/révéler certains forums de différentes catégories (onglets)


Salut !

Sur le thème actuel (septembre 2016), il est possible de cocher/décocher les différents types de forums sur le menu afin de cacher/révéler les forums qui parlent uniquement de RPG, codage ou graphisme, même s'ils font partie de plusieurs catégories. Ce tutoriel vous permettra de faire la même chose avec l'option de garder vos choix en mémoire pour que vous n'ayez pas besoin cacher/révéler les forums que vous voulez à chaque fois que vous rechargez la page.

Exemple d'application :
Disons que vous avez un forum pirate et que vous avez séparé les catégories selon les parties du monde (Asie, Europe, Amérique, etc.). Seulement, certains forums sont principalement utilisés par pirates, d'autres par la marine, d'autres par les civils et d'autres par tout le monde. Histoire de faciliter la vie à tout le monde, vous décidez d'installer le système pour que les membres aient le choix de cocher/décocher les forums qu'ils veulent voir ou non.

Ce LS est en quatre parties.
  • Tout d'abord, nous allons modifier un peu les catégories pour ajouter le système d'onglets.
  • Puis, nous allons ajouter le javascript qui permet de faire fonctionner cette astuce.
  • ensuite, nous allons voir comment personnaliser le javascript avec vos onglets.
  • Enfin, nous allons styliser un peu les onglets avec du CSS.


Vos catégories doivent avoir la hiérarchie "Séparer sur l'index : Moyen".
Mettre un crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Ajout du système d'onglet (Template Index_Box)


Nous allons commencer par aller dans les templates, plus précisément dans le template "index_box".

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > INDEX_BOX

Puis, tout en haut du template, on va ajouter ceci :
Code:
<table id="selector">
  <tr>
    <td class="selectoroption">Nom onglet 1</td>
    <td class="selectoroption">Nom onglet 2</td>
    <td class="selectoroption">Nom onglet 3</td>
  </tr>
</table>


Je pense que je n'ai pas besoin de vous expliquer comment ajouter/modifier/enlever des onglets, c'est pas mal explicite u_u




Maintenant, on va entourer chaque forum d'une div pour bien les sélectionner et on va mettre un lien pour les identifier.

ATTENTION : Si vous utilisez PunBB ou phpBB2 et que vous n'avez jamais modifié vos templates ou que vos catégories sont encore codées avec des tableaux (balises table), allez dans le spoiler plus bas.

Ensuite, trouvez ceci :
Code:
<!-- BEGIN forumrow -->


Et ajoutez ceci juste après :
Code:
<a class="forum_distribution" href="{catrow.forumrow.U_VIEWFORUM}" style="display: none;"></a><div>


Enfin, trouvez ceci :
Code:
<!-- END forumrow -->


Et ajoutez ceci juste avant :
Code:
</div>


Spoiler pour PunBB et phpBB2:


Salut!

Si vous avez ces versions de forum, le fonctionnement sera un peu différent.

Tout d'abord, dans le template, retrouvez cette balise :
Code:
<!-- BEGIN forumrow -->


Si la première balise directement après n'est pas une balise "tr", ignorez ce spoiler et suivez les instructions normales pour cette partie.

Si c'est une balise "tr", ajoutez ceci directement avant la balise "tr" :
Code:
<tr style="display: none;"><td><a class="forum_distribution" href="{catrow.forumrow.U_VIEWFORUM}"></a></td></tr>




2. Ajouter le javascript


Maintenant que les onglets ont été créés, on va aller ajouter le javascript.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Système d'onglets de forum".
On choisit le placement "Sur toutes les pages".

ATTENTION : Si vous utilisez PunBB ou phpBB2 et que vous n'avez jamais modifié vos templates ou que vos catégories sont encore codées avec des tableaux (balises table), allez dans le spoiler plus bas.

Enfin, on met le javascript suivant et on enregistre :
Code:
$(function(){

  var nbselectoroption = $('#selector').find('.selectoroption').length;
  var tableauop = [];
  var localname;
  var optionindex;
  var queloptionquel;

  function nomsforum() {
    if (optionindex == 0) { /*Onglet 1*/
      tableauop = [
        "/f2-", /*1er forum à enlever ou rajouter dans onglet 1*/
        "/f6-", /*2e forum à enlever ou rajouter dans onglet 1*/
      ];
    }
    else if (optionindex == 1) { /*Onglet 2*/
      tableauop = [
        "/f1-", /*1er forum à enlever ou rajouter dans onglet 2*/
        "/f10-", /*2e forum à enlever ou rajouter dans onglet 2*/
      ];
    }
  }

  function rendreinvisible() {
    for (z = 0; z < tableauop.length; z++) {
      if ($('a.forum_distribution[href^="'+tableauop[z]+'"]').length > 0) {
        $('a.forum_distribution[href^="'+tableauop[z]+'"]').next().css('display', 'none');
      }
    }
  }

  function rendrevisible() {
    for (z = 0; z < tableauop.length; z++) {
      if ($('a.forum_distribution[href^="'+tableauop[z]+'"]').length > 0) {
        $('a.forum_distribution[href^="'+tableauop[z]+'"]').next().css('display', 'block');
      }
    }
  }

 if (nbselectoroption > 0) {
    for (i = 0; i < nbselectoroption; i++) {
      optionindex = i;
      var forlocalname = 'option' + i;
      var visibleounon = localStorage.getItem(forlocalname);
      if (visibleounon == "Invisible") {
        var queloption = $('.selectoroption').eq(i);
        queloption.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  }

  $('.selectoroption').click(function(){
    if (nbselectoroption > 0) {
      queloptionquel = $(this);
      optionindex = queloptionquel.index();
      localname = 'option' + optionindex;
      if (queloptionquel.hasClass('selectoroption_hidden')) {
        localStorage.setItem(localname, "Visible");
        queloptionquel.removeClass('selectoroption_hidden');
        nomsforum();
        rendrevisible();
      }
      else {
        localStorage.setItem(localname, "Invisible");
        queloptionquel.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  });

});


Spoiler pour PunBB et phpBB2:


Salut!

Si vous n'avez pas utilisé la technique du spoiler dans la section d'avant, parfait, ne lisez pas ce spoiler et utilisez la méthode normale.


Sinon, utilisez ce javascript :
Code:
$(function(){

  var nbselectoroption = $('#selector').find('.selectoroption').length;
  var tableauop = [];
  var localname;
  var optionindex;
  var queloptionquel;

  function nomsforum() {
    if (optionindex == 0) { /*Onglet 1*/
      tableauop = [
        "/f1-", /*1er forum à enlever ou rajouter dans onglet 1*/
      ];
    }
    else if (optionindex == 1) { /*Onglet 2*/
      tableauop = [
        "/f2-", /*1er forum à enlever ou rajouter dans onglet 2*/
      ];
    }
    else if (optionindex == 2) { /*Onglet 3*/
      tableauop = [
        "/f3-", /*1er forum à enlever ou rajouter dans onglet 3*/
      ];
    }
  }

  function rendreinvisible() {
    for (z = 0; z < tableauop.length; z++) {
      if ($('a.forum_distribution[href^="'+tableauop[z]+'"]').length > 0) {
        $('a.forum_distribution[href^="'+tableauop[z]+'"]').closest('tr').next().css('display', 'none');
      }
    }
  }

  function rendrevisible() {
    for (z = 0; z < tableauop.length; z++) {
      if ($('a.forum_distribution[href^="'+tableauop[z]+'"]').length > 0) {
        $('a.forum_distribution[href^="'+tableauop[z]+'"]').closest('tr').next().css('display', 'table-row');
      }
    }
  }

 if (nbselectoroption > 0) {
    for (i = 0; i < nbselectoroption; i++) {
      optionindex = i;
      var forlocalname = 'option' + i;
      var visibleounon = localStorage.getItem(forlocalname);
      if (visibleounon == "Invisible") {
        var queloption = $('.selectoroption').eq(i);
        queloption.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  }

  $('.selectoroption').click(function(){
    if (nbselectoroption > 0) {
      queloptionquel = $(this);
      optionindex = queloptionquel.index();
      localname = 'option' + optionindex;
      if (queloptionquel.hasClass('selectoroption_hidden')) {
        localStorage.setItem(localname, "Visible");
        queloptionquel.removeClass('selectoroption_hidden');
        nomsforum();
        rendrevisible();
      }
      else {
        localStorage.setItem(localname, "Invisible");
        queloptionquel.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  });

});




3. Personnaliser le javascript selon votre situation


La première étape est d'aller regarder ce bout de code :
Code:
  function nomsforum() {
    if (optionindex == 0) { /*Onglet 1*/
      tableauop = [
        "/f2-", /*1er forum à enlever ou rajouter dans onglet 1*/
        "/f6-", /*2e forum à enlever ou rajouter dans onglet 1*/
      ];
    }
    else if (optionindex == 1) { /*Onglet 2*/
      tableauop = [
        "/f1-", /*1er forum à enlever ou rajouter dans onglet 2*/
        "/f10-", /*2e forum à enlever ou rajouter dans onglet 2*/
      ];
    }
  }


En gros, cette fonction associe les onglets à certains forums pour que le reste du javascript sache quel forum cacher/révéler et quand.

Pour rajouter un onglet, vous rajoutez cette partie avant le dernier } de la function :
Code:
    else if (optionindex == W) { /*Onglet Y*/
      tableauop = [
        "/fZ-", /*1er forum à enlever ou rajouter dans onglet Y*/
        "/fZ-", /*2e forum à enlever ou rajouter dans onglet Y*/
      ];
    }


Pour personnaliser le truc :
Le "W" est le numéro de l'onglet moins 1, donc si vous êtes au 3e onglet, vous remplacez le "W" par "2".
Le "Y" est le numéro de l'onglet.
Le "Z" est le numéro du forum à cacher/révéler. Pour savoir quel nombre mettre, allez sur le forum en question et regardez l'adresse url. Elle sera sous cette forme "http://nomduforum.com/f14-trucquelconque". Juste après le /f vous avez un nombre. C'est ce nombre là que vous devez mettre à la place du "Z".

Je pense que vous comprenez le principe ^^




Pour ceux qui ne veulent pas que la décision de cacher/révéler des forums reste en mémoire dans leur navigateur, vous pouvez enlever cette option en supprimant ce bout de code :
Code:
  if (nbselectoroption > 0) {
    for (i = 0; i < nbselectoroption; i++) {
      optionindex = i;
      var forlocalname = 'option' + i;
      var visibleounon = localStorage.getItem(forlocalname);
      if (visibleounon == "Invisible") {
        var queloption = $('.selectoroption').eq(i);
        queloption.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  }



3. Mettre en forme les onglets (CSS)


Vous remarquez, sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme les onglets à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/*Bloc qui entoure les onglets*/
#selector {
  margin: 10px auto 10px auto;
  width: 100%;
  border-spacing: 5px;
  background: #353535; /*Couleur de fond*/
  border: none;
}
/*Onglets actifs*/
.selectoroption {
  padding: 5px;
  background: #656565; /*Couleur de fond*/
  color: #dfdfdf; /*Couleur de la police*/
  font-family: 'Cambria';
  font-size: 14px;
  opacity: 1;
  text-align: center;
  cursor: pointer;
}
/*Onglets non-actifs*/
.selectoroption_hidden {
  opacity: 0.5;
}





C'est tout! Si jamais vous avez des problèmes avec cette astuce, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez modifier le fonctionnement de l'astuce et que vous avez besoin d'aide.

À plus !

[Astuce] Ajouter des numéros de lignes aux balises code - Mer 24 Aoû 2016 - 3:45




Ajouter des numéros de lignes aux balises code


Salut !

Voici une astuce qui vous permettra de rajouter des numéros de lignes à vos balises codes que j'ai créée suite à la demande de Whitemoon.

Pour voir l'aperçu du résultat  : cliquez ici.

L'aperçu a été pris sur phpBB2. Ce LS fonctionne sous toutes les versions, mais le rendu sera différent selon la version de votre forum.

Ce LS est en deux parties.
  • Tout d'abord, nous allons ajouter le javascript qui calcule et ajoute les lignes.
  • Puis, nous allons ajouter un peu de CSS pour que cela s'affiche correctement.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Le javascript


Vous devez aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Numérotation des codes".
On choisit le placement "Sur les sujets".

Enfin, on met le javascript suivant et on enregistre :
Version phpBB2:
Code:
$(function() {
  var bloccode = $('.cont_code');
  if (bloccode.length > 0) {
    $(bloccode).each(function() {
      var divincode = $(this).wrapInner('<div>').children();
      var blochauteur = divincode.height();
      divincode.replaceWith(divincode.html());
      var lignehauteur = parseInt($(this).css('line-height'));
      var nblignes = blochauteur / lignehauteur;
      var bloclignes = '<span class="bloclignes"></span>';
      $(this).prepend(bloclignes);
      for (i = 1; i <= nblignes; i++) {
        if (i < 2) {
          $(this).find('.bloclignes').append(i);
        }
        else {
          $(this).find('.bloclignes').append('<br />'+i);
        }
      }
      var thispadtop = $(this).css('padding-top');
      var thispadbottom = $(this).css('padding-bottom');
      $(this).find('.bloclignes').css('padding-top', thispadtop).css('padding-bottom', thispadbottom);
    });
  }
});


Version phpBB3:
Code:
$(function() {
  var bloccode = $('code');
  if (bloccode.length > 0) {
    $(bloccode).each(function() {
      var divincode = $(this).wrapInner('<div>').children();
      var blochauteur = divincode.height();
      divincode.replaceWith(divincode.html());
      var lignehauteur = parseInt($(this).css('line-height'));
      var nblignes = blochauteur / lignehauteur;
      var bloclignes = '<span class="bloclignes"></span>';
      $(this).prepend(bloclignes);
      for (i = 1; i <= nblignes; i++) {
        if (i < 2) {
          $(this).find('.bloclignes').append(i);
        }
        else {
          $(this).find('.bloclignes').append('<br />'+i);
        }
      }
      var thispadtop = $(this).css('padding-top');
      var thispadbottom = $(this).css('padding-bottom');
      $(this).find('.bloclignes').css('padding-top', thispadtop).css('padding-bottom', thispadbottom);
    });
  }
});


Version PunBB:
Code:
$(function() {
  var bloccode = $('.cont_code');
  if (bloccode.length > 0) {
    $(bloccode).each(function() {
      var divincode = $(this).wrapInner('<div>').children();
      var blochauteur = divincode.height();
      divincode.replaceWith(divincode.html());
      var lignehauteur = parseInt($(this).css('line-height'));
      var nblignes = blochauteur / lignehauteur;
      var bloclignes = '<span class="bloclignes"></span>';
      $(this).prepend(bloclignes);
      for (i = 1; i <= nblignes; i++) {
        if (i < 2) {
          $(this).find('.bloclignes').append(i);
        }
        else {
          $(this).find('.bloclignes').append('<br />'+i);
        }
      }
      var thispadtop = $(this).css('padding-top');
      var thispadbottom = $(this).css('padding-bottom');
      $(this).find('.bloclignes').css('padding-top', thispadtop).css('padding-bottom', thispadbottom);
    });
  }
});


Version Invision:
Code:
$(function() {
  var bloccode = $('code');
  if (bloccode.length > 0) {
    $(bloccode).each(function() {
      var divincode = $(this).wrapInner('<div>').children();
      var blochauteur = divincode.height();
      divincode.replaceWith(divincode.html());
      var lignehauteur = parseInt($(this).css('line-height'));
      var nblignes = blochauteur / lignehauteur;
      var bloclignes = '<span class="bloclignes"></span>';
      $(this).prepend(bloclignes);
      for (i = 1; i <= nblignes; i++) {
        if (i < 2) {
          $(this).find('.bloclignes').append(i);
        }
        else {
          $(this).find('.bloclignes').append('<br />'+i);
        }
      }
      var thispadtop = $(this).css('padding-top');
      var thispadbottom = $(this).css('padding-bottom');
      $(this).find('.bloclignes').css('padding-top', thispadtop).css('padding-bottom', thispadbottom);
    });
  }
});




2. Positionnement (CSS)


Pour arranger le positionnement des lignes, on doit ensuite rajouter du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :

Version phpBB2:
Code:
.cont_code {
  display: block;
  position: relative;
  padding-left: 28px;
}
.bloclignes {
  position: absolute;
  width: 24px;
  top: 0px;
  left: 0px;
  padding-right: 2px;
  background-color: #dfdfdf;
  color: #757575;
  text-align: right;
}


Version phpBB3:
Code:
code {
  display: block;
  position: relative;
  padding-left: 29px;
}
.bloclignes {
  position: absolute;
  width: 24px;
  top: 0px;
  left: 0px;
  padding-right: 2px;
  background-color: transparent;
  border-right: 1px solid #cccccc;
  color: #757575;
  text-align: right;
}


Version PunBB:
Code:
.cont_code {
  display: block;
  position: relative;
  padding-left: 29px!important;
}
.bloclignes {
  position: absolute;
  width: 24px;
  top: 0px;
  left: 0px;
  padding-right: 2px;
  background-color: transparent;
  border-right: 1px dotted #dddddd;
  color: #757575;
  text-align: right;
}


Version Invision:
Code:
code {
  display: block;
  position: relative;
  padding-left: 28px;
}
.bloclignes {
  position: absolute;
  width: 24px;
  top: 0px;
  left: 0px;
  padding-right: 2px;
  background-color: #dfdfdf;
  color: #757575;
  text-align: right;
}





C'est tout! Si jamais vous avez des problèmes avec cette astuce, n'hésitez pas à passer dans Un problème avec mon code.

À plus ^^

Personnaliser les balises Code, Quote, Spoiler et Hide - Mer 24 Aoû 2016 - 2:38



Personnaliser les balises "Code", "Quote", "Spoiler" et "Hide"



Bonjour !

Ce tutoriel vous permettra d'apprendre comment personnaliser les balises "Code", "Quote", "Spoiler" et "Hide" pour améliorer leur apparence.

Au cas où vous ne savez pas de quoi je parle, voilà ces balises :

Code:
Je suis un code.


@Onyx a écrit:Je suis un quote (une citation).


Spoiler:
Je suis un spoiler.




Petits exemples de résultats différents de balises après personnalisation :
https://redcdn.net/hpimg15/pics/296960171.jpg
https://redcdn.net/hpimg15/pics/998191602.jpg
https://redcdn.net/hpimg15/pics/833452243.jpg
https://redcdn.net/hpimg15/pics/378846444.jpg
https://redcdn.net/hpimg15/pics/234533185.jpg


Je profite aussi de l'occasion pour vous donnerles liens vers d'autres tutoriels/astuces qui pourraient vous intéresser :
Coloriser vos balises de code : cliquez ici pour voir.
Ajouter l'option "Sélectionner le contenu" à vos balises de code : cliquez ici pour voir.
Personnalisation des intitulés des balises : cliquez ici pour voir.
Ajouter des numéros de ligne à vos balises de code : cliquez ici pour voir.


À noter que les codes ci-bas sont à mettre dans le CSS.
Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS



Personnalisation des balises sous phpBB2


Les balises code


Pour personnaliser les balises code :
Code:
/*Contenu de CODE*/
.code {
  propriété: valeur;
}
/*Intérieur du contenu de CODE*/
.cont_code {
  propriété: valeur;
}



Les balises quote (citer)


Pour personnaliser les balises quote (citer) :
Code:
/*Contenu de QUOTE*/
.quote {
  propriété: valeur;
}



Les balises spoiler


Pour personnaliser les balises spoiler :
Code:
/*Bloc qui contient le titre et le contenu de SPOILER*/
.spoiler {
  propriété: valeur;
}
/*Ligne du titre de SPOILER*/
.spoiler > dt {
  propriété: valeur;
}
/*Contenu de SPOILER fermé*/
.spoiler_closed {
  propriété: valeur;
}
/*Contenu de SPOILER ouvert*/
.spoiler_content {
  propriété: valeur;
}
/*Pour éliminer un espace pas rapport sous le spoiler*/
.spoiler > dd:last-child {
  border: none;
}



Les balises hide


Pour personnaliser les balises hide :
Code:
/*Bloc qui contient le HIDE*/
.hidecode {
  propriété: valeur;
}
/*Contenu de HIDE*/
.hidecode > dd:first-of-type {
  propriété: valeur;
}



Toutes les balises


Pour personnaliser tous les balises en même temps :
Code:
/*Bloc qui contient le titre et le contenu de CODE, SPOILER, QUOTE ET HIDE*/
.codebox {
  propriété: valeur;
}
/*Contenu de CODE, SPOILER FERMÉ, QUOTE ET HIDE*/
.codebox > dd:first-of-type  {
  propriété: valeur;
}
/*Ligne du titre de CODE, SPOILER ET QUOTE*/
.codebox > dt {
  propriété: valeur;
}
/*Titre de CODE, SPOILER ET QUOTE*/
.codebox > dt .genmed, .spoiler > dt {
  propriété: valeur;
}




Personnalisation des balises sous Invision


Les balises code


Pour personnaliser les balises code :
Code:
/*Contenu de CODE*/
code {
  propriété: valeur;
}



Les balises quote (citer)


Pour personnaliser les balises quote (citer) :
Code:
/*Bloc qui contient la ligne de l intitulé et le contenu de QUOTE*/
blockquote {
  propriété: valeur;
}
/*Bloc intérieur de QUOTE incluant l intitulé*/
blockquote > div {
  margin-left: 0px;
  propriété: valeur;
}
/*Intitulé de QUOTE*/
blockquote cite {
  background-image: none;
  propriété: valeur;
}



Les balises spoiler


Pour personnaliser les balises spoiler :
Code:
/*Bloc qui contient le titre et le contenu de SPOILER*/
.spoiler {
  propriété: valeur;
}
/*Ligne du titre de SPOILER*/
.spoiler > dt {
  propriété: valeur;
}
/*Contenu de SPOILER fermé*/
.spoiler_content {
  propriété: valeur;
}
/*Contenu de SPOILER ouvert*/
.spoiler .hidden {
  propriété: valeur;
}



Les balises hide


Pour personnaliser les balises hide :
Code:
/*Bloc qui contient le HIDE*/
.hidecode {
  propriété: valeur;
}
/*Contenu de HIDE*/
.hidecode > dd:first-of-type {
  propriété: valeur;
}



Toutes les balises


Pour personnaliser plusieurs balises en même temps :
Code:
/*Bloc qui contient le titre et le contenu de CODE ET HIDE*/
.codebox {
  propriété: valeur;
}
/*Contenu de CODE ET HIDE*/
.codebox > dd:first-of-type  {
  propriété: valeur;
}
/*Ligne du titre de CODE ET HIDE*/
.codebox > dt {
  propriété: valeur;
}




Personnalisation des balises sous phpBB3


Les balises code


Pour personnaliser les balises code :
Code:
/*Contenu de CODE*/
code {
  propriété: valeur;
}



Les balises quote (citer)


Pour personnaliser les balises quote (citer) :
Code:
/*Bloc qui crée l apostrophe et l espace autour de QUOTE*/
blockquote {
  margin: 0px;
  background-image: none;
  propriété: valeur;
}
/*Intitulé de QUOTE*/
blockquote cite {
  propriété: valeur;
}
/*Bloc de QUOTE incluant l intitulé*/
blockquote > div {
  margin-left: 0px;
  propriété: valeur;
}



Les balises spoiler


Pour personnaliser les balises spoiler :
Code:
/*Bloc qui contient le titre et le contenu de SPOILER*/
.spoiler {
  propriété: valeur;
}
/*Ligne du titre de SPOILER*/
.spoiler > dt {
  propriété: valeur;
}
/*Contenu de SPOILER fermé*/
.spoiler_content {
  propriété: valeur;
}
/*Contenu de SPOILER ouvert*/
.spoiler .hidden {
  propriété: valeur;
}



Les balises hide


Pour personnaliser les balises hide :
Code:
/*Bloc qui contient le HIDE*/
.hidecode {
  propriété: valeur;
}
/*Contenu de HIDE*/
.hidecode > dd:first-of-type {
  propriété: valeur;
}



Toutes les balises


Pour personnaliser plusieurs balises en même temps :
Code:
/*Bloc qui contient le titre et le contenu de CODE, SPOILER ET HIDE*/
.codebox {
  propriété: valeur;
}
/*Contenu de CODE, SPOILER ET HIDE*/
.codebox > dd:first-of-type  {
  propriété: valeur;
}
/*Ligne du titre de CODE, SPOILER ET HIDE*/
.codebox > dt {
  propriété: valeur;
}




Personnalisation des balises sous PunBB


Les balises code


Pour personnaliser les balises code :
Code:
/*Contenu de CODE*/
.cont_code {
  propriété: valeur;
}



Les balises quote (citer)


Pour personnaliser les balises quote (citer) :
Code:
/*Bloc autour de QUOTE*/
blockquote {
  propriété: valeur;
}
/*Intitulé de QUOTE*/
blockquote cite {
  background-image: none;
  propriété: valeur;
}
/*Bloc de QUOTE incluant l intitulé*/
blockquote > div {
  margin-left: 0px;
  propriété: valeur;
}



Les balises spoiler


Pour personnaliser les balises spoiler :
Code:
/*Bloc qui contient le titre et le contenu de SPOILER*/
.spoiler {
  propriété: valeur;
}
/*Ligne du titre de SPOILER*/
.spoiler > dt {
  propriété: valeur;
}
/*Contenu de SPOILER fermé*/
.spoiler_content {
  propriété: valeur;
}
/*Contenu de SPOILER ouvert*/
.spoiler .hidden {
  propriété: valeur;
}



Les balises hide


Pour personnaliser les balises hide :
Code:
/*Bloc qui contient le HIDE*/
.hidecode {
  propriété: valeur;
}
/*Contenu de HIDE*/
.hidecode > dd:first-of-type {
  propriété: valeur;
}



Toutes les balises


Pour personnaliser plusieurs balises en même temps :
Code:
/*Bloc qui contient le titre et le contenu de CODE, SPOILER ET HIDE*/
.codebox {
  propriété: valeur;
}
/*Contenu de CODE, SPOILER ET HIDE*/
.codebox > dd:first-of-type  {
  propriété: valeur;
}
/*Ligne du titre de CODE, SPOILER ET HIDE*/
.codebox > dt {
  propriété: valeur;
}

Onyx

Système de Boutique avec triage automatique - Lun 4 Juil 2016 - 6:56




Système de Boutique avec triage automatique


Salut !

Alors, ce LS vous offrira un système de boutique. Il est composé d'une partie "menu", d'une partie "sélection des items" et d'une partie "panier".

Le menu permet à l'utilisateur de trier les articles pour avoir la sélection d'items qui l'intéresse (toutes les armes qui coûtent moins de 500$ par exemple).

La sélection d'items est la liste des items disponibles où vous pouvez indiquer le nombre d'items à acheter et cliquer sur acheter pour que les items s'ajoutent à votre panier.

Le panier comporte la liste des items que vous avez choisis ainsi que le total que cela vous coûte. Vous avez l'option de rénitialiser le panier.

Le système de boutique, une fois le panier rempli, vous permet de cliquer sur "soumettre votre panier", ce qui va poster un message contenant votre commande directement dans le sujet concerné.

Pour voir la Boutique en direct : cliquez ici.
Pour voir l'aperçu de la Boutique en image : cliquez ici.


Ce LS est en quatre parties.
  • Tout d'abord, nous allons créer la boutique dans une page HTML.
  • Ensuite, nous allons voir comment la personnaliser.
  • Puis, nous allons activer l'autorisation de recevoir des formulaires externes pour que le formulaire fonctionne.
  • Enfin, nous allons mettre la boutique dans un iframe pour la rendre accessible.


Mettre un crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Créer la boutique (Page HTML)


Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre boutique.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML

Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)".
On choisit un titre quelconque.
On coche "Non" aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?".

On met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="author" content="Onyx" />
  <title>Boutique</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
  <link href='https://fonts.googleapis.com/css?family=Dancing+Script|Libre+Baskerville' rel='stylesheet' type='text/css' />
  <style type="text/css">
    /*Corps*/
    body {
    margin: 0px;
    }
    /*Le bloc entier de la boutique*/
    #boutique {
    position: relative;
    padding-bottom: 10px;
    margin: auto;
    max-width: 850px;
    background-color: #efefef;
    border: 8px double #747474;
    border-left: 1px solid #747474;
    border-right: 1px solid #747474;
    font-size: 14px;
    font-family: 'Times New Roman';
    color: #707070;
    text-align: center;
    }
    /*Le bloc du titre de la boutique*/
    #boutique_top {
    padding: 10px;
    font-size: 26px;
    font-family: 'Dancing Script', script;
    text-align: center;
    border-bottom: 1px solid #747474;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    }
    /*Menu de gauche*/
    #menu {
    float: left;
    text-align: left;
    padding-top: 5px;
    width: 150px;
    height: 825px;
    margin-right: 10px;
    padding-left: 5px;
    border-right: 1px solid #747474;
    }
    /*Les boutons de tri*/
    #trier, #trier2 {
    display: block;
    margin: auto;
    }
    /*Titres des catégories*/
    .menu_title {
    display: inline-block;
    margin-left: 20px;
    border-bottom: 1px solid #707070;
    color: #707070;
    font-size: 16px;
    }
    /*Liste des options des catégories*/
    #menu ul {
    margin-top: 5px;
    margin-bottom: 10px;
    list-style-type:none;
    }
    /*Option des catégories*/
    #menu ul li {
    margin-left: -30px;
    }
    /*Partie de droite*/
    #middle {
    overflow: auto;
    height: 650px;
    text-align: center;
    }
    /*Div de un seul item*/
    .contenu_shoponglet > div {
    display: inline-block;
    text-align: center;
    margin-bottom: 10px;
    padding: 10px;
    }
    /*Bloc qui contient l'item*/
    .item_bloc {
    display: inline-block;
    vertical-align: top;
    background-color: #cfcfcf;
    box-shadow: 0px 0px 10px #353535;
    width: 130px;
    padding: 5px;
    color: #565656;
    }
    /*Image de l'item*/
    .item_bloc > img:first-child {
    display: inline-block;
    width: 100px;
    height: 100px;
    }
    /*Nom de l'item*/
    .item_name {
    padding: 5px;
    font-size: 16px;
    font-family: 'Cambria';
    font-weight: bold;
    text-transform: uppercase;
    }
    /*Input du nombre d'item à acheter*/
    input[type="number"] {
    display: inline-block;
    max-width: 50px;
    border: 1px solid #a3a3a3;
    background-color: #efefef;
    text-align: center;
    margin-bottom: 2px;
    }
    /*Partie du panier*/
    #bottom {
    position: relative;
    display: inline-block;
    margin: auto;
    width: 510px;
    background-color: #efefef;
    box-shadow: 0px 0px 10px #353535;
    color: #565656;
    text-align: center;
    overflow: hidden;
    }
    /*Titre du panier*/
    #bottom_top {
    position: relative;
    z-index: 2;
    font-size: 24px;
    font-family: 'Dancing Script', script;
    text-align: center;
    border-bottom: 1px solid #747474;
    width: 500px;
    padding: 5px;
    background-color: #dfdfdf;
    box-shadow: 0px 0px 10px #353535;
    color: #565656;
    }
    /*Panier visible*/
    #vuepanier {
    position: relative;
    z-index: 1;
    margin: 10px;
    margin-right: 0px;
    margin-left: 0px;
    width: 500px;
    height: 100px;
    background-color: #efefef;
    padding: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: #565656;
    text-align: justify;
    overflow: auto;
    }
    /*Bouton effacer et soumettre le panier*/
    #soumettrepanier, #effacerpanier {
    display: inline-block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 5px;
    }
    /*Bouton soumettre le panier*/
    #effacerpanier {
    margin-right: 15px;
    }
    /*Credit*/
    .credits {
    font-size: 12px;
    position: absolute;
    width: 200px;
    bottom: 2px;
    left: 2px;
    text-align: left;
    }
   
    /*Liens*/
    a {
    text-decoration: none;
    color: #454545;
    }
    a:hover {
    color: #000000;
    }
   
    /*Bloc objet dans le panier*/
    .item_input {
    display: inline-block;
    margin-bottom: 5px;
    background-color: #cfcfcf;
    padding: 2px;
    width: 475px;
    text-align: left;
    }
    /*Le bloc du nom et prix de l'objet dans le panier*/
    .iteminsidepanier {
    margin-left: 5px;
    display: inline-block;
    text-align: left;
    }
    /*Les boutons dans le panier*/
    .item_input button {
    }
    /*Le bouton supprimer de l'objet dans le panier*/
    .button_delete {
    margin-right: 2px;
    display: inline-block;
    }
    /*La quantité de l'objet dans le panier*/
    .input_nb_object {
    margin: 0px 2px 0px 2px;
    display: inline-block;
    padding: 2px;
    border: 1px solid #a3a3a3;
    background: #efefef;
    width: 45px;
    text-align: center;
    }
  </style>
</head>
<body>
  <form enctype="multipart/form-data" name="post" method="post" action="/post" id="boutique" onsubmit="CompleteMessage()" target="_blank">
    <div class="credits">Par Onyx de <a href="http://www.never-utopia.com/forum" target="_blank" >Never-Utopia</a>.</div>
    <div id="boutique_top"><div id="badam"></div>
      La boutique de <span class="FORUMNAME"></span>
    </div>

    <!-- DÉBUT DU MENU POUR TRIER -->
    <div id="menu">
      <button id="trier2" type="button" onclick="notriage()">Rénitialiser le Tri</button><br />
      <button id="trier" type="button" onclick="triage()">Trier les Items</button><br />

      <!-- DÉBUT CATÉGORIE TYPE -->
      <span class="menu_title">Type</span>
      <ul id="Type">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Arme" />
          Armes
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Armure" />
          Armures
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Accessoire" />
          Accessoires
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Objet" />
          Objets
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="Magie" />
          Magie
        </li>
      </ul>
      <!-- FIN CATÉGORIE TYPE -->

      <!-- DÉBUT CATÉGORIE NIVEAU -->
      <span class="menu_title">Niveau</span>
      <ul id="Niveau">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Niv1" />
          Niveau 1
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Niv2" />
          Niveau 2
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Niv3" />
          Niveau 3
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Niv4" />
          Niveau 4
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="Niv5" />
          Niveau 5
        </li>
      </ul>
      <!-- FIN CATÉGORIE NIVEAU -->

      <!-- DÉBUT CATÉGORIE PRIX -->
      <span class="menu_title">Prix</span>
      <ul id="Prix">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Max99" />
          Moins que 100
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="100_499" />
          [100 et 499]
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="500_999" />
          [500 et 999]
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="1000_4999" />
          [1000 et 4999]
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="5000_10000" />
          [5000 et 10000]
        </li>
        <!-- OPTION #6 -->
        <li><input type="checkbox" name="Min10000" />
          Plus de 10000
        </li>
      </ul>
      <!-- FIN CATÉGORIE PRIX -->

      <!-- DÉBUT CATÉGORIE RARETÉ -->
      <span class="menu_title">Rareté</span>
      <ul id="Rarete">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Commun" />
          Commun
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Rare" />
          Rare
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Tresrare" />
          Très rare
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Unique" />
          Unique
        </li>
      </ul>
      <!-- FIN CATÉGORIE RARETÉ -->

    </div>
    <!-- FIN DU MENU POUR TRIER -->

    <div id="middle">
      <div class="contenu_shoponglet" id="contenu_shoponglet_Tout">

        <!-- DÉBUT ITEM -->
      <div class="Arme Max99 Commun Niv1">
          <div class="item_bloc">
            <img src="URL DE ITEM" /><br />
            <span class="item_name">Nom de l'item</span><br />
            Type Niveau<br />
            Rareté<br />
            Prix : <span class="nbprix">XXX</span>$<br /><br />
            <input type="number" value="1" min="1" /><br />
            <button class="ajoutprix" type="button">Acheter</button>
          </div>
        </div>
        <!-- FIN ITEM -->

      </div>
      <div class="contenu_shoponglet" id="contenu_shoponglet_Autre">
      </div>
    </div>
    <div id="bottom">
      <div id="bottom_top">Mon Panier - <span id="total2">0</span>$</div>
      <div id="vuepanier">Mon panier est vide.</div>
    </div>
    <br />
    <button id="effacerpanier" type="button" onclick="effacer()">Effacer mon panier</button>
    <input type="submit" id="soumettrepanier" value="Soumettre mon panier" name="post" />
    <textarea name="message" id="message" style="display:none"></textarea>
    <input type="hidden" value="reply" name="mode" />
    <input type="hidden" value="70" name="t" />
    <div style="clear: both;"></div>
  </form>
<script type="text/javascript">
  //<!--
  var totalbase = 0;
  $('#total2').html(totalbase);
  var totaltotal = 0;
 
  /*Quand on ajoute un item au panier*/
  $('.ajoutprix').click(function() {
    var prix = parseInt($(this).parent().find('.nbprix').eq(0).html());
    var qt = parseInt($(this).parent().find('input').eq(0).val());
    var qtprixcalculation = qt * prix;
    var nomitem = $(this).parent().find('.item_name').eq(0).html();
    var phrase = "<span class='item_input'>" +
      "<button type='button' class='button_delete' onclick='deleteqtitem(this)'>x</button>" +
      "<button type='button' class='button_moins' onclick='removeqtitem(this)'>-</button>" +
      "<input type='text' class='input_nb_object' value='"+qt+"' data-prix='"+prix+"' onchange='calcultotal()'></input>" +
      "<button type='button' class='button_plus' onclick='addqtitem(this)'>+</button>" +
      "<span class='iteminsidepanier'><span class='thename'>"+nomitem+"</span>" +
      " à <span class='thepriceinside'>"+prix+"</span>$ pour un total de" +
      " <span class='thetotalinside'>"+qtprixcalculation+"</span>$.</span>";
    if ($('#vuepanier').html() == "Mon panier est vide.") {
      $('#vuepanier').html(phrase);
    }
    else {
      var ajoutphrase = $('#vuepanier').html();
      ajoutphrase = ajoutphrase+phrase;
      $('#vuepanier').html(ajoutphrase);
    }
    calcultotal();
  });
 
  /*Ajouter un item déjà dans le panier*/
  function addqtitem(bihihi) {
    var curritem = parseInt($(bihihi).prev().val());
    var curritemafter = curritem + 1;
    $(bihihi).prev().val(curritemafter);
    calcultotal();
  }
 
  /*Enlever un item déjà dans le panier*/
  function removeqtitem(bohoho) {
    var curratem = parseInt($(bohoho).next().val());
    var curratemafter = curratem - 1;
    $(bohoho).next().val(curratemafter);
    calcultotal();
  }
 
  /*Supprimer un item déjà dans le panier*/
  function deleteqtitem(bahaha) {
    $(bahaha).parent().remove();
    calcultotal();
  }
 
  /*Fonction pour calculer*/
  function calcultotal() {
    totaltotal = 0;
    $('.item_input').each(function(){
      if (parseInt($(this).find('.input_nb_object:first').val()) < 1) {
        $(this).remove();
      }
      var otherprix = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
      var otherquant = parseInt($(this).find('.input_nb_object:first').val());
      $(this).find('.thetotalinside:first').html((otherprix*otherquant));
      totaltotal = totaltotal + (otherprix*otherquant);
    });
    if ($('#vuepanier').html().length < 1) {
      $('#vuepanier').html("Mon panier est vide.");
      $('#total2').html(totalbase);
    }
    else {
      $('#total2').html(totaltotal);
    }
  }
 
  /*Fonction pour effacer le panier*/
  function effacer() {
    $('#vuepanier').html("Mon panier est vide.");
    $('#total2').html(totalbase);
  }
 
  /*Fonction pour poster le message*/
  function CompleteMessage() {
    var thetotalprice = totaltotal;
    var lemessage = "Bonjour,<br /><br />J'aimerais acheter les articles suivants s'il vous plaît :<br />";
    $('.item_input').each(function(){
      var theprice = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
      var thesupername = $(this).find('.thename:first').html();
      var thequant = parseInt($(this).find('.input_nb_object:first').val());
      var thequantpricetotal = thequant * theprice;
      lemessage = lemessage + "<br /> - "+thequant+" "+thesupername+" à "+theprice+"$ pour un total de "+thequantpricetotal+"$";
    });
    lemessage = lemessage + "<br /><br />Le coût total de ma commande est de : "+thetotalprice+"$.";
    $('#message').val(lemessage);
  }
  //-->
</script>
<script type="text/javascript">
  //<!--
  function notriage(){
    $('#menu').find('input:checked').prop( "checked", false );
    $('#contenu_shoponglet_Tout').css("display", "block");
    $('#contenu_shoponglet_Autre').html("");
  }
 
  /*Nombre de catégories*/
  var nbtype = $("#menu").find("ul").length;
 
  /*Fonction triage*/
  function triage() {
 
    /*On trouve le nombre de cases cochées*/
    var totalcheck = $('#menu').find('input:checked').length;
    /*On se débarasse des items déjà triés*/
    $('#contenu_shoponglet_Autre').html("");
 
    /*Si aucune case est cochée*/
    if (totalcheck < 1) {
      /*On garde tous les items*/
      $('#contenu_shoponglet_Tout').css("display", "block");
    }
    /*Sinon*/
    else {
      /*On fait disparaître la liste complète*/
      $('#contenu_shoponglet_Tout').css("display", "none");
      /*Tableau qui va contenir toutes les catégories qui ont au moins une case cochée*/
      var nomtypech = [];
      /*Pour chaque catégorie on regarde si il y a une case cochée et si oui on met son id dans le tableau nomtypech*/
      for (i = 0; i < nbtype; i++) {
        var nbcatcheckcal = $('#menu').find('ul:eq(' + i + ')').find('input:checked').length;
        if (nbcatcheckcal > 0) {
          var nomtype = $('#menu').find('ul:eq(' + i + ')').attr('id');
          nomtypech.push(nomtype);
        }
      }
      /*Nombre de catégories qui ont une case cochée*/
      var qunomtypech = nomtypech.length;
      /*Tableau qui contient le nombre de cases cochées par catégories où il y a des cases cochées*/
      var nbnomcatch = [];
      /*Tableau qui contient le name de chaque case cochée*/
      var nomcatch = [];
      for (i = 0; i < qunomtypech; i++) {
        /*On ajoute le nombre de case cochée de chaque catégories où il y en a au moins une dans le tableau nbnomcatch*/
        nbnomcatch[i] = $('#menu').find('#' + nomtypech[i]).find('input:checked').length;
        for (y = 0; y < nbnomcatch[i]; y++) {
          /*On ajoute le name de chaque case cochée de chaque catégories où il y en a au moins une dans le tableau nomcatch*/
          var truc1 = $('#menu').find('#' + nomtypech[i]).find('input:checked:eq(' + y + ')').attr('name');
          nomcatch.push(truc1);
        }
      }
      /*Cela va indiquer à case cochée on est rendue. Il commence à 0*/
      var banane = 0;
 
      /*Pour chaque catégorie où il y a une case cochée...*/
      for (i = 0; i < qunomtypech; i++) {
        /*Si on est à la 1ère catégorie*/
        if (i < 1) {
          /*Pour chaque case cochée de la 1ère catégorie...*/
          for (y = 0; y < nbnomcatch[i]; y++) {
            /*Si on est la première case cochée de la 1ère catégorie*/
            if (banane < 1) {
              /*On regarde le nombre de items qui ont le name de la 1ère case de la 1ère catégorie comme classe*/
              var machin = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).length;
              /*Pour chacun de ses items on le met dans la partie de droite*/
              for (z = 0; z < machin; z++) {
                $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).eq(z).clone(true).appendTo('#contenu_shoponglet_Autre');
              }
              /*On passe à la case suivante*/
              banane = banane + 1;
            }
            /*Si on est la xème case cochée de la 1ère catégorie*/
            else {
              /*On regarde le nombre de items qui ont le name de la xème case cochée comme classe*/
              var machin = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).length;
              /*Pour chacun de ces items...*/
              for (z = 0; z < machin; z++) {
                /*Item que on est en train de regarder*/
                var bamibam = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).eq(z);
                /*On créer la variable qui va regarder si le item que on regarde a une classe de un name qui a déjà été vérifié*/
                var autretruc = 0;
                /*Pour chaque name qui est avant le name que on regarde présentement...*/
                for (w = 0; w < banane; w++) {
                  /*Name où on est rendu à vérifier*/
                  var pamplemousse = nomcatch[w];
                  /*Si le item que on regarde a comme classe un name que on a déjà regardé...*/
                  if (bamibam.hasClass(pamplemousse)) {
                    /*on ajoute 1 à la variable autretruc*/
                    autretruc = autretruc + 1;
                  }
                }
                /*Si autretruc est inférieur a 0 donc si le item que on regarde a pas un name que on a déjà vérifié...*/
                if (autretruc < 1) {
                /*On ajoute le item à la zone de droite*/
                  bamibam.clone(true).appendTo('#contenu_shoponglet_Autre');
                }
              }
              /*On passe à la case suivante*/
              banane = banane + 1;
            }
          }
        }
        /*Si on est pas la 1ère catégorie qui a une case cochée...*/
        else {
          /*On regarde le nombre de item dans la partie de droite*/
          var chose12 = $('#contenu_shoponglet_Autre').children().length;
          /*on crée un tableau qui va contenir les items à enlever de la liste de droite*/
          var calculenlever = [];
          /*Pour chaque item de la liste de droite on met 0 dans le tableau*/
          for (z = 0; z < chose12; z++) {
            calculenlever[z] = 0;
          }
          /*Pour chaque case cochée de la catégorie où on est rendue...*/
          for (y = 0; y < nbnomcatch[i]; y++) {
            /*Pour chaque item qui est dans la liste de droite...*/
            for (z = 0; z < chose12; z++) {
              /*On regarde le xème item de droite*/
              var fraise = $('#contenu_shoponglet_Autre').children().eq(z);
              /*Name de la case où on est rendu*/
              var tomate = nomcatch[banane];
              /*Si le item où on est rendu a cette case on ajoute 1 à sa place dans le tableau calculenlever*/
              if (fraise.hasClass(tomate)) {
                calculenlever[z] = calculenlever[z] + 1;
              }
            }
            /*On passe à la case suivante*/
            banane = banane + 1;
          }
          /*Si les items de droite on aucune classe de aucune des cases de cette catégorie on leur ajoute la classe Detruire*/
          for (y = 0; y < chose12; y++) {
            if (calculenlever[y] < 1) {
              $('#contenu_shoponglet_Autre').children().eq(y).addClass('Detruire');
            }
          }
          /*On détruit les items à droite qui ont la classe Detruire*/
          $('#contenu_shoponglet_Autre').children('.Detruire').remove();
        }
      }
      /*Si il y a 0 item à droite après le tri on dit que il y a 0 résultat*/
      var kiwi = $('#contenu_shoponglet_Autre').children().length;
      if (kiwi < 1) {
        $('#contenu_shoponglet_Autre').html("Aucun résultat ne correspond à votre recherche.");
      }
    }
  }
  //-->
</script>
</body>
</html>


Lorsque vous modifiez votre formulaire, il faut cliquer sur le triple engrenage (), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.


Une fois le code mis et enregistré, vouz aurez une petite modification à faire.

Vous devrez créer un sujet, sur votre forum, où les gens pourront passer leurs commandes. Puis, vous regardez l'adresse de la page. Juste après le nom de votre forum, il y aura ceci : "/t" avec un nombre qui suit. Le nombre correspond à l'id spécifique de ce sujet.

Vous devez copier ce nombre et venir remplace le 70 à cet endroit :
Code:
   <input type="hidden" value="70" name="t" />


Cela va permettre que le message des utilisateurs de la boutique soit posté dans le bon sujet.



2. Personnaliser la boutique


Alors, si on résume, la boutique est composé d'une partie "menu", d'une partie "sélection des items" et d'une partie "panier".

Le menu permet à l'utilisateur de trier les articles pour avoir la sélection d'items qui l'intéresse (toutes les armes qui coûtes moins de 500$ par exemple). La sélection d'items est la liste des items disponibles où vous pouvez indiquer le nombre d'items à acheter et cliquer sur acheter pour que les items s'ajoutent à votre panier. Le panier comporte la liste des items que vous avez choisis ainsi que le total que cela vous coûte. Vous avez l'option de rénitialiser le panier.

Dans le menu, il y a plusieurs catégories et chaque catégorie a un certain nombre d'options.


Voilà un exemple de 1 catégorie avec 4 options :
Code:
      <!-- DÉBUT CATÉGORIE RARETÉ -->
      <span class="menu_title">Rareté</span>
      <ul id="Rarete">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Commun" />
          Commun
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Rare" />
          Rare
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Tresrare" />
          Très rare
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Unique" />
          Unique
        </li>
      </ul>
      <!-- FIN CATÉGORIE RARETÉ -->


Le premier span est le nom de la catégorie. Ensuite, on a une liste qui contient les options. La liste (le ul) a un id qui sert à indiquer quel est la catégorie. Chaque catégorie doit avoir un id différent des autres catégories.

Ensuite, chaque option est sous cette forme :
Code:
        <!-- OPTION # -->
        <li><input type="checkbox" name="Unique" />
          Unique
        </li>


Dans le "name" du champ à cocher (le "input"), vous avez le mot "Unique".

Ce mot, "Unique", permet d'identifier cette option et permettra aussi d'identifier l'item qui y appartiendra alors il est important de prendre en note comment c'est écrit et de s'assurer que c'est la seule option qui a ce nom.

Donc si je résume rapidement, chaque catégorie à son propre "id" qui est unique à cette catégorie et qui ne doit pas se répéter ailleurs.
Ensuite, chaque option à son propre "name" qui appartient uniquement à cette option et qui ne doit pas se répéter ailleurs.




Ensuie, on passe à la section où il y a tous les items (contenu d'onlglet "Tout"). Vous y trouverez des items sous cette forme :
Code:
        <!-- DÉBUT ITEM -->
       <div class="Arme Max99 Commun Niv1">
          <div class="item_bloc">
            <img src="URL DE ITEM" /><br />
            <span class="item_name">Nom de l'item</span><br />
            Type Niveau<br />
            Rareté<br />
            Prix : <span class="nbprix">XXX</span>$<br /><br />
            <input type="number" value="1" min="1" /><br />
            <button class="ajoutprix" type="button">Acheter</button>
          </div>
        </div>
        <!-- FIN ITEM -->


Vous voyez que la classe de la première div contient plusieurs classes :
Code:
<div class="Arme Max99 Commun Niv1">


Ces classes correspondent aux options auxquelles l'item appartient. Du coup, quand vous créez votre item, vous devez vous rendre dans les options et regarder quel "name" vous avez mis pour identifier les options auxquelles l'item appartient et vous le mettez dans la classe de l'item.

Un item peut appartenir à plusieurs options de catégories différentes et même d'une même catégorie.

Ici, j'ai 4 classes parce que l'item appartient à 4 options, soit Arme, Max99, Commun et Niv1. Cela fait que l'item appartient à ces options : Arme, Niveau 1, Moins de 100$ et Commun.

Vous pouvez changez l'image de l'item en mettant le lien de votre image dans "URL DE ITEM".
Vous pouvez également changer le nom de l'item et ses attibuts (Type, niveau, rareté).
Vous devez remplacer le XXX par le prix individuel (en chiffres, tous collés) de l'item.




Avec ces informations, vous devriez être capable de personnaliser le reste par vous-même, soit optimiser le menu avec les catégories et options que vous voulez ainsi qu'ajouter les items Wink



3. Activer les formulaires externes


Il y a une vérification par Forumactif qui a pour but d'éviter le spam et qui bloque les messages créés dans des formulaires qui ne sont pas ceux de base de Forumactif. Du coup, si vous ne suivez pas cette étape, le formulaire rempli vous retournera sur une page qui dira "erreur technique n°230" à la place d'envoyer directement le message.

Pour éviter cela, vous devez vous rendre sur :
> Panneau d'administration
> > Général
> > > Forum
> > > > Sécurité

Et vous devez cocher "Non" à la question "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum". Vous enregistrez et c'est fait !

L'erreur n°230 ne devrait maintenant plus vous causer problème ~



4. Mettre la boutique dans un iframe


Maintenant que la page HTML est créée avec la boutique, il faut la mettre accessible aux membres.

Pour cela, vous devez vous rendre là où vous voulez que la boutique soit et y mettre le code suivant :
Code:
<iframe style="display: block; height: 1000px; width: 700px; margin: auto;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>


Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre boutique), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink

Il se peut que vous ayez à modifier la largeur (width) ou la hauteur (height) pour éviter qu'il y ait des barres de défilement (scroll)





C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous avez besoin d'aide pour personnaliser le code.

À plus !

Onyx

Bestiaire et Herbier avec triage - Lun 4 Juil 2016 - 6:55




Bestiaire et Herbier avec triage


Salut !

Suite à la demande de Myosotis (qui s'était inspiré de ce bestiaire et cet herbier faits par Kamuy Sinen), j'ai fait un bestiaire et un herbier. Pour ceux qui ne le savent pas, un herbier est un recueil des végétaux d'un certain territoire. Quant au bestiaire, il s'agit d'un recueil des animaux/créatures d'un territoire.

Pour voir l'aperçu du Bestiaire : cliquez ici.
Pour voir l'aperçu de l'Herbier : cliquez ici.

Effet spécial 1
Quand on clique sur une catégorie, les animaux/végétaux sont triés et seuls ceux de la catégorie que vous avez sélectionnée apparaîssent. Vous pouvez personnaliser le code pour mettre les catégories que vous souhaitez.

Effet spécial 2
Si vous avez trop d'options dans le menu, vous pouvez rajouter un petit script qui vous permettra de réduire les menus et de les ouvrir en cliquant dessus pour qu'ils prennent moins de place.


Ce LS est en quatre parties.
  • Tout d'abord, nous allons créer le bestiaire/herbier dans une page HTML.
  • Ensuite, nous allons voir comment le personnaliser.
  • Puis, nous allons voir comment ajouter l'option pour que les menus soient réduits.
  • Enfin, nous allons mettre le bestiaire/herbier dans un iframe pour le rendre accessible.


Laisser le crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Créer le bestiaire/herbier (Page HTML)


Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre bestiaire/herbier.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML

Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)".
On choisit un titre quelconque.
On coche "Non" aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?".

Pour le bestiaire, on met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="author" content="Onyx" />
  <title>Bestiaire</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
  <link href="https://fonts.googleapis.com/css?family=Homemade+Apple|Architects+Daughter" rel="stylesheet" />
  <style type="text/css">
    /*Corps*/
    body {
    margin: 0px;
    background: #553723 url('https://wallpaperlayer.com/img/2015/5/simple-brown-background-8083-8397-hd-wallpapers.jpg');
    background-size: cover;
    }
    /*Le bloc entier du bestiaire*/
    #bestiaire {
    position: relative;
    padding-bottom: 10px;
    height: 590px;
    margin: 10px auto;
    width: 885px;
    overflow: hidden;
    background: url('https://img11.hostingpics.net/pics/405891bla.png');
    font-size: 13px;
    font-family: 'Homemade Apple', cursive;
    color: #705733;
    }
    /*Menu de gauche*/
    #menu {
    float: left;
    margin: 30px 0px 0px 80px;
    width: 350px;
    }
    .one_menu {
    float: left;
    margin: 0px 5px 5px 5px;
    width: 165px;
    }
    /*Titres des catégories*/
    .menu_title {
    display: inline-block;
    margin-left: 20px;
    border-bottom: 1px solid #705733;
    color: #705733;
    font-weight: bold;
    font-size: 14px;
    }
    #menu ul {
    margin-top: 5px;
    margin-bottom: 10px;
    }
    .menus + ul {
    overflow: hidden;
    transition: 0.8s;
    -webkit-transition: 0.5s;
    }
    /*Images pour les menus rétrécis*/
    .menus img {
    display: none;
    position: relative;
    bottom: -10px;
    opacity: 0.8;
    }
    /*Catégories*/
    .bestonglet {
    margin-left: -20px;
    color: #705733;
    list-style-type: circle;
    }
    /*Catégories non-actives*/
    .bestonglet_0 {
    cursor: pointer;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    }
    /*Catégories non-actives survolées*/
    .bestonglet_0:hover {
    margin-left: -10px;
    }
    /*Catégorie active*/
    .bestonglet_1 {
    margin-left: -10px;
    color: #2b2010;
    font-weight: bold;
    }
    /*Partie de droite*/
    #middle {
    float: right;
    width: 330px;
    margin: 30px 85px 0px 0px;
    height: 465px;
    text-align: center;
    }
    /*Cache le contenu des catégories non-actives*/
    .contenu_bestonglet {
    display: none;
    height: 465px;
    padding-right: 5px;
    overflow: auto;
    }
    /*Center les créatures*/
    .contenu_bestonglet > div {
    margin: 0px auto;
    padding: 10px 0px;
    font-family: 'Architects Daughter', cursive;
    font-size: 14px;
    border-top: 5px double #705733;
    }
    /*Center les créatures*/
    .contenu_bestonglet > div:nth-child(1) {
    padding: 0px 0px 10px 0px;
    border-top: none;
    }
    /*Nom de créature*/
    .creature_name {
    margin: auto;
    color: #a68e68;
    text-shadow: -1px -1px 1px #000000;
    font-size: 24px;
    font-family: cambria;
    text-transform: uppercase;
    }
    /*Bloc de créacture sous le nom*/
    .creature_bloc {
    margin: auto;
    }
    /*Image de créature*/
    .creature_bloc > img:first-child {
    margin: auto;
    width: 300px;
    border: 2px solid #705733;
    height: 150px;
    }
    /*Bloc de description de créature*/
    .creature_in {
    margin: auto;
    text-align: center;
    width: 300px;
    }
    /*Caractéristiques de la créature*/
    .creature_caract {
    font-weight: bold;
    }
    /*Partie de droite de la description de créature*/
    .creature_desc {
    text-align: justify;
    }
    /*Credit*/
    .credits {
    font-size: 12px;
    position: absolute;
    width: 200px;
    bottom: 30px;
    left: 150px;
    font-family: verdana;
    color: #503713;
    }
    a {
    text-decoration: none;
    color: #503713;
    }
    a:hover {
    color: darkred;
    }
  </style>
  <script type="text/javascript">
    //<!--
      $(function() {
        /*Tableau qui va contenir tous les noms de catégories*/
        var nom = [];
        /*Total de noms de catégories*/
        var nbnoms = $('#menu').find('li span').length;
        /*On met les noms de catégories dans le tableau*/
        for (i = 0; i < nbnoms; i++) {
          nom[i] = $('#menu').find('li span').eq(i).attr('class');
        }
        /*Nombre de bêtes*/
        var nbbetes = $('#contenu_bestonglet_Tout').children('div').length;
        /*Pour chaque catégories, on va regarder chaque bête pour les trier dans les bonnes catégories*/
        for (i = 0; i < nbnoms; i++) {
          var nom2 = nom[i];
          for (y = 0; y < nbbetes; y++) {
            var nom3 = $('#contenu_bestonglet_Tout').children('div').eq(y);
            if (nom3.hasClass(nom2)) {
              var copiecrea = nom3.clone(true);
              var oucoller = $('#contenu_bestonglet_'+nom2);
              $(copiecrea).appendTo(oucoller);
            }
          }
        }
      });
    //-->
  </script>
  <script type="text/javascript">
    //<!--
    function change_bestonglet(name) {
        document.getElementById('bestonglet_'+anc_bestonglet).className = 'bestonglet_0 bestonglet';
        document.getElementById('bestonglet_'+name).className = 'bestonglet_1 bestonglet';
        document.getElementById('contenu_bestonglet_'+anc_bestonglet).style.display = 'none';
        document.getElementById('contenu_bestonglet_'+name).style.display = 'block';
        anc_bestonglet = name;
      }
    //-->
  </script>
</head>
<body>
  <div id="bestiaire">
    <div class="credits">Par Onyx de <a href="http://www.never-utopia.com/forum" target="_blank" >Never-Utopia</a></div>
    <div id="menu">

      <!-- DÉBUT 1ERE LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Type<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_1 bestonglet" id="bestonglet_Tout" onclick="javascript:change_bestonglet('Tout');">
            <span class="Tout">Tous les types</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Mammi" onclick="javascript:change_bestonglet('Mammi');">
            <span class="Mammi">Mammifères</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Oiseaux" onclick="javascript:change_bestonglet('Oiseaux');">
            <span class="Oiseaux">Oiseaux</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Poissons" onclick="javascript:change_bestonglet('Poissons');">
            <span class="Poissons">Poissons</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Reptiles" onclick="javascript:change_bestonglet('Reptiles');">
            <span class="Reptiles">Reptiles</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Amphibiens" onclick="javascript:change_bestonglet('Amphibiens');">
            <span class="Amphibiens">Amphibiens</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Insectes" onclick="javascript:change_bestonglet('Insectes');">
            <span class="Insectes">Insectes et Arachnides</span>
          </li>
        </ul>
      </div>
      <!-- FIN 1ERE LISTE -->

      <!-- DÉBUT 2E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Habitat<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Jungle" onclick="javascript:change_bestonglet('Jungle');">
            <span class="Jungle">Jungle</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Plaines" onclick="javascript:change_bestonglet('Plaines');">
            <span class="Plaines">Plaines</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Foret" onclick="javascript:change_bestonglet('Foret');">
            <span class="Foret">Forêt</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Montagne" onclick="javascript:change_bestonglet('Montagne');">
            <span class="Montagne">Montagne</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Glace" onclick="javascript:change_bestonglet('Glace');">
            <span class="Glace">Glaciers</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Desert" onclick="javascript:change_bestonglet('Desert');">
            <span class="Desert">Désert</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Volcan" onclick="javascript:change_bestonglet('Volcan');">
            <span class="Volcan">Volcan</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Ocean" onclick="javascript:change_bestonglet('Ocean');">
            <span class="Ocean">Océans et Mers</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Lac" onclick="javascript:change_bestonglet('Lac');">
            <span class="Lac">Lacs et Rivières</span>
          </li>
        </ul>
      </div>
      <!-- FIN 2E LISTE -->
      <div style="clear: both;"></div>

      <!-- DÉBUT 3E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Rareté<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Commun" onclick="javascript:change_bestonglet('Commun');">
            <span class="Commun">Commun</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Rare" onclick="javascript:change_bestonglet('Rare');">
            <span class="Rare">Rare</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Tresrare" onclick="javascript:change_bestonglet('Tresrare');">
            <span class="Tresrare">Très rare</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Myth" onclick="javascript:change_bestonglet('Myth');">
            <span class="Myth">Mythique</span>
          </li>
        </ul>
      </div>
      <!-- FIN 3E LISTE -->

      <!-- DÉBUT 4E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Dangerosité<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Ino" onclick="javascript:change_bestonglet('Ino');">
            <span class="Ino">Inoffensif</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Faible" onclick="javascript:change_bestonglet('Faible');">
            <span class="Faible">Faible</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Danger" onclick="javascript:change_bestonglet('Danger');">
            <span class="Danger">Dangereux</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Mortel" onclick="javascript:change_bestonglet('Mortel');">
            <span class="Mortel">Mortel</span>
          </li>
        </ul>
      </div>
      <!-- FIN 4E LISTE -->

      <div style="clear: both;"></div>
    </div>
    <div id="middle">
      <div class="contenu_bestonglet" id="contenu_bestonglet_Tout">
       
      <!-- DÉBUT 1ER ANIMAL -->
        <div class="Mammi Jungle Commun Ino">
          <div class="creature_name">Nom de l'animal</div>
          <div class="creature_bloc">
            <img src="http://img15.hostingpics.net/pics/923631761.png" />
            <div class="creature_in">
              <div class="creature_caract">
                Mammifère - Jungle - Commun - Inoffensif
              </div>
              <div class="creature_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 1ER ANIMAL -->
       
        <!-- DÉBUT 2E ANIMAL -->
        <div class="Mammi Plaines Rare Faible">
          <div class="creature_name">Nom de l'animal</div>
          <div class="creature_bloc">
            <img src="http://img15.hostingpics.net/pics/169146302.png" />
            <div class="creature_in">
              <div class="creature_caract">
                Mammifère - Plaines - Rare - Faible
              </div>
              <div class="creature_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 2E ANIMAL -->

        <!-- DÉBUT 3E ANIMAL -->
        <div class="Oiseaux Foret Tresrare Danger">
          <div class="creature_name">Nom de l'animal</div>
          <div class="creature_bloc">
            <img src="http://img15.hostingpics.net/pics/380578583.png" />
            <div class="creature_in">
              <div class="creature_caract">
                Oiseau - Forêt - Très rare - Dangereux
              </div>
              <div class="creature_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 3E ANIMAL -->

      </div>

      <div class="contenu_bestonglet" id="contenu_bestonglet_Mammi"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Oiseaux"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Poissons"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Reptiles"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Amphibiens"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Insectes"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Jungle"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Plaines"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Foret"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Montagne"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Glace"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Desert"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Volcan"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Ocean"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Lac"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Commun"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Rare"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Tresrare"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Myth"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Ino"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Faible"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Danger"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Mortel"></div>

    </div>
    <div style="clear: both;"></div>
  </div>
<script type="text/javascript">
  //<!--
    var anc_bestonglet = 'Tout';
    change_bestonglet(anc_bestonglet);
  //-->
</script>
</body>
</html>


Pour l'herbier, on met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="author" content="Onyx" />
  <title>Herbier</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
  <link href="https://fonts.googleapis.com/css?family=Homemade+Apple|Architects+Daughter" rel="stylesheet" />
  <style type="text/css">
    /*Corps*/
    body {
    margin: 0px;
    background: #553723 url('https://img11.hostingpics.net/pics/782158bla.jpg');
    background-size: cover;
    }
    /*Le bloc entier du herbier*/
    #herbier {
    position: relative;
    padding-bottom: 10px;
    height: 590px;
    margin: 10px auto;
    width: 885px;
    overflow: hidden;
    background: url('https://img11.hostingpics.net/pics/740116bla.png');
    font-size: 13px;
    font-family: 'Homemade Apple', cursive;
    color: #0f5228;
    }
    /*Menu de gauche*/
    #menu {
    float: left;
    margin: 30px 0px 0px 80px;
    width: 350px;
    }
    .one_menu {
    float: left;
    margin: 0px 5px 5px 5px;
    width: 165px;
    }
    /*Titres des catégories*/
    .menu_title {
    display: inline-block;
    margin-left: 20px;
    border-bottom: 1px solid #0f5228;
    color: #0f5228;
    font-weight: bold;
    font-size: 14px;
    }
    #menu ul {
    margin-top: 5px;
    margin-bottom: 10px;
    }
    .menus + ul {
    overflow: hidden;
    transition: 0.8s;
    -webkit-transition: 0.5s;
    }
    /*Images pour les menus rétrécis*/
    .menus img {
    display: none;
    position: relative;
    bottom: -10px;
    opacity: 0.8;
    }
    /*Catégories*/
    .herbonglet {
    margin-left: -20px;
    color: #0f5228;
    list-style-type: circle;
    }
    /*Catégories non-actives*/
    .herbonglet_0 {
    cursor: pointer;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    }
    /*Catégories non-actives survolées*/
    .herbonglet_0:hover {
    margin-left: -10px;
    }
    /*Catégorie active*/
    .herbonglet_1 {
    margin-left: -10px;
    color: #093319;
    font-weight: bold;
    }
    /*Partie de droite*/
    #middle {
    float: right;
    width: 330px;
    margin: 30px 85px 0px 0px;
    height: 465px;
    text-align: center;
    }
    /*Cache le contenu des catégories non-actives*/
    .contenu_herbonglet {
    display: none;
    height: 465px;
    padding-right: 5px;
    overflow: auto;
    }
    /*Center les plantes*/
    .contenu_herbonglet > div {
    margin: 0px auto;
    padding: 10px 0px;
    font-family: 'Architects Daughter', cursive;
    font-size: 14px;
    border-top: 5px double #0f5228;
    }
    /*Center les plantes*/
    .contenu_herbonglet > div:nth-child(1) {
    padding: 0px 0px 10px 0px;
    border-top: none;
    }
    /*Nom de la plante*/
    .plante_name {
    margin: auto;
    color: #4e9f4c;
    text-shadow: -1px -1px 1px #000000;
    font-size: 24px;
    font-family: cambria;
    text-transform: uppercase;
    }
    /*Bloc de la plante sous le nom*/
    .plante_bloc {
    margin: auto;
    }
    /*Image de plante*/
    .plante_bloc > img:first-child {
    margin: auto;
    width: 300px;
    border: 2px solid #0f5228;
    height: 150px;
    }
    /*Bloc de description de la plante*/
    .plante_in {
    margin: auto;
    text-align: center;
    width: 300px;
    }
    /*Caractéristiques de la plante*/
    .plante_caract {
    font-weight: bold;
    }
    /*Partie de droite de la description de la plante*/
    .plante_desc {
    text-align: justify;
    }
    /*Credit*/
    .credits {
    font-size: 12px;
    position: absolute;
    width: 200px;
    bottom: 30px;
    left: 150px;
    font-family: verdana;
    color: #0f5228;
    }
    a {
    text-decoration: none;
    color: #0f5228;
    }
    a:hover {
    color: #198842;
    }
  </style>
  <script type="text/javascript">
    //<!--
      $(function() {
        /*Tableau qui va contenir tous les noms de catégories*/
        var nom = [];
        /*Total de noms de catégories*/
        var nbnoms = $('#menu').find('li span').length;
        /*On met les noms de catégories dans le tableau*/
        for (i = 0; i < nbnoms; i++) {
          nom[i] = $('#menu').find('li span').eq(i).attr('class');
        }
        /*Nombre de bêtes*/
        var nbbetes = $('#contenu_herbonglet_Tout').children('div').length;
        /*Pour chaque catégories, on va regarder chaque bête pour les trier dans les bonnes catégories*/
        for (i = 0; i < nbnoms; i++) {
          var nom2 = nom[i];
          for (y = 0; y < nbbetes; y++) {
            var nom3 = $('#contenu_herbonglet_Tout').children('div').eq(y);
            if (nom3.hasClass(nom2)) {
              var copiecrea = nom3.clone(true);
              var oucoller = $('#contenu_herbonglet_'+nom2);
              $(copiecrea).appendTo(oucoller);
            }
          }
        }
      });
    //-->
  </script>
  <script type="text/javascript">
    //<!--
    function change_herbonglet(name) {
        document.getElementById('herbonglet_'+anc_herbonglet).className = 'herbonglet_0 herbonglet';
        document.getElementById('herbonglet_'+name).className = 'herbonglet_1 herbonglet';
        document.getElementById('contenu_herbonglet_'+anc_herbonglet).style.display = 'none';
        document.getElementById('contenu_herbonglet_'+name).style.display = 'block';
        anc_herbonglet = name;
      }
    //-->
  </script>
</head>
<body>
  <div id="herbier">
    <div class="credits">Par Onyx de <a href="http://www.never-utopia.com/forum" target="_blank" >Never-Utopia</a></div>
    <div id="menu">

      <!-- DÉBUT 1ERE LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Usage<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="herbonglet_1 herbonglet" id="herbonglet_Tout" onclick="javascript:change_herbonglet('Tout');">
            <span class="Tout">Tous</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Alimentaire" onclick="javascript:change_herbonglet('Alimentaire');">
            <span class="Alimentaire">Pour nourrir</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Medecine" onclick="javascript:change_herbonglet('Medecine');">
            <span class="Medecine">Pour soigner</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Poison" onclick="javascript:change_herbonglet('Poison');">
            <span class="Poison">Pour empoisonner</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Outil" onclick="javascript:change_herbonglet('Outil');">
            <span class="Outil">Pour fabriquer</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Joli" onclick="javascript:change_herbonglet('Joli');">
            <span class="Joli">Pour décorer</span>
          </li>
        </ul>
      </div>
      <!-- FIN 1ERE LISTE -->

      <!-- DÉBUT 2E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Floraison<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Printemps" onclick="javascript:change_herbonglet('Printemps');">
            <span class="Printemps">Printemps</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Ete" onclick="javascript:change_herbonglet('Ete');">
            <span class="Ete">Été</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Automne" onclick="javascript:change_herbonglet('Automne');">
            <span class="Automne">Automne</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Hiver" onclick="javascript:change_herbonglet('Hiver');">
            <span class="Hiver">Hiver</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Annuel" onclick="javascript:change_herbonglet('Annuel');">
            <span class="Annuel">Toute l'année</span>
          </li>
        </ul>
      </div>
      <!-- FIN 2E LISTE -->
      <div style="clear: both;"></div>
     
      <!-- DÉBUT 3E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Habitat<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Sub" onclick="javascript:change_herbonglet('Sub');">
            <span class="Sub">Sub-Tropical</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Tropical" onclick="javascript:change_herbonglet('Tropical');">
            <span class="Tropical">Tropical</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Foret" onclick="javascript:change_herbonglet('Foret');">
            <span class="Foret">Forêt</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Montagne" onclick="javascript:change_herbonglet('Montagne');">
            <span class="Montagne">Montagne</span>
          </li>
        </ul>
      </div>
      <!-- FIN 3E LISTE -->

      <!-- DÉBUT 4E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Rareté<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Commun" onclick="javascript:change_herbonglet('Commun');">
            <span class="Commun">Commun</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Rare" onclick="javascript:change_herbonglet('Rare');">
            <span class="Rare">Rare</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Tresrare" onclick="javascript:change_herbonglet('Tresrare');">
            <span class="Tresrare">Très rare</span>
          </li>
        </ul>
      </div>
      <!-- FIN 4E LISTE -->
      <div style="clear: both;"></div>
    </div>
    <div id="middle">
      <div class="contenu_herbonglet" id="contenu_herbonglet_Tout">
       
      <!-- DÉBUT 1ERE PLANTE -->
        <div class="Alimentaire Ete Foret Commun">
          <div class="plante_name">Nom de la plante</div>
          <div class="plante_bloc">
            <img src="http://www.onlinetransilvania.ro/wp-content/uploads/2014/03/IMG_9857-1300x866-450x150-croped.jpg" />
            <div class="plante_in">
              <div class="plante_caract">
                Pour nourrir - Éte - Forêt - Commun
              </div>
              <div class="plante_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 1ERE PLANTE -->
       
        <!-- DÉBUT 2E PLANTE -->
        <div class="Poison Printemps Foret Tresrare">
          <div class="plante_name">Nom de la plante</div>
          <div class="plante_bloc">
            <img src="http://www.sylvie-tribut-astrologue.com/wp-content/uploads/2015/09/12-LE-PISSENLIT.jpg" />
            <div class="plante_in">
              <div class="plante_caract">
                Pour empoisonner - Printemps<br />Forêt - Très rare
              </div>
              <div class="plante_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 2E PLANTE -->

        <!-- DÉBUT 3E PLANTE -->
        <div class="Medecine Hiver Montagne Rare">
          <div class="plante_name">Nom de la plante</div>
          <div class="plante_bloc">
            <img src="http://victorianviolas.co.uk/wp-content/uploads/2015/10/parade-closeup-450x150.jpg" />
            <div class="plante_in">
              <div class="plante_caract">
                Pour soigner - Hiver - Montagne - Rare
              </div>
              <div class="plante_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 3E PLANTE -->

      </div>
     
      <div class="contenu_herbonglet" id="contenu_herbonglet_Alimentaire"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Medecine"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Poison"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Outil"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Joli"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Printemps"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Ete"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Automne"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Hiver"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Annuel"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Sub"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Tropical"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Foret"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Montagne"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Commun"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Rare"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Tresrare"></div>
     
    </div>
    <div style="clear: both;"></div>
  </div>
<script type="text/javascript">
  //<!--
    var anc_herbonglet = 'Tout';
    change_herbonglet(anc_herbonglet);
  //-->
</script>
</body>
</html>


Lorsque vous modifiez votre formulaire, il faut cliquer sur le triple engrenage (), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.



2. Personnaliser le bestiaire/herbier


Il y a plusieurs parties au code. Il y a la section "menu" avec des catégories et des onglets où il y a des sous-catégories. Puis, il y a la section "contenu d'onglet" de "Tout" où il y a tous les végétaux/animaux. Enfin, il y a la section "contenu d'onglets" des sous-catégories dans lesquels les végétaux/animaux sont triés.

Le menu et divisé en plusieurs carégories et sous-catégories.

Voici un exemple du bestiaire de 1 catégorie qui a 4 sous-catégories :
Code:
      <!-- DÉBUT 3E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Rareté<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Commun" onclick="javascript:change_bestonglet('Commun');">
            <span class="Commun">Commun</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Rare" onclick="javascript:change_bestonglet('Rare');">
            <span class="Rare">Rare</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Tresrare" onclick="javascript:change_bestonglet('Tresrare');">
            <span class="Tresrare">Très rare</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Myth" onclick="javascript:change_bestonglet('Myth');">
            <span class="Myth">Mythique</span>
          </li>
        </ul>
      </div>
      <!-- FIN 3E LISTE -->


Le premier span est le nom de la catégorie. Ensuite, on a une liste qui contient les sous-catégories.

Chaque sous-catégorie est sous cette forme :
Code:
        <li class="bestonglet_0 bestonglet" id="bestonglet_Myth" onclick="javascript:change_bestonglet('Myth');">
          <span class="Myth">Mythique</span>
        </li>


À noter qu'il y a 3 endroits dans cette sous-catégorie où vous trouvez le mot "Myth", soit dans le "id" du "li", dans les parenthèses du "onclick" du "li"dans dans la "class" du "span" qui entoure le nom de la catégorie.

Ce mot, "Myth", permet d'identifier cette sous-catégorie et permettra aussi d'identifier l'animal qui y appartiendra alors c'est important qu'il soit pareil aux 3 endroits.




Ensuie, on passe à la section où il y a tous les animaux (contenu d'onlglet "Tout"). Vous y trouverez des animaux sous cette forme :
Code:
        <!-- DÉBUT 3E ANIMAL -->
        <div class="Oiseaux Foret Tresrare Danger">
          <div class="creature_name">Nom de l'animal</div>
          <div class="creature_bloc">
            <img src="http://img15.hostingpics.net/pics/380578583.png" />
            <div class="creature_in">
              <div class="creature_caract">
                Oiseau - Forêt - Très rare - Dangereux
              </div>
              <div class="creature_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 3E ANIMAL -->


Vous voyez que la classe de la première div contient plusieurs classes :
Code:
        <div class="Oiseaux Foret Tresrare Danger">


Ces classes correspondent aux sous-catégories auxquelles l'animal appartient. Du coup, quand vous créez votre animal, vous devez vous rendre dans les sous-catégories et regarder quel "mot" vous avez mis pour identifier les sous-catégories auxquelles l'animal contient et vous le mettez dans la classe de l'animal.

Ici, j'ai 4 classes parce que l'animal appartient à 4 sous-catégories, soit Oiseaux, Forêt, Très rare et Dangereux.




Enfin, vous avez les contenus d'onglets vides où les animaux seront distribués selon les sous-catégories auxquelles ils appartiennent :
Code:
      <div class="contenu_bestonglet" id="contenu_bestonglet_Mammi"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Oiseaux"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Poissons"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Reptiles"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Amphibiens"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Insectes"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Jungle"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Plaines"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Foret"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Montagne"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Glace"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Desert"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Volcan"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Ocean"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Lac"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Commun"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Rare"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Tresrare"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Myth"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Ino"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Faible"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Danger"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Mortel"></div>


Encore une fois, à la fin du "id" de chaque contenu d'onglet, vous avez le "nom" propre à chaque sous-catégorie.

Donc si je résume, vous devez choisir un certain "nom" (qui ne doit pas avoir d'espaces ou d'accents idéalement) qui doit être à 3 fois dans l'onglet de la sous-catégorie, 1 fois dans la classe des animaux qui appartiennent à la sous-catégorie et 1 fois dans l'id dans un contenu d'onglet où seront triés les animaux.

Avec ces informations, vous devriez être capable de personnaliser le reste par vous-même Wink

Note : J'ai pris des exemples avec le bestiaire, sauf que l'herbier est identique à l'exception du nom de certaines classes. Du coup, vous devriez être capable de vous débrouiller ^^



3. Option pour réduire les menus


Il suffit simplement d'aller juste avant la fermeture de la balise "body", soit juste avant cela :
Code:
</body>
</html>


Et d'y rajouter ce bout de code :
Code:
<script text="javascript">
  //<!--
    $('.menus').find('img').css("display", "inline-block");
    $('.menus').find('img').css("margin-left", "5px");
    $('.menus').css("cursor", "pointer");
    $('.menus').next().css("max-height", "0px");
    $('.menus').click(function(){
      $('.menus').css("cursor", "pointer");
      $('.menus').next().css("max-height", "0px");
      var bam = $(this).next().find('li').length;
      var boum = (bam * 28) * 45;
      $(this).next().css("max-height", boum+"px");
      $(this).css("cursor", "default");
     });
  //-->
</script>




4. Mettre le bestiaire/herbier dans un iframe


Maintenant que la page HTML est créée avec le bestiaire/herbier, il faut le mettre accessible aux membres.

Pour cela, vous devez vous rendre là où vous voulez que le bestiaire/herbier soit et y mettre le code suivant :
Code:
<iframe style="display: block; height: 600px; width: 885px; margin: auto;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>


Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre bestiaire/herbier), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink

Vous aurez peut-être besoin de modifier le height (la hauteur) et le width (la largeur) pour qu'il n'y a pas de barre de défilement (scroll).





C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous avez besoin d'aide pour personnaliser le code.

À plus !

Onyx

Formulaire de présentation - Sam 2 Juil 2016 - 5:49




Formulaire de présentation


Salut !

Fournir une fiche de présentation aux membres pour qu'ils puissent poster une belle présentation est une excellente idée. Sauf que parfois, certains membres ont de la difficulté à remplir la fiche de présentation parce qu'ils ont de la difficulté avec le codage.

Du coup, ce formulaire permettra à vos membres de simplement remplir les champs du formulaire et les entrées se mettront automatiquement au bon endroit dans une fiche. Pas mal, n'est-ce pas ?

Pour voir l'aperçu du formulaire de présentation en direct : cliquez ici.
Pour voir l'aperçu du formulaire de présentation en image : cliquez ici.
Pour voir l'aperçu de la fiche de présentation en image : cliquez ici.


Attention :
Évidemment, vous aurez probablement plus de champs à faire remplir que moi ou peut-être s'appelleront-ils différemment. Du coup, vous voudrez sans doute personnaliser votre code. Pour savoir comment faire, je vous envoie sur ce tutoriel afin de comprendre les formulaires et les différentes étapes (la construction des champs et la récupération des données du formulaire).


Ce LS est en quatre parties.
  • Tout d'abord, nous allons créer le formulaire dans une page HTML.
  • Ensuite, nous allons activer l'autorisation de recevoir des formulaires externes pour que le formulaire fonctionne.
  • Puis, nous allons ajouter le CSS pour la fiche de présentation.
  • Enfin, nous allons ajouter une iframe pour que les membres puissent remplir le formulaire.


Laisser les crédits vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions/commentaires/remerciements ^^



1. Créer le formulaire (Page HTML)


Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre formulaire.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML

Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)".
On choisit un titre quelconque, comme "Formulaire de présentation".
On coche "Non" aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?".

Enfin, on met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <base target="_blank" />
    <meta name="author" content="Onyx" />
    <title>Formulaire de Présentation</title>
    <style type="text/css">
      /*Corps*/
      body {
      margin: 0px;
      color: #757575;
      font-family: 'Verdana';
      font-size: 13px;
      }
      /*Formulaire*/
      #monId {
      background-color: #dfdfdf;
      box-shadow: inset 0px 0px 15px #656565;
      margin: auto;
      border-radius: 10px;
      width: 500px;
      padding: 15px;
      }
      /*Titres*/
      h1, h2, h3 {
      color: #757575;
      text-align: center;
      font-family: 'Monotype Corsiva', cursive;
      font-size: 32px;
      font-weight: normal;
      }
      /*Petit titre*/
      h2 {
      font-size: 24px;
      }
      /*Champs text, number, password, textarea et select*/
      input[type="text"], input[type="number"], input[type="password"], textarea, select {
      display: inline-bloc;
      width: 97%;
      margin-top: 3px;
      background-color: #efefef;
      color: #858585;
      padding: 5px;
      border: none;
      border-radius: 5px;
      box-shadow: inset 2px 2px 2px #bfbfbf, inset -2px -2px 1px #bfbfbf;
      font-size: 13px;
      font-family: 'Arial';
      }
      /*Champs radio*/
      input[type="radio"] {
      display: inline-bloc;
      margin-top: 3px;
      vertical-align: bottom;
      }
      /*Champs submit et reset*/
      input[type="submit"], input[type="reset"] {
      margin-top: 10px;
      text-align: center;
      display: inline-block;
      font-weight: bold;
      background-color: #fdfdfd;
      border: 1px solid #c4c4c4;
      color: #757575;
      padding: 8px;
      padding-top: 8px;
      padding-bottom: 8px;
      border-radius: 5px;
      box-shadow: 2px 2px 2px #747474, inset 0px 0px 15px #a3a3a3;
      }
      /*Champs submit et reset au survol*/
      input[type="submit"]:hover, input[type="reset"]:hover {
      cursor: pointer;
      background-color: #ffffff;
      box-shadow: 4px 4px 4px #747474, inset 0px 0px 15px #a3a3a3;
      color: #656565;
      }
      /*Champs reset et prévisualiser*/
      input[type="reset"], input[name="preview"] {
      margin-top: 0px;
      margin-right: 10px;
      font-weight: normal;
      }
      /*Champs textarea*/
      textarea {
      min-width: 97%;
      max-width: 97%;
      min-height: 100px;
      }
      /*Astérisques rouges*/
      .redd {
      color: red;
      }
      /*Crédits*/
      .credits {
      margin: 10px auto -10px auto;
      font-size: 11px;
      text-align: center;
      }
      .credits a {
      color: darkgreen;
      text-decoration: none;
      }
      .credits a:hover {
      color: blue;
      }
    </style>
    <script type="text/javascript">
    //<!--
      /*Fonction pour créer le message*/
      function creationMessage(NomForm) {   
           
        /* On met le titre dans le champ "titre" */
        NomForm.titre.value =
          "Présentation de " + NomForm.prenom.value + " " + NomForm.nom.value;

        /* On met le message dans le champ "message" */
        NomForm.message.value =
          "<link href='https://fonts.googleapis.com/css?family=Lobster|Pacifico|Dancing+Script' rel='stylesheet' type='text/css' />" +
          "<div class='prez'>" +
          "<img src='" + NomForm.urlimghaut.value + "' class='prez_haut' />" +
          "<div class='prez_nom'>" + NomForm.prenom.value + " " + NomForm.nom.value + "</div>" +
          "<div class='prez_citation'>« " + NomForm.citation.value + " »</div>" +
          "<div class='prez_bloc'>" +
          "<img src='" + NomForm.urlimgava.value + "' class='prez_ava' />" +
          "<div class='prez_right'>" +
          "<span class='prez_champ'>Prénom :</span> " + NomForm.prenom.value + "<br />" +
          "<span class='prez_champ'>Nom :</span> " + NomForm.nom.value + "<br />" +
          "<span class='prez_champ'>Surnom :</span> " + NomForm.surnom.value + "<br />" +
          "<span class='prez_champ'>Âge :</span> " + NomForm.age.value + "<br />" +
          "<span class='prez_champ'>Groupe :</span> " + NomForm.group.value + "<br />" +
          "<span class='prez_champ'>Pouvoir :</span> " + NomForm.pouvoir.value + "<br />" +
          "<span class='prez_champ'>Aime :</span> " + NomForm.aime.value + "<br />" +
          "<span class='prez_champ'>Déteste :</span> " + NomForm.deteste.value + "<br />" + "</div><div style='clear: both;'></div></div><div class='prez_title'>" +
          "Description physique</div><div class='prez_bloc'>" + NomForm.descphy.value + "</div><div class='prez_title'>" +
          "Description psycologique</div><div class='prez_bloc'>" + NomForm.descpsy.value + "</div><div class='prez_title'>" +
          "Histoire</div><div class='prez_bloc'>" + NomForm.hist.value + "</div><div class='prez_title'>" +
          "Informations sur le joueur</div><div class='prez_bloc'>" +
          "<img src='" + NomForm.urlimgbas.value + "' class='prez_bas' />" +
          "<div class='prez_right2'>" +
          "<span class='prez_champ'>Prénom :</span> " + NomForm.nomhrp.value + "<br />" +
          "<span class='prez_champ'>Âge :</span> " + NomForm.agehrp.value + "<br />" +
          "<span class='prez_champ'>Comment j'ai connu le forum :</span> " + NomForm.connu.value + "<br />" +
          "<span class='prez_champ'>Mon avis sur le forum :</span> " + NomForm.avis.value + "<br />" +
          "<span class='prez_champ'>Le code secret :</span> [hide]" + NomForm.secret.value + "[/hide]</div><div style='clear: both;'></div></div>" +
          "<div class='prez_credit'>Par <a href='http://www.never-utopia.com/u27' target='_blank'>Onyx</a> de <a href='http://www.never-utopia.com' target='_blank'>Never-Utopia</a>, inspiré de <a href='http://www.never-utopia.com/t43339-fiche-bois-sombre' target='_blank'>cette fiche</a> de Pastomaniac.</div></div></div>";

        /*On vérifie si on peut ou non envoyer le message*/
        var champsobligatoires = document.getElementsByClassName("obligatoire");
        var totalchampsobligatoires = 0;
        for (i = 0; i < champsobligatoires.length; i++) {
          var champvaleur = champsobligatoires[i].value;
          if (champvaleur.length > 0) {
            totalchampsobligatoires = totalchampsobligatoires + 1;
          }
        }
        if (totalchampsobligatoires < champsobligatoires.length) {
          alert("Tous les champs obligatoires (ceux avec un astérisque rouge) doivent être remplis.");
          return false;
        }
        else {
          return true;
        }
      }
    //-->
    </script>
  </head>
  <body>
    <form id="monId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" target="_blank" onSubmit="return creationMessage(this)">
      <input type="hidden" name="mode" value="newtopic" />
      <input type="hidden" name="topictype" value="0" checked="checked" />
      <input type="hidden" name="message" value="" />
      <input type="hidden" name="f" value="10" />
      <input type="hidden" name="subject" id="titre" value="" />
      <h1>Formulaire de Présentation</h1>
      <h2>Informations sur le personnage</h2>
      <label for="prenom">Prénom<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="prenom" id="prenom" /><br />
      <br />
      <label for="nom">Nom<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="nom" id="nom" /><br />
      <br />
      <label for="surnom">Surnom :</label><br />
      <input type="text" name="surnom" id="surnom" /><br />
      <br />
      <label for="age">Âge<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="age" id="age" /><br />
      <br />
      <label for="group">Groupe<span class="redd">*</span> :</label><br />
      <select name="group" id="group">
        <option>Premier</option>
        <option>Deuxième</option>
        <option>Troisième</option>
        <option>Quatrième</option>
        <option>Etc.</option>
      </select><br />
      <br />
      <label for="pouvoir">Pouvoir<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="pouvoir" id="pouvoir" /><br />
      <br />
      <label for="aime">Aime<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="aime" id="aime" /><br />
      <br />
      <label for="deteste">Déteste<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="deteste" id="deteste" /><br />
      <br />
      <h2>Descriptions du personnage</h2>
      <label for="descphy">Description Physique<span class="redd">*</span> :</label><br />
      <textarea class="obligatoire" name="descphy" id="descphy"></textarea><br />
      <br />
      <br />
      <label for="descpsy">Description Psychologique<span class="redd">*</span> :</label><br />
      <textarea class="obligatoire" name="descpsy" id="descpsy"></textarea><br />
      <br />
      <br />
      <label for="hist">Histoire<span class="redd">*</span> :</label><br />
      <textarea class="obligatoire" name="hist" id="hist"></textarea><br />
      <br />
      <br />
      <h2>Informations sur le joueur</h2>
      <label for="nomhrp">Prénom :</label><br />
      <input type="text" name="nomhrp" id="nomhrp" /><br />
      <br />
      <label for="agehrp">Âge :</label><br />
      <input type="text" name="agehrp" id="agehrp" /><br />
      <br />
      <label for="connu">Comment avez-vous connu le forum<span class="redd">*</span> ?</label><br />
      <input class="obligatoire" type="text" name="connu" id="connu" /><br />
      <br />
      <label for="avis">Votre avis sur le forum ?</label><br />
      <textarea name="avis" id="avis"></textarea><br />
      <br />
      <label for="secret">Le code secret<span class="redd">*</span> ?</label><br />
      <input class="obligatoire" type="text" name="secret" id="secret" /><br />
      <br />
      <h2>Personnaliser la mise en page</h2>
      <label for="urlimghaut">URL de l'image du haut (500px par 200px) :</label><br />
      <input type="text" name="urlimghaut" id="urlimghaut" value="http://img15.hostingpics.net/pics/959085haut.jpg" /><br />
      <br />
      <label for="citation">Petite citation :</label><br />
      <input type="text" name="citation" id="citation" value="Petite citation" /><br />
      <br />
      <label for="urlimgava">URL de l'image du personnage (200px par 320px) :</label><br />
      <input type="text" name="urlimgava" id="urlimgava" value="http://img15.hostingpics.net/pics/485538middle.jpg" /><br />
      <br />
      <label for="urlimgbas">URL de l'image du joueur (100px par 100px) :</label><br />
      <input type="text" name="urlimgbas" id="urlimgbas" value="http://img15.hostingpics.net/pics/858946bas.jpg" /><br />
      <br />
      <br />
      <div style="text-align: center;">
        <input type="reset" name="reseta" value="Rénitialiser le formulaire" />
        <input type="submit" name="preview" value="Prévisualiser le formulaire" />
        <input type="submit" name="post" value="Envoyer le formulaire" />
      </div>
      <br />
      <div class="credits">Par <a href="http://www.never-utopia.com/u27" target="_blank">Onyx</a> de <a href="http://www.never-utopia.com" target="_blank">Never-Utopia</a>.</div>
    </form>
  </body>
</html>


Lorsque vous modifiez votre formulaire, il faut cliquer sur le triple engrenage (), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.


Une fois le code mis et enregistré, vouz aurez une petite modification à faire.

Vous devez vous rendre, sur votre forum, dans le forum ou sous-forum où les gens pourront passer poster leur présentation. Puis, vous regardez l'adresse de la page. Juste après le nom de votre forum, il y aura ceci : "/f" avec un nombre qui suit. Le nombre correspond à l'id spécifique de ce forum.

Vous devez copier ce nombre et venir remplace le 10 à cet endroit :
Code:
  <input type="hidden" name="f" value="10" />


Cela va permettre que la présentation des utilisateurs du formulaire soit postée au bon endroit.



2. Activer les formulaires externes


Il y a une vérification par Forumactif qui a pour but d'éviter le spam et qui bloque les messages créés dans des formulaires qui ne sont pas ceux de base de Forumactif. Du coup, si vous ne suivez pas cette étape, le formulaire rempli vous retournera sur une page qui dira "erreur technique n°230" à la place d'envoyer directement le message.

Pour éviter cela, vous devez vous rendre sur :
> Panneau d'administration
> > Général
> > > Forum
> > > > Sécurité

Et vous devez cocher "Non" à la question "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum". Vous enregistrez et c'est fait !

L'erreur n°230 ne devrait maintenant plus vous causer problème ~



3. Mise en forme de la fiche de présentation (CSS)


Si quelqu'un postait une fiche avec le formulaire, vous verriez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme la fiche de présentation à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/*Bloc de la présentation*/
.prez {
  background-color: #202020;
  box-shadow: 5px 5px 3px #555555;
  margin: auto;
  margin-top: 5px;
  margin-bottom: 8px;
  width: 500px;
  color: #959595;
  padding-bottom: 10px;
  font-family: 'Verdana';
  font-size: 12px;
}
/*Image du haut de la présentation*/
.prez_haut {
  display: inline-block;
  width: 500px;
  height: 200px;
  border-bottom: 40px solid #050505;
}
/*Nom de la présentation*/
.prez_nom {
  font-family: 'Pacifico', cursive;
  font-size: 30px;
  color: #202020;
  text-shadow: -2px -2px 1px white;
  width: 100%;
  text-align: center;
  margin-top: -60px;
  margin-bottom: 15px;
}
/*Petite citation de la présentation*/
.prez_citation {
  width: 100%;
  text-align: center;
  color: #747474;
  font-family: 'Dancing Script', cursive;
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 25px;
}
/*Blocs de la présentation*/
.prez_bloc {
  background-color: #353535;
  border: 3px solid #101010;
  padding: 10px;
  margin: 0px 10px 0px 10px;
}
/*Autres images de la présentation*/
.prez_ava, .prez_bas {
  display: inline-block;
  width: 200px;
  height: 320px;
  float: left;
  border: #000000 1px dotted;
}
/*Partie de droite du premier bloc de la présentation*/
.prez_right, .prez_right2 {
  display: inline-block;
  margin-left: 5px;
  float: left;
  width: 240px;
}
/*Champs de la présentation*/
.prez_champ {
  color: #dfdfdf;
}
/*Sous-titres de la présentation*/
.prez_title {
  text-align: center;
  font-family: 'Lobster', cursive;
  padding: 5px;
  font-size: 16px;
  background: #000000;
  color: #959595;
  border-top: 2px solid #353535;
  
  margin: 15px 0px 5px 0px;
}
/*Images du bas de la présentation*/
.prez_bas {
  width: 100px;
  height: 100px;
}
/*Partie de droite du dernier bloc de la présentation*/
.prez_right2 {
  width: 340px;
}
/*Crédits*/
.prez_credit {
  margin: 5px auto -10px auto;
  font-size: 10px;
  text-align: center;
}




4. Ajouter l'iframe du formulaire


Maintenant que la page HTML est créée avec le formulaire, que les formulaires ont été autorisé et que le CSS pour la fiche de présentation est installé, il faut mettre le formulaire accessible aux membres.

Pour cela, vous pouvez, soit mettre le lien vers le formulaire à quelque part sur votre forum, soit le poster dans une iframe dans un message et les membres vont le remplir directement là.

Pour la 2e option, vous devez vous rendre là où vous voulez que le formulaire soit et y mettre le code suivant :
Code:
<iframe style="display: block; height: 2100px; width: 550px; margin: auto;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>


Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre formulaire), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink

Sinon, vous devez aussi changer le width (largeur) et le height (hauteur) pour que cela corresponde à votre formulaire ^^





C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez de l'aide pour personnaliser le formulaire ou la fiche de présentation.

À plus !

Comment faire un formulaire (de présentation, de partenariat, etc.) - Mar 14 Juin 2016 - 5:13



Comment faire un formulaire 1/2



Bonjour !

Alors une des demandes fréquentes dans la section des demandes de codes est celle du fameux "formulaire". Un formulaire pour passer une commande, un formulaire pour poster une présentation, un formulaire pour les demandes de partenariats, etc.

Ce tutorial vous montrera comment créer le formulaire de votre choix par vous-même. On y verra aussi comment mettre des champs obligatoires, comment gérer les différents types de champs à remplir et comment personnaliser le résultat du formulaire.

Voici un petit exemple du type de résultat qu'on peut obtenir :
http://libertia.forum-canada.com/h25-formulaire-de-bouffe

Et un autre exemple d'un formulaire de présentation :
http://www.never-utopia.com/t60709-formulaire-de-presentation

Durant ce tutoriel, je ferai référence à quelques reprises au premier exemple.

À noter que puisque la majorité des membres s'intéressent plus à l'application d'un formulaire dans le cadre de forumactif, le tutoriel fera de même.
Vous pouvez quand même utiliser la plupart des notions apprises ici à l'extérieur de forumactif. Cependant, ce tutoriel ne traite pas du traitement PHP qui est nécessaire dans la majorité des cas si vous avez votre propre.


Étape 1 - Squelette du formulaire



Étape 1.1 - Juste le formulaire


La première étape, afin de créer un formulaire, c'est de se créer une page HTML dans lequel nous allons mettre le squelette du formulaire.

Pour ceux qui n'ont jamais utlisé une page HTML, voici un petit tuto sur les pages HTML fait par Nyo :
http://www.never-utopia.com/t50282-creer-une-page-html-pour-fiche-de-pub-formulaires-etc


Bref, vous créez une page HTML (en mode avancé, pas le mode simple) et vous y mettez la base de toute page HTML :
Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="Auteur" />
    <title>Titre de la Page</title>

    <style type="text/css">
      /* Ici le CSS! */
    </style>

    <script type="text/javascript">
    //<!--
      /* Ici le Javascript */
    //-->
    </script>

  </head>
  <body>
    <!-- Ici le HTML! -->
  </body>
</html>


C'est le temps d'enregistrez votre page html pour la première fois.




Nous allons maintenant créer le squelette du formulaire entre les balises "body". Pour cela, il va falloir modifier la page HTML que vous avez enregistrée.

Lorsque vous modifiez votre formulaire, il faut cliquer sur l'engrenage où c'est inscrit "HTML", pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.

Bref, on va commencer le squelette du formulaire par ceci :
Code:
   <form id="nomId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" target="_blank">
      Contenu du formulaire
    </form>


Hé, minute papillon! De késsé?

J'imagine que vous l'avez deviné, mais la balise "form" est une balise de formulaire. Dans cette balise, il y a plusieurs attributs.

Le "id" permet de donne un id unique au formulaire pour le sélectionner plus tard.

Le "action" permet d'indiquer au formulaire où on va envoyer les données du formulaire pour qu'elles soient traitées. Dans notre cas, on met "/posting.forum" parce qu'on c'est la page de forumactif qui permet de poster un nouveau message/sujet).
Si vous avez créé une page de traitement php parce que vous avez votre propre site, ce serait cette adresse qu'il faudrait mettre. Si vous vouliez envoyer un mail, vous pourriez utiliser l'adresse de traitement du logiciel de messagerie de votre choix, ce qui ferait "mailto:nomdudestinataire@hotmail.fr" par exemple.

Le "method" indique la façon dont le formulaire est envoyé, soit selon la méthode "get" qui met les données dans la barre d'URL (dans la plupart des cas, très peu utile) ou selon la méthode "post" qui met les données dans le contenu html de la page de réception. Nous, c'est la méthode "post" qu'on veut.

Le "name" est simplement un nom quelconque qu'on donne à ce formulaire. On va s'en servir plus tard dans le javascript.

Le "enctype" précise la façon dont les données sont cryptées. C'est assez compliqué à expliquer alors disons simplement que dans la majorité des situations, on utilise le enctype "multipart/form-data".

Le "target", dans cette situation, nous dit d'ouvrir un nouvel onglet pour poster le formulaire. Si vous mettez le formulaire dans un iframe plus tard, cela vous évitera de poster un message dans un message.

Note : Si ce n'est pas déjà fait, enregistrez votre page html avant de la perdre !


Étape 1.2 - Comprendre les différents types de champs à remplir


On a maintenant un formulaire, sauf qu'il est vide. Tout formulaire qui se respecte doit avoir des champs à remplir pour que l'utilisateur puisse fournir des informations.

Ok, et à quoi ressemble un champ à remplir?

À ceci :
Code:
<label for="question1">Question 1</label><br />
<input id="question1" name="question1" value="" type="text" size="50"></input>


Vous voyez qu'il y a 2 nouvelles types de balises, "label" et "input".

Balise Label

La balise "label" est une "étiquette", elle sert à "étiquetter" un champ à remplir. En soi, cette balise n'a rien de spécial, à l'exception que lorsqu'on clique dessus, cela met le focus sur le champs à remplir qui y est lié.

D'ailleurs, c'est à cela que sert l'attribut "for", à associer un label à un input. La valeur de l'attribut "for" doit absolument être le même que le "id" du champ à remplir qui y est associé.

-----------

Balise Input

La balise "input" est un champ à remplir.

Le "id" permet de lier le champ au label (ne pas oublier qu'un id est "unique", alors ne mettez pas le même id à plusieurs champ).

Le "name" sert à donner un nom au champ à remplir. Ce nom servira, plus tard, à sélectionner la valeur du champ dans un javascript pour transformer les données en un message. Il doit être unique pour chaque champ à remplir. Les seules exceptions sont celles du champ "radio" et du champ "checkbox" (on les verra plus tard).

Le "value" permet d'ajouter une valeur de base au champ. De base, il y a souvent rien du tout. Si on aurait mis "Machin", il y aurait déjà eu "Machin" d'écrit dans le champ dès le début. Par contre, il y a des situations où il faut toujours mettre une valeur, soit quand le type de champ est "checkbox" ou "radio". On verra les détails plus loin.

Le "size" contrôle la longueur du champ (en nombre de caractères). Cela fonctionne avec les champ text, mais pas tous les types de champ.

Enfin, le "type" permet d'indiquer quel est le type de champ. Voici une petite liste des "type" de champ possibles :

Hidden : C'est un champ caché et invisible

Text : Pour du texte court.


Radio : Pour des choix de réponse où il peut y avoir une seule option choisie.
Oui ou Non

Checkbox : Pour des choix de réponse où il peut y avoir plusieurs options choisies.
Option1 et Option2

Button : Pour un bouton.


Number : Pour un nombre.


Password : Pour un mot de passe.


Reset : Pour rénitialiser le formulaire (vider les champs)


Submit : Pour soumettre le formulaire.



Cette liste n'est pas complète parce qu'il y a des "type" moins utilisés et qui ne sont pas acceptés sur tous les navigateurs. Pour une liste complète, on va à cet endroit.

Aussi, je vous mets sous spoiler ce tutoriel de Riku qui démontre un peu plus les différents champs et certaines options à mettre dans les champs (readonly, disabled, selected, checked, etc.) :

Tutoriel de Riku:
Bonsoir les cocos.
Je sais bien que ces quelques lignes ne serviront pas à grand monde... mais un jour peut-être vous en aurez besoin, et là je sais qu'elles vous serviront.
Dans cette espoir je vous fais un petit topo sur la structuration d'un formulaire en HTML !! Je dis bien en HTML, le traitement en PHP c'est une autre histoire Razz

Formulaire en HTML

Je vais vous faire peur d'entrée... voici un code :

Code:
<form action="mailto:destinataire@hotmail.fr" method="post" enctype="text/plain">
<input type="hidden" name="Riku Asakura" value="Formulaire" />
Votre nom : <input type="text" name="nom" />
<br />
Votre Prénom : <input type="text" name="Prénom" /> 
<br />
Votre adresse : <input type="text" name="Adresse" size="80" /> 
<br />
<textarea name="texte" cols=35 rows=10></textarea>
<br />
Votre mot de passe : <input type="password" name="pass" size=9 maxlenght=10 />
<br />
Votre site : <input type="text" name="url" size=50 value="http://" />
<br />
<input type="submit" value="Envoyer le formulaire " name="submit" />
<br />
<input type="reset" value="Effacer " name="reset" />
 

Ce qui donne:


Votre nom :

Votre Prénom :

Votre adresse :



Votre mot de passe :

Votre site :





Quelques explications :
  • action : Donne l'adresse du script qui va gérer les données envoyées. Si vous avez appris le php, vous saurez qu'on peut aussi utiliser une page de traitement. Ce formulaire là vous permet de faire envoyer un mail en passant par un logiciel de messagerie (outlook, live mail etc..).
  • disabled : créé une liste ou un champs grisé.
  • "hidden" : Contenu de type="" - Créé une liste ou un champs masqué.
  • "checkbox" : Contenu de type="" - Créé une case à cocher.
  • "radio" : Contenu dans type="" - Créé un bouton avec choix unique mais varié.
  • "button" : Contenu de type="" - Créé un bouton cliquable.
  • cols : Détermine le nombre maximum de caractères que peut contenir une ligne.
  • maxlenght : délimite le nombre de caractères maximum dans un champ.
  • method : Dans la balise form. C'est la méthode employée pour traiter les données. Il faut savoir qu'il en existe deux : POST et GET. L'un fait passer les données du formulaire via l'url (GET) l'autre via un traitement PHP plus précis (POST), je ne rentrerai pas dans les détails ici.
  • name : Nomme un champs du formulaire. Pour les boutons de type Radio il vous faudra le même
  • name pour créer un même groupe de bouton.(cf. exemple plus bas)
  • readonly : empêche les utilisateur de modifier le texte par défaut d'un champ.
  • rows : Représente le nombre de lignes définies pour la hauteur d'un champ textarea.
  • "password" : contenu de type="" - Créé un champ de saisie crypté.
  • value : Donne une valeur par défaut à un champ.
  • "reset" : Contenu dans type="" - Créé un bouton d'effacement (déconseillé)
  • "submit" : Bouton d'envoi de données.
  • type : Le fameux type="". Il est placé dans une balise < input >, il permet de faire un choix entre différents input (bouton, radio, chekbox, champs mdp, champs texte etc..)
  • size : définit la largeur d'un champ.


Voici un autre bout de code qui vous permettra d'ajouter une liste déroulante à votre formulaire.
Code:
<form>
N-U est :
<select name="liste">
<option value="excellent">Excellent</option>
<option value="super">Super</option>
<option value="pas mal">Pas mal</option>
<option value="pas top">Pas top</option>
<option value="nul">Nul</option>
</select></form>

Résultat :
N-U est :



- Créer un choix par défaut dans une liste déroulante
Code:
<form>
Never-Utopia est :
<select name="liste">
<option value="excellent">Excellent</option>
<option value="super" selected="selected">Super</option>
<option value="pas mal">Pas mal</option>
<option value="pas top">Pas top</option>
<option value="nul">Nul</option>
</select></form>

Donnera :

Never-Utopia est :


Vous pouvez voir que pour créer ce choix par défaut j'ai rajouté l'attribut
Code:
selected="selected"

dans l'option à sélectionner par défaut.

On peut faire pareil avec un choix fait par défaut dans des boutons radio, ou checkbox.
Radio
Code:
<form>
Les tutos de N-U sont :
<input type="radio" name="tuto" value="excellents" />Excellents<br />
<input type="radio" name="tuto" value="bons"  checked="checked" />bons<br />
<input type="radio" name="tuto" value="pas-mal" />Pas Mal<br />
<input type="radio" name="tuto" value="bof" />bof<br />
<input type="radio" name="tuto" value="nuls" />nuls</form>


Les tutos de N-U sont :
Excellents

bons

Pas Mal

bof

nul


Sauf qu'ici on aura utilisé
Code:
 checked="checked"

pour présélectionner un choix.
On peut faire de la même manière avec de véritables checkbox (donc plusieurs choix possibles).
Checkbox
Code:
<form>Vous trouvez que je suis :
<input type="checkbox" value="excellent" />Barbant<br />
<input type="checkbox" value="bon" checked="checked" />Agréable<br />
<input type="checkbox" value="pas-mal"  checked="checked" />Beau gosse<br />
<input type="checkbox" value="bof" />Trop long<br />
<input type="checkbox" value="nul" />Je sais pô...</form>

Vous trouvez que je suis :
Barbant

Agréable

Beau gosse

Trop long

Je sais pô...


Ainsi ici on aura deux présélections, mais la possibilités de désélectionner ou d'avoir d'autres choix.
Voilà... bon ne faites pas attention aux présélections, en fait je ne suis pas que beau gosse XD
ptdr !

Enjoy Wink






J'ai parlé d'une exception du "name" pour le type "radio" et le type "checkbox", n'est-ce pas? Le "name" nous sert dans le javascript à sélectionner la valeur d'un champ, donc il est important que tous les champs aient un "name" différent.

Pour le type "radio" et le type "checkbox", il y a un petit pépin. En effet, pour une même question (un même label), il y a plusieurs champs (plusieurs input).

Histoire de pouvoir démêler cela un peu, on va se servir du "checked" pour vérifier si un champ est coché ou non (on va voir le checked plus tard). Du coup, il n'y a plus besoin de mettre un "name" différent pour chaque input. Plutôt le contraire en fait.

Il est important que, dans les cas de champs "radio" et "checkbox", tous les champs qui font partie d'une même question aient le même "name".

Pourquoi? Parce que le "name" va permettre aux différents champs de rester associés entre eux. Dans le cas d'un champ de type "radio", on peut seulement cocher un champ parmi ceux qui ont le même "name" et si on coche un autre champ qui a le même "name", celui qui était coché précédemment se décoche.

Perdu? Voilà un petit exemple pour vous montrer comme cela fonctionne quand on clique sur un champ radio :




Et l'exemple en code :
Code:
<label for="question_quelconque">Question quelconque</label><br />

<label for="option1">Option 1</label> <input id="option1" name="question_quelconque" value="Mon option 1" type="radio"></input><br />

<label for="option2">Option 2</label> <input id="option2" name="question_quelconque" value="Mon option 2" type="radio"></input>





Outre les balises "input" et "label", il y en a 3 autres qui peuvent être utile dans un formulaire.

Il s'agit des balises "textarea", "select" et "option".

Voilà à quoi elles ressemblent (en code) :
Code:
<textarea name="arara" id="blablabla">Bla bla bla.</textarea>

<select name="restaurants" id="restaurants">
  <option>McDo</option>
  <option>PFK</option>
  <option>Mike</option>
  <option>Subway</option>
  <option>A&W</option>
  <option>Les frites de Suzanne</option>
</select>



Et voilà leur utilité/apparence :
Textarea : C'est une balise utilisée pour du texte long.


Select et Option : Pour des listes déroulantes. La balise "select" correspond à la liste en elle-même et les balises "option" sont les différentes options de la liste.



Étape 1.3 - Créer les champs de notre formulaire


J'ai vraiment besoin de l'expliquer?

Maintenant que vous savez comment fonctionnent les champs, à vous de d'essayer de construire vos questions et vos champs pour votre formulaire ^^

Voici  les questions et les champs pour l'exemple que je vous avais montré tout à l'heure :
Code:
   <form id="monId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" target="_blank">
      <input type="hidden" name="mode" value="newtopic" />
      <input type="hidden" name="topictype" value="0" checked="checked" />
      <input type="hidden" name="message" value="" />
      <input type="hidden" name="f" value="10" />
      <input type="hidden" name="subject" id="titre" value="" />
      <h1>Formulaire de commande de Bouffe, miam miam !</h1>
      <h2>Mes informations</h2>
      <label for="nom">Nom<span class="redd">*</span> :</label><br />
      <input type="text" size="50" name="nom" id="nom" /><br />
      <br />
      <label for="adresse">Adresse<span class="redd">*</span> :</label><br />
      <input type="text" size="70" name="adresse" id="adresse" /><br />
      <br />
      <label for="phone">Numéro de téléphone<span class="redd">*</span> :</label><br />
      <input type="text" size="20" name="phone" id="phone" /><br />
      <br />
      <h2>Commande</h2>
      <label for="resto">Nom du restaurant<span class="redd">*</span> :</label><br />
      <select name="resto" id="resto">
        <option>McDo</option>
        <option>PFK</option>
        <option>Buffet Chinois Hans</option>
        <option>Mike</option>
        <option>Subway</option>
        <option>Sushi Shop</option>
        <option>Chez Angelo l'Italien</option>
        <option>Les frites de Suzanne</option>
      </select><br />
      <br />
      <label for="livraison">À faire livrer ou non?<span class="redd">*</span></label><br />
      <label for="livrer">Oui</label> <input type="radio" name="livraison" id="livrer" checked="checked" value="Oui" /><br />
      <label for="nonlivrer">Non</label> <input type="radio" name="livraison" id="nonlivrer" value="Non" /><br />
      <br />
      <h3>Commande avec menu prédéfini</h3>
      <label for="nmenu">N° de menu :</label><br />
      <input type="number" style="width: 50px;" name="nmenu" id="nmenu" max="20" min="1" value="1" /><br />
      <br />
      <label for="nperso">Nombre de personnes qui commandent :</label><br />
      <input type="number" style="width: 50px;" name="nperso" id="nperso" max="20" min="1" value="1" /><br />
      <br />
      <h3>Commande personnalisée</h3>
      <label for="commande">Contenu de la commande</label><br />
      <textarea name="commande" id="commande"></textarea><br />
      <br />
      <h2>Paiement</h2>
      <label for="paie">Type de paiement<span class="redd">*</span> :</label><br />
      <label for="visa">Carte Visa</label> <input type="radio" name="paie" id="visa" checked="checked" value="Carte Visa" /><br />
      <label for="mastercard">Carte Mastercard</label> <input type="radio" name="paie" id="mastercard" value="Carte Mastercard" /><br />
      <label for="cash">Argent comptant</label> <input type="radio" name="paie" id="cash" value="Argent comptant" /><br />
      <label for="debit">Carte de débit</label> <input type="radio" name="paie" id="debit" value="Carte de débit" /><br />
      <br />
      <label for="trucs">Trucs pour faire baisser le montant total :</label><br />
      <label for="coupon">Coupon-rabais</label> <input type="checkbox" name="coupon" id="coupon" value="Coupon-rabais" /><br />
      <label for="ami">"Ami" du proprio</label> <input type="checkbox" name="ami" id="ami" value="Ami du proprio" /><br />
      <label for="cadeau">Cartes cadeaux</label> <input type="checkbox" name="cadeau" id="cadeau" value="Cartes cadeaux" /><br />
      <br />
      <label for="secret">Mon code secret VIP de "Chez Angelo l'Italien" :</label><br />
      <input type="password" size="30" name="secret" id="secret" /><br />
      <br />
      <br />
      <div style="text-align: center;">
        <input type="reset" name="reseta" value="Rénitialiser le formulaire" />
        <input type="submit" name="post" value="Envoyer le formulaire" />
      </div>
      <br />
    </form>


Note : Les h1, h2 et h3 sont simplement des balises de titres.
Note2 : Les br sont des retour à la ligne, cela remplace un "enter" classique qui, dans une page HTML, ne sert à rien.

À vous de jouer pour faire votre propre formulaire maintenant !

Note : Si ce n'est pas déjà fait, enregistrez votre page html avant de la perdre ! Ensuite, assurez-vous de l'enregistrer régulièrement pour ne rien perdre ^^

Attention au champ pour envoyer le message !

Sur forumactif, le champ pour envoyer le message, celui qui a pour type "submit", doit absolument avoir "post" dans son "name". Le name "post" sert à indiquer qu'on veut poster notre message et non pas faire quelque chose d'autre avec.

Du coup, il doit ressembler à cela :
Code:
<input type="submit" name="post" value="Envoyer le formulaire" />


D'ailleurs, si jamais vous voulez rajouter l'option de "prévisualiser" le message avant qu'il soit posté, vous pouvez faire un copier/coller du bouton, mais en utilisant le name "preview" à la place de "post".

Du coup, le bouton prévisualiser ressemblerait à ceci :
Code:
<input type="submit" name="preview" value="Prévisualiser le formulaire" />



Étape 2 - Les champs invisibles de notre formulaire


Houston, on a un problème! Mais de quoi elle parle, des champs invisibles ? WTF ?

Roh, allez, c'est pas si effrayant, je vous en ai déjà parlé tout à l'heure !

Je parle ici des balises "input" de type "hidden", ceux qu'on peut mettre partout sans que la personne qui rempli le formulaire ne les voit.

Mais pourquoi on en aurait besoin ??!

Vous croyez peut-être que votre formulaire, une fois rempli, va savoir qu'il doit aller dans se poster en réponse à un sujet déjà créé ou qu'il doit créer un nouveau sujet dans un sous-forum précis? Nope, il n'en sait rien.

Heureusement, on est là pour l'aider ^^

Donc voilà les champs invisibles qui seront à ajouter directement après la balise "form" :
Code:
      <input type="hidden" name="mode" value="newtopic" />
      <input type="hidden" name="topictype" value="0" checked="checked" />
      <input type="hidden" name="message" value="" />
      <input type="hidden" name="f" value="10" />
      <input type="hidden" name="subject" id="titre" value="" />


.... Et ça veut dire quoi, ça? C'est bien beau d'aider le formulaire à savoir où aller, mais j'en ai pas plus idées que lui moi ><

Ouais, j'imagine XD Allez, passons chaque ligne au peigne fin !


Code:
<input type="hidden" name="mode" value="newtopic" />

Cela sert à définir le mode du message.
Si on met "newtopic" comme valeur, c'est qu'on crée un nouveau sujet. Si on met "reply" comme valeur, c'est qu'on répond à un sujet déjà existant. Si on met "move" comme valeur, c'est qu'on veut déplacer un sujet.
Je ne nommerai pas tous les modes, mais il y en a beaucoup, un pour presque chaque option possible sur forumactif.
Nous, ce qui nous intéresse pour le moment, c'est le "newtopic" pour créer un nouveau sujet et le "reply" pour répondre à un sujet.


Code:
<input type="hidden" name="topictype" value="0" checked="checked" />

Cela sert à dire quel type de sujet on crée.
Si c'est un message normal, on lui donne la valeur "0".
Si c'est une note (post-it), ce sera la valeur "1".
Si c'est une annonce, ce sera la valeur "2".
Si c'est une annonce globale, ce sera la valeur "3".


Code:
<input type="hidden" name="message" value="" />

Il s'agit du contenu du message qui sera posté. Comme le message va prendre les données du formulaire, on le met vide pour le moment et on ira s'occuper de le remplir plus tard grâce au javascript.


Code:
<input type="hidden" name="f" value="10" />

C'est le "où". Où est-ce que le message doit être posté?
Le "f" dans le "name" indique que c'est dans un forum ou sous-forum.
Si on voulait que ce soit dans une catégorie, on aurait mis la valeur "c".
Si on aurait voulait que ce soit dans un sujet déjà créé, on aurait mis la valeur "t".

Ensuite, le "10" dans le "value" indique dans quel forum/sous-forum/catégorie/sujet le message doit être posté.
Autrement dit, vous vous rendez sur la page du sujet/sous-forum/etc. où vous voulez que le sujet soit posté et vous regardez dans la barre d'adresse.
Directement après le "f" (ou c ou t), vous verrez un nombre.
C'est ce nombre qu'il faut mettre dans "value".


Code:
<input type="hidden" name="subject" id="titre" value="" />

C'est simplement le titre du sujet. Si vous voulez que la personne le remplisse par elle-même, vous pouvez changer le "type" pour "text" et l'intégrer au reste du formulaire. Sinon, laissez-le caché et on ira remplir le titre à l'aide du javascript plus tard ^^


Note : Si ce n'est pas déjà fait, enregistrez votre page html avant de la perdre ! Ensuite, assurez-vous de l'enregistrer régulièrement pour ne rien perdre ^^

Et voilà pour cette section \o/

Onyx

Changement automatique du rang selon le groupe - Lun 18 Avr 2016 - 2:12




Changement automatique du rang selon le groupe


Salut !

Pour certains administrateurs, il y a beaucoup de changements de groupes et de rangs. Déjà que changer le groupe de 15 personnes par jour prend du temps, devoir en plus changer leur rang à chaque fois ne rend pas les choses très faciles.

Du coup, j'ai créé une petite astuce pour tricher et lier les rangs au groupe de la personne à la demande de Darkius.

Plus précisément, cette astuce remplace le rang et l'image de rang par un "faux titre de rang" et une "fausse image de rang" et un javascript va "regarder la couleur du pseudo de la personne", trouvera le rang et l'image de rang associés à ce groupe (à cette couleur) et le mettra dans l'espace du "faux titre de rang" et de la "fausse image de rang".

Attention :
- Si une personne fait partie de plusieurs groupes, le groupe qui apparaîtra sera celui dont elle a la couleur, pas les autres.
- Cela agit seulement dans les messages, pas pour le rang dans les profils. Je recommande de tout simplement supprimer les rangs pour qu'ils ne s'affichent nul part. Comme ça, les seuls rangs qui s'afficheront seront les faux.


Ce LS est en trois parties.
  • Tout d'abord, nous allons créer l'espace pour les faux rangs dans le template des messages.
  • Puis, nous allons ajouter le javascript qui permet de faire fonctionner cette astuce.
  • Enfin, nous allons voir comment mettre vos propres rangs et groupes dans le javascript.


- La version du forum est PhpBB2.
- Il est possible (mais pas toujours) que l'astuce ne fonctionne pas si votre template a déjà été modifié. Si c'est le cas, vous pouvez aller dans "personnalisations" ou "problème avec mon code" pour recevoir de l'aide
Mettre un crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Ajouter l'espace des "faux rangs" (Template Viewtopic_Body)


Nous allons commencer par aller dans les templates, plus précisément dans le template "viewtopic_body".

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > VIEWTOPIC_BODY

Puis, on chercher cette variable :
Code:
{postrow.displayed.POSTER_RANK}


Qu'on va remplacer par ceci :
Code:
<span class="rangtitre"></span>



Et on va trouver cette variable :
Code:
{postrow.displayed.RANK_IMAGE}


Qu'on va remplacer par ceci :
Code:
<span class="rangimg"></span>




2. Ajouter le javascript


Maintenant que les rangs normaux ont été remplacés par les faux rangs, on va aller ajouter le javascript.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Système de faux rangs".
On choisit le placement "Sur les sujets" (c'est super important).

Enfin, on met le javascript suivant et on enregistre :
Code:
$(function () {
  var groupcouleur = [
  "rgb(144, 55, 199)",
  "rgb(162, 176, 102)",
  "rgb(133, 199, 194)",
  "rgb(67, 145, 181)",
  "rgb(10, 163, 97)",
  ];

  var group1 = [
  "Élèves",
  "Professeurs",
  "Personnel",
  "Habitants",
  "PNJ",
  ];

  var group2 = [
  "http://img11.hostingpics.net/pics/215624jaime.png",
  "http://illiweb.com/fa/subsilver/icon_pm.gif",
  "http://illiweb.com/fa/subsilver/icon_email.gif",
  "http://illiweb.com/fa/subsilver/icon_www.gif",
  "http://illiweb.com/fa/subsilver/icon_online_fr.gif",
  ];

  var nbgroup = groupcouleur.length;
  $('tr.post > td span.name > strong > a > span > strong').each(function () {
    var rang1 = $(this).closest('tr.post').find('td:first').find('.rangtitre');
    var rang2 = $(this).closest('tr.post').find('td:first').find('.rangimg');
    var uncolor = $(this).css('color');
    for (i=0; i < nbgroup; i++) {
      if (uncolor == groupcouleur[i]) {
        $(rang1).html(group1[i]);
        $(rang1).css('color', groupcouleur[i]);
        $(rang2).html('<img src="'+group2[i]+'" alt="Image à remplacer" />');
      }
    }
  });
});




3. Adapter le javascript à vos propres groupes et rangs


Voici le fonctionnement du javascript :
Il va aller "regarder la couleur du pseudo". Ensuite, il consulte une liste des couleurs des groupes (que vous allez devoir mettre vous-même) pour savoir le groupe auquel la couleur du nom correspond. Puis, il regarde la liste de rang (que vous devrez faire vous-même) et il ajoute le titre du rang et l'image du rang qui correspond au groupe.

On va décortiquer le javascript pour savoir où on doit modifier quoi Wink





Partie des couleurs des groupes qui ont des rangs

Si on décortique le javascript, la première partie, "groupcouleur", comporte la couleur de chacun des groupes en mode "rgb":
Code:
$(function () {
  var groupcouleur = [
  "rgb(144, 55, 199)", /*Couleur du 1er groupe*/
  "rgb(162, 176, 102)", /*Couleur du 2e groupe*/
  "rgb(133, 199, 194)", /*Couleur du 3e groupe*/
  "rgb(67, 145, 181)", /*Couleur du 4e groupe*/
  "rgb(10, 163, 97)", /*Couleur du 5e groupe*/
  ];


Vous devez aller dans chacun de vos groupes et copier/coller exactement la couleur qui appartient à chaque groupe. Vous verrez que la couleur est en mode "hex", soit quelque chose comme "#AD8H46". Or, le javascript utilise uniquement les codes en mode "rgb", tel que "rgb(173, 8, 70)", ce qui donne la même couleur.

Pour transférer vos codes de couleur "hex" en codes de couleur "rgb", vous pouvez utiliser ce site : http://www.javascripter.net/faq/hextorgb.htm . Bref, une fois que vous avez la couleur en "rgb", vous la mettez dans la partie "groupcouleur" pour chacun de vos groupes.





Partie des "faux titres de rang"

Ensuite, la deuxième partie, "group1", sert à mettre le titre de chacun des rangs : :
Code:
 var group1 = [
  "Élèves", /*Titre du 1er groupe*/
  "Professeurs", /*Titre du 2e groupe*/
  "Personnel", /*Titre du 3e groupe*/
  "Habitants", /*Titre du 4e groupe*/
  "PNJ", /*Titre du 5e groupe*/
  ];


À noter que le premier rang doit correspondre à la couleur du premier groupe que vous avez mis dans la section précédente et ainsi de suite.

D'ailleurs, si vous voulez personnaliser chacun des rangs, vous pouvez facilement mettre quelque chose comme :
Code:
 var group1 = [
  "<span style='color: red;'>Élèves</span>",
  "<span style='color: blue;'>Professeurs</span>",
  "<span style='color: orange;'>Personnel</span>",
  "<span style='color: purple;'>Habitants</span>",
  "<span style='color: green;'>PNJ</span>",
  ];


Ou encore :
Code:
 var group1 = [
  "<span class='nom_de_class1'>Élèves</span>",
  "<span class='nom_de_class2'>Professeurs</span>",
  "<span class='nom_de_class3'>Personnel</span>",
  "<span class='nom_de_class4'>Habitants</span>",
  "<span class='nom_de_class5'>PNJ</span>",
  ];






Partie des "fausses images de rang"

La troisième partie, "group2", sert à mettre l'url des images de rang pour chacun des groupes :
Code:
 var group2 = [
  "http://img11.hostingpics.net/pics/215624jaime.png", /*Image du 1er groupe*/
  "http://illiweb.com/fa/subsilver/icon_pm.gif", /*Image du 2e groupe*/
  "http://illiweb.com/fa/subsilver/icon_email.gif", /*Image du 3e groupe*/
  "http://illiweb.com/fa/subsilver/icon_www.gif", /*Image du 4e groupe*/
  "http://illiweb.com/fa/subsilver/icon_online_fr.gif", /*Image du 5e groupe*/
  ];


À noter que la première url d'image doit correspondre au premier titre du rang de la section précédente et à la couleur du premier groupe que tu as mis dans la section d'avant et ainsi de suite.





La partie où le javascript fait actuellement quelque chose

La dernière partie du javascript, soit le reste, sert à repérer la couleur du nom de l'utilisateur, de la comparer avec le groupcouleur et d'appliquer le titre de rang et l'image de rang qui correspond :
Code:
 /*On calcule le nombre de couleurs au total*/
  var nbgroup = groupcouleur.length;

  /*On va chercher chaque nom pour chaque message posté pour appliquer le reste du javascript. On répète le processus à chaque fois qu'on trouve un nom*/
  $('tr.post > td span.name > strong > a > span > strong').each(function ()

    /*On sélectionne le l'espance du "faux titre de rang" dans le template*/
    var rang1 = $(this).closest('tr.post').find('td:first').find('.rangtitre');

    /*On sélectionne l'espace de "fausse image de rang" dans le template*/
    var rang2 = $(this).closest('tr.post').find('td:first').find('.rangimg');

    /*On prend la couleur du pseudo*/
    var uncolor = $(this).css('color');

    /*On va aller comparer la couleur de pseudo à chaque couleur de groupe*/
    for (i=0; i < nbgroup; i++) {

      /*Si la couleur du pseudo = la couleur du groupe, on va faire les modifications*/
      if (uncolor == groupcouleur[i]) {

        /*On ajoute le titre de rang qui correspond à la couleur du groupe dans l'espace du "faux titre de rang"*/
        $(rang1).html(group1[i]);

        /*On donne la même couleur au titre de rang que la couleur du groupe*/
        $(rang1).css('color', groupcouleur[i]);

        /*On ajoute l'image de rang qui correspond à la couleur du groupe dans l'espace de la "fausse image de rang"*/
        $(rang2).html('<img src="'+group2[i]+'" alt="Image à remplacer" />');
      }
    }
  });
});


Ce bout n'a absolument pas à être modifié pour fonctionner. Sérieux, pas touche, à moins d'être sûr de savoir ce que vous faites, ok?





Personnaliser le titre de rang et l'image de rang

On a déjà vu précédemment qu'on pouvait entourer d'un span avec une classe différente chaque titre de rang, donc vous pouvez vous servir de ces classes pour personnaliser chaque rang.

Pour personnaliser tous les titres de rang à la fois, vous pouvez mettre ceci dans votre CSS :
Code:
/*Titres des rangs*/
.rangtitre {
  propriété: valeur;
}


Pour personnaliser tous les images de rang à la fois, vous pouvez mettre ceci dans votre CSS :
Code:
/*Images des rangs*/
.rangimg img {
  propriété: valeur;
}


Quant à personnaliser les images de rang individuellement, vous pouvez mettre ceci dans votre CSS et remplacer le URL par le lien de l'image de rang à modifier :
Code:
.rangimg img[src="URL"] {
  propriété: valeur;
}






Partie des rangs dans le reste du forum

À ma connaissance, les rangs apparaîssent à un seul autre endroit dans le forum, soit le profil.

Le hic, c'est que puisque le profil (à moins que vous ayez la version simplifié du profil) ne peut pas être modifié entièrement dans un template, on peut difficilement remplacer le rang par le faux rang.

Donc, si la personne change de groupe, le rang se changera automatiquement dans les messages (grace aux "faux rang"), mais restera pareil dans le profil. Alors si quelqu'un va voir, il sera genre "WTF?". Pas trop joyeux ><

Ce que je vous conseille, une fois que vous avez installé le javascript comme il faut et vérifié qu'il fonctionne bien, c'est d'aller carrément supprimer les rangs qui ne sont plus nécessaire (dans le panneau d'administrateur, dans les utilisateurs, dans les rangs, vous les supprimez tous).

Comme ça, les rangs ne seront simplement pas affichés sur le profil (ce qui n'est vraiment pas un drame, on s'entend) et ne contraseront donc plus avec le faux rang des messages. Perfect!





C'est tout! Si jamais vous avez des problèmes avec cette astuce, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez modifier le fonctionnement de l'astuce et que vous avez besoin d'aide.

À plus !

Faire un design différent pour chaque catégorie (HTML et CSS) - Mer 4 Mar 2015 - 22:14




Faire un design différent pour chaque catégorie (CSS uniquement)


Édit d'Onyx : Bien que les notions vues dans ce tutoriel fonctionnent, je vous conseillerais d'utiliser ce tutoriel de Nihil Scar Winspeare qui utilise une méthode plus simple et plus propre.


Vous savez qu'on peut faire une mise en forme pour les forums et les catégories... Mais saviez-vous que vous pouvez personnaliser chacune de vos catégories pour qu'elles soient tous différentes les unes des autres? Eh bien, c'est ce que ce tuto vous montrera ^^


Voici quelques exemple de ce qu'on peut obtenir :
Exemple 1
Exemple 2
Exemple 3


Voilà tout ce qu'on va voir qu'on peut personnaliser individuellement :
- Les titres de chaque catégorie.
- Le fond (design général) de chaque catégorie.
- Les titres de chaque forum.
- Le fond (design général) de chaque forum et de chaque partie de chaque forum.
- La description des forums.

Et tout ce qu'on ne peut pas personnaliser individuellement :
- La structure des catégories et des forums.
- Les images New/Old/Lock.
- La mise en forme (police et couleur) des liens vers les sous-forums.
- La mise en forme (police et couleur) du dernier message.
- La mise en forme (police et couleur) des statistiques (nombre de messages et de sujets)


Voici comment est séparé le tutoriel, soit nos grandes étapes à suivre :
1. Comment faire une disposition "générale" pour les catégories et forums. Aperçu.
2. Comment personnaliser chaque fond et titre de catégorie. Aperçu.
3. Comment personnaliser chaque fond et titre de forum. Aperçu.
4. Problèmes possibles


- La version du forum doit être "PHPBB2".
- La hiérarchie et la structure des catégories doivent être "Séparer sur l'index : moyen".
- Le niveau de ce tutoriel est intermédiaire/avancé.



1. Comment faire une disposition "générale" pour les catégories et forums


Rappel :
Ce tuto utilise PhpBB2 et la hiéarchie "Séparer sur l'index: moyen". Si vous êtes sur une autre version de forum ou que vous utilisez une autre hiéarchie, la procédure à suivre est un peu différente.

Avant tout, il faut construire une structure générale pour nos catégories et nos forums. Pour cela, vous pouvez utiliser les tutos déjà existants, des LS, vos propres compétences ou la structure que j'utiliserai pour vous montrer comment faire.

Normalement, avec la hiéarchie que nous avons choisie, les catégories sont faites avec des "table" et des "td". Néanmoins, outre le fait que l'usage des tableaux pour autre chose que mettre en forme des données est de plus en plus déconseillé, je trouve cela plus facile à comprendre visuellement lorsqu'on utilise des "div", alors l'exemple suivant vous montrera la structure des catégories à l'aide de "div". Cela ne vous empêche pas de bâtir vos propres catégories selon la méthode que vous préférez ^^

Donc voilà, en gros, comment les différentes parties du template Index_box sont structurées (les informations entre parenthèses sont des simple indications, ne les recopiez absolument pas dans votre template) :
Code:
(Autres trucs avant le début des catégories)

<!-- BEGIN catrow --> (Indique le début des catégories)

  <!-- BEGIN tablehead --> (Indique le début de la partie du haut de chaque catégorie)

    <div> (Ouverture de la div qui englobe toute la catégorie)

      <div> ( Ouverture de la div du titre de catégorie)
        {catrow.tablehead.L_FORUM}
      </div> (Fermeture de la div du titre de catégorie)

      <div> (Ouverture de la div qui englobe tous les forums)

  <!-- END tablehead --> (Indique la fin de la partie du haut de chaque catégorie)

  <!-- BEGIN forumrow --> (Indique le début de chaque forum)

        <div> (Ouverture de la div qui englobe un seul forum)
          Trucs à l'intérieur du forum
        </div> (Fermeture de la div qui englobe un seul forum)

  <!-- END forumrow -->  (Indique la fin de chaque forum)

  <!-- BEGIN tablefoot --> (Indique le début de la partie du bas de chaque catégorie)

    </div> (Fermeture de la div qui englobe tous les forums)

  </div> (Fermture de la div qui englobe toute la catégorie)

  <!-- END tablefoot --> (Indique la fin de la partie du bas de chaque catégorie)

<!-- END catrow --> (Indique la fin des catégories)


Une fois qu'on a notre structure globale de faite, on veut habituellement la mettre en forme. Pour cela, on on ajoute une "class" à chaque "div" (ou span, ou td, ou ce que vous préférez utiliser) et on s'en sert pour personnaliser chaque partie dans le CSS.

Pour ce qui est des éléments "à l'intérieur du forum" que je n'ai pas pris la peine de détailler, voici une petite liste rapide des différentes variables et de leur signification (avec PhpBB2 et la hiérarchie "Séparer sur l'index: moyen") :

VariableSignification
{catrow.tablehead.L_FORUM}Titre de forum
{catrow.forumrow.FORUM_FOLDER_IMG}URL de l'image Old/New/Lock. Habituellement, on prend on complet l'image qui contient cette variable lorsqu'on crée la structure des forums
{catrow.forumrow.U_VIEWFORUM}Lien d'un forum à l'intérieur d'une catégorie
{catrow.forumrow.FORUM_NAME}Le nom d'un forum à l'intérieur d'une catégorie
{catrow.forumrow.FORUM_DESC}Description de forum
{catrow.forumrow.switch_moderators_links.L_MODERATOR} {catrow.forumrow.switch_moderators_links.MODERATORS}Personnes qui peuvent modérer ce forum ou sous-forum
{catrow.forumrow.L_LINKS} {catrow.forumrow.LINKS}Liens des sous-forums d'un forum
{catrow.forumrow.TOPICS}Nombre de sujets dans un forum
{catrow.forumrow.POSTS}Nombre de messages dans un forum
{catrow.forumrow.avatar.LAST_POST_AVATAR}Avatar du dernier posteur
{catrow.forumrow.LAST_POST}Dernier message



Vous disposez de ces différentes variables en les entourant de "span", "div", "td" ou ce que vous préférez. Puis, vous fonctionnez pareil pour les personnaliser, à savoir en rajoutant des "class", puis en utilisant le CSS.

Il y a tellement de façons différentes de fonctionner qu'il n'y a pas de modèle précis... Néanmoins, pour le bien de ce tuto, il sera important d'entourer le titre de forum ainsi que le titre de catégorie d'un span ou d'une div (comme le titre de catégorie) et de lui donner une class précise.

De plus, il est important d'utiliser le plus possible des tailles "fixes". Si vous mettez certains éléments avec une largeur ou une hauteur en % ou que vous avez tendance à utiliser des "span" qui s'ajuste au contenu, cela risque de causer des problèmes par la suite.




Voici à quoi correspond la structure des catégories que j'utiliserai pour l'exemple du tuto et qui vous donnera cet aperçu :
Code:
<!-- BEGIN catrow -->

  <!-- BEGIN tablehead -->
    <div class="cate_bloc">
      <div class="cate_title">
        {catrow.tablehead.L_FORUM}
      </div>
     
  <!-- END tablehead -->

  <!-- BEGIN forumrow -->
        <div class="forum_bloc">
         
          <div class="forum_principal_bloc">
           
            <div class="forum_title_bloc">
                <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            </div>
         
            <div class="forum_img_bloc">
                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
            </div>
         
            <div class="forum_desc_bloc">
                {catrow.forumrow.FORUM_DESC}
            </div>
         
            <div class="forum_lastmess_stats_bloc">
           
              <div class="forum_stats_bloc">
                  {catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
              </div>
           
              <div class="forum_lastmess_bloc">
                  {catrow.forumrow.LAST_POST}
              </div>
           
            </div>
         
            <div style="clear: both"></div>
          </div>
         
          <div class="forum_sousforums_bloc">
              {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
          </div>
         
      </div>
  <!-- END forumrow -->

  <!-- BEGIN tablefoot -->
  </div>
  <!-- END tablefoot -->

<!-- END catrow -->


Ainsi que mon CSS (sans forum ou catégorie personnalisée) de base :
Code:
/*Bloc de catégories*/
.cate_bloc {
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}


/*Bloc des titres de catégorie*/
.cate_title {
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}
/*Titre des catégories*/
.cate_title h2 {
  margin: 0px;
  padding: 0px;
  font-size: 36px;
  color: #dfdfdf;
  font-family: 'Vivaldi';
  text-align: center;
}


/*Bloc de un forum*/
.forum_bloc {
  margin: auto;
  margin-bottom: 20px;
  width: 700px;
}
/*Bloc du milieu de forum*/
.forum_principal_bloc {
  width: 640px;
  margin: auto;
  padding: 2px 20px 10px 20px;
  background-color: #a3a3a3;
  border: 1px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-left: 3px solid #c4c4c4;
  border-radius: 30px;
}


/*Bloc de titre de forum*/
.forum_title_bloc {
  margin-left: -65px;
  height: 27px;
  margin-bottom: 5px;
  text-align: center;
}
/*Titre de forum*/
.forum_title_bloc a.forumlink {
  font-family: 'monotype corsiva';
  font-size: 24px;
  color: #dfdfdf!important;
  text-decoration: none!important;
  letter-spacing: 1px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}
/*Titre de forum survolé*/
.forum_title_bloc a.forumlink:hover {
  color: #dfdfdf!important;
  letter-spacing: 5px;
}


/*Bloc de image new-old-lock*/
.forum_img_bloc {
  float: left;
  height: 80px;
  width: 85px;
}


/*Bloc de la description*/
.forum_desc_bloc {
  float: left;
  margin-left: 25px;
  margin-top: -5px;
  height: 78px;
  width: 343px;
  border: 1px solid #dfdfdf;
  padding: 5px;
  border-radius: 10px;
  background-color: #c4c4c4;
  text-align: justify;
  font-size: 10px;
  overflow: auto;
}


/*Bloc du denier message et des statistiques*/
.forum_lastmess_stats_bloc {
  float: left;
  margin-left: 25px;
  height: 78px;
  width: 148px;
  text-align: center;
  background-color: #c4c4c4;
  border: 1px solid #dfdfdf;
  border-radius: 10px;
}
/*Bloc des statistiques*/
.forum_stats_bloc {
  margin: auto;
  margin-top: 5px;
  width: 140px;
  height: 18px;
  text-align: center;
  font-size: 11px;
  font-family: 'times new roman';
  margin-bottom: 5px;
  border-bottom: dotted 2px #dfdfdf;
}
/*Bloc du dernier message*/
.forum_lastmess_bloc {
  margin: auto;
  width: 140px;
  text-align: center;
  font-size: 12px;
  font-family: 'times new roman';
}


/*Bloc des sous forums*/
.forum_sousforums_bloc {
  margin: auto;
  height: 20px;
  overflow: auto;
  width: 580px;
  padding: 3px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  font-size: 12px;
  font-family: 'Times New Roman';
  background-color: #a3a3a3;
  border-bottom: 3px solid #c4c4c4;
  border-left: 1px solid #c4c4c4;
  border-right: 1px solid #c4c4c4;
  border-radius: 0 0 30px 30px;
  vertical-align: bottom;
  line-height: 20px;
}
/*Écriture des sous-forums*/
.forum_sousforums_bloc .gensmall {
  vertical-align: bottom;
  font-size: 12px;
  line-height: 20px;
  font-family: 'Times New Roman';
}




2. Comment personnaliser chaque fond et titre de catégorie


Avant de commencer cette étape, il va falloir que toutes les catégories, forums et sous-forums soient déjà créés.

Si vous voulez savoir pourquoi, c'est que pour personnaliser chaque catégorie, on va aller "ajouter" un deuxième fond de catégorie qui cachera le premier. Ce "deuxième fond" ne s'ajustera pas automtiquement à la hauteur de la catégorie, alors nous devront lui donner une hauteur nous-même. Et si jamais vous rajoutez des forums ou sous-forums dans votre catégorie, vous devrez ensuite ajuster de nouveau la hauteur.

Bref, il faut que toutes les catégories, forums et sous-forums soient déjà créés avant de continuer.




Pour cette étape, nous allons utiliser ce qu'on appelle "les positions" et "le z-index". Je vais vous expliquer certaines de leurs particularités au fur et à mesure qu'on les utilisera. Néanmoins, si vous voulez plus d'informations, je vous invite à aller sur cette étape de cursus.




La question est :
Comment personnaliser une catégorie spécifique... Alors que la seule chose qu'on peut accéder dans une catégorie spécifique, c'est son titre?

La réponse est :
En se servant justement de ce titre!

Bon, ok, c'est chelou dit comme ça >< Du coup, je vais vous montrer un screen qui vous montrera une catégorie normale :
Schéma de base

Donc en ordre :
- On a toujours notre fond de catégorie normal. (Pas vraiment de profondeur)
- Par dessus, on a le titre de catégorie et les forums. (Pas vraiment de profondeur)


Ce qu'on va faire, c'est qu'on va mettre des éléments supplémentaires dans le titre de catégorie et on va aller les positionner pour cacher l'ancien design de la catégorie, comme ceci :
Schéma de ce qu'on veut avoir

Donc en ordre :
- On a toujours notre fond de catégorie normal. (Profondeur 0)
- Par dessus, il y a le fond de catégorie personnalisé qui va venir "cacher" notre fond de catégorie normal. (Profondeur 1)
- Quant à notre titre de catégorie personnalisé, on va aller le mettre par dessus le fond de catégorie personnalisé. (Profondeur 2)
- Nos forums sont par dessus le fond de catégorie personnalisé. (Profondeur 2)
- Notre titre de catégorie de base n'est pas sur l'image, mais il est caché en dessous du fond de catégorie personnalisé. (Profondeur 0)


Ok... mais pourquoi tu parles de profondeur et de "z-index" dans ton image? Ça veut dire quoi?
Je veux "cacher" certains éléments (titre de catégorie normal et fond de catégorie normal) avec d'autres éléments. Pour faire cela, je dois m'assurer que mes éléments personnalisés soient "par dessus" les éléments normal. Pour cela, j'utilise le "z-index".


Et c'est quoi un "z-index"?
C'est une propriété de CSS qui indique justement la profondeur d'un élément. Cela nous permet de superposer comme on le veut des éléments. Plus un z-index est élevé, plus l'élément sera "par dessus". Plus le z-index est petit, plus l'élément sera "en dessous".

Donc si je veux que mon fond de catégorie de personnalisé soit "par dessus" mon fond de catégorie normal, il va falloir que je lui donne z-index plus gros que le fond de catégorie normal, tout simplement.




Maintenant que vous avez une petite idée de ce à quoi cela va ressembler, on va commencer le travail \o/

Comme dit plus haut, pour personnaliser le fond et le titre de catégorie de chaque catégorie, on va passer par le seul endroit où nous avons accès à une catégorie spécifique : le titre de catégorie.

Donc nous allons aller dans la catégorie que nous voulons personnaliser et on va aller mettre ceci dans le titre :
Code:
<span class="cate1">Titre de catégorie</span><span class="catefond1"></span>


Ce qu'on vient de faire?
On vient d'entourer notre titre de catégorie d'un span avec la class "cate1" pour pouvoir personnaliser la mise en forme de ce titre de catégorie.
Quant au deuxième span avec la class "catefond1", il va correspondre à notre fond de catégorie personnalisé.




Maintenant, on passe aux modifications du CSS! On commence par ajouter une position "relative" à notre fond de catégorie de base.

Errr... Une position?
Pour ce qui nous intéresse dans ce tutoriel, une position a 2 utilités.

Premièrement, cela nous permet d'utiliser le "z-index". En effet, le "z-index" ne fonctionne que si notre élément a une "position".

Deuxièmement, cela nous permet de faire du "positionnement". Et oui, les "positions" permettent de "positionner", c'est logique :hum:. Entre autres, la position "relative" laisse le bloc à son emplacement actuel. C'est donc la position que nous allons utiliser le plus souvent lorsque nous souhaitons simplement nous servir du "z-index". Mais, on va aussi utiliser la position "absolute".

La position "absolute" fait que l'élément se place toujours en haut à droite de son plus proche "parent" ayant une position "relative". Si un élément avec position "absolute" n'a aucun parent avec position "relative", il se met automatiquement en haut à droite de l'écran. En effet, la position relative permet de lancer un message qui dit "hé ho, je suis votre référence et votre dieu". Du coup, les éléments avec position "absolute" vont chercher parmi leurs "parents" et vont aller se placer par rapport au premier qui a la position "relative" qu'il sera capable de trouver.


Ici, on va vouloir que notre fond de forum normal serve de "référence" à notre fond de forum personnalisé lorsqu'on va vouloir le positionner. Du coup, on ajoute une position "relative" à notre fond de catégorie de normal :
Code:
/*Bloc de catégories*/
.cate_bloc {
  position: relative;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}





Ensuite, si on se référe à notre schéma de tout à l'heure, on constate que nos forums doivent être par dessus notre fond de forum personnalisé. Plus précisément, on a besoin d'un "z-index: 2;". Et pour pouvoir utiliser un "z-index", il nous faut une "position". On va donc mettre un "z-index: 2;" et une "position: relative;" à nos forums :
Code:
/*Bloc de un forum*/
.forum_bloc {
  position: relative;
  z-index: 2;
  margin: auto;
  margin-bottom: 20px;
  width: 700px;
}





Maintenant qu'on a positionné et ajusté la profondeur de nos éléments normaux, on va passer aux éléments "personnalisés". On va commencer par le titre de catégorie lui-même.

Pour cela, on copie/colle le CSS du titre de la catégorie de base, puis on va changer le nom pour ".cate_title .cate1".

Pourquoi ".cate_title .cate1"?
Tout à l'heure, nous avions entouré notre titre de catégorie d'un span avec la class "cate1". Du coup, nous mettons ".cate1" pour sélectionner cette class.

Quant au ".cate_title" juste avant, c'est parce que ce titre de catégorie n'existe pas seulement sur la page d'accueil. Quand on entre dans un sujet, il y a le titre de catégorie en haut de notre sujet. Comme on ne veut pas que le titre de catégorie soit personnalisé partout et qu'il brise notre design, on met "cate_title" avant la class du titre personnalisé. Comme ça, le titre de catégorie est personnalisé seulement lorsqu'il est dans une catégorie.

Bref, cela nous donne ceci :
Code:
.cate_title .cate1 {
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}





La hauteur, les margins et la largeur n'étant pas pris en compte dans les éléments de type "inline" comme un "span". Alors si vous avez une hauteur, largeur ou des margins pour votre titre de catégorie, vous aller devoir transformer ajouter un "display: block;" pour transformer votre "span" en "bloc" et qu'il ait les bonnes dimensions. Si vous n'en avez pas, tant mieux pour vous, vous pouvez passer à la prochaine étape.

Présentement, cela me donne ceci :
Code:
.cate_title .cate1 {
  display: block;
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}





En suivant notre schéma de base, on se rend compte que si on ne veut pas que notre titre de catégorie personnalisé soit caché par le fond de catégorie personnalisé, on va devoir faire la même chose que pour les forums et lui mettre un "z-index". Donc on rajoute un "z-index: 2;" et une "position: relative;" pour que le "z-index" fonctionne :
Code:
.cate_title .cate1 {
  display: inline-block;
  position: relative;
  z-index: 2;
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}





Voilà ce qu'on a pour le moment : aperçu.

C'est décalé T_T
Pas de panique, c'est normal ! Notre titre de catégorie normal a un padding de "10px". Comme notre titre de catégorie personnalisé est à l'intérieur, c'est normal que ce padding le décale. En plus, il y a une bordure à gauche, donc ça crée un décalage supplémentaire.

Pour régler ce décalage, on va se servir de "top" et le "left" pour le positionner correctement. Le "top" indique à quel distance du haut le bloc doit se placer et le "left" indique à quel distance de la droite le bloc doit se placer. Pour le haut, on veut annuler le padding de 10px, donc on va mettre "top: -10px;". Pour la gauche, on veut annuler le padding de 10px et aussi annuler le décalage de la bordure gauche de 3px. On va donc mettre un "left: -13px;".

Bref, à vous de calculer combien il y a de décalage en haut et à gauche à cause d'un "padding" ou d'un "border" et d'ajuster en conséquence avec "top" et "left". Si vous n'en n'avez pas, tant mieux, passez à l'étape suivante ^^

Pour moi, cela va donner ceci :
Code:
.cate_title .cate1 {
  display: inline-block;
  position: relative;
  z-index: 2;
  top: -10px;
  left: -13px;
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}


Et maintenant, il ne nous reste plus qu'à changer ce qu'on veut, soit les couleurs (principalement). Une fois les couleurs changées, cela me donne ce screen.

Et voilà pour le titre de catégorie!




Maintenant, on passe au fond de catégorie personnalisé. Ce qu'on veut faire, c'est venir ajouter un fond qui va venir "cacher" le fond de catégorie de base. Pour cela, on va commencer par copier/coller le CSS du fond de catégorie de base, puis on change le nom pour ".cate_title .catefond1".

Pourquoi ".cate_title .catefond1"?
Tout à l'heure, nous avions ajoutés un span avec la class "catefond1" dans notre titre de catégorie. Du coup, nous mettons ".catefond1" pour sélectionner cette class.

Quant au ".cate_title" juste avant, c'est parce que ce titre de catégorie n'existe pas seulement sur la page d'accueil. Quand on entre dans un sujet, il y a le titre de catégorie en haut de notre sujet. Comme on ne veut pas que le fond personnalisé de notre catéforie apparaisse partout et qu'il brise notre design, on met "cate_title" avant la class du fond de catégorie personnalisé. Comme ça, le fond apparait seulement lorsqu'il est dans une catégorie.

Donc pour le moment, cela ressemble à :
Code:
.cate_title .catefond1 {
  position: relative;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}





Bon, on ne voit rien du tout ><. C'est normal, puisque c'est un "span" à l'intérieur duquel il n'y a aucun texte. Dans les éléments de type "inline" comme un "span", les margins, la hauteur et la largeur n'est pas prise en compte. Alors, on va aller ajouter un "display: block;" pour transformer notre "span" en "bloc" et le faire apparaître :
Code:
.cate_title .catefond1 {
  display: block;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}





En suivant notre schéma de base, on se rend compte que notre fond de catégorie personnalisé doit être par dessus le fond de catégorie normal, en dessous des forums et en dessous du titre de catégorie personnalisé. Pour ça, on va devoir lui mettre un "z-index". Donc on rajoute un "z-index: 1;" :
Code:
.cate_title .catefond1 {
  display: block;
  z-index: 1;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}





Mais, mais, mais... Pourquoi ça ressemble à ce screen? C'est tout petit! Et c'est très très décalé T_T
Encore une fois, c'est normal Wink C'est tout petit parce qu'on ne lui a pas donné de "hauteur". Ça, on va s'en occuper en avant dernier.

Pour le décalage, il ne faut pas oublier qu'on est en position "relative"... Et qu'on est dans le titre, donc c'est normal que ça ne soit pas au bon endroit. Pour le positionner correctement, on va changer la position "relative" pour la position "absolute". Comme ça, le fond personnalisé va se placer dans le coin en haut à droite du fond normal. En plus, comme il y a un padding en haut de 20px et une bordure en haut de 5px, on va devoir ajouter un "top: -25px;". Comme il n'y a rien à régler du côté gauche, on se contente de mettre un "left: 0px;"

Cela va donner ceci :
Code:
.cate_title .catefond1 {
  display: block;
  position: absolute;
  z-index: 1;
  top: -25px;
  left: 0px;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}


Mais c'est toujours trop petit, regarde T_T
Patience, j'avais dit qu'on devait lui donner une hauteur, non?

C'est à vous d'essayer des hauteurs jusqu'à ce que vous arrivez à la bonne. (ou vous pouvez le calculer avec un logiciel de graph ou un autre outil, à vous de choisir). Dans mon cas, il me faut une hauteur de 440px, ce qui donne ceci :
Code:
.cate_title .catefond1 {
  display: block;
  position: absolute;
  z-index: 1;
  top: -25px;
  left: 0px;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  height: 440px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}


Et maintenant, il ne nous reste plus qu'à changer ce qu'on veut, soit les couleurs (principalement). Une fois les couleurs changées, cela me donne cet aperçu.

Et voilà pour le fond de catégorie!




Là, je viens de montrer comment faire pour personnaliser 1 titre de catégorie et 1 fond de catégorie. Pour les autres, c'est plus facile. Pour chaque catégorie que vous voulez personnaliser, vous devez mettre le titre sous ce format, en changeant le "1" par le nombre que vous voulez :
Code:
<span class="cate1">Titre de catégorie</span><span class="catefond1"></span>


Puis, vous recopiez le titre de catégorie personnalisé et le fond de catégorie personnalisé de la première catégorie en changeant le "1" de ".cate1" et de ".catefond1" par le chiffre que vous avez donné à votre autre catégorie et vous changez les couleurs ^^



3. Comment personnaliser chaque fond et titre de forum


Comment personnaliser le design d'un forum spécifique... Alors que la seule chose qu'on peut accéder dans un forum spécifique, c'est son titre et sa description de forum?

La réponse est :
En se servant justement du titre de forum ET de la description de forum ^^




Bon, un peu plus de détails ne feraient pas de mal, n'est-ce pas?

Jusqu'à présent, nous avons suivi ce schéma. Maintenant, nous allons suivre ce nouveau schéma.

Donc en ordre :
- On a toujours notre fond de catégorie normal. (Profondeur 0)
- Notre titre de catégorie de base n'est pas sur l'image, mais il est caché en dessous du fond de catégorie personnalisé. (Profondeur 0)
- Par dessus, il y a le fond de catégorie personnalisé qui va venir "cacher" notre fond de catégorie normal. (Profondeur 1)
- Quant à notre titre de catégorie personnalisé, on va aller le mettre par dessus le fond de catégorie personnalisé. (Profondeur 2)
- Nos forums normaux sont par dessus le fond de catégorie personnalisé. (Profondeur 2)
- Nos forums personnalisés sont par dessus les forums normaux. (Profondeur 3)
- Le contenu de nos forums personnalisés (écriture) sont par dessus nos forums personnalisés (Profondeur 4)




Maintenant que vous avez une petite idée de ce à quoi cela va ressembler, on va commencer le travail \o/

Comme dit plus haut, pour personnaliser les forums et le titre de forum de chaque catégorie, on va passer par deux endroits. Pour le titre de forum personnalisé, on va passer par le titre de forum.

Donc nous allons aller dans le forum que nous voulons personnaliser et on va aller mettre ceci dans le titre :
Code:
<span class="forum1">Titre de forum</span>


Ce qu'on vient de faire?
On vient d'entourer notre titre de forum d'un span avec la class "forum1" pour pouvoir personnaliser la mise en forme de ce titre de forum.




Maintenant, on vient personnaliser notre titre de forum en utilisant le nom "a.forumlink .forum1".

Pourquoi "a.forumlink .forum1"?
Juste tout à l'heure, nous avions entouré notre titre de forum d'un span avec la class "forum1". Du coup, nous mettons ".forum1" pour sélectionner cette class.

Quant au "a.forumlink" juste avant, c'est parce que les titres de forums n'existent pas seulement sur la page d'accueil. Quand on entre dans un sujet, il y a le titre de forum en haut de notre sujet. Comme on ne veut pas que le titre de forum soit personnalisé partout et qu'il brise notre design, on met "a.forumlink" avant la class du titre personnalisé. Comme ça, le titre de catégorie est personnalisé seulement lorsqu'il est dans une catégorie.

Bref, cela nous donne ceci :
Code:
a.forumlink .forum1 {
}





Si on regarde notre schéma, on voit que l'écriture doit avoir un "z-index" parce qu'on veut qu'il soit par dessus les forums personnalisés. Par conséquent, on va leur donner un "z-index: 4;" et un "position: relative;" pour que le "z-index" fonctionne :
Code:
a.forumlink .forum1 {
  position: relative;
  z-index: 4;
}



Minute papillon, pourquoi on a pas rajouté de "display: block;" comme pour le titre de catégorie?

Tout simplement parce que nous n'avions ni largeur, ni hauteur, ni marges. Le titre de catégorie en avait et devait recevoir un "display: block;" parce qu'un "span" n'accepte pas la largeur, la hauteur ou les marges. Si on en a pas, cela ne nous sert à rien de mettre un "display: block;"


Et maintenant, il ne nous reste plus qu'à changer ce qu'on veut, soit les couleurs (principalement). Je ne vous montre pas de screen parce que la couleur que j'ai choisi ressemble trop à l'ancienne, mais vous comprenez le principe, non?

Et voilà pour le titre de forum!




Maintenant, on passe au design de forum. Pour cela, on va commencer par ouvrir notre template Index_Box ainsi que la description du forum que nous voulons personnaliser.

Puis, on va reproduire entièrement la structure d'un forum dans notre description. Pour vous aidez, vous pouvez tout simplement recopier la partie entre "forumrow" de votre template et enlever les variables telles que le titre de forum, la description de forum, les statistiques, etc...

Pour moi, cela donne ceci :
Code:
<div class="forum_bloc">
                            
   <div class="forum_principal_bloc">
                                   
      <div class="forum_title_bloc">
                          
      </div>
                                 
      <div class="forum_img_bloc">
                          
      </div>
                                 
      <div class="forum_desc_bloc">
                           Bla bla bla
      </div>
                                 
      <div class="forum_lastmess_stats_bloc">
                                        
         <div class="forum_stats_bloc">
                               
         </div>
                                        
         <div class="forum_lastmess_bloc">
                               
         </div>
                                      
      </div>
                                 
      <div style="clear: both">
            
      </div>
                     
   </div>
                            
   <div class="forum_sousforums_bloc">
                     
   </div>
                        
</div>


Ok... Mais pourquoi on fait ça?
Bah, on voulait changer le design de la partie "forum", non? Alors on va le refaire au complet, mais avec quelques petites modifications.

... Quelles modifications?
Eh bien, pour commencer, on va ajouter la class "forum_bloc1" au bloc qui entourne notre forum (le "forum_bloc").

Sa class va donc devenir celle-ci :
Code:
<div class="forum_bloc forum_bloc1">


... Et ça sert à quoi?
À tout plein de choses! On va se servir de cette nouvelle class pour aller placer notre nouveau design de forum "par dessus" l'ancien, entre autre.

Pour débuter, on va aller mettre une position "absolute" à notre class ".forum_bloc1" Et comme on veut que ça soit en haut à droite de son "parent" ayant la position "relative" le plus proche (bref, le bloc qui englobe le forum), on lui donne un "top: 0px;" et un "left: 0px;". Cela va donner ceci :
Code:
.forum_bloc1 {
  position: absolute;
  top: 0px;
  left: 0px;
}





Ok, je comprends un peu... Mais regarde ceci! À part le titre du forum et la description de forum, le contenu a disparu!
Outch >< Et si on regardait notre schéma pour voir s'il sait la solution?

Comme le schéma l'indique dans sa "note", si on veut que l'écriture et le contenu du forum soit "par dessus" le design du forum personnalisé... On doit lui donner un "z-index: 4;".

Bah oui, mais je ne peux pas changer ça, les variables sont directment dans le template... non?
Oui, c'est dans le template, mais on va quand même aller le changer.

Donc on se rend dans notre template, et on entoure d'un span avec la class "forum_up" toutes les variables (sauf le titre de forum et la description de forum) qui sont dans la section forum (dans le "forumrow"). Cela devrait donner ceci :
Code:
<!-- BEGIN catrow -->

  <!-- BEGIN tablehead -->
    <div class="cate_bloc">
      <div class="cate_title">
        {catrow.tablehead.L_FORUM}
      </div>
     
  <!-- END tablehead -->

  <!-- BEGIN forumrow -->
        <div class="forum_bloc">
         
          <div class="forum_principal_bloc">
           
            <div class="forum_title_bloc">
              <span class="forum_up">
                <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
              </span>
            </div>
         
            <div class="forum_img_bloc">
              <span class="forum_up">
                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
              </span>
            </div>
         
            <div class="forum_desc_bloc">
                {catrow.forumrow.FORUM_DESC}
            </div>
         
            <div class="forum_lastmess_stats_bloc">
           
              <div class="forum_stats_bloc">
                <span class="forum_up">
                  {catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
                </span>
              </div>
           
              <div class="forum_lastmess_bloc">
                <span class="forum_up">
                  {catrow.forumrow.LAST_POST}
                </span>
              </div>
           
            </div>
         
            <div style="clear: both"></div>
          </div>
         
          <div class="forum_sousforums_bloc">
            <span class="forum_up">
              {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </span>
          </div>
         
      </div>
  <!-- END forumrow -->

  <!-- BEGIN tablefoot -->
  </div>
  <!-- END tablefoot -->

<!-- END catrow -->





C'était long... Et maintenant?
Maintenant, on ajoute un "z-index" à cette nouvelle class.

On se rend donc dans notre CSS et on rajoute la class ".forum_up" avec le "z-index: 4;" et la "position: relative;" pour que le "z-index" fonctionne. Cela va donner ceci :
Code:
.forum_up {
  position: relative;
  z-index: 4;
}





Et cela nous donne cet aperçu.

Maintenant, on va enfin personnaliser les couleurs!

Pour cela, on regarde notre description et on copie toutes les class dans notre CSS, à l'exception du ".forum_bloc". Puis, devant chaque class, on ajoute ".forum_bloc1".


Pourquoi ".forum_bloc1"?

Parce qu'on veut que ce soit uniquement le design du forum qui a ".forum_bloc1" qui soit personnalisé. Au final, cela nous donne ceci :
Code:
.forum_bloc1 {
  position: absolute;
  top: 0px;
  left: 0px;
}
.forum_bloc1 .forum_principal_bloc {
}
.forum_bloc1 .forum_title_bloc {
}
.forum_bloc1 .forum_img_bloc {
}
.forum_bloc1 .forum_desc_bloc {
}
.forum_bloc1 .forum_lastmess_stats_bloc {
}
.forum_bloc1 .forum_stats_bloc {
}
.forum_bloc1 .forum_lastmess_bloc {
}
.forum_bloc1 .forum_sousforums_bloc {
}





Puis, vous changez les couleurs et tout ce que vous voulez. S'il y a des éléments que vous n'avez pas changé, vous pouvez tout simplement les enlever du CSS. Une fois les couleurs changées, cela me donne cet aperçu.

Et voilà pour les design de forum!




Là, je viens de montrer comment faire pour personnaliser 1 titre de forum et 1 fond de forum. Pour les autres, c'est plus facile. Pour chaque forum que vous voulez personnaliser, vous devez mettre le titre sous ce format, en changeant le "1" par le nombre que vous voulez :
Code:
<span class="forum1">Titre de forum</span>


Quant aux fonds de forums, vous recopiez la description de forum du forum déjà personnalisé et vous changez le 1 du "forum_bloc1" pour le chiffre que vous avez choisi.

Enfin, dans le CSS, vous recopiez le CSS propre au forum déjà personnalisé et vous changez les 1 par le chiffre que vous avez choisi. À savoir que rien ne vous empêche de changer le chiffre nul part et de reprendre le même design pour tous les forums d'une même catégorie, comme je l'ai fait sur cette image.



4. Problèmes possibles


Si vous avez fonctionné pareil comme dans le tuto et que vous avez mis une "deuxième class" au bloc de fond de forum dans la description et que les changements ne s'effectuent pas même après la personnalisation :
Cause très probable :
Il ne faut jamais oublier que le CSS se lit de "haut en bas". Le navigateur le lit dans le même ordre. Donc si vous avez mis la personnalisation de vos forums plus haut dans le CSS que le design de base... Le design de base sera considéré comme "plus important" parce qu'il est "après", donc "plus bas". Il vous suffit de couper votre CSS de vos forums personnalisé et de le mettre "après", donc "plus bas" que le CSS des forums de base.

Par exemple, ici, le texte resterait noir parce que la class personnalisée est "plus haut", donc "avant". Il faudrait l'inverser :
Code:
.nom_personnalisé {
  color: red;
}
.nom {
  color: black;
}



Les membres voient des gros décalements quand ils ont des résolutions d'écran différentes :
Cause probable :
Avec des résolutions d'écran différentes, si les tailles sont en %, la taille des éléments est différente. Pour la largeur, cela devrait majoritairment rester pareil, mais c'est 99% sûr qu'il y aura des décalements par rapport à la hauteur.
Pour régler ce souci, il suffit de travailler avec des hauteurs et des largeurs fixes. Exemple, 800px de largeur par 150px de hauteur pour un forum, etc...


Et... Bah rien, j'ai plus d'idées de problème possible à moins d'avoir mal compris le tuto en fait ><


Alors c'est tout! Si jamais vous avez des problèmes avec ce Tutoriel, n'hésitez pas à passer dans "Problème avec mon code" pour recevoir de l'aide.

À plus !

Onyx

Fiche de pub Multicolor - Sam 20 Déc 2014 - 23:43




Fiche de pub Multicolor


Voici une fiche de pub faite suite à la demande de Narakye.

Pour voir l'aperçu : cliquez ici.

Ce tutoriel est en 2 étapes :
> Création de la page html.
> Mise en place d'un iframe contenant la page HTML aux endroits où nous voulons utiliser le test.

Pour utiliser ce tutoriel, il faut être fondateur ou administrateur de forum ou avoir accès à un endroit où vous pouvez héberger une page HTML.

Mettre un crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Page HTML


Premièrement, nous doit créer une page HTML. Pour cela, on va dans :
> Panneau d'administration
> > Modules
> > > HTML & Javascript
> > > > Gestion des pages HTML

Ensuite, nous devons choisir l'option de création "Création en mode avancé (HTML)". Nous devons choisir un titre quelconque, puis s'assurer que les options suivantes sont cochées :

Voulez-vous utiliser le haut et le bas de page de votre forum ? NON
Utiliser cette page en tant que page d'accueil ? NON

Dans le contenu, nous allons mettre notre page de pub.
Code:
<!DOCTYPE>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Fiche de pub</title>
    <style type="text/css">
      /*Enleve les marges inutiles*/
      body {
        margin: 0px;
      }
     
      /*Liens de la fiche*/
      a {
        color: #ffffff;
        text-decoration: none;
      }
      a:hover {
        color: #000000;
      }
     
      /*Cadre de la fiche*/
      .pub_cadre {
        width: 738px;
        height: 770px;
        margin: auto;
        background-image: url('http://img11.hostingpics.net/pics/571798cadre.png');
        padding-top: 72px;
        text-align: center;
        font-family: arial;
        font-size: 13px;
        color: #545454;
      }
     
      /*Image du haut de la fiche*/
      .pub_image_top {
        position: relative;
        width: 450px;
        height: 310px;
        margin: auto;
        border-radius: 105px 105px 0px 0px;
        box-shadow: 0px 0px 10px #353535;
        z-index: 1;
      }
     
      /*Corps de la fiche*/
      .pub_body {
        position: relative;
        background-image: url('http://img11.hostingpics.net/pics/367932fond.png');
        width: 450px;
        height: 365px;
        margin: auto;
        padding-top: 15px;
        text-align: center;
        z-index: 2;
      }
     
      /*Bloc avec image qui glisse*/
      .pub_bloc1 {
        position: relative;
        width: 400px;
        height: 86px;
        margin: auto;
        border: 2px solid white;
        background-color: white;
        border-radius: 5px;
        text-align: left;
        overflow: hidden;
      }
      /*Texte derrière image qui glisse*/
      .pub_bloc1_text {
        width: 390px;
        height: 76px;
        background-color: #dfdfdf;
        padding: 5px;
        overflow: auto;
        text-align: justify;
      }
      /*Image qui glisse*/
      .pub_bloc1_img {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 400px;
        height: 86px;
        border-radius: 5px;
        transition: all 1s;
        -webkit-transition: all 1s;
      }
      /*Glissement de image*/
      .pub_bloc1:hover .pub_bloc1_img {
        left: 450px;
      }
     
      /*Fond bleu du bloc qui change de contenu*/
      .pub_bloc2 {
        position: relative;
        width: 404px;
        height: 209px;
        background-image: url('http://img11.hostingpics.net/pics/130557fond2.png');
        border-radius: 5px;
        margin: auto;
      }
     
      /*Bloc qui change de contenu*/
      .contenu_pubonglet {
        position: absolute;
        top: 15px;
        left: 15px;
        width: 363px;
        height: 169px;
        background-color: #dfdfdf;
        border-radius: 4px;
        padding: 5px;
        text-align: justify;
        overflow: auto;
        display: none;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
      }
     
      /*Barre bleu du bas*/
      .pub_bloc3 {
        width: 450px;
        height: 35px;
        margin: auto;
        background-color: #3f87e1;
        text-align: center;
      }
      .pub_bloc3 a {
        display: inline-block;
        font-size: 20px;
        font-family: monotype corsiva;
        margin: 8px;
        margin-left: 30px;
        margin-right: 30px;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      //<!--
        function change_pubonglet(name)
          {
            document.getElementById('pubonglet_'+anc_pubonglet).className = 'pubonglet_0 pubonglet';
            document.getElementById('pubonglet_'+name).className = 'pubonglet_1 pubonglet';
            document.getElementById('contenu_pubonglet_'+anc_pubonglet).style.display = 'none';
            document.getElementById('contenu_pubonglet_'+name).style.display = 'block';
            anc_pubonglet = name;
          }
      //-->
    </script>
    <div class="pub_cadre">
      <img src="URL_DE_IMAGE_DU_HAUT" alt="Image haut" class="pub_image_top" />
      <div class="pub_body">
        <div class="pub_bloc1">
          <div class="pub_bloc1_text">
            Texte derrière l'image.
          </div>
          <img src="URL_DE_IMAGE_DU_MILIEU" alt="Image milieu" class="pub_bloc1_img" />
        </div>
        <span class="pubonglet_1 pubonglet" id="pubonglet_Initial" onmouseover="javascript:change_pubonglet('Initial');"></span>
        <img src="http://img11.hostingpics.net/pics/436524histoire.png" alt="Image histoire"  class="pubonglet_0 pubonglet" id="pubonglet_Histoire" onmouseover="javascript:change_pubonglet('Histoire');" />
        <img src="http://img11.hostingpics.net/pics/396239staffstats.png" alt="Image staff" class="pubonglet_0 pubonglet" id="pubonglet_Staff" onmouseover="javascript:change_pubonglet('Staff');" />
        <img src="http://img11.hostingpics.net/pics/598703merci.png" alt="Image merci" class="pubonglet_0 pubonglet" id="pubonglet_Merci" onmouseover="javascript:change_pubonglet('Merci');" />
        <div class="pub_bloc2">
          <div class="contenu_pubonglet" id="contenu_pubonglet_Initial">
            Passez sur les mots pour voir leur contenu ~
          </div>
          <div class="contenu_pubonglet" id="contenu_pubonglet_Histoire">
            Contenu de l'onglet Histoire.
          </div>
          <div class="contenu_pubonglet" id="contenu_pubonglet_Staff">
            Contenu de l'onglet Staff
          </div>
          <div class="contenu_pubonglet" id="contenu_pubonglet_Merci">
            Contenu de l'onglet Merci
            Crédit : Onyx de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>
          </div>
        </div>
      </div>
      <div class="pub_bloc3">
        <a href="LIEN_DU_REGLEMENT" target="_blank">
          Règlement
        </a>
        <a href="LIEN_DES_PREDEFINIS" target="_blank">
          Prédéfinis
        </a>
        <a href="LIEN_DE_NOUS_REJOINDRE" target="_blank">
          Nous rejoindre
        </a>
      </div>
    </div>
    <script type="text/javascript">
      //<!--
        var anc_pubonglet = 'Initial';
        change_pubonglet(anc_pubonglet);
      //-->
    </script>
  </body>
</html>


Une page HTML peut être modifiée en tout temps et les modifications qui y sont apportées sont aussi apportées là où vous avez posté l'iframe de la page HTML.



2. Iframe


Nous avons maintenant une page HTML contenant une fiche de pub. Sauf que si on la laisse là, ce n'est pas trop utile. Alors aux endroits ou nous vondrons mettre la fiche de pub, on va mettre un iframe contenant le lien de notre page HTML.

Quand on enregistre une page HTML et qu'on retourne dans la gestion des pages HTML, on a, dans la deuxième colone, ce qu'on appelle "URL du lien". C'est le lien de votre page HTML.

Pour l'iframe, il s'agit du code qui va suivre. Vous copiez/collez le "URL du lien" de votre page HTML là où c'est écrit en majuscules qu'il faut le mettre et vous postez l'iframe là où vous voulez l'utiliser ^^
Code:
<iframe src="URL_DU_LIEN_DE_LA_PAGE_HTML" style="margin: auto; display: block; border: none; width: 738px; height: 842px;"></iframe>



C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Problème avec mon code".

À plus !

Onyx

Qeel à onglets fantasy - Sam 22 Nov 2014 - 0:07




Qeel à onglets fantasy


Voici un petit LS d'un qeel à onglets que j'ai fait pour la demande de The One Pandemonium et que j'ai un peu remanié.

Pour voir l'aperçu, onglet "nains" actif : cliquez ici.
Pour voir l'aperçu, onglet "elfes" actif et survol de l'image du groupe : cliquez ici.

Ce LS est en trois parties.
  • Tout d'abord, nous allons installer le qeel dans le template et regarder comment ajouter/supprimer/modifier des groupes.
  • Puis, nous allons le mettre en forme à l'aide du CSS.
  • Enfin, nous allons voir comment changer les textes préprogrammés dans le qeel.


La largeur du Qeel est de 800 pixels et l'image des groupes (celle tout en bas) fait 800x200 pixels.

Mettre un crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


1. Corps du qeel (Template Index_Body)


Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_body" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > INDEX_BODY

Puis, il va nous falloir trouver le "BEGIN disable_viewonline" et le "END disable_viewonline". Normalement, ils sont respectivement aux lignes 173 et 221 du template.

Nous allons remplacer tout ce qu'il y a entre ces deux lignes par :
Code:
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css' />
<div id="qeel">
 
  <div id="qeel_info_members">
    <span id="totaluser">{TOTAL_USERS}</span>
    <span id="totalpost">{TOTAL_POSTS}</span>
    <span id="newuser">{NEWEST_USER}</span>.
    <span id="totalonline">{TOTAL_USERS_ONLINE}</span>.
    <div id="userlists">
      <div id="loggedlist">{LOGGED_IN_USER_LIST}</div>
      <div  id="totalconn"><table cellspacing="0" cellpadding="0">{L_CONNECTED_MEMBERS}</table></div>
    </div>
    <div id="qeel_title">
      Qui va là?
    </div>
   
    <script type="text/javascript">
      document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Nous avons/,"Nos");
      document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/membres enregistrés/,"guerriers");
      document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/Nos membres ont posté un total de/,"ont gagné");
      document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/messages/,"batailles");
      document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/message/,"bataille");
      document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"et notre plus nouvelle recrue est");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Il y a en tout/,"Il y a");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateurs en ligne ::/,"aventuriers qui parcourent nos terres, dont");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateur en ligne ::/,"aventurier qui parcourt nos terres, dont");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistrés/,"guerriers");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistré/,"guerrier");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisibles/,"fantômes");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisible/,"fantôme");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invités /,"inconnus");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invité /,"inconnu");
      document.getElementById('loggedlist').innerHTML=document.getElementById('loggedlist').innerHTML.replace(/Utilisateurs enregistrés/,"Guerriers présentement sur nos terres");
      document.getElementById('totalconn').innerHTML=document.getElementById('totalconn').innerHTML.replace(/Membres connectés/,"Guerriers ayant été présents");
    </script>
  </div>
 
  <div id="qeel_bottom">
   
    <script type="text/javascript">
        //<!--
                function change_qeelonglet(name)
                {
                        document.getElementById('qeelonglet_'+anc_qeelonglet).className = 'qeelonglet_0 qeelonglet';
                        document.getElementById('qeelonglet_'+name).className = 'qeelonglet_1 qeelonglet';
                        document.getElementById('contenu_qeelonglet_'+anc_qeelonglet).style.display = 'none';
                        document.getElementById('contenu_qeelonglet_'+name).style.display = 'block';
                        anc_qeelonglet = name;
                }
        //-->
    </script>
   
    <span class="qeelonglet_1 qeelonglet" id="qeelonglet_Groupe1" onclick="javascript:change_qeelonglet('Groupe1');">
      <font color="#5e90c4">Groupe 1</font>
    </span>
    <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe2" onclick="javascript:change_qeelonglet('Groupe2');">
      <font color="orange">Groupe 2</font>
    </span>
    <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe3" onclick="javascript:change_qeelonglet('Groupe3');">
      <font color="#4dc740">Groupe 3</font>
    </span>
    <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe4" onclick="javascript:change_qeelonglet('Groupe4');">
      <font color="#6e4819">Groupe 4</font>
    </span>
    <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe5" onclick="javascript:change_qeelonglet('Groupe5');">
      <font color="#c50c0c">Groupe 5</font>
    </span>
   
    <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe1">
      <img src="url_image_groupe_1" alt="Image du groupe 1" />
      <div class="qeel_desc">
        Description du groupe 1
      </div>
    </div>
    <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe2">
      <img src="url_image_groupe_2" alt="Image du groupe 2" />
      <div class="qeel_desc">
        Description du groupe 2
      </div>
    </div>
    <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe3">
      <img src="url_image_groupe_3" alt="Image du groupe 3" />
      <div class="qeel_desc">
        Description du groupe 3
      </div>
    </div>
    <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe4">
      <img src="url_image_groupe_4" alt="Image du groupe 4" />
      <div class="qeel_desc">
        Description du groupe 4
      </div>
    </div>
    <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe5">
      <img src="url_image_groupe_5" alt="Image du groupe 5" />
      <div class="qeel_desc">
        Description du groupe 5
      </div>
    </div>
   
    <script type="text/javascript">
        //<!--
                var anc_qeelonglet = 'Groupe1';
                change_qeelonglet(anc_qeelonglet);
        //-->
    </script>
   
  </div>
</div>


Pour ce qui est rajouter, d'enlever ou de modifier un groupe, cela se fait par deux manipulations. Premièrement, on ajoute/enlève/modifie le nom du groupe. Puis, on enlève/ajoute/modifie la description du groupe.

Les noms des groupes ressemblent à ceci :
Code:
<span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe5" onclick="javascript:change_qeelonglet('Groupe5');">
      <font color="#c50c0c">Groupe 5</font>
    </span>


Quant aux descriptions des groupes, elles correspondent à ceci :
Code:
<div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe5">
      <img src="url_image_groupe_5" alt="Image du groupe 5" />
      <div class="qeel_desc">
        Description du groupe 5
      </div>
    </div>




2. Mise en forme (CSS)


Si vous regardez votre qeel, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme notre qeel à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/************************************************************ DÉBUT QEEL ************************************************************/

/*Fond du qeel*/
#qeel {
  position: relative;
  width: 800px;
  height: 680px;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  background: #141313 url('http://img15.hostingpics.net/pics/570241qeel2.png') no-repeat top center;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #000000;
}


/*Titre du qeel*/
#qeel_title {
  color: goldenrod;
  font-size: 44px;
  font-family: 'Great Vibes', cursive;
  text-shadow: 1px 1px 2px #000000;
  padding-left: 15px;
}


/*Carré des informations sur les membres*/
#qeel_info_members {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 320px;
  height: 290px;
  background-color: rgba(20, 19, 19, 0.6);
  border-radius: 10px;
  box-shadow: 0px 0px 3px #141313;
  padding: 10px;
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: left;
}


/*Mise en forme des listes des membres connectés*/
#userlists {
  margin-top: 5px;
  height: 205px;
  overflow: auto;
}
#totalconn {
  margin-top: 5px;
}
#totalconn .row1{
  background: transparent;
  vertical-align: top;
}
#totalconn .gensmall {
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: left;
}


/*Section des groupes*/
#qeel_bottom {
  position: absolute;
  top: 418px;
  left: 0px;
  width: 800px;
  text-align: center; 
}


/*Nom des groupes*/
.qeelonglet {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 2px;
  height: 40px;
  font-size: 38px;
  font-family: 'Great Vibes', cursive;
  letter-spacing: 1px;
  text-shadow: 0px 0px 3px #000000;
  opacity: 0.6;
}
/*Groupe au survol*/
.qeelonglet_0:hover {
  cursor: pointer;
  opacity: 0.8;
}
/*Groupe actif*/
.qeelonglet_1 {
  opacity: 1;
}


/*Description des groupes*/
.contenu_qeelonglet {
  position: relative;
  width: 800px;
  height: 200px;
  margin-top: 20px;
  display: none;
}
/*Images des groupes*/
.contenu_qeelonglet img {
  width: 800px;
  height: 200px;
  border-radius: 0px 0px 20px 20px;
}
/*Descriptions des groupes*/
.qeel_desc {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 780px;
  height: 180px;
  background-color: rgba(20, 19, 19, 0.6);
  border-radius: 0px 0px 20px 20px;
  padding: 10px;
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: justify;
  overflow: auto;
  transition: 0.5s;
  opacity: 0;
}
/*Descriptions des groupes au survol*/
.contenu_qeelonglet:hover .qeel_desc {
  opacity: 1;
}

/************************************************************ FIN QEEL ************************************************************/




3. Personnaliser les textes (Template Index_Body)


De base, ForumActif a des phrases déjà formatées pour le qeel.
Par exemple, il y a "Nous avons X membre enregistré", "Nos membres ont posté un total de X messages" ou encore "L'utilisateur enregistré le plus récent est NOM".

Dans mon qeel, j'ai modifiés ces phrases pour que cela donne "Nos X guerriers" "ont gagné X batailles" et "et notre plus nouvelle recrue est Admin".


Mais peut-être que vous n'aimez pas ces phrases ou que vous voulez les adapter autrement. Alors direction le template "Index_body"!

Vous trouverez à plusieurs endroits des parties de code qui ressemblent à ceci :
Code:
<script type="text/javascript">document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"et notre plus nouvelle recrue est");</script>


Ce sont ces bouts de codes qui viennent modifier les phrases préfabriqués de ForumActif. Donc pour commencer, il faut tout d'abord regarder sur quelle phrase préfabriquée le code agit.

Pour cela, nous allons regarder le début du code où il y a :
Code:
document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.



Ce qu'il y a entre parenthèses correspond l'id de la phrase qui est affectée.
Le "newuser" veut donc dire que cela affecte la phrase :
"L'utilisateur enregistré le plus récent est NOM".


Dans ce qeel, chaque phrase préfabriqué à son propre id. Les voici :


newuser : "L'utilisateur enregistré le plus récent est NOM"

totalpost : "Nos membres ont posté un total de X messages"

totaluser : "Nous avons X membre enregistré"

totalonline : "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité"

loggedlist : "Utilisateurs enregistrés : NOM"

totalconn : "Membres connectés au cours des 24 dernières heures : NOM"


Maintenant fois qu'on sait qu'elle phrase est affectée, nous allons la modifier.

Donc, on va à la fin de la ligne de code qu'on parlait tout à l'heure et on trouve le :
Code:
replace(/L'utilisateur enregistré le plus récent est/,"La nouvelle recrue est");


On met la partie qu'on veut remplacer entre les / / par ce qui la remplace entre les " ".

C'est tout aussi simple que cela! À savoir que s'il y a des phrases au pluriel ET au singulier, il faut s'assurer de bien modifier les deux options.


C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Un problème avec un code" ou dans "Personnalisations" si vous avez de la difficulté à le personnaliser.

À plus !

Onyx

Guide du template "index-body" (Qeel) - Jeu 2 Oct 2014 - 2:02




Tuto - Guide du template "index-body" (Qeel)


Vous avez envie de modifier votre template Index_body ou de faire votre propre qeel, mais vous vous perdez dedans sans le comprendre? C'est... plus que normal. Si on y est pas habitué, il faut quasiment une carte pour arriver à s'en sortir pas trop mal et on ne dégote pas une telle carte au magazin du coin.

Tout cela pour dire que ce petit guide a pour but de vous guider dans le template pour que vous puissiez vous y repérer et identifier les différentes parties et variables, quelle que soit la version de votre forum ^^

Voici ce que ce tutoriel va contenir :
  • 1. Visite guidée du template index_body sous PhpBB2
    • 1.1 Les variables de FA
    • 1.2 Le message de l'administrateur (PA)
    • 1.3 Connexion rapide
    • 1.4 Les liens "Marquer tous les forums comme lus", "Supprimer les cookies", etc...
    • 1.5 Qeel
    • 1.6 La fin du template (légende des statuts de forum, etc...)
    • 1.7 Modifier les phrases des variables de FA

  • 2. Visite guidée du template index_body sous PhpBB3
    • 2.1 Les variables de FA
    • 2.2 Date/Heure/Dernière visite - Connexion rapide
    • 2.3 Le message de l'administrateur (PA)
    • 2.4 Qeel
    • 2.5 La fin du template (légende des statuts de forum, etc...)
    • 2.6 Modifier les phrases des variables de FA

  • 3. Visite guidée du template index_body sous Invision
    • 3.1 Les variables de FA
    • 3.2 Le message de l'administrateur (PA)
    • 3.3 Connexion rapide
    • 3.4 Qeel
    • 3.5 La fin du template (légende des statuts de forum, etc...)
    • 3.6 Modifier les phrases des variables de FA

  • 4. Visite guidée du template index_body sous PunBB
    • 4.1 Les variables de FA
    • 4.2 Les liens "Marquer tous les forums comme lus", "Supprimer les cookies" et compagnie ainsi que le login.
    • 4.3 Le message de l'administrateur (PA)
    • 4.4 Connexion rapide
    • 4.5 Qeel
    • 4.6 La fin du template (légende des statuts de forum, etc...)
    • 4.7 Modifier les phrases des variables de FA


IMPORTANT : La version PunBB n'est pas finie (pratiquement pas touchée en fait), alors ne l'utilisez pas.



1. Le template index_body avec PhpBB2


En aperçu, ce template ressemble à ça :
Image à remplacer

En ordre, nous allons voir :
  • 1.1 Les variables de FA
  • 1.2 Le message de l'administrateur (PA) (En rouge/rose)
  • 1.3 Connexion rapide (En bleu)
  • 1.4 Les liens "Marquer tous les forums comme lus", "Supprimer les cookies", etc... (En mauve)
  • 1.5 Qeel (En vert)
  • 1.6 La fin du template (légende des statuts de forum, etc...) (En jaune)
  • 1.7 Modifier les phrases des variables de FA

Comment se rendre dans le template :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > INDEX_BODY



1.1 Variables de FA


Il y a certaines variables de ForumActif qui contiennent des éléments déjà programmées par FA et qu'on ne peut pas mettre manuellement. Elles sont encadrées par des { } comme ceci : {VARIABLE_FA}

Cela ne vous dit toujours rien? Eh bien vous savez la liste des connectés au cours des 24/48/72 dernières heures? Eh bien c'est la variable {L_CONNECTED_MEMBERS}. Si cela n'était pas déjà programmé par FA sous cette forme, nous aurions un truc long comme le bras qu'on aurait peur de toucher au cas ou cela exploserait. À la place, on peut prendre la variable, la déplacer, l'encadrer ou lui mettre une mise en forme sans que cela ne nuise à son fonctionnement.

Voici la liste de la majorité des variables du template. À la fin de chaque section du tutoriel, il y aura un petit résumé des variables qu'on trouve dans ladite section pour vous permettre de mieux vous repérer ^^

VariableSignification
{JAVASCRIPT}Contient la majorité du javascript du template.
{message_admin_index.message_admin_titre.MES_TITRE}Titre du message d'administration (PA)
{message_admin_index.message_admin_txt.MES_TXT}Contenu du message d'administration (PA)
{L_USERNAME}Est écrit "Nom d'utilisateur"
{L_AUTO_LOGIN}Est écrit "Connexion automatique"
{L_PASSWORD}Est écrit "Mot de passe"
{S_HIDDEN_FIELDS}Certains champs secrets utilisés pour la connexion, ne l'enlevez pas.
{switch_user_login_form_header.switch_social_login.L_OR}Pour ceux qui ont activé l'option "Facebook connect", il est écrit "OU"
{CHATBOX_TOP}La ChatBox qui s'active si vous sélectionner la position "sur la page d'accueil en haut".
{BOARD_INDEX}Tout ce qu'il y a entre le message d'administrateur et le qeel. Autrement dit, cela contient le coeur du forum, comme les catégories, les forums et la liste des sujets.
{L_MARK_READ}Est écrit "Marquez tous les forums comme lus". Dans le lien qui le contient, vous trouverez {U_MARK_READ} qui est l'url du lien pour marquer tous les forums comme lus.
{L_TODAY_ACTIVE}Est écrit "Sujets actifs du jour". Dans le lien qui le contient, vous trouverez {U_TODAY_ACTIVE} qui est l'url du lien qui mène aux sujets actifs du jour.
{L_TODAY_POSTERS}Est écrit "Top 20 des posteurs du jour". Dans le lien qui le contient, vous trouverez {U_TODAY_POSTERS} qui est l'url du lien qui mène au top 20 des posteurs du jour.
{L_OVERALL_POSTERS}Est écrit "Top 20 des posteurs du forum". Dans le lien qui le contient, vous trouverez {U_OVERALL_POSTERS} qui est l'urorul du lien qui mène au top 20 des posteurs du forum.
{switch_on_index.switch_delete
_cookies.L_DELETE_COOKIES}
Est écrit "Supprimer les cookies du forum". Dans le lien qui le contient, vous trouverez {switch_on_index.switch_delete
_cookies.U_DELETE_COOKIES} qui est l'url du lien pour supprimer les cookies du forum.
{L_WHO_IS_ONLINE}Est écrit "Qui est en ligne?" Lorsqu'il est dans un lien, vous trouverez {U_VIEWONLINE} qui est l'url qui mène à la visualisation (par IP) des membres connectés sur le forum
{L_ONLINE_IMG}Url de l'image du Qeel
{TOTAL_POSTS}Nombre de messages postés. Est écrit "Nos membres ont posté un total de X messages"
{TOTAL_USERS}Nombre de membres inscrits. Est écrit "Nous avons X membres enregistrés"
{NEWEST_USER}Dernier utilisateur inscrit. Est écrit "L'utilisateur enregistré le plus récent est NOM"
{TOTAL_USERS_ONLINE}Nombre et type d'utilisateurs en ligne. Est écrit "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité "
{RECORD_USERS}Record du nombre d'utilisateurs en ligne. Est écrit "Le record du nombre d'utilisateurs en ligne est de X le Dim 27 Juil - 13:24"
{LOGGED_IN_USER_LIST}Membres connectés présentement. Est écrit "Utilisateurs enregistrés : NOM"
{L_CONNECTED_MEMBERS}Membres connectés au cours des 24/48/72 dernières heures. Est écrit "Membres connectés au cours des XX dernières heures : NOM"
{L_WHOSBIRTHDAY_TODAY}Anniversaires du jour. Est écrit "Membres fêtant leur anniversaire aujourd'hui: NOM (AGE)"
{L_WHOSBIRTHDAY_WEEK}Anniversaires des 7 prochains jours. Est écrit "Membres fêtant leur anniversaire dans les 7 prochains jours: NOM (AGE)"
{LEGEND}Est écrit "Légende"
{GROUP_LEGEND}Légende des groupes visibles
{TOTAL_CHATTERS_ONLINE}Nombre de membres sur la ChatBoxEst écrit "Il y a actuellement X utilisateur(s) sur la ChatBox"
{CHATTERS_LIST}Liste des membres sur la ChatBox
{CHATBOX_BOTTOM}La ChatBox qui s'active si vous sélectionner la position "sur la page d'accueil en bas".
{L_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Nouveaux messages". Dans l'image juste avant, le {FORUM_NEW_IMG} est l'url de l'image "New"
{L_NO_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Pas de nouveaux messages". Dans l'image juste avant, le {FORUM_NO_NEW_IMG} est l'url de l'image "Old"
{L_FORUM_LOCKED}Fait partie de la légende des status de forum. Est écrit "Forum Verrouillé". Dans l'image juste avant, le {FORUM_LOCKED_IMG} est l'url de l'image "Locked"




1.2 Le message de l'administrateur (PA)


La première chose que l'on voit en arrivant dans le template, c'est {JAVASCRIPT}. On n'y touche pas, cela correspond à la majorité du javascript qui fait fonctionner ce template!

On continue et on arrive dans le message de l'administrateur (entre les lignes 2 à 17) qui ressemble à ceci :
Code:
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->


Cela correspond à ceci :
Image à remplacer

2 - Au tout début, nous avons «!-- BEGIN message_admin_index --» qui indique que c'est le début du message d'administrateur (PA).

3 - Puis, nous avons un tableau. Pour tout ceux qui n'aiment pas le fond de leur message d'administrateur, c'est là que vous pourrez agir en changeant le nom de la class pour une class que vous aurez personnalisée ou même enlever carrément la class "forumline".

4 - Nous avons ensuite le «!-- BEGIN message_admin_titre --» qui indique le début du titre de votre message d'administrateur.

5 à 7 - Le titre de votre message d'administrateur correspond à cette variable {message_admin_index.message_admin_titre.MES_TITRE}. Encore une fois, vous pouvez modifier la class de la cellule ou du span qui l'entoure pour personnaliser ce titre.

8 - Le «!-- END message_admin_titre --» indique la fin du titre de votre message d'administrateur.

9 - À la ligne suivante, le «!-- BEGIN message_admin_txt --» indique le début du contenu de votre message d'administrateur.

10 à 14 - Vous avez ensuite le contenu de votre message d'administrateur qui correspond à cette variable {message_admin_index.message_admin_txt.MES_TXT}. Vous pouvez modifier la class de la cellule ou du span qui l'entoure pour personnaliser ce contenu.

15 - Puis, le «!-- BEGIN message_admin_txt --» indique la fin du contenu de votre message d'administrateur.

16- Le < / table >  ferme le tableau du message d'administrateur.

17 - Le «!-- END message_admin_index --» indique que la fin du message d'administrateur.

Voilà !

Et pour ceux qui veulent un récapitulatif des variables de cette partie :
{JAVASCRIPT}Contient la majorité du javascript du template.
{message_admin_index.message_admin_titre.MES_TITRE}Titre du message d'administration (PA)
{message_admin_index.message_admin_txt.MES_TXT}Contenu du message d'administration (PA)




1.3 Connexion rapide


Suite au message d'administrateur, nous avons la connexion rapide. Dans les options de notre forum, nous pouvons décider de ne pas l'afficher du tout, de l'afficher en haut de la page d'accueil ou en bas de la page d'accueil. Du coup, on le retrouve à deux endroits dans le template.

Cela ressemble à ceci :
Image à remplacer

Entre les lignes 19 à 59, il y a la connexion rapide du haut. De la ligne 88 à la ligne 128, ce sera la connexion rapide du bas. Histoire de ne pas se répéter deux fois, je vais expliquer seulement la connexion rapide du haut.

Bref, entre les lignes 19 à 81, le code de la connexion rapide ressemble à ceci :
Code:
<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                        <td><input class="post" type="text" size="10" name="username"/> </td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span> 
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span> </td>
                        <td><input class="post" type="password" size="10" name="password"/> </td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_header -->


19 - Au tout début, nous avons le «!-- BEGIN switch_user_login_form_header --» qui indique le début de la connexion rapide du haut. Si nous étions dans la connexion rapide du bas, cela serait plutôt «!-- BEGIN switch_user_login_form_footer --».

20 - Nous avons alors le début du formulaire de connexion rapide < form >. Je vous conseille de le laisser comme tel.

21 à 22 - Nous avons le tableau qui contient le contenu de notre connexion rapide. Vous pouvez modifier la class du tableau afin d'en modifier l'apparence.

23 - Première cellule du tableau qui contiendra la connexion rapide qu'on voit habituellement.

25 - Nous avons un autre tableau imbriqué dans la première cellule de notre premier tableau. Ne demandez pas pourquoi, FA aime simplement trop ses tableaux...
Il est inutile de modifier la class de ce tableau puisqu'il n'a de toute façon pas de mise en forme déjà prédéfinie. Il est seulement là pour aligner les différentes parties de la connexion rapide.

26 - Première ligne du tableau imbriqué.

27 - La première cellule de cette ligne contient la variable {L_USERNAME} qui ne sert qu'à écrire "Nom d'utilisateur".

28 - La deuxième cellule de cette ligne contient la case < input > où nous pouvons inscrire notre nom d'utilisateur.

29 à 32 - La dernière cellule de cette ligne contient la  case < input > que nous pouvons cocher pour nous connecteur automatiquement et la variable {L_AUTO_LOGIN} qui ne sert qu'à écrire "Connexion automatique".

33 - Fin de la première ligne du tableau imbriqué.

35 - Deuxième ligne du tableau imbriqué.

36 - La première cellule de cette ligne contient la variable {L_PASSWORD} qui ne sert qu'à écrire "Mot de passe".

37 - La deuxième cellule de cette ligne contient la case < input > où nous pouvons inscrire notre mot de passe.

38 - La dernière cellule de cette ligne contient la  variable {S_HIDDEN_FIELDS} qui contient des champs secrets utilisés pour la connexion. Je vous conseille de ne pas essayer de modifier cette ligne. La cellule contient également le < input > qui correspond au bouton "connexion" sur lequel on clique pour se connecter. Essayez de ne pas le modifier non plus.

39 à 40 - Fin de la deuxième ligne du tableau imbriqué et du tableau imbriqué dans le tableau de connexion rapide.

41 - Fin de la première cellule du tableau de connexion.




43 - Le «!-- BEGIN switch_social_login --» indique le début de ce qui apparaît si la fonction "Facebook Connect" est activée.

44 à 46 - Nous voilà enfin avec une deuxième cellule à notre tableau. Elle contient la variable {switch_user_login_form_header.switch_fb_connect.L_OR} qui dit simplement "OU".

47 - Ouverture la troisième et dernière cellule du tableau.

48 - La div avec la class "social_btn" contiendra les informations facebook.

49 - Le «!-- BEGIN fb_connect --» indique le début de la partie du bouton facebook.

50 - La div avec la class "fb-login-button" est le bouton facebook.

51 - Le «!-- END fb_connect --» indique la fin de la partie du bouton facebook.

52 - On ferme la div avec la class "social_btn".

53 - On ferme la troisième et dernière cellule du tableau de connexion rapide.

54 - Le «!-- BEGIN switch_social_login --» indique la fin de ce qui apparaît si la fonction "Facebook Connect" est activée.

56 à 58 - Fermeture du tableau

59 - Le «!-- END switch_user_login_form_header --» indique la fin de la connexion rapide du haut. Si nous étions dans la connexion rapide du bas, cela serait plutôt «!-- END switch_user_login_form_footer --».

Voilà!

Pour ceux qui veulent un petit récapitulatif des variables de cette section :
{JAVASCRIPT}Contient la majorité du javascript du template.
{message_admin_index.message_admin_titre.MES_TITRE}Titre du message d'administration (PA)
{message_admin_index.message_admin_txt.MES_TXT}Contenu du message d'administration (PA)
{L_USERNAME}Est écrit "Nom d'utilisateur"
{L_AUTO_LOGIN}Est écrit "Connexion automatique"
{L_PASSWORD}Est écrit "Mot de passe"
{S_HIDDEN_FIELDS}Certains champs secrets utilisés pour la connexion, ne l'enlevez pas.
{switch_user_login_form_header.switch_social_login.L_OR}Pour ceux qui ont activé l'option "Facebook connect", il est écrit "OU"




1.4 Les liens "Marquer tous les forums comme lus", "Supprimer les cookies", etc...


Directement à la suite de la connexion rapide du haut, nous avons deux petites variables aux lignes 61 et 62 qui sont extrèmement importante. Du moins, la deuxième l'est! Voici à quoi cela ressemble :
Code:
{CHATBOX_TOP}
{BOARD_INDEX}


82 - La variable {CHATBOX_TOP} est la chatbox qui apparaît si on a choisit de l'afficher en haut.

83 - La variable {BOARD_INDEX} est le coeur de notre forum. Cela contient les catégories/forums et la liste des sujets. Bref, il ne faut surtout pas l'enlever!


Voilà pour ce petit interlude. Maintenant, passons aux options qui sont habituellement juste en bas des catégories, à savoir entre les lignes 63 et 86. Ces options inclues le "Marquer tous les forums comme lus", "Sujets actifs du jour", "Top 20 des posteurs du jour", "Top 20 des posteurs du forum" et "Supprimer les cookies". Voici à quoi cela ressemble :
Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
         <!-- END switch_delete_cookies -->
      </td>
      <td width="50%" align="right">
         <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>


63 à 65 - Le début du tableau des options dont la première cellule est alignée à gauche.

66 - Le «!-- BEGIN switch_user_logged_in --» indique le début d'une section que seul les utilisateurs connectés peuvent voir.

67 - Cela contient la variable {L_MARK_FORUMS_READ} où il est écrit "Marquez tous les forums comme lus". Dans le lien qui contient cette variable, vous trouverez {U_MARK_READ} qui est l'url du lien pour marquer tous les forums comme lus.

68 - Le «!-- END switch_user_logged_in --» indique la fin de la section que seul les membres connectés peuvent voir.

69 à 71 - Normalement, le «!-- BEGIN switch_delete_cookies --» à la ligne 90 devrait indiquer le début de la section "Supprimer les cookies du forum" et le «!-- END switch_delete_cookies --» devrait indiquer la fin de cette section. Cela date de l'époque où nous n'avions pas encore l'option d'activer ou de désactiver la supression des cookies. Maintenant que nous pouvons l'activer/désactiver, cette section ne sert plus à rien. Vous constaterez d'ailleurs que quoi que vous y mettiez, rien n'apparaît sur le forum.

72 à 74 - Fin de la première cellule de gauche et début de la cellule de droite avec le < span > qui met en forme le contenu.

75 - Cela contient la variable {L_TODAY_ACTIVE} où il est écrit "Sujets actifs du jour". Dans le lien qui contient cette variable, vous trouverez {U_TODAY_ACTIVE} qui est l'url du lien pour accéder aux sujets actifs du jour.

76 - Cela contient la variable {L_TODAY_POSTERS} où il est écrit "Top 20 des posteurs du jour". Dans le lien qui contient cette variable, vous trouverez {U_TODAY_POSTERS} qui est l'url du lien pour accéder au top 20 des posteurs du jour.

77 - Cela contient la variable {L_OVERALL_POSTERS} où il est écrit "Top 20 des posteurs du forum". Dans le lien qui contient cette variable, vous trouverez {U_OVERALL_POSTERS} qui est l'url du lien pour accéder au top 20 des posteurs du forum.

78 - Le «!-- BEGIN switch_on_index --» indique le début de zone de l'index des cookies.

79 - Le «!-- BEGIN switch_delete_cookies --»  indique le début de zone des cookies.

80 - Cela contient la variable {switch_on_index.switch_delete_cookies.L_DELETE_COOKIES} où il est écrit "Supprimer les cookies du forum". Dans le lien qui contient cette variable, vous trouverez {switch_on_index.switch_delete_cookies.U_DELETE_COOKIES} qui est l'url du lien nos permettant de supprimer les cookies du forum.

81 - Le «!-- END switch_delete_cookies --»  indique la fin de zone des cookies.

82 - Le «!-- END switch_on_index --» indique la fin de zone de l'index des cookies.

83 à 86 - La fermeture de la cellule de droite et du tableau.

Voilà !

Pour ceux qui veulent un récapitulatif des variables utilisées :
{BOARD_INDEX}Tout ce qu'il y a entre le message d'administrateur et le qeel. Autrement dit, cela contient le coeur du forum, comme les catégories, les forums et la liste des sujets.
{L_MARK_READ}Est écrit "Marquez tous les forums comme lus". Dans le lien qui le contient, vous trouverez {U_MARK_READ} qui est l'url du lien pour marquer tous les forums comme lus.
{L_TODAY_ACTIVE}Est écrit "Sujets actifs du jour". Dans le lien qui le contient, vous trouverez {U_TODAY_ACTIVE} qui est l'url du lien qui mène aux sujets actifs du jour.
{L_TODAY_POSTERS}Est écrit "Top 20 des posteurs du jour". Dans le lien qui le contient, vous trouverez {U_TODAY_POSTERS} qui est l'url du lien qui mène au top 20 des posteurs du jour.
{L_OVERALL_POSTERS}Est écrit "Top 20 des posteurs du forum". Dans le lien qui le contient, vous trouverez {U_OVERALL_POSTERS} qui est l'urorul du lien qui mène au top 20 des posteurs du forum.
{switch_on_index.switch_delete
_cookies.L_DELETE_COOKIES}
Est écrit "Supprimer les cookies du forum". Dans le lien qui le contient, vous trouverez {switch_on_index.switch_delete
_cookies.U_DELETE_COOKIES} qui est l'url du lien pour supprimer les cookies du forum.




1.5 Qeel


Suite aux liens spéciaux, nous avons la fonction de connexion rapide qui revient encore une fois comme nous l'avions déjà mentionné. Puis, nous arrivons à la partie qui vous intéresse le plus, à savoir le Qeel.

Vous le trouverez entre les lignes 130 et 178. Cela devrait ressembler à cela :
Code:
<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td class="catHead" colspan="2" height="28">
      <!-- BEGIN switch_viewonline_link -->
      <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
      <!-- END switch_viewonline_link -->

      <!-- BEGIN switch_viewonline_nolink -->
      <span class="cattitle">{L_WHO_IS_ONLINE}</span>
      <!-- END switch_viewonline_nolink -->
      </td>
   </tr>
   <tr>
      <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
      <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}</span></td>
   </tr>
   <tr>
      <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      <br />
      {LOGGED_IN_USER_LIST}</span></td>
   </tr>
   {L_CONNECTED_MEMBERS}
   {L_WHOSBIRTHDAY_TODAY}
   {L_WHOSBIRTHDAY_WEEK}
   <tr>
      <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
   </tr>
   <!-- BEGIN switch_chatbox_activate -->
   <tr>
      <td class="row1">
         <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
            //<![CDATA[
            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            //]]>
            </script>
            <!-- END switch_chatbox_popup -->
         </span>
      </td>
   </tr>
   <!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->


Dans les explications qui suivent, vous trouverez les indicateurs suivants qui veulent dire :

*row1
Si vous voulez modifier la mise en forme de cette cellule, vous pouvez changer le nom de la class pour une class que vous aurez personnalisée ou même enlever carrément la class "row1".

**gensmall
Si vous voulez modifier la mise en forme des variables de cette cellule, vous pouvez changer le nom de la class du span qui entoure les variables pour une class que vous aurez personnalisée ou même enlever carrément la class "gensmall".


130 - Au tout début, le «!-- BEGIN disable_viewonline --» nous indique le début du qeel. Si nous désactivons les statistiques, tout ce que sera dans cette section n'apparaîtra pas.

131 - Début du tableau du qeel. Vous pouvez changer le nom de la class pour une class que vous aurez personnalisée ou même enlever carrément la class "forumline".

132 à 133 - Début de l'entête du qeel. Vous pouvez changer le nom de la class de la cellule pour une class que vous aurez personnalisée ou même enlever carrément la class "catHead".

134 - Le «!-- BEGIN switch_viewonline_link --» nous indique le début de la zone du titre du qeel sous forme de lien.

135 - La variable {L_WHO_IS_ONLINE} qui contient le texte "Qui est en ligne?" et qui est à l'intérieur du lien dont l'url est la variable {U_VIEWONLINE} qui vous permet d'accéder à la localisation des IP des membres.
Si vous voulez modifier la mise en forme du "Qui est en ligne?", vous pouvez changer le nom de la class du lien et du span qui l'entoure pour une class que vous aurez personnalisée ou même enlever carrément la class "cattitle".

136 - Le «!-- END switch_viewonline_link --» nous indique la fin de la zone du titre du qeel sous forme de texte.

138 - Le «!-- BEGIN switch_viewonline_nolink --» nous indique le début de la zone du titre du qeel sous forme de texte.

139 - La variable {L_WHO_IS_ONLINE} qui contient le texte "Qui est en ligne?".
Si vous voulez modifier la mise en forme du "Qui est en ligne?", vous pouvez changer le nom de la class du span qui l'entoure pour une class que vous aurez personnalisée ou même enlever carrément la class "cattitle".

140 - Le «!-- END switch_viewonline_nolink --» nous indique la fin de la zone du titre du qeel sous forme de texte.

141 à 142 - On ferme la ligne de l'entête.

143 - On ouvre la première ligne qui va contenir la cellule l'image du qeel et la première cellule des statistiques.

144 - Cellule qui contient l'image du qeel. La variable {L_WHO_IS_ONLINE} correspond à l'url de l'image du qeel. Nous pouvons modifier cette image directement dans les images de la section affichage de notre panneau d'administration.
*row1

145 - Première ligne de la première cellule des statistiques. Cela contient la variable {TOTAL_POSTS}, soit la phrase "Nos membres ont posté un total de X messages" qui correspond au nombre de messages postés sur le forum.
*row1
**gensmall

146 - Deuxième ligne de la première cellule des statistiques. Cela contient la variable {TOTAL_USERS}, soit la phrase "Nous avons X membre enregistré" qui correspond au nombre d'utilisateurs inscrits sur le forum.

147 - Troisième ligne de la première cellule des statistiques. Cela contient la variable {NEWEST_USER}, soit la phrase "L'utilisateur enregistré le plus récent est NOM" qui correspond à l'utilisateur inscrit le plus récent.

148 - On ferme notre première ligne du tableau.
149 - On passe à la deuxième ligne du tableau.

150 - Première ligne de la deuxième cellule des statistiques. Cela contient la variable {TOTAL_USERS_ONLINE}, soit la phrase "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité" qui correspond au nombre d'utilisateurs présents sur le site, dont les inscirts, les inscrits invisibles et les non-inscrits.
*row1
**gensmall

151 - Deuxième ligne de la deuxième cellule des statistiques. Cela contient la variable {RECORD_USERS}, soit la phrase "Le record du nombre d'utilisateurs en ligne est de X le JOUR_DE_LA_SEMAINE JOUR MOIS ANNÉE - HH:MM" qui correspond au record du nombre d'utilisateurs présents sur le site en même temps.

153 - Troisième ligne de la deuxième cellule des statistiques. Cela contient la variable {LOGGED_IN_USER_LIST}, soit la phrase "Utilisateurs enregistrés : NOM" qui correspond aux utilisateurs inscrits connectés en ce moment sur le forum.

154 - On ferme la deuxième ligne du tableau.

155 - La variable {L_CONNECTED_MEMBERS}, soit la phrase "Membres connectés au cours des XX dernières heures : NOM" qui correspond aux utilisateurs inscrits connectés au cours des dernières heures sur le forum.
ATTENTION: Cette variable a certaines particuliarités qui seront expliquées à la fin de cette partie.

156 - La variable {L_WHOSBIRTHDAY_TODAY}, soit la phrase "Aucun membre ne fête son anniversaire aujourd'hui" ou "Membres fêtant leur anniversaire aujourd'hui : NOM" qui correspond aux utilisateurs inscrits qui fêtent leur anniversaire aujourd'hui.
ATTENTION: Cette variable a certaines particuliarités qui seront expliquées à la fin de cette partie.

157 - La variable {L_WHOSBIRTHDAY_WEEK}, soit la phrase "Aucun membre ne fête son anniversaire au cours des 7 prochains jours" ou "Membres fêtant leur anniversaire au cours des 7 prochains jours : NOM" qui correspond aux utilisateurs inscrits qui fêtent leur anniversaire au cours des 7 prochains jours.
ATTENTION: Cette variable a certaines particuliarités qui seront expliquées à la fin de cette partie.

158 - Ouverture de l'avant dernière ligne du tableau.

159 - Cellule qui contient la variable {LEGEND}, soit le mot "Légende :" et la variable {GROUP_LEGEND} qui correspond aux groupes visibles.
*row1
**gensmall

160 - Fermeture de l'avant dernière ligne du tableau.

161 - Le «!-- BEGIN switch_chatbox_activate --» indique le début de la zone des statistiques qui n'apparaissent que si la CB est activée.

162 - Ouverture de la dernière ligne du tableau.
163 - Ouverture de la dernière cellule du tableau.

164 - Première ligne de la dernière cellule des statistiques. Cela contient la variable {TOTAL_CHATTERS_ONLINE}, soit la phrase "Il y a actuellement X utilisateur(s) sur la ChatBox : " qui correspond au nombre d'utilisateurs connectés sur la CB et la variable {CHATTERS_LIST} qui correspond aux pseudos des membres connectés sur la CB.
*row1
**gensmall

165 - Le «!-- BEGIN switch_chatbox_popup --» indique le début du lien pour rejoindre la CB.

166 à 171 - Script contenant le lien utilisé pour rejoindre la CB (Le [Rejoindre le Chat])

172 - Le «!-- END switch_chatbox_popup --» indique la fin du lien pour rejoindre la CB.

174 - Fermeture de la dernière cellule du tableau.
175 - Fermeture de la dernière ligne du tableau.

176 - Le «!-- END switch_chatbox_activate --» indique la fin de la zone des statistiques qui n'apparaissent que si la CB est activée.

177 - On ferme le tableau.

178 - Le «!-- END disable_viewonline --» indique la fin du qeel.



Particularités de certaines variables :

{L_CONNECTED_MEMBERS}, {L_WHOSBIRTHDAY_TODAY} et {L_WHOSBIRTHDAY_WEEK}

Vous le remarquerez peut-être, mais ces variables ne sont pas dans une cellule. Elles sont glissées entre deux lignes du tableau.
Pourquoi? Parce qu'en réalité, elles sont sous la forme suivante :
Code:
<tr><td class="row1><span class="gensmall">Membres connectés au cours des XX dernières heures : <a href="Lien vers le profil"><span style="color: couleur;"><strong>NOM</strong></span></a></span></td></tr>

<tr> <td class="row1><span class="gensmall">Aucun membre ne fête son anniversaire aujourd'hui <br> Aucun membre ne fête son anniversaire dans les 7 prochains jours </span></td></tr>



Et là, vous vous dites "Mais moi, il y a un fond bleu sur ma class "row1" et je veux le garder sur le reste de mon forum. Sauf que je ne le veux pas dans mon CSS... Comment je m'en débarasse?

Premièrement, si vous voulez créer votre propre qeel de A à Z en utilisant les variables, vous devrez faire attention d'encadrer ces variables d'un tableau «table» pour respecter la mise en forme.
Pour ce qui est de la mise en forme, il y a deux classes qui sont déjà intégrés à la variable. Pour modifier ces classes, il vous suffit de mettre une class au tableau que vous avez utilisé pour encadrer votre variable. Puis, dans votre CSS, vous mettez la mise en forme que vous voulez en allant directement modifier les classes "row1" et "gensmall".

Exemple dans le template :
Code:
<div id="qeel">
  <table class="nom_de_la_class_de_mon_tableau">
    {L_CONNECTED_MEMBERS}
  </table>

  <table class="nom_de_la_class_de_mon_tableau">
    {L_WHOSBIRTHDAY_TODAY}
    {L_WHOSBIRTHDAY_WEEK}
  </table>
</div>


Exemple dans le CSS :
Code:
/*Cellules des anniversaires et des derniers connectés*/
.nom_de_la_class_de_mon_tableau td.row1 {
  background-color: transparent; /*Met la couleur de fond transparent*/
  padding: 0px; /*Enlève le padding automatique des cellules des anniversaires et des derniers connectés*/
}

/*Écriture des anniversaires et des derniers connectés*/
.nom_de_la_class_de_mon_tableau span.gensmall {
  color: blue; /*Couleur du texte des anniversaires et des derniers connectés*/
  font-size: 12px; /*Taille du texte des anniversaires et des derniers connectés*/
  font-family: calibri; /*Police du texte des anniversaires et des derniers connectés*/
}


C'est fini!

Pour ceux qui veulent un petit récapitulatif des variables :
{L_WHO_IS_ONLINE}Est écrit "Qui est en ligne?" Lorsqu'il est dans un lien, vous trouverez {U_VIEWONLINE} qui est l'url qui mène à la visualisation (par IP) des membres connectés sur le forum
{L_ONLINE_IMG}Url de l'image du Qeel
{TOTAL_POSTS}Nombre de messages postés. Est écrit "Nos membres ont posté un total de X messages"
{TOTAL_USERS}Nombre de membres inscrits. Est écrit "Nous avons X membres enregistrés"
{NEWEST_USER}Dernier utilisateur inscrit. Est écrit "L'utilisateur enregistré le plus récent est NOM"
{TOTAL_USERS_ONLINE}Nombre et type d'utilisateurs en ligne. Est écrit "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité "
{RECORD_USERS}Record du nombre d'utilisateurs en ligne. Est écrit "Le record du nombre d'utilisateurs en ligne est de X le Dim 27 Juil - 13:24"
{LOGGED_IN_USER_LIST}Membres connectés présentement. Est écrit "Utilisateurs enregistrés : NOM"
{L_CONNECTED_MEMBERS}Membres connectés au cours des 24/48/72 dernières heures. Est écrit "Membres connectés au cours des XX dernières heures : NOM"
{L_WHOSBIRTHDAY_TODAY}Anniversaires du jour. Est écrit "Membres fêtant leur anniversaire aujourd'hui: NOM (AGE)"
{L_WHOSBIRTHDAY_WEEK}Anniversaires des 7 prochains jours. Est écrit "Membres fêtant leur anniversaire dans les 7 prochains jours: NOM (AGE)"
{LEGEND}Est écrit "Légende"
{GROUP_LEGEND}Légende des groupes visibles
{TOTAL_CHATTERS_ONLINE}Nombre de membres sur la ChatBoxEst écrit "Il y a actuellement X utilisateur(s) sur la ChatBox"
{CHATTERS_LIST}Liste des membres sur la ChatBox




1.6 La fin du template (légende des statuts de forum, etc...)


Suite au qeel, nous avons le reste du template, dont la légende des status de forum, la chat-box du bas, etc...

Cela se situe entre les lignes 179 et 196. Cela devrait ressembler à cela :
Code:
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
   <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td>  </td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
      <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
   </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}


179 - Au tout début, la variable {CHATBOX_BOTTOM} correspond à la chat-box qui vous avez choisi l'affichage "au bas de la page d'accueil".

180 - Saut de ligne qui termine tous les flottements à droite ou gauche.

181 - Le «!-- BEGIN switch_legend --» indique le début de la légende des statuts de forums (New/Old/Lock ou  "Nouveau/Anciens/Verrouillé).

182 à 183 - Début du tableau de cette légende

184 - Première cellule qui contient l'image de l'image New/Nouveau. La variable {FORUM_NEW_IMG} correspond à l'url de cette image.

185 - Deuxième cellule qui contient la variable {L_NEW_POSTS} qui correspond à la phrase "Nouveaux messages"

186 - Troisième cellule qui est vide pour créer un espace.

187 - Quatrième cellule qui contient l'image de l'image Old/Ancien. La variable {FORUM_IMG} correspond à l'url de cette image.

188 - Cinquième cellule qui contient la variable {L_NO_NEW_POSTS} qui correspond à la phrase "Pas de nouveaux messages"

189 - Sixième cellule qui est vide pour créer un espace.

190 - Septième cellule qui contient l'image de l'image Lock/Verrouillé. La variable {FORUM_LOCKED_IMG} correspond à l'url de cette image.

191 - Huitième cellule qui contient la variable {L_FORUM_LOCKED} qui correspond à la phrase "Forum Verrouillé"

192 à 193 - Fin du tableau.

194 - Le «!-- END switch_legend --» indique la fin de la légende.

196 - La variable {AUTO_DST} dont je ne suis jamais arrivé à trouver l'utilité... Par précaution, ne l'enlevez pas ^^

Voilà!

Pour ceux qui veulent un petit récapitulatif des variables :
{CHATBOX_BOTTOM}La ChatBox qui s'active si vous sélectionner la position "sur la page d'accueil en bas".
{L_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Nouveaux messages". Dans l'image juste avant, le {FORUM_NEW_IMG} est l'url de l'image "New"
{L_NO_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Pas de nouveaux messages". Dans l'image juste avant, le {FORUM_NO_NEW_IMG} est l'url de l'image "Old"
{L_FORUM_LOCKED}Fait partie de la légende des status de forum. Est écrit "Forum Verrouillé". Dans l'image juste avant, le {FORUM_LOCKED_IMG} est l'url de l'image "Locked"




1.7 Modifier les phrases des variables de FA


Nous avons vu comment se rendre au template, les variables qui y sont utilisées et une visite en profondeur du template. Nous avons aussi vu que beaucoup de variables contiennent un texte déjà pré-programmé.
Mais comment garder les fonctionnalités d'une variable tout en changeant son texte? Eh bien c'est ce qu'on va voir ^^

Tous les exemples seront faits avec la variable {NEWEST_USER} dont le texte est "L'utilisateur enregistré le plus récent est NOM" et qui devient, grace à un javascript, "La nouvelle recrue est NOM"

Premièrement, nous devons avoir un moyen de sélectionner notre variable. Donc nous nous rendrons dans le template et nous entourerons notre variable d'un "span" ou d'une "div" à laquelle nous donnerons un "id" afin de l'identifier.

Exemple :
Code:
<span id="newuser">{NEWEST_USER}</span>


Ensuite, nous allons ajouter un petit javascript dans notre template. Ce javascript est séparé en deux parties :
1. Il repère le contenu du span/div qui contient l'id indiqué.
2. Il remplace un certain texte par un nouveau texte.

Le voici :
Code:
<script type="text/javascript">document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"La nouvelle recrue est");</script>


À deux endroit dans le script,  on voit ceci :
document.getElementById('newuser')
Il faut s'assurer de mettre l'id que nous avons mis à notre variable dans les parenthèses et entre les ' '.

Vers la fin, nous avons :
replace(/L'utilisateur enregistré le plus récent est/,"La nouvelle recrue est");
Il faut mettre le texte à remplacer dans les parenthèses, entre les / /.
Il faut mettre le nouveau texte dans les parenthèses, entre les " ".

Voilà, vous savez comment modifier le texte de vos variables! À savoir que vous devez faire attention lorsqu'il y a des phrases au pluriel et au singulier afin de mettre un javascript pour chacune des options possibles.

Onyx

Signature à onglets - Jeu 25 Sep 2014 - 2:56




LS - Signature à onglets


Voici un petit LS de signature à onglets j'ai fait pour la demande de Madii-x.

Pour voir l'aperçu de l'onglet "Signature" : cliquez ici.
Pour voir l'aperçu de l'onglet "Cadeaux" : cliquez ici.
Pour voir l'aperçu de l'onglet "Moi" : cliquez ici.

Ce LS est en deux parties.
  • Tout d'abord, nous allons créer notre signature dans une page html.
  • Puis, nous allons mettre l'iframe qui contient la page html dans notre signature.

  • Puisqu'on se sert d'une page html, il que vous ayez votre propre forum pour héberger la page html ou que votre administrateur accepte de le faire sur son propre forum.

  • Il ne faudrait pas que l'image de l'onglet "signature" dépasse 500x200 pixels.

  • L'image dans l'onglet "moi" a une hauteur de 180 pixels.
Merci de ne pas enlever le crédit vers Never-Utopia.



1. Le corps de la signature (Page HTML)


Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre signature.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML

Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)"
On choisit un nom, comme "Signature de NOM" par exemple.
Enfin, on met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Signature</title>
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css' />
<script type="text/javascript">
        //<!--
                function change_ongletii(name)
                {
document.getElementById('ongletii_'+anc_ongletii)
.className = 'ongletii_0 ongletii';
document.getElementById('ongletii_'+name).
className = 'ongletii_1 ongletii';
document.getElementById('contenu_ongletii_'+anc_ongletii)
.style.display = 'none';
document.getElementById('contenu_ongletii_'+name).
style.display = 'block';
                        anc_ongletii = name;
                }
        //-->
</script>
<style type="text/css">
/*Fond par HTML*/
body {
  margin: 0px;
}

/*Tableau qui entoure la sign*/
.signii {
  border: 1px solid #fe285a;
  width: 502px;
  height: 218px;
}
 
/*Onglets*/
.ongletii {
  background: #fe285a;
  height: 20px;
  font-size: 16px;
  color: white;
  font-family: abel;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid #fe285a;
}
/*Onglet au survol*/
.ongletii_0:hover {
  cursor: pointer;
}
/*Onglet actif*/
.ongletii_1 {
  background: #c8254b;
}
 
/*Contenu des onglets*/
.contenu_ongletii {
  background: url('http://i39.servimg.com/u/f39/18/85/39/07/transi10.jpg');
  display: none;
  font-family: abel;
  color: #fe285a;
  font-size: 14px;
}
 
/*Contenu onglet SIGNATURE*/
.inside_1 {
  height: 200px;
}

/*Contenu onglet CADEAUX*/
.inside_2 {
  overflow: auto;
  height: 200px;
}

/*Contenu onglet MOI*/
.inside_3 {
  padding: 9px;
  padding-right: 0px;
  height: 182px;
}

/*Image dans contenu onglet MOI*/
.imgii {
  float: left;
  height: 180px;
  border: 1px solid #fe285a;
  margin-right: 10px;
}
 
/*Texte dans contenu onglet MOI*/
.textii {
  height: 172px;
  padding-right: 10px;
  text-align: justify;
  overflow: auto;
}

/*Liens dans contenu onglet MOI en bas*/
.linksii a {
  display: inline-block;
  color: #fe285a;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none!important;
  margin-right: 20px;
  margin-bottom: -8px;
}
/*Liens au survol dans contenu onglet MOI en bas*/
.linksii a:hover {
  color: #7a162d;
  font-size: 14px;
}
</style>
</head>
<body>
  <table align="center" border="0" cellpadding="0" cellspacing="0" class="signii"><tr>
    <td width="33%">
      <div onmouseover="javascript:change_ongletii('1er');" id="ongletii_1er" class="ongletii_1 ongletii">
        Signature
      </div>
    </td>
    <td width="34%">
      <div onmouseover="javascript:change_ongletii('2eme');" id="ongletii_2eme" class="ongletii_0 ongletii">
        Cadeaux
      </div>
    </td>
    <td width="33%">
      <div onmouseover="javascript:change_ongletii('3eme');" id="ongletii_3eme" class="ongletii_0 ongletii">
        Moi
      </div>
    </td></tr><tr>
    <td colspan="3">
      <div id="contenu_ongletii_1er" class="contenu_ongletii">
        <div align="center" class="inside_1">
          Contenu de l'onglet "Signature"
        </div>
      </div>
      <div id="contenu_ongletii_2eme" class="contenu_ongletii">
        <div align="center" class="inside_2">
          Contenu de l'onglet "Cadeaux"
        </div>
      </div>
      <div id="contenu_ongletii_3eme" class="contenu_ongletii">
        <div class="inside_3">
          <img src="URL DE L'IMAGE DE L'ONGLET MOI" alt=" " class="imgii" />
          <div class="textii">
            Texte de l'onglet moi.
          </div>
          <div align="right" class="linksii">
            <a href="LIEN VERS LE PROFIL" target="_blank">Profil</a>
            <a href="LIEN VERS LES MP" target="_blank">MP</a>
            <a href="http://www.never-utopia.com/t51249-signature-a-onglets" target="_blank">N-U</a>
          </div>
        </div>
      </div>
    </td></tr>
  </table>
<script type="text/javascript">
        //<!--
                var anc_ongletii = '1er';
                change_ongletii(anc_ongletii);
        //-->
</script>
</body>
</html>


Changer les images/texte
Si jamais vous voulez changer ce qu'il y a dans les onglets, c'est indiqué par "contenu de l'onglet signature", "contenu de l'onglet cadeaux", "URL DE L'IMAGE DE L'ONGLET MOI", "texte de l'onglet moi", etc... Je vous fais confiance pour vous y retrouver Wink

Modifier les onglets pour qu'ils changent au clic
Il vous suffit de trouver tous les endroits où il est indiqué "onmouseover" et de le remplacer par "onclick".

Comment modifier le style ou la mise en forme
Dans ce code, il y a aussi du CSS qui met en forme la signature. Si vous voulez modifier la police, les couleurs ou autres éléments de mise en forme, c'est là qu'il faudra le faire. Le CSS est entre les balises suivantes :
Code:
<style type="text/css">
VOTRE CSS EST ICI
</style>


Lorsque vous modifiez votre signature, il faut cliquer sur l'engrenage où c'est inscrit "HTML", pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.



1. Mettre l'iframe (espace signature)


Maintenant que la page HTML est créée avec votre signature à l'intérieur, on va aller la mettre dans votre profil à l'aide d'un iframe.

Pour cela, nous allons aller dans :
> PROFIL
> > SIGNATURE

Puis, nous allons mettre le code suivant :
Code:
<iframe src="LIEN DE LA PAGE HTML" style="display: block; margin: auto; height: 230px; width: 510px; border: none;"></iframe>


Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, notre signature), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink

C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Un problème avec un tutoriel".

À plus !

Onyx

Les filtres (CSS3) - Jeu 4 Sep 2014 - 6:21




Tuto - Les filtres (CSS3)


Certains auront peut-être vu le tutoriel d'Alzufen sur comment faire passer une image "noir et blanc" à "couleur" ou ce tutoriel de Sparrow-Style sur l'opacité. Les filtres sont une nouveauté du CSS3 qui appliquent un certain filtre sur une image et peuvent être utilisés pour parvenir aux mêmes résultats que dans ces deux tutoriels. Il existe 10 filtres différents et ce tuto vous permettra d'apprendre à les connaître et les utiliser.

Voici ce que ce tutoriel va contenir :
  • 1. Ce qu'est un filtre et comment s'en servir?
  • 2. Greyscale => Échelle de noir et blanc
  • 3. Blur => Flou
  • 4. Saturate => Saturation
  • 5. Sepia
  • 6. Hue Rotate => Roue des couleurs/teintes
  • 7. Invert => Invertion
  • 8. Brightness => Luminosité
  • 9. Contrast => Contraste
  • 10. Opacity => Opacité
  • 11. Drop Shadow
  • 12. Comment faire pour que l'effet soit progressif?
  • 13. Comment additionner plusieurs filtres

À noter que les filtres fonctionnent avec Chrome, Opéra et Firefox, sauf l'opacité qui est supporté partout.




1. Les filtres (Ce que c'est)


C'est quoi exactement un filtre?
Dites-moi, si vous mettez une paire de lunettes roses, qu'est-ce que vous verrez? Et bien vous verrez la même chose que normalement, mais en rose. Et plus la teinte de vos lunettes sera forte, plus ce que vous verrez semblera rose.
Un filtre fonctionne de la même façon! En appliquant un filtre sur une image, c'est comme de mettre un calque invisible avec un effet spécial sur l'image. Plus vous intensifierez le filtre, plus l'image sera affectée par l'effet spécial.

Mais plus encore, quand on parle de codage, c'est quoi un filtre?
C'est simplement une propriété CSS à laquelle on donne une valeur pour déterminer l'intensité du filtre.

Et comment on l'utilise?
La première des choses est de mettre une image à l'endroit que l'on veut. Après tout, les filtres ne s'appliquent que sur les images. Nous allons donc mettre une image avec une class. Cela donnerait donc :
Code:
<img class="nom_de_la_class" src="url_de_l'image" />


Ensuite, on met le filtre comme une propriété normale dans le CSS. On commence par mettre la propriété "filter" qui indique qu'il y a un filtre. Puis, on détermine un "type" qui nous indique quel effet de filtre est utilisé. Ensuite, entre parenthèses, on indique la valeur qui détermine l'intensité du filtre. Nous aurons donc ceci :
Code:
.nom_de_la_class {
  -webkit-filter: type(valeur);
  filter: type(valeur);
}



2. Greyscale (Noir et blanc)


Premièrement, à quoi sert le filtre Greyscale? Eh bien ce filtre va convertir votre image en nuances de gris (noir et blanc). D'ailleurs, voici un exemple :

L'image n'est plus hébergée, contactez Onyx SVP

Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "0", à savoir qu'aucun filtre n'est appliqué et que l'image est en "couleurs".
> La valeur maximale est de "1", à savoir que l'image est complètement en noir et blanc.
> En choisissant une valeur entre "0" et "1", l'image sera de plus en plus dans des tons de noir et blanc au fur et à mesure qu'on se rapproche du "1".

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: grayscale(1);" pour y mettre le filtre en noir et blanc au maximum.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: grayscale(0);" pour qu'au survol, le filtre se dissipe et que l'image apparaisse en couleurs.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

.nom_de_la_class:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}



3. Blur (Flou)


Premièrement, à quoi sert le filtre Blur? Eh bien ce filtre va mettre un flou sur votre image. D'ailleurs, voici un exemple :

L'image n'est plus hébergée, contactez Onyx SVP

Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "0", à savoir qu'aucun filtre n'est appliqué et que l'image reste nette
> Plus on choisit une valeur en px élevée, plus le filtre est appliqué fortement.

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: blur(1px);" pour y mettre le filtre qui rend l'image floue de 1px.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: blur(0);" pour qu'au survol, le filtre se dissipe et que l'image apparaisse sans flou.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: blur(1px);
  filter: blur(1px);
}

.nom_de_la_class:hover {
  -webkit-filter: blur(0);
  filter: blur(0);
}



4. Saturate (Saturation)


Premièrement, à quoi sert le filtre Saturate? Eh bien ce filtre va servir à augmenter ou diminuer la saturation de votre image. D'ailleurs, voici un exemple :

L'image n'est plus hébergée, contactez Onyx SVP

Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "1", à savoir que la saturation est normale.
> En mettant une valeur de "0", l'image n'aura plus aucune saturation et apparaîtra en noir et blanc.
> Plus on choisit une valeur élevée au-delà de "1", plus l'image sera saturée.

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: saturate(3);" pour augmenter la saturation à 300%.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: saturate(1);" pour qu'au survol, le filtre se dissipe et que l'image reprenne sa saturation normale.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: saturate(3);
  filter: saturate(3);
}

.nom_de_la_class:hover {
  -webkit-filter: saturate(1);
  filter: saturate(1);
}



5. Sepia


Premièrement, à quoi sert le filtre Sepia? Eh bien ce filtre va mettre un filtre qui fait ressembler votre image à une vieille photographie. D'ailleurs, voici un exemple :

L'image n'est plus hébergée, contactez Onyx SVP

Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de sepia de "0", à savoir qu'aucun filtre n'est appliqué et que l'image a ses couleurs normales.
> La valeur maximale est de "1", à savoir que l'image ressemble complètement à une vieille photographie.
> En choisissant une valeur entre "0" et "1", l'image sera de plus en plus semblable à une vieille photographie au fur et à mesure qu'on se rapproche du "1".

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: sepia(1);" pour que l'image ressemble à une vieille photographie.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: sepia(0);" pour qu'au survol, le filtre se dissipe et que l'image reprenne ses couleurs normales.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: sepia(1);
  filter: sepia(1);
}

.nom_de_la_class:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}



6. Hue Rotate (Roue de couleurs)


Premièrement, à quoi sert le filtre Hue Rotate? C'est un peu plus dur à expliquer... Si on pense à une roue de couleurs, notre image de base est sur un point de cette roue. En changeant la valeur de Hue Rotate, nous allons modifier les couleurs de l'image Voici un exemple pour illustrer un peu mieux :

L'image n'est plus hébergée, contactez Onyx SVP

Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image est à "0deg" de la roue.
> Une valeur à "360deg" nous ramène au point de départ sur la roue.
> Il est possible de mettre une valeur entre "0deg" et "360deg" et les couleurs de l'image sont affectés selon l'angle de la roue. Il est dur de voir avec exactitude quel couleur cela nous donnera, alors il est mieux de fonctionner par essai/erreur.

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: hue-rotate(270deg);" pour mettre mon image au 270ème degré de couleur sur la roue des couleurs.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: rotate(0deg);" pour qu'au survol, le filtre se dissipe et que l'image reprenne ses couleurs normales.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: hue-rotate(270deg);
  filter: hue-rotate(270deg);
}

.nom_de_la_class:hover {
  -webkit-filter: hue-rotate(0deg);
  filter: hue-rotate(0deg);
}


Petit détail relativement important
Je sais que certains ont tendance à ne pas mettre les "px" ou les "deg" quand la valeur est de 0.
Or, si vous ne mettez pas le "deg" à 0 pour ce filtre, firefox ne le prend pas en considération.
Du coup, assurez-vous de mettre "hue-rotate(0deg)" et non "hue-rotate(0)".
Et en même temps, si vous pouviez essayer de prendre l'habitude de toujours mettre vos "deg" et "px", ce serait parfait puisque c'est la bonne façon de faire ^^



7. Invert


Premièrement, à quoi sert le filtre Invert? Eh bien ce filtre va servir mettre un filtre qui inverse les couleurs et teintes de l'image. Le vert devient rouge, le mauve devient jaune, le orange devient bleu, les couleurs foncées deviennent pâles, le blanc devient noir, etc. D'ailleurs, voici un exemple :

L'image n'est plus hébergée, contactez Onyx SVP

Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "0", à savoir qu'aucun filtre n'est appliqué et que l'image a son apparence normale.
> La valeur maximale est de "1", à savoir que les teintes et couleurs de l'image sont complètement inversées.
> En choisissant une valeur entre "0" et "1", les couleurs et teintes de l'image seront de plus en plus inversées au fur et à mesure qu'on se rapproche du "1".

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: invert(1);" pour que les teintes et couleurs de l'image soient inversées.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: invert(0);" pour qu'au survol, le filtre se dissipe et que l'image reprenne son apparence normale.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: invert(1);
  filter: invert(1);
}

.nom_de_la_class:hover {
  -webkit-filter: invert(0);
  filter: invert(0);
}



8. Brightness (Luminosité)


Premièrement, à quoi sert le filtre Brightness? Eh bien ce filtre va servir à augmenter ou diminuer la luminosité de votre image. D'ailleurs, voici un exemple :

L'image n'est plus hébergée, contactez Onyx SVP

Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "1", à savoir que la luminosité est normale.
> En mettant une valeur de "0", l'image n'aura plus aucune luminosité et sera complètement noire.
> Plus on choisit une valeur élevée au-delà de "1", plus l'image sera lumineuse.

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencer par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: brightness(2);" pour augmenter ma luminosité à 200%.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: brightness(1);" pour qu'au survol, le filtre se dissipe et que l'image reprenne sa luminosité normale.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: brightness(2);
  filter: brightness(2);
}

.nom_de_la_class:hover {
  -webkit-filter: brightness(1);
  filter: brightness(1);
}



9. Contrast (Contraste)


Premièrement, à quoi sert le filtre Contrast? Eh bien ce filtre va servir à augmenter ou diminuer le contraste de votre image. D'ailleurs, voici un exemple :

L'image n'est plus hébergée, contactez Onyx SVP

Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "1", à savoir que le contraste est normal.
> En mettant une valeur de "0", l'image n'aura plus aucun contraste et sera complètement gris.
> Plus on choisit une valeur élevée au-delà de "1", plus l'image sera contrastée.

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: contrast(2);" pour augmenter mon contraste à 200%.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: contrast(1);" pour qu'au survol, le filtre se dissipe et que l'image reprenne son contraste normal à 100%.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: contrast(2);
  filter: contrast(2);
}

.nom_de_la_class:hover {
  -webkit-filter: contrast(1);
  filter: contrast(1);
}



10. Opacity (Opacité)


Premièrement, à quoi sert le filtre Opacity? Eh bien ce filtre va servir à augmenter ou diminuer l'opacité de votre image. D'ailleurs, voici un exemple :

L'image n'est plus hébergée, contactez Onyx SVP

Ce filtre est l'exception qui confirme la règle :
Il fonctionne sur tous les navigateurs !
Il peut être utilisé sur d'autres choses que des images (sur des divs par exemple) !
La propriété qu'on met dans le CSS n'a pas le même format que les autres filtres. Vous en verrez un exemple plus bas.

Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "1", à savoir que l'image a son opacity normale.
> En mettant une valeur de "0", l'image n'aura plus aucune opacité et sera transparente.
> En choisissant une valeur entre "0" et "1", l'image sera de plus en plus transparente au fur et à mesure qu'on se rapproche du "0".

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "opacity: 0.5;" pour rendre mon image transparente à 50%.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "opacity: 1;" pour qu'au survol, le filtre se dissipe et que l'image reprenne son opacité normale.

Exemple :
Code:
.nom_de_la_class {
  opacity: 0.5;
}

.nom_de_la_class:hover {
  opacity: 1;
}


Hé, mais c'est différent des autres! Pourquoi c'est différent?
Oui oui, j'y venais ^^
Comme ce filtre s'applique ailleurs que sur des images et est plutôt assez utilisé, tous les navigateurs l'ont intégré, sans passer par un filtre normal.
Du coup, à la place du format habituel qui est "filter: type(valeur)", on a simplement "type : valeur".
Cela fonctionne pour Firefox, Safari, Internet Explorer, Chrome et Opéra.




11. Drop-Shadow


Premièrement, à quoi sert le filtre Drop-Shadow? Eh bien, est-ce que vous êtes familiers avec le Box-Shadow? Là où on peut mettre une ombre autour d'une image (ou div)? Eh bien quand on utilise le Box-Shadow sur une image png, cela fait un ombre autour du cadre de l'image. Le Drop-Shadow, lui, sera capable de faire la différence entre le "vide" de l'image et le "contenu" de l'image pour mettre l'ombre juste sur le vrai contenu de l'image.

D'ailleurs, voici un exemple Box-Shadow vs Drop-Shadow :

L'image n'est plus hébergée, contactez Onyx SVP L'image n'est plus hébergée, contactez Onyx SVP


Ça n'a pas l'air d'être des valeurs comme les autres... Cela fonctionne comment?
> Il y a comme d'habitude le "filter" qui est la propriété.
> Ensuite, on a encore le "drop-shadow" qui est le type.
> Dans la valeur entre parenthèse, le premier "#px" correspond au décalage de l'ombre vers le droite.
> Dans la valeur entre parenthèse, le deuxième"#px" correspond au décalage de l'ombre vers le bas.
> Dans la valeur entre parenthèse, le troisième "#px" correspond au flou de l'ombre.
> Dans la valeur entre parenthèse, la couleur à la fin correspond à la couleur de l'ombre.
=> Cela donne "filter: drop-shadow(#px #px #px couleur)"

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: drop-shadow(5px 5px 2px #545454);" pour mettre une ombre de 5px sur la gauche, de 5px vers le bas, d'un flou de 2px et de couleur #545454.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" en lui donnant la propriété "filter: drop-shadow(8px 8px 3px #545454);" changer pour que l'ombre soit de 8px sur la gauche, de 8px vers le bas, d'un flou de 3px et de couleur #545454.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: drop-shadow(5px 5px 2px #545454);
  filter: drop-shadow(5px 5px 2px #545454);
}

.nom_de_la_class:hover {
  -webkit-filter: drop-shadow(8px 8px 3px #545454);
  filter: drop-shadow(8px 8px 3px #545454);
}



12. Faire un effet progressif


Vous savez maintenant comment utiliser les 10 types de filtres. Vous savez même comment mettre un effet différent lorsqu'on survole l'image à l'aide de la pseudo-class "hover".

Mais comment je fais si je veux que l'effet soit progressif quand je survole l'image?
> Nous allons rajouter la propriété "transition" à la class de notre image dans notre CSS.
> La propriété transition se décompose comme ceci : "transition: #s;".
> Nous avons donc la propriété "transition", puis la valeur en secondes qui indiquent la durée de la transition.

Prenons mon premier filtre comme exemple, à savoir celui Greyscale. Nous avons actuellement le code suivant :
Code:
.nom_de_la_class {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

.nom_de_la_class:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}



Pour que l'effet soit progressif, on va rajouter la propriété transition comme ceci "transition: 1s;" pour que la durée de la transition soit de 1 seconde. Pour mettre ½ seconde, on aurait mis "transition: 0.5s;" et pour mettre 3 secondes on aurait mis "transition: 3s;".

Résultat avec une transition de 1 seconde :
Code:
.nom_de_la_class {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  -webkit-transition: 1s;
  transition: 1s;
}

.nom_de_la_class:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}



13. Additionner plusieurs filtres


Maintenant qu'on sait comment utiliser les filtres et comment faire pour que l'effet du filtre se fasse de façon progressive, voyons comment appliquer plusieurs filtres à une même image

D'ailleurs, voici un exemple où on additionne les filtres Brightness (Luminosité) et Sepia :

L'image n'est plus hébergée, contactez Onyx SVP


Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencer par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: brightness(2) sepia(1);" pour augmenter ma luminosité à 200% et pour que l'image ressemble à une vieille photographie.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: brightness(1) sepia(0);" pour qu'au survol, le filtre se dissipe et que l'image reprenne sa luminosité normale et apparence normale.

Comme vous le constatez, dans ma propriété "filter", j'ai séparé les différents "types" (brightness et sepia) avec un simple espace.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: brightness(2) sepia(1);
  filter: brightness(2) sepia(1);
}

.nom_de_la_class:hover {
  -webkit-filter: brightness(1) sepia(0);
  filter: brightness(1) sepia(0);
}



C'est simple comme ça?
Oui, c'est tout simplement cela! Il y a une seule exception, soit l'opacité qui se met dans une propriété à part.




Petit exemple avec l'Opacité ajouté en plus de Brightness et Sepia :

L'image n'est plus hébergée, contactez Onyx SVP


Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencer par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: brightness(2) sepia(1);" pour augmenter ma luminosité à 200% et pour que l'image ressemble à une vieille photographie. J'ai également mis la propriété "opacity: 0.5;" pour baisser l'opacité de mon image à 50%.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: brightness(1) sepia(0);" pour qu'au survol, le filtre se dissipe et que l'image reprenne sa luminosité normale et apparence normale. J'ai également mis la propriété "opacity: 1;" pour remettre l'opacité de mon image à 100%.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: brightness(2) sepia(1);
  filter: brightness(2) sepia(1);
  opacity: 0.5;
}

.nom_de_la_class:hover {
  -webkit-filter: brightness(1) sepia(0);
  filter: brightness(1) sepia(0);
  opacity: 1;
}




Conclusion

  • Un filtre est une propriété où un effet est appliqué à une intensité variable sur une image.

  • Son format est "filter: type(valeur);"

  • Il est possible d'utiliser 10 effets différents : Greyscale, Blur, Saturate, Sepia, Hue Rotate, Invert, Brightness, Contrast, Opacity et Drop Shadow.

  • Presque chaque effet a une "échelle de valeurs" différente, alors il faut s'assurer de les consulter avant d'utiliser les filtres.

  • Il est possible de faire un effet progressif à l'aide des transitions.

  • Vous pouvez additionner plusieurs filtres sur une même image selon en les séparant par un espace "filter: type(valeur) type(valeur) type(valeur);"

Voilà, j'espère que cela a pu vous aider. Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Un problème avec un tutoriel".

À plus !

Onyx

Barre de navigation ouvrable - Mer 3 Sep 2014 - 7:51




Barre de navigation ouvrable


Salut !

Voici un petit LS d'une barre de navigation ouvrable au clic que j'ai remodelée à partir de la demande de Valou93. À savoir que j'ai utilisé du javascript pour ouvrir/fermer la barre, mais que vous pouvez utiliser ce tuto pour faire la même chose avec des targets qui vous préférez cette méthode.

Pour voir l'aperçu "fermé" : cliquez ici.
Pour voir l'aperçu "ouvert" au clic : cliquez ici.

Ce code est en deux parties.
  • Tout d'abord, nous allons installer la navigation (et le javascript qui la fait fonctionner) dans le template.
  • Puis, nous allons mettre en forme la navigation à l'aide du CSS.

Mettre un crédit vers Never-Utopia est obligatoire si vous utilisez ce LS.



1. Corps de la navigation (Template Overhall_Header)


Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_box" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > OVERHALL HEADER

Nous allons alors chercher l'ancienne navigation qui devrait être aux alentours des lignes 173 à 177 et ressembler à ceci :
Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
 </table>


Nous allons la remplacer par notre propre navigation, à savoir ceci :
Code:
<table id="navbloc" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td align="center">
      <div class="nav_links">
        {GENERATED_NAV_BAR}
      </div>
    </td>
  </tr>
  <tr>
    <td align="left">
      <span id="nav_ouvrir">Ouvrir la navigation</span>       
      <span id="nav_fermer" style="display: none;">Fermer la navigation</span>
    </td>
  </tr>
</table>
<script>document.getElementById("nav_ouvrir").onclick = function() {nav_open()}; /*Fonction pour ouvrir la navigation*/
document.getElementById("nav_fermer").onclick = function() {nav_close()}; /*Fonction pour fermer la navigation*/
function nav_open() {
  document.getElementById("nav_ouvrir").style.display = "none"; /*Fait disparition le bouton ouvrir*/
  document.getElementById("nav_fermer").style.display = "block"; /*Fait apparaître le bouton fermer*/
  document.getElementById("navbloc").style.top = "0px";} /*Fait baisser la navigation*/
function nav_close() {
  document.getElementById("nav_fermer").style.display = "none"; /*Fait disparition le bouton fermer*/
  document.getElementById("nav_ouvrir").style.display = "block"; /*Fait apparaître le bouton ouvrir*/
  document.getElementById("navbloc").style.top = "-32px";} /*Fait monter la navigation*/</script>



Donc, histoire de comprendre un peu ce qu'on a fait, nous allons regarder un peu le code que nous venons de rajouter :

  • Au tout début, il y a un tableau avec l'id "navbloc" qui nous permet de positionner notre navigation, de la même façon qu'avec la navigation normale.
  • Ensuite, dans la première cellule de notre tableau, nous avons la barre de navigation avec la class "nav_links".
  • Puis, dans la deuxième cellule, nous avons les deux boutons qui sont respectivements idenditifés avec les id "nav_ouvrir" et "nav_fermer". Le bouton "fermer" a un "display: none" pour qu'il soit invisible au départ.
  • Enfin, nous avons le javascript qui permet de fermer et d'ouvrir la navigation. Il y a déjà des explications directement dans le code, alors on va en rester là.



2. Mise en forme (CSS)


Si vous avez installé le code dans le template, vous voyez sans doute tout de suite que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme notre navigation à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
   /********************************************* NAVIGATION *********************************************/
/*Fixe la navigation en haut cachée*/
#navbloc {
  position: fixed;
  z-index: 20;
  top: -32px;
  left: 0px;
  width: 100%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

/*Barre de la navigation*/
.nav_links {
  background: #1A1815;
  border-bottom: 2px solid #000000;
  color: #88346B;
  height: 20px;
  padding: 5px;
}
/*Liens de la navigation*/
#navbloc a.mainmenu {
  font-family: monotype corsiva;
  font-size: 18px;
  color: darkgoldenrod;
  text-shadow: 1px 1px 1px #000000;
}
/*Liens de la navigation au survol*/
#navbloc a.mainmenu:hover {
  color: goldenrod;
  text-shadow: 1px 1px 1px #000000;
}

/*Boutons pour ouvrir ou fermer la navigation*/
#nav_ouvrir, #nav_fermer {
  display: block;
  width: 190px;
  margin-left: 15px;
  margin-top: -2px;
  background: #1A1815;
  border: 2px solid #000000;
  border-top: none;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  color: darkgoldenrod;
  text-shadow: 1px 1px 1px #000000;
  padding: 5px;
  font-family: Times New Roman;
  font-size: 20px;
  font-variant: small-caps;
  cursor: pointer;
  text-align: center;
}
/*Boutons au survol*/
#nav_ouvrir:hover, #nav_fermer:hover {
  color: goldenrod;
}
   /********************************************* FIN NAVIGATION *********************************************/



Pour ceux qui veulent savoir comme la barre fait pour s'ouvrir et se refermer, je vais juste donner quelques explications qui pourraient être utiles.

  • Dans le CSS du tableau "navbloc", nous avons l'attribut "top". Le "top" indique que le bloc de rechercher à -32px du haut de l'écran.
  • C'est sur cette variable qu'agit le javascript (que nous avons mis dans le template tout à l'heure).
  • Ce javascript reprend le même "top", mais en change la valeur pour "0px" lorsqu'on clique sur le bouton "ouvrir", ce qui redescend la navigation à 0px en haut de l'écran.
  • De façon semblable, lorsqu'on clique sur le bouton "fermer", cela change la valeur pour "-32px" et remet la navigation à -32px en haut de l'écran, ce qui la cache.
  • Du coup, si jamais vous souhaitez modifier les dimensions de la barre de navigation, il faudrait aller le modifier dans le CSS du tableau "navbloc" et aussi dans le javascript pour changer la valeur du "top".


C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !


Merci de laisser un message pour donner vos impressions/commentaires/remerciements ^^

Onyx

Navigation en forme d'horloge - Lun 23 Juin 2014 - 20:25




Navigation en forme d'horloge


Salut !

Voici un petit LS d'une barre de navigation en forme d'horloge dont l'aiguille pointe sur les liens survolés qui a été fait pour la demande de Dastan.

Pour l'aperçu, cliquez juste ici.

Ce code est en trois parties.
  • Tout d'abord, nous allons supprimer l'ancienne navigation et la remplacer par la notre dans le template "Overhall Header".
  • Ensuite, nous allons mettre notre navigation en forme en allant ajouter certains éléments dans le CSS.
  • Enfin, nous allons ajouter un petit javascript pour savoir qu'un nouveau message privé est arrivé dans notre messagerie. D'ailleurs, pour cette partie, je me suis servie de ce tuto : http://www.school-of-pub.net/t11850-fa-totalement-personnaliser-la-barre-de-nav.


Mettre un crédit vers Never-Utopia est obligatoire si vous utilisez ce LS.



1. Corps de la navigation (Template Overhall_Header)


Pour commencer, nous allons devoir nous débarrasser de la navigation normale afin qu'elle arrête de nous traîner dans les jambes.
Comment?
Nous allons carrément la supprimer.

Elle devrait normalement se trouver entre les lignes 273 et 277. Voici à quoi elle ressemble :
Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
 </table>



Une fois que c'est fait, il est temps d'ajouter notre propre navigation. Du coup, au même endroit où était positionné l'ancienne barre de navigation, nous allons venir mettre le code suivant :
Code:
<table cellspacing="0" cellpadding="0" border="0" align="left">
 <tr>
                                          <td align="left">
   <div class="nav_bloc" align="center">
    <div class="navv" id="accueil"><a href="/forum"><img src="http://img11.hostingpics.net/pics/578802accueil.png" alt="Accueil" /></a></div>
    <div class="navv" id="rechercher"><a href="/search"><img src="http://img11.hostingpics.net/pics/896295rechercher.png" alt="Rechercher" /></a></div>
    <div class="navv" id="membres"><a href="/memberlist"><img src="http://img11.hostingpics.net/pics/618481membres.png" alt="Membres" /></a></div>
    <div class="navv" id="groupes"><a href="/groups"><img src="http://img11.hostingpics.net/pics/826427groupes.png" alt="Groupes" /></a></div>
                                                    <div class="navv" id="profil"><a href="/profile?mode=editprofile"><img src="http://img11.hostingpics.net/pics/446898profil.png" alt="Profil" /></a></div>
      <!-- BEGIN switch_user_logged_in -->
    <div class="navv" id="mp"><a href="/privmsg?folder=inbox"><img src="http://img11.hostingpics.net/pics/860693messagerie1.png" alt="MP" id="mpO" /></a></div>
                                                    <div class="navv" id="off"><a href="/login?logout"><img src="http://img11.hostingpics.net/pics/225491onoff.png" alt="Déconnexion" /></a></div>
      <!-- END switch_user_logged_in -->
      <!-- BEGIN switch_user_logged_out -->
                                                    <div class="navv" id="s_inscrire"><a href="/register"><img src="http://img11.hostingpics.net/pics/693663sinscrire.png" alt="S'inscrire" /></a></div>
                                                    <div class="navv" id="on"><a href="/login"><img src="http://img11.hostingpics.net/pics/225491onoff.png" alt="Connexion" /></a></div>
      <!-- END switch_user_logged_out -->
                                                    <div class="navv" id="nav_aiguille"></div>
                                                    <div style="visibility: hidden;">{GENERATED_NAV_BAR}</div>
      </div></td>
 </tr>
 </table>


Donc, histoire de comprendre un peu ce qu'on a fait, nous allons regarder un peu le code que nous venons de rajouter :

  • Au tout début, il y a une table qui nous permet de positionner notre navigation, de la même façon qu'avec la navigation normale.
  • Ensuite, nous avons une "div" avec la class "nav_bloc". C'est le bloc avec l'image de l'horloge en background qui contient tous les liens de la navigation.
  • Puis, nous avons diverses "div" avec les liens de notre navigation. C'est séparé en trois parties :
    • Les liens que tout le monde peut voir.
    • Les liens entre le "BEGIN switch_user_logged_in" et "END switch_user_logged_in" que seuls les membres connectés peuvent voir.
    • Les liens entre "BEGIN switch_user_logged_out" et le "END switch_user_logged_out" que seuls les invités peuvent voir.
  • En avant dernier, nous avons l'aiguille qui tourne selon le lien sur lequel notre curseur est placé.
  • Enfin, nous avons l'ancienne navigation "GENERATED_NAV_BAR" qui est invisible mais qui nous sera utile pour récupérer le code des nouveaux MPs.

À l'exeption des images de l'aiguille et de l'horloge, toutes les images des liens peuvent être modifiées à cette étape.



2. Mise en forme (CSS)


Si vous avez installé le code dans le template, vous voyez sans doute tout de suite que ce n'est pas super du tout pour le moment.

Du coup, nous allons mettre en forme notre navigation à l'aide du code suivant que j'expliquerai ensuite :
Code:
              /*NAVIGATION*/

/*Bloc de l'horloge*/
.nav_bloc {
  background-image: url('http://img15.hostingpics.net/pics/909229montre2.png');
  width: 300px;
  height: 300px;
  position: relative;
  display: block;
  margin-top: -190px;
  margin-left: 30px;
}

/*Trucs pour les liens*/
.navv {
  position: absolute;
  display: block;
  z-index: 2;
}

/*Aiguille*/
#nav_aiguille {
  background-image: url('http://img15.hostingpics.net/pics/418642aiguille.png');
  width: 14px;
  height: 244px;
  bottom: 32px;
  left: 140px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  z-index: 1;
}

/*Positionnement des liens*/
#accueil {
  width: 100px;
  height: 27px;
  bottom: 260px;
  left: 101px;
  -webkit-transform:rotate(1deg);
  transform:rotate(1deg);
}
#rechercher {
  width: 131px;
  height: 35px;
  bottom: 200px;
  left: 184px;
  -webkit-transform:rotate(57deg);
  transform:rotate(57deg);
}
#membres {
  width: 94px;
  height: 28px;
  bottom: 100px;
  left: 218px;
  -webkit-transform:rotate(109deg);
  transform:rotate(109deg);
}
#groupes {
  width: 99px;
  height: 32px;
  bottom: 21px;
  left: 144px;
  -webkit-transform:rotate(157deg);
  transform:rotate(157deg);
}
#profil {
  width: 79px;
  height: 28px;
  bottom: 25px;
  left: 55px;
  -webkit-transform:rotate(205deg);
  transform:rotate(205deg);
}
#mp {
  width: 115px;
  height: 39px;
  bottom: 120px;
  left: -31px;
  -webkit-transform:rotate(265deg);
  transform:rotate(265deg);
}
#off, #on {
  width: 80px;
  height: 31px;
  bottom: 225px;
  left: 26px;
  -webkit-transform:rotate(315deg);
  transform:rotate(315deg);
}
#s_inscrire {
  width: 107px;
  height: 37px;
  bottom: 120px;
  left: -27px;
  -webkit-transform:rotate(263deg);
  transform:rotate(263deg);
}

/*Mouvement de l'aiguille selon le lien survolé*/
#accueil:hover ~ #nav_aiguille {
  -webkit-transform:rotate(2deg);
  transform:rotate(2deg);
}
#rechercher:hover ~ #nav_aiguille {
  -webkit-transform:rotate(57deg);
  transform:rotate(57deg);
}
#membres:hover ~ #nav_aiguille {
  -webkit-transform:rotate(109deg);
  transform:rotate(109deg);
}
#groupes:hover ~ #nav_aiguille {
  -webkit-transform:rotate(157deg);
  transform:rotate(157deg);
}
#profil:hover ~ #nav_aiguille {
  -webkit-transform:rotate(205deg);
  transform:rotate(205deg);
}
#mp:hover ~ #nav_aiguille {
  -webkit-transform:rotate(265deg);
  transform:rotate(265deg);
}
#s_inscrire:hover ~ #nav_aiguille {
  -webkit-transform:rotate(263deg);
  transform:rotate(263deg);
}
#on:hover ~ #nav_aiguille, #off:hover ~ #nav_aiguille {
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}

               /*FIN NAVIGATION*/



Maintenant, pour ceux qui veulent comprendre ce qu'ils font à la place de faire du copier/coller, nous allons découper certaines parties de ce CSS afin de comprendre comment cela fonctionne.

Premièrement, le bloc de l'horloge :
Code:
/*Bloc de l'horloge*/
.nav_bloc {
  background-image: url('http://img15.hostingpics.net/pics/909229montre2.png');
  width: 300px;
  height: 300px;
  position: relative;
  display: block;
  margin-top: -190px;
  margin-left: 30px;
}


  • Le "background-image" est image de l'horloge.
  • Le "width" est la largeur de l'image de l'horloge et est importante puisque cela délimite la largeur du bloc également.
  • Le "height" est la hauteur de l'image de l'horloge et est importante puisque cela délimite la hauteur du bloc également.
  • La "position: relative" indique que s'il y a d'autres div à l'intérieur du bloc, leur position sera définie par rapport à la largeur et à la hauteur du bloc de l'horloge.
  • Le "display: block;" indique que le bloc de l'horloge est un bloc.
  • Le "margin-top: -190px" permet de déplacer le bloc de 190px vers le haut, à savoir sur la bannière.
  • Le "margin-left: 30px" permet de déplacer le bloc de 30px vers la droite.



Deuxièmement, certaines caractéristiques des liens :
Code:
/*Trucs pour les liens*/
.navv {
  position: absolute;
  display: block;
  z-index: 2;
}


  • La "position: absolute" veut dire que la position des liens sont automatiquement liés aux bordures du bloc de l'horloge.
  • Le "display: block" indique que les liens sont des blocs.
  • Le " z-index: 2" indique que les liens sont au-dessus des éléments qui ont un "z-index" inférieur à 2 et en-dessous des éléments qui ont un "z-index" supérieurs à 2.



Troisièmement, l'aiguille comme elle est initialement :
Code:
/*Aiguille*/
#nav_aiguille {
  background-image: url('http://img15.hostingpics.net/pics/418642aiguille.png');
  width: 14px;
  height: 244px;
  bottom: 32px;
  left: 140px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  z-index: 1;
}


  • Le "background-image" est image de l'aiguille.
  • Le "width" est la largeur de l'image de l'aiguille et est importante puisque cela délimite la largeur du bloc également.
  • Le "height" est la hauteur de l'image de l'aiguille et est importante puisque cela délimite la hauteur du bloc également.
  • Le "bottom" indique que le bloc de l'aiguille est à 32px du bas du bloc de l'horloge.
  • Le "left" indique que le bloc de l'aiguille est à 140px du côté gauche du bloc de l'horloge.
  • Le "transform: rotate(0deg);" indique que le bloc de l'aiguille reste droit.
  • Le "transition: 0.5s;" indique que les mouvements de l'aiguille seront d'une durée de 0,5 seconde.
  • Le " z-index: 1" indique que les liens sont au-dessus des éléments qui ont un "z-index" inférieur à 1 et en-dessous des éléments qui ont un "z-index" supérieurs à 1.



Quatrièmement, le positionnement des liens de la navigation. Comme ils sont tous basés sur le même principe, je prendrai le lien de "rechercher" comme exemple :
Code:
#rechercher {
  width: 131px;
  height: 35px;
  bottom: 200px;
  left: 184px;
  -webkit-transform:rotate(57deg);
  transform:rotate(57deg);
}


  • Le "width" est la largeur de l'image de rechercher et est importante puisque cela délimite la largeur du bloc également.
  • Le "height" est la hauteur de l'image de rechercher et est importante puisque cela délimite la hauteur du bloc également.
  • Le "bottom" indique que le bloc de rechercher est à 200px du bas du bloc de l'horloge.
  • Le "left" indique que le bloc de rechercher est à 184px du côté gauche du bloc de l'horloge.
  • Le "transform: rotate(57deg);" indique que le bloc de rechercher est tourné de 57 degrés vers la droite.



Dernièrement, le déplacement de l'aiguille en fonction du lien survolé. Comme ils sont tous basés sur le même principe, je prendrai le lien de "rechercher" comme exemple :
Code:
#rechercher:hover ~ #nav_aiguille {
  -webkit-transform:rotate(57deg);
  transform:rotate(57deg);
}


  • Le "#rechercher:hover ~ #nav_aiguille" veut dire que quand le bloc "#rechercher" (bloc de rechercher) est survolé, il y a l'effet suivant sur le bloc "#nav_aiguille" (bloc de l'aiguille).
  • Le "transform: rotate(57deg);" indique que le bloc de l'aiguille tourne de 57 degrés vers la droite. Normalement, la rotation devrait être la même que celle qui a été appliquée sur le bloc rechercher.


J'ai modifié tous les liens des images et tout est décalé! Qu'est-ce que je fais maintenant?
Premièrement, va lire les explications du CSS si tu ne l'as pas fait.
Ensuite, il va falloir repositionner chaque lien modifié avec leurs attributs "bottom", "left" et "rotate".
N'oublie pas d'aller ajuster la rotation de l'aiguille avec la nouvelle rotation de tes liens !
Enfin... bonne chance pour ce casse-tête Twisted Evil 



3. Nouveau MP (Javascript)


Avec la navigation de base, il y a une image différente que celle de la messagerie normale lorsqu'il y a un nouveau message. Seulement, ce n'est pas une fonction automatique si on fait sa propre barre de navigation. Du coup, nous allons reproduire cet effet !

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

À ce même endroit, si vous n'avez pas activé la gestion des javascripts, il faut le faire avant de faire tout autre chose.

Ensuite, nous allons "créer un nouveau javascript".
Il va falloir lui choisir un nom. Ex: "Nouveau MP"
Ensuite, il va falloir cocher le Placement "Sur toutes les pages".

Puis, on va y coller le code suivant :
Code:
jQuery().ready(function(){
        
        /* On prend l'élément du menu de base pour savoir s'il y a un nouveau message */
        var e= $("#i_icon_mini_new_message");
        
        /* Si il y en a pas, on s'arrête là */
        if(!e.length) return;
        
        /* S'il y en a, l'image changera pour l'image de nouveau message*/
        $("#mpO").attr('src','http://img15.hostingpics.net/pics/795760messagerie2.png');
      
      
        });


Cette partie de code est expliquée directement dans le code alors on va en rester là ^^




C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !


Merci de laisser un message pour donner vos impressions/commentaires/remerciements ^^

Onyx

Bloc flottant latéral ouvrant "onclick" (javascript) - Sam 11 Jan 2014 - 5:11



Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Bouh!

Autant j'aime bien le bloc flottant latéral ouvrant "onclick" (CSS avec target) d'Okhmhaka, autant je préfère passer par le javascript pour éviter d'avoir les "#target_onglet" dans ma barre d'adresse.

Du coup, j'ai laissé tombé l'idée d'utiliser le CSS3 pour ça et me voilà avec du javascript qui vous donnera le même résultat avec une méthode différente.

Sachant que tout le monde n'adore pas nécessairement faire du graphisme, vous avez l'option d'avoir un bouton pour ouvrir/fermer l'onglet fait avec des images ou avec du texte ^^

Je vous montre un petit exemple juste ici avec la méthode qui ne demande pas d'images.



Si le bouton est une image



Dans votre template "Overhall Header", vous devez trouver l'ouverture de la balise "body". Sous phpBB2, elle ressemble à ceci :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


Voici le code du bloc flottant que vous pouvez installer suite à cette balise :
Code:
  <div id="ongleton">
    <div class="ongleton_contenu">
      Contenu du bloc
    </div>
    <img id="ongleton_ouvrir" src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" />
    <img id="ongleton_fermer" src="http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png" style="display: none;" />
  </div>
  <script type="text/javascript">
  //<!--
    $('#ongleton_ouvrir').click(function(){
      $('#ongleton_ouvrir').css("display", "none");
      $('#ongleton_fermer').css("display", "block");
      $('#ongleton').css("left", "0px");
    });
    $('#ongleton_fermer').click(function(){
      $('#ongleton_ouvrir').css("display", "block");
      $('#ongleton_fermer').css("display", "none");
      $('#ongleton').css("left", "-212px");
    });
  //-->
  </script>


Si on décortique ceci, nous avons tout d'abord un bloc (id="ongleton") qui englobe le bloc flottant et le bouton servant à l'ouvrir et à le fermer.
Ensuite, nous avons le bloc flottant (class="ongleton_contenu").
Puis, nous avons deux div, soit deux boutons.
La première image est le bouton pour ouvrir (id="ongleton_ouvrir").
La deuxième image est le bouton pour fermer (id="ongleton_fermer").
Enfin, nous avons le javascript qui fait fonctionner le tout.

Attention, dans le javascript, il  faut indiquer la largeur du bloc flottant (bordures, padding et marges inclus) en remplaçant le 212px à cet endroit :
Code:
$('#ongleton').css("left", "-212px");



Enfin, vous pourrez modifier à votre sauce le bloc flottant dans le CSS en y mettant le code suivant:
Code:
/*Bloc qui contient le bloc flottant et les boutons*/
#ongleton {
  position: fixed;
  height: 90%; /*Hauteur du bloc flottant*/
  top: 5%; /*Espace du haut*/
  left: -212px;
  z-index: 999;
  transition: 1s;
  -webkit-transition: 1s;
}
/*Bloc flottant*/
.ongleton_contenu {
  width: 200px; /*Largeur*/
  height: 100%;
  padding: 5px;
  background-color: #1B2836;
  color: #9BB9D9;
  font-size: 13px;
  font-family: Time New Roman;
  border: 2px #6993BE solid;
  border-left: none;
  border-radius: 0 30px 30px 0;
}
/*Boutons Ouvrir et Fermer*/
#ongleton_ouvrir, #ongleton_fermer {
  position: absolute;
  top: 45%;
  left: 212px; /*Mettre le bouton à 212px du bord, donc pour qu'il dépasse*/
  z-index: 999;
  cursor: pointer;
}


Voilà, votre bloc flottant est installé ^^






Si le bouton est un texte



Dans votre template "Overhall Header", vous devez trouver l'ouverture de la balise "body". Sous phpBB2, elle ressemble à ceci :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


Voici le code du bloc flottant que vous pouvez installer suite à cette balise :
Code:
  <div id="ongleton">
    <div class="ongleton_contenu">
      Contenu du bloc
    </div>
    <div id="ongleton_ouvrir">
      Ouvrir
    </div>
    <div id="ongleton_fermer" style="display: none;">
      Fermer
    </div>
  </div>
  <script type="text/javascript">
  //<!--
    $('#ongleton_ouvrir').click(function(){
      $('#ongleton_ouvrir').css("display", "none");
      $('#ongleton_fermer').css("display", "block");
      $('#ongleton').css("left", "0px");
    });
    $('#ongleton_fermer').click(function(){
      $('#ongleton_ouvrir').css("display", "block");
      $('#ongleton_fermer').css("display", "none");
      $('#ongleton').css("left", "-212px");
    });
  //-->
  </script>


Si on décortique ceci, nous avons tout d'abord un bloc (id="ongleton") qui englobe le bloc flottant et le bouton servant à l'ouvrir et à le fermer.
Ensuite, nous avons le bloc flottant (class="ongleton_contenu").
Puis, nous avons deux div, soit deux boutons.
La première div est le bouton pour ouvrir (id="ongleton_ouvrir").
La deuxième div est le bouton pour fermer (id="ongleton_fermer").
Enfin, nous avons le javascript qui fait fonctionner le tout.

Attention, dans le javascript, il  faut indiquer la largeur du bloc flottant (bordures, padding et marges inclus) en remplaçant le 212px à cet endroit :
Code:
$('#ongleton').css("left", "-212px");



Enfin, vous pourrez modifier à votre sauce le bloc flottant et les boutons dans le CSS en y mettant le code suivant:
Code:
/*Bloc qui contient le bloc flottant et les boutons*/
#ongleton {
  position: fixed;
  height: 90%; /*Hauteur du bloc flottant*/
  top: 5%; /*Espace du haut*/
  left: -212px;
  z-index: 999;
  transition: 1s;
  -webkit-transition: 1s;
}
/*Bloc flottant*/
.ongleton_contenu {
  width: 200px; /*Largeur*/
  height: 100%;
  padding: 5px;
  background-color: #1B2836;
  color: #9BB9D9;
  font-size: 13px;
  font-family: Time New Roman;
  border: 2px #6993BE solid;
  border-left: none;
  border-radius: 0 30px 30px 0;
}
/*Boutons Ouvrir et Fermer*/
#ongleton_ouvrir, #ongleton_fermer {
  position: absolute;
  top: 45%;
  left: 212px; /*Mettre le bouton à 212px du bord, donc pour qu'il dépasse*/
  z-index: 999;
  cursor: pointer;
  width: 100px;
  height: 20px;
  background-color: #1B2836;
  border: 2px solid #6993BE;
  border-bottom: none;
  text-align: center;
  color: #9BB9D9;
  padding: 5px;
  padding-top: 10px;
  border-radius: 30px 30px 0 0;
  margin-left: -42px; /*Pour coller le bouton contre le bloc flottant*/
  -webkit-transform:rotate(90deg); /*Pour tourner le texte sur le côté (Chrome et Safari)*/
  transform:rotate(90deg); /*Pour tourner le texte sur le côté*/
}


Voilà, votre onglet flottant est installé ^^




N'oubliez pas de créditer N-U è_é

Media Queries - Adapter le CSS selon le type d'écran, l'appareil, etc. - Sam 6 Oct 2012 - 15:45


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Salut !

MAJ Onyx 04/04/2017 : Le tutoriel a été modifié et bonifié grâce au tutoriel de alsacréations que vous pouvez également lire si vous le souhaitez ^^

Vous vous demandez sûrement à quoi peuvent servir les media queries ? C'est simple, comme écrit dans le titre au-dessus, ils permettent d'adapter la mise en page (css) selon le type d'écran, l'appareil utilisé, le type d'impression et autre.

Grâce à eux, on pourra avoir le même rendu d'une page web, d'un site ou d'un forum sur une tablette, un netbook (un mini ordinateur, donc un écran plus petit) et un ordinateur normal. En gros, les media queries règlent les problèmes d'affichages par rapport au types d'écrans qu'on utilise, ce qui est nettement plus agréable quand on est sur un forum par exemple.

Premièrement, regardons certains types de media queries possibles :
screen = Écran
handheld = Appareils mobiles ou de petite taille
print = Impression (parce que je suis une troll qui aime faire disparaître des choses quand les gens impriment, bwahahaha *Onyx se fait kicker*)
aural (CSS 2.0) / speech (CSS 2.1) = Synthèses vocales (pour les personnes aveugles ou ayant un handicap visuel plus de détails ici)
braille = Plages braille (pour les personnes aveugles ou ayant un handicap visuel plus de détails ici)
embossed = Imprimantes braille (pour les personnes aveugles ou ayant un handicap visuel)
projection = Projecteurs
tv = Télévision (Pour ceux qui aiment les gros écrans et branchent leur ordinateur à une télévision par exemple)

Comme vous le constatez, les media queries nous permettent de voir quel média est utilisé pour regarder/utiliser votre site/forum.

Les media queries fonctionnent un peu comme si cela envoyait un message à votre appareil qui dit "est-tu un screen?" ou "es-tu une télévision?" et votre appareil répond par "oui" ou "non".

Vous pouvez même vous amuser à plus d'information dans les questions de media, comme "es-tu un screen ET as-tu une largeur d'écran de moins de 1024px?". Comment? On va le voir, ne vous inquiétez pas ^^

À noter que la plupart des mobiles sont frustrants et se considèrent comme "screen" à la place de "handheld", malheureusement.




Passons à la pratique, donc comment utiliser les médias.

Commençons en passant par notre CSS :
Code:
/*CSS normal qui s'applique à n'importe quoi*/
.nomdeclass {
  propriété: valeur;
}

/*CSS pour les écrans qui ne dépassent pas 1024px*/
@media screen and (max-width: 1024px) {
  .nomdeclass {
    propriété: valeur;
  }
}


Le "screen" and (max-width: 1024px)" veut dire quel code sera appliqué quand si le visiteur utilise un screen (écran) dont la largeur ne dépasse pas 1024px.




On peut aussi adapter la mise en page à des écrans compris par exemple entre 1024px et 1280px.

Dans ce cas, notre code sera comme ceci :
Code:
/*CSS normal qui s'applique à n'importe quoi*/
.nomdeclass {
  propriété: valeur;
}

/*CSS pour les écrans qui dépassent 1024px et ne dépassent pas 1280px*/
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .nomdeclass {
    propriété: valeur;
  }
}


Grâce à ça, les problèmes d'affichage de la page en fonction du type d'écran utilisé peut être réglé pour que cela soit plus agréable à regarder ^^




Histoire de ne pas surcharger notre page de CSS, il est également possible d'utiliser une feuille de CSS externe.

Pour ce faire, vous ajoutez ce bout de code dans la balise "head" de votre template Overhall_header :
Code:
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="URL DE LA FEUILLE DE CSS" type="text/css" />


Comme vu plus haut, vous modifiez l'attribut "media" par ce que vous voulez affecter comme "screen and (max-width: 1024px)" ou "screen and (min-width: 1024px) and (max-width: 1280px)".
Vous mettez ensuite le lien de votre feuille CSS à la place de URL DE LA FEUILLE DE CSS.

Pour ce qui est de comment héberger une feuille de CSS, je vous réfère à ce tutoriel.




Quand on ajoute du CSS média à notre CSS de base, il ne faut pas oublier que c'est un ajout. Du coup, tout ce qu'il y a dans le CSS de base s'applique en premier et le CSS média va venir s'appliquer après le CSS de base.

Exemple :
J'ai une image à laquelle j'ai donné la largeur 500px et un bloc auquel j'ai donné un background bleu dans mon CSS de base.
Je ne mets rien dans le CSS média pour "écran de plus de 1280px".
L'image sera quand même à 500px de largeur et le bloc sera quand même bleu pour un "écran de plus de 1280px" parce que je n'ai pas indiqué le contraire dans mon CSS média.




C'est tout ce qui me passe à l'esprit, soyez indulgents envers-moi, c'est ma première fois ^^


Revenir en haut

La date/heure actuelle est Jeu 15 Nov 2018 - 17:24