AccueilDernières imagesRechercherS'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.


43 résultats trouvés pour toutes_les_versions

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 ^^

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 (Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design HAHlEmt), 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 ^^

Créer un coin sympathique pour converser (chatbox en page html) - Jeu 2 Fév 2017 - 12:15


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


Bien le bonjour à toutes et à tous.

Aujourd'hui, je viens vous proposer de coder une page HTML de votre forum pour y créer un coin sympathique pour votre CB. Pourquoi est-ce que je préfère passer par une page indépendante au lieu de mettre la CB directement sur mon forum ? Tout simplement par ce que les CB ne s'intègre pas forcément à la structure et au design réalisé.

Toutes versions ▬ CSS, HTML & Templates ▬ Aperçu (screen)

Si vous avez le moindre problème avec ce LS, n'oubliez pas que la section Problème avec mon code est à votre disposition.


Le code de la page HTML :


Pour commencer, il faut débuter une nouvelle page HTML :

Panneau d'administration (en avancée) => Modules => HTML & JAVASCRIPT => Gestion des pages HTML => Création en mode avancé.

Donnez un titre à votre page. J'ai fait au plus simple avec "tchatbox".

Maintenant insérez le code entier :

Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Titre de votre page.</title>
  <style type="text/css">
    body {
      margin: 0px;
      background-image: url('http://img15.hostingpics.net/pics/550548fondPA.png');
    }

    .reglement_CB {
      height: 610px;
      width: 470px;
      padding: 10px;
      text-align: justify;
      color: black;
      font-size: 14px;
    }

    .cb_page {
      box-shadow: 0px 0px 2px black;
      margin-top: 5px;
      margin-left: 5px;
      width: 850px;
      height: 630px;
    }

    .cb_page,
    .reglement_CB {
      display: inline-block;
      vertical-align: top;
    }
  </style>
</head>

<body>
  <iframe src="/chatbox/index.forum" class="cb_page" frameborder="0"></iframe>
  <div class="reglement_CB">
    <div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/392986titrereglecb.png" /></div><br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
    nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
  </div>
</body>
</html>


Détail du code :


Code:
<style type="text/css">
  body {
    margin: 0px;
    background-image: url('http://img15.hostingpics.net/pics/550548fondPA.png');
  }

  .reglement_CB {
    height: 610px;
    width: 470px;
    padding: 10px;
    text-align: justify;
    color: black;
    font-size: 14px;
  }

  .cb_page {
    box-shadow: 0px 0px 2px black;
    margin-top: 5px;
    margin-left: 5px;
    width: 850px;
    height: 630px;
  }

  .cb_page,
  .reglement_CB {
    display: inline-block;
    vertical-align: top;
  }
</style>

Ceci est le CSS de votre page HTML, il doit être impérativement entre les balises :
Code:
<style type="text/css"></style>

Si vous souhaitez personnaliser votre CB avec du CSS, vous devez passer par la feuille de CSS de votre forum et non dans la page HTML, sinon ça ne prendra pas en compte vos modifications.


Code:
<iframe src="/chatbox/index.forum" class="cb_page" frameborder="0" ></iframe>

Ceci est votre CB mise en iframe pour l'intégrer à la page. Elle a la classe "cb_page", donc dans le CSS vous pouvez lui donner les propriétés que vous souhaitez, notamment sa hauteur (height) et sa largeur (width). La hauteur et la largeur sont impératives sinon votre CB sera toute petite.


Code:
<div class="reglement_CB"><div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/392986titrereglecb.png" /></div><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</div>

J'ai mis en place cette partie pour incorporer le règlement de la CB. Vous pouvez y mettre ce qui vous chante, comme une image, des liens menant à divers sujets de votre forum, etc.


Faire venir les membres sur la page.


Votre salon privé est opérationnel, mais il faut faire venir les membres maintenant.

Il n'y aura rien de plus simple dans la pratique. Il suffit d'insérer le lien de votre page HTML où vous le souhaitez :

Spoiler:


Pour ma part, j'ai fait une image de présentation et l'ai inséré dans le template : "overall_footer_begin"

Code:
<div style="text-align: center;"><a href="Lien de votre page HTML" target="_blank"><img src="Lien de l'image de présentation" alt="Visiter la chatbox" /></a></div>


A vous de voir comment vous voulez rendre visible cette invitation à la papote.


Merci d'avoir suivi ce petit LS. N'oubliez pas de créditer Never-Utopia si vous l'utilisez.

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:





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:




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 !

Shoki

Animations simples en CSS3 - Sam 27 Aoû 2016 - 13:19



Animations simples en CSS3


Bien le bonjour, cher curieux ! Je poste mon premier tutoriel de codage pour... parler d'animations. Et attention, j'ai dit "animations", pas "transition" ou "transformations". D'ailleurs, vous n'aurez pas besoin de ces derniers pour comprendre ce tutoriel, je ne vais parler que des animations.

 
Tu peux pas donner un exemple au lieu de parler d'"animations" ?


En effet, ça serait plus pratique. Voici donc un petit exemple d'animation : clique ! N'est-ce pas magnifique ? En général, les animations se font avec des langages comme le JavaScript, mais ici nous allons en réaliser des simples rien qu'avec le CSS3 ! Tu veux faire la même chose ? Dans ce cas, il te suffit de suivre ce tutoriel !

 
Je précise que j'ai déjà fait ce tutoriel sur un autre forum, même si je vais remanier mes explications pour ici.
Au passage, je m'excuse s'il y avait déjà un tutoriel sur ça x:


 
Ne fonctionne pas sur les versions d'Internet Explorer (Microsoft Edge) antérieures à la 10 ! Bien veiller à mettre des préfixes. Tutoriel sur les préfixe : ici.


Comment ça marche ?


Reprenons notre petite animation de plus haut, à savoir celle-ci. Mais que se cache donc derrière ce carré qui change de couleur ? Regardons de plus près le CSS, ainsi que le HTML (il faut bien intégrer votre code quelque part, tout de même) :
Code:
/***CSS***/
/*Firefox 5.0*/
-moz-@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
/*Safari 4.0, Opera 15.0, Chrome 4.0*/
-webkit-@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
/*Opera 12.0*/
-o-@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
/*Standard*/
@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
div {
   width: 300px;
   height: 300px;
  /*Syntaxe avec super-propriété "animation"*/
  -moz-animation: nuxemple 3s linear 0s infinite alternate;
  -webkit-animation: nuxemple 3s linear 0s infinite alternate;
  -o-animation: nuxemple 3s linear 0s infinite alternate;
  animation: nuxemple 3s linear 0s infinite alternate;
}


<!-- HTML -->
<div></div>


Pourquoi je n'ai aucune class (ou id) dans mon HTML ? Tout simplement parce que j'ai sélectionné toutes les divs de mon code, donc ici la seule div que j'ai. Mais passons au CSS. Vous remarquerez qu'un drôle d'élément a fait son apparition et que la fin du CSS est incompréhensible. Mais pas de panique, je la décortique pour vous !

Partie avec le @keyframes


Je vais m'attarder ici uniquement sur la syntaxe "standard", tout simplement parce que c'est exactement la même chose pour les syntaxes préfixées (avec le préfixe en plus). Observons donc ceci :
Code:
@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}

Ma propriété ici est @keyframes, suivit du nom de l'animation (ici, nuxemple, mais vous pouvez lui donner n'importe quel nom, du moment que vous mettez exactement le même -à la lettre près- partout). Jusque-là, pas vraiment de problèmes. C'est la suite qui se complique. Ici, notre bloc changera quatre fois de couleur. C'est vrai, c'est évident, mais je suis sûr que les deux messieurs au fond sont en train de se demander comment ça se passe.
Imaginons, la durée de mon animation est de 100%. A 0%, donc au début, mon carré est bleu. A 25% de l'animation, il devient rouge. Puis à 25%, sa couleur vire au jaune et à 100% (à la fin donc), je me retrouve avec un carré vert. Simple, non ? Sachez tout de même que si vous ne spécifiez pas le nombre de fois où l'animation se répète, vous vous retrouverez avec un carré vert à la fin, puis de nouveau bleu et... et c'est tout. Par chance, il existe quelques astuces pour contrer cela, mais nous verrons ceci plus tard.

Vous organisez comme vous le sentez vos nombre de changement de couleur et pourcentages, en sachant que lorsque vous ne voulez que deux couleurs, il faut coder ceci :
Code:
@keyframes nuxemple {
from { background: red; }
to { background: yellow; }
}

Ici, mon élément passera de rouge à jaune, ce qui vous donne quelque chose de ce genre. Bien sûr, ici j'ai usé de ma petite tactique de triche pour ne pas que ça s'arrête brusquement.

 
J'ai pas envie de me contenter de changer uniquement la couleur de fond...

Justement, j'allai en venir à ce point-ci : on peut aussi faire bouger notre carré, comme ceci ! J'avoue avoir utilisé ma petite technique pour ne pas avoir un arrêt brutal. Et voici le petit code pour arriver à ce petit miracle :

Code:
/*Standard*/
@keyframes nuxemple {
  0% {background: blue; left: 0px; top: 0px;}
  25% {background: red; left: 100px; top: 0px;}
  75% {background: yellow; left: 100px; top: 100px;}
  100% {background: green; left: 0px; top: 0px;}
}

div {
   width: 300px;
   height: 300px;
      position: relative; /*PENSEZ A METTRE VOTRE ELEMENT EN POSITION RELATIVE, FIXE OU ABSOLUE SI VOUS VOULEZ QUELQUE CHOSE QUI BOUGE*/
  /*Syntaxe avec super-propriété "animation"*/
  animation: nuxemple 3s linear 0s infinite;
}


En plus de la propriété background, j'ai ajouté une des propriété pour déterminer une position (top, left, right, bottom). Puis j'ai mis mon petit carré en position relative (très important si vous souhaitez que votre bloc bouge, mais ça marche aussi en fixe et en absolue), et j'ai laissé la magie opérer !

 
Ouais, c'est joli ton truc, mais la second partie du code, c'est quoi ?

Justement, je vais l'expliquer de ce pas ~

Partie avec la (super)propriété animation


 
Je vais tout d'abord expliquer ce que j'appelle une super-propriété : c'est une propriété... qui réunit d'autres propriétés en une seule ! Exemple flagrant : margin. Au lieu de taper :
Code:
margin-top: 10px;
margin-right: 50px;
margin-bottom: 20px;
margin-left: 45px;

ce qui peut s'avérer barbant à la longue, on réunit ces quatre propriétés en une seule, margin, et on obtient ceci :
Code:
margin: 10px 50px 20px 45px; /*traduction : margin: haut droite bas gauche*/

Pratique pour économiser des lignes, non ? Il existes d'autres super-propriétés, comme background, padding et... animation.


Voici donc la seconde partie de notre CSS
Code:
animation: nuxemple 3s linear 0s infinite alternate;

Vu comme ça, c'est vraiment du charabia, n'est-ce pas ? Mais chaque valeur correspond à une propriété. Je vais donc remplacer toutes ces valeurs par leurs propriétés correspondantes :
Code:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction


Ça fait beaucoup à retenir, surtout que certaines on un nom assez obscure... Mais pas de panique, je vais vous expliquer à quoi correspond chaque propriété !

  1. animation-name :Ici, pas très compliqué à comprendre : le nom de l'animation (ici nuxemple)

  2. animation-duration : Là non plus, pas trop de difficultés : la durée de l'animation (5s, 700ms... valeur par défaut: 0). A DÉFINIR ABSOLUMENT. (ici 3s, soit 3 secondes)

  3. animation-timing-function : Là, c'est un peu plus obscure : il s'agit de la "vitesse" de l'animation (linear, ease... par défaut : ease. Plus de détails plus bas.) (ici linear)

  4. animation-delay : Là, pas vraiment difficile à comprendre non plus, c'est le délai de l'animation ; si elle commence au bout de 5s, 400ms... Valeur par défaut : 0s. (ici 0s, donc la valeur par défaut)

  5. animation-iteration-count : Un nom compliqué pour définir une chose simple : ceci définit le nombre de fois où l'animation va se "répéter" ; une fois ce nombre écoulé, l'animation s'arrête (si vous mettez "3", l'animation va se répéter 3 fois avant de s'arrêter). Par défaut, c'est une fois. Possibilité de mettre infinite en valeur pour qu'elle se déroule indéfiniment. (ici infinite)

  6. animation-direction : Un nom un peu flou ; cette propriété a deux valeurs : reverse et alternate. reverse va "inverser" l'animation (par exemple, mon bloc doit d'abord être bleu, puis rouge puis vert ; là il va d'abord être vert, puis rouge et enfin bleu) et alternate va "alterner" l'animation, grosso-modo la faire dans l'ordre défini (par exemple rouge, vert, bleu) puis inverser (bleu, vert, rouge si je reprends mon exemple) et ce, durant tout le temps de l'animation. Attention, si tu as, par exemple, définit que l'animation se déroulera trois fois, la première fois sera "normale", la seconde "alternée" et la dernière normale. (ici alternate)


Voici donc notre fameux code avec toutes ces propriétés :
Code:
div {
/*...*/
animation-name: nuxemple;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 0s; /*Je pouvais carrément enlever cette partie, car la valeur par défaut est 0*/
animation-iteration-count: infinite;
animation-direction: alternate
}

La super-propriété raccourci bien le code, n'est-ce pas ? Néanmoins, sachez que ce code plutôt long a le même effet que la super-propriété.

   
C'est quoi les valeurs de "animation-timing-function" ? Avec des détails si possible.

Avant d'expliquer cela, il faut savoir qu'on retrouve ces timing-function dans les transitions
ease : Début rapide, ralenti sur la fin. Valeur par défaut.
linear : Vitesse constante sur toute la transition.
ease-in : Début lent, s'accélère de plus en plus.
ease-out : Début rapide, ralenti de plus en plus.
ease-in-out : Début et fin de la transition lents.


Après la théorie, la pratique !


Après une séance de décorticage, nous passons maintenant à... bah, la pratique. Mais soyez sans crainte, je vais vous aider pas à pas ~

Ce que nous allons donc faire, c'est un rond normalement violet qui va devenir rouge, rose jaune et orange. Et parce que j'aime bien compliquer les choses, notre rond va bouger. Dit comme ça, ça à l'air simple, mais attendez voir...

Je n'utilise pas les préfixes pour cet exemple, mais n'oubliez pas de les mettre !


Pour commencer, ouvrez votre feuille de style CSS ou de tout autre endroit où vous pourrez mettre le CSS. Une fois fait, nous allons ouvrir notre... aller, on a vu ça plus haut... ah, la dame du deuxième rang... Oui ! Exactement ! Nous allons donc introduire notre CSS par notre fameux @keyframes ! Mais pas que. Il vous faut aussi quelque chose d'important... Mais si, vous savez quoi. C'est pas suffisant le @keyframes, il faut... nommer l'animation ! Vous l'appelez comme vous le souhaitez, moi je vais l'appeler... nu-exo. On ne me juge pas, s'il vous plaît. Donc, notre CSS ressemble à ceci.

Code:
@keyframes nu-exo {

}


Je laisse un espace exprès pour pouvoir mettre la suite du code. Une fois ceci fait, il nous faut mettre des propriétés à l'intérieur. Rappelez-vous, nous (enfin, je) voulons un rond violet qui devient successivement rouge, rose, jaune et orange. Nous allons donc utiliser... les pourcentages vus au début.
Code:
@keyframes nu-exo {
0% {background: #A93A8C;}
32% {background: #E80101;}
64% {background: #F476A9;}
76% {background: yellow;}
100% {background: #F6620C;}
}

Comme vous pouvez le voir, j'ai mit un peu ce que je voulais dans les pourcentages, mais sachez que vous devez obligatoirement avoir 0% au départ et 100% à la fin. Si vous préférez avoir 3 couleurs, 6 couleurs ou même une dizaine, adaptez les pourcentages en fonction de ce que vous souhaitez. Rappelez-vous que pour deux couleurs, le code est le suivant :
Code:
@keyframes nu-exo {
from {propriété: valeur;}
to {propriété: valeur;}
}


Je veux pas mettre du rose, c'est pas viril...

Pas de problème ! Si vous souhaitez avoir d'autres couleurs, vous avez deux choix : soit utiliser les noms de couleurs anglais (red, yellow, green, blue...) ou, beaucoup moins limité, les couleurs hexadécimales. Comme il est impossible de savoir à vu de nez ce que fera #56AEBC par exemple, vous pouvez aller sur ce site et choisir vos couleur en toute tranquillité ~ Vous pourrez également constater que les couleurs que j'ai prise pour cet exemple sont effectivement du violet, du rouge, du rose et du orange, et que la couleur que j'ai "composé" totalement au hasard (à savoir #56AEBC) correspond à du bleu.
Mais revenons. Dans la fameuse seconde partie du code, nous allons donner une class à notre rond (pour moi, ça sera "rond". Effectivement, je ne vais pas chercher très loin xD) et nous allons lui mettre des propriétés :

Code:
.rond {
width: 150px;
height: 150px;
border-radius: 150px; /*arrondi les bords et forme ici un rond*/
background: #A93A8C; /*important si vous ne voulez pas vous retrouver avec un rond invisible à la fin de l'animation*/
animation-name: nu-exo;
animation-duration: 3s; /*vous pouvez mettre plus longtemps. Sachez qu'il est important de définir une durée !*/

Il ne reste plus qu'à intégrer tout ça dans le HTML...

Code:
<div class="rond"></div>
<!-- Si ça vous chante, vous pouvez écrire un mot d'amour dans votre cercle ~ -->


Pour le moment, nous avons ceci. Vous pouvez constater que, effectivement, l'animation s'arrête au bout d'un moment.  Niveau code, nous avons cela :
Code:
/*CSS*/
@keyframes nu-exo {
0% {background: #A93A8C;}
32% {background: #E80101;}
64% {background: #F476A9;}
76% {background: yellow;}
100% {background: #F6620C;}
}

.rond {
width: 150px;
height: 150px;
border-radius: 150px;
background: #A93A8C;
animation-name: nu-exo;
animation-duration: 3s;

<!-- HTML -->
<div class="rond"></div>


... Dites, on n'aurait pas oublié quelque chose, par hasard ? ... Mais oui, notre rond doit bouger ! Pour cela, il nous suffit de mettre notre élément en position relative (ou absolute ou fixe) si vous voulez que ça bouge ~  Ensuite, nous retournons dans notre CSS et nous allons donner du mouvement au bloc. Pour cela, rien de plus simple, il suffit d'utiliser les propriétés top, bottom, left ou right suivi d'une valeur en pixels. Un peu comme ici :

Code:
@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}

.rond {
      position: relative;
   width: 150px;
   height: 150px;
      border-radius: 150px;
      background: #A93A8C;
  animation-name: nu-exo;
  animation-duration: 3s;
}


Et nous avons ceci ! Pas mal, non ? ... Comment ça, il y a un détail qui gêne ? L'arrêt brutal ? Nous allons donc masquer cela en utilisant certaines propriétés précédemment vues ! Pour plus de clarté, je vais utiliser la super-propriété puis montrer ce que ça donne avec les propriétés séparées. Nous avons donc une première astuce qui s'ouvre à nous : utiliser infinite. Ce qui nous donnerait :
Code:
animation: nu-exo 3s ease-in-out 0s infinite;
/*OU*/
animation-name: nu-exo;
animation-duration: 3s;
animation-timing-duration: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;


Ce qui donne ça. Si ça ne vous va toujours pas, vous pouvez toujours taper ceci :
Code:
animation: nu-exo 3s ease-in-out 0s infinite alternate;
/*OU*/
animation-name: nu-exo;
animation-duration: 3s;
animation-timing-duration: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;


Et pourquoi à un endroit ça va plus vite qu'un autre ? Je vais expliquer ça en donnant un exemple tout bête. Imaginez que votre animation soit un facteur qui doit livrer ses courriers/colis/lettres dans un temps limite, ici 1 minute, soit 100%. Il commence donc à 0%, soit au début, et dépose son premier colis à 32% du temps. Bon, il a le temps, ça va. Le second paquet, il a pris plus de temps et du coup, il le livre quand il est à 64% du temps. Du coup, il va accélérer et à 76% du temps, il a livré le troisième colis. Lui restant plus de temps que prévu, notre facteur va livrer son quatrième et dernier colis pile à la fin du temps limite ; il a donc rempli sa mission de tout livrer en une minute. L'animation, c'est pareil. L'élément a un certains temps que vous définissez pour compléter l'animation en entier. Et suivant les pourcentages que vous lui attribuez, elle va aller plus ou moins vite par endroit.

Et voilà, notre animation est finie ! Rien ne vous empêche cependant de rajouter quelques petites touches personnelles. Personnellement, en rajoutant tous les préfixes et tout le tralala, j'ai obtenu ceci :

Code:
/*CSS*/
/*Firefox 5.0*/
-moz-@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
/*Safari 4.0, Opera 15.0, Chrome 4.0*/
-webkit-@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
/*Opera 12.0*/
-o-@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
/*Standard*/
@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
.rond {
      position: relative;
   width: 150px;
   height: 150px;
      border-radius: 150px;
      background: #A93A8C;
      -moz-animation: nu-exo 3s ease-in-out 0s infinite alternate;
      -webkit-animation: nu-exo 3s ease-in-out 0s infinite alternate;
      -o-animation: nu-exo 3s ease-in-out 0s infinite alternate;
  animation: nu-exo 3s ease-in-out 0s infinite alternate;
}


<!-- HTML -->
<div class="rond"></div>


C'est donc la fin de ce tutoriel. Je ne vous ai ici appris que les bases, mais sachez qu'en creusant un peu, vous pourrez faire de belles choses ! Attention toutefois à ne pas en abuser, vous pourrez faire mal aux yeux de ceux qui regarde votre carré magique ~ Néanmoins, voici les différents points importants à retenir :

• N'oubliez pas de donner un nom à votre animation ;
• Peut importe le nombre de % que vous mettez, une animation doit toujours commencer par 0% et finir par 100% ;
• Pour une animation ne comprenant que deux couleurs (ou autre), écrire
Code:
@keyframes nomAnimation {
from {propriété: valeur;}
to {propriété: valeur;}
}

• Si vous voulez que votre élément bouge durant l'animation, n'oubliez pas de le mettre en position relative, absolue ou fixe ;
• Suivant vos %, l'animation n'ira pas forcément à la même vitesse d'un endroit à l'autre ;
• Arrivé à sa fin, l'animation s'arrête brutalement. Si vous voulez contrer ça, utilisez des méthodes telles que
Code:
animation-iteration-count: infinite;

• Si vous voulez raccourcir au maximum votre code, utilisez la super-propriété animation, qui s'écrit :
Code:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

(remplacer les propriétés par des valeurs)

A vous de jouer maintenant !

[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:


Version phpBB3:


Version PunBB:


Version Invision:





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:


Version phpBB3:


Version PunBB:


Version Invision:





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:




Petits exemples de résultats différents de balises après personnalisation :
https://2img.net/r/hpimg15/pics/296960171.jpg
https://2img.net/r/hpimg15/pics/998191602.jpg
https://2img.net/r/hpimg15/pics/833452243.jpg
https://2img.net/r/hpimg15/pics/378846444.jpg
https://2img.net/r/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;
}

Astuce - Retirer les retours à la ligne en haut des signatures - Dim 24 Juil 2016 - 20:09



Enlever l'espace en haut de la signature



Une petite astuce pour les codeurs qui veulent personnaliser l'affichage des signatures.

Sur forumactif, les signatures ont toujours 2 retours à la ligne (balises br) qui s'ajoutent au début et vont créer un espace non désiré.

C'est à dire que si je veux styliser ma signature en lui mettant une couleur de fond, ou une bordure, ou des marges intérieures, j'aurai toujours un grand truc en haut qui déséquilibre.

Exemple



J'ai voulu mettre un fond bleu à ma signature, et des marges à l'intérieure mais... J'ai un grand espace en haut !
Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design Iqfy6eE

Une fois le code ajouté, je n'ai plus le soucis des retours à la ligne en haut :
Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design GyiR68D

Code



Pour enlever seulement ces 2 balises br là, il suffit d'ajouter ce petit code CSS :
Code:
/* Enlever espaces en haut de la signature */
.signature_div > br:nth-of-type(-n+2) {
  display: none;
}


La classe "signature_div" que j'utilise est celle présente par défaut autour de la signature dans le template viewtopic_body.
Code:
<div class="signature_div">{postrow.displayed.SIGNATURE}</div>


Onyx a écrit:
Si je peux me permettre, cette div n'existe pas pour PunBB. À la place, le CSS à utiliser serait celui-ci :
Code:
/* Enlever espaces en haut de la signature */
.sig-content > br:nth-of-type(-n+2) {
  display: none;
}


Pensez à faire un lien de remerciement vers Never Utopia pour la petite astuce Wink

Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Si vous avez des problèmes avec ce LS, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

NyoTheNeko

Les margin et les padding - Sam 2 Jan 2016 - 14:03



Margin & Padding


Bonjour à vous les loulous! :hug:
Aujourd'hui, je vous propose un petit tuto tout simple pour vous expliquer un petit concept qui, pour les débutants, peut parfois être difficile à comprendre: les margin et les padding. En soi, une fois qu'on a compris de quoi il en retourne, il est facile de manier les blocs sans trop de problème avec les tailles.

À quoi ça correspond?


Bon, je vous lance des termes, comme ça, en pleine figure: mais à quoi est-ce que ça correspond exactement? Alors tout simplement, le "margin" représente la marge, c'est à dire, la distance entre votre bloc et un autre.
Commençons par un petit exemple. Voici deux blocs, un rouge et un noir:

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black;"></div>


Ce n'est pas le sujet principal mais je vous explique rapidement le code plus haut.
Tout d'abord, je donne à mes deux div un display: inline-block, qui me permettra de les mettre côte à côté. Je fais cela surtout pour qu'il soit plus aisé de voir l'effet qu'ont les marges pour la suite de l'exemple. Le vertical-align: top me permet également de dire, que si je les veux côte à côte, je veux aussi que le haut de chaque bloc soit aligné. J'aurai pu également mettre "middle" ou "bottom", si je voulais que les deux blocks soient centrés en hauteur l'un par rapport à l'autre, ou alors que le bas de chaque bloc soit aligné.
Ensuite, à l'aide de height et width je donne une hauteur puis une largeur à mes blocs.
Enfin background me permet de donner une couleur de fond à mes blocs, respectivement rouge (red) et noir (black).


Vous remarquez donc que ces deux blocs sont collés l'un contre l'autre. À présent, si je rajoute une marge avec l'aide de margin au premier, ils ne le seront plus:

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; margin: 10px;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black;"></div>


Nous remarquons ici deux choses. Premièrement: margin crée une marge autour de l'ensemble du bloc, ce qui veut dire qu'il y a une marge en bas, mais aussi en haut. Pour que vous puissiez le voir, voici une représentation visuelle de la marge (en jaune):
Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design 1452862271-1
Une autre chose que vous aurez remarqué également, c'est que le bloc de droite s'est aligné, non pas avec le haut du bloc, mais le haut du bloc avec sa marge, et donc il ne semble plus que les deux blocs soient alignés.
Dans la prochaine section, je vous expliquerais pourquoi.

Passons à présent au padding. En français, le padding peut au mieux se traduire par du rembourrage, mais en soi, ce mot peut ne pas vous dire grand chose, et c'est normal.
Reprenons nos deux carrés, mais rajoutons cette fois-ci du texte dans le premier:
Je suis un carré rouge.

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black;"></div>


Le code ici est fondamentalement le même qu'avant, si ce n'est qu'on a rajouté le color: white; qui permet de donner la couleur au texte. Ainsi, tout texte dans le premier carré aura une couleur blanche.


Vu que je n'ai pas de marge, les deux carrés sont collés, mais également le texte à l'intérieur est collé aux bords du carré. À présent, rajoutons un peu de rembourrage avec l'aide de padding:
Je suis un carré rouge.

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; padding: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black;"></div>


Là on remarque à nouveau deux choses: le fait que le texte n'est plus collé aux bords du bloc, donc qu'il y a une sorte de "marge intérieure" (ce fameux rembourrage justement). On remarque que le rembourrage fait également tout le tour interne du bloc.
Voici une image pour vous représenter visuellement le padding, ici en violet:
Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design 1452862886-2

Vous pouvez voir aussi que le bloc rouge est à présent plus haut (mais aussi plus large bien que ce soit moins marquant) que le noir. Pourtant, les valeurs indiqués dans height et width dont les même, ainsi, ils devraient avoir la même taille, non?
Eh bien je réponds dans la prochaine section! Wink

Notez que j'aurai très bien pu mettre aussi une autre div ou tout autre élément, comme une image par exemple, dans le bloc. J'ai simplement choisi d'utiliser du texte, mais le padding aura un effet sur tout ce qui se trouve à l'intérieur du bloc.


Comment utiliser ces propriétés?


Avant d'aller vous expliquer plus en profondeur les effets exact de margin et padding sur votre bloc, je vais vous expliquer comment utiliser ces propriétés. Avec les codes plus haut, vous avez probablement deviné comment mettre une marge autour de l'ensemble de vote bloc, mais il y a plusieurs façons pour ne mettre des marge qu'à des endroits spécifiques, ou encore, des marges différentes à chaque côté. Il en va bien sûr de même pour le rembourrage.

Dans la suite du texte, je n’écrirais que "marges", mais c'est en réalité pour éviter de mettre à chaque phrase margin/padding, ou marge/rembourrage à chaque fois, vu que les propriétés sont très largement les même.

Notez également que le code de base pour chaque exemple est ceci:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>



Donc comme vous l'avez vu plus haut, pour mettre une marge tout autour d'un élément, il suffit d'utiliser la propriété seule avec une seule et unique valeur. Voici un exemple avec des marges de 10 pixels:
Code:
margin: 10px;
padding: 10px;


En l'utilisant sur le carré rouge:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin: 10px; padding: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>


Maintenant, imaginez que je ne veuille des marges qu'à gauche. Il me suffit en réalité de rajouter le suffixe "left" le mot pour gauche en anglais. Voici un exemple avec des marges de 10 pixels:
Code:
margin-left: 10px;
padding-left: 10px;


Voilà ce que cela donne si je mets les marges au carré noir:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white; margin-left: 10px; padding-left: 10px;">Je suis un carré noir</div>


Il en va de même pour chacun des côtés. Il suffit de rajouter le suffixe correspondant. Donc "top" pour le haut, "bottom" pour le bas, et enfin, "right" pour la droite.
Code:
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;


Voici un exemple pour chaque.
Marges à droite pour le rouge:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin-right: 10px; padding-right: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>


Marges en haut sur le rouge:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin-top: 10px; padding-top: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>


Marges en bas sur le rouge:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin-bottom: 10px; padding-bottom: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>


Visuellement parlant, le dernier ne semble pas faire grand chose, mis à part allonger le bloc rouge. Cependant, on peut voir qu'il y a bien une marge en bas. Preuve en image, avec le padding en violet et le margin en jaune:
Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design 1452863970-3


Vous pouvez bien évidemment combiner les quatre côtés pour avoir des marges différentes à chaque côté. Ainsi, prenons cet exemple:
Code:
margin-left: 10px;
margin-right: 5px;
margin-top: 20px;
margin-bottom: 10px;
padding-left: 10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom: 10px;


Je vais donc appliquer les margin au rouge et appliquer les padding au noir:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin-left: 10px; margin-right: 5px; margin-top: 20px; margin-bottom: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white; padding-left: 10px; padding-right: 5px; padding-top: 20px; padding-bottom: 10px;">Je suis un carré noir</div>


Visuellement, avec les padding en violet et les margin en jaune:
Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design 1452864228-4Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design 1452864226-5

Vous avez cependant aussi la possibilité, plutôt que d'utiliser chaque propriété de top, bottom, left et right à chaque fois, de tout mettre en une ligne. Pour ceci, c'est très simple: il suffit de mettre les quatre valeurs, l'une après l'autre, en suivant ce sens: top, right, bottom et enfin left (donc haut, droite, bas et gauche). Pour vous en rappeler, vous pouvez imaginer faire un cercle en suivant les aiguilles d'une montre dans votre tête en commençant par en haut.
Ainsi, l'exemple précédent devient:
Code:
margin: 20px 5px 10px 10px;
padding: 20px 5px 10px 10px;


Et si comme plus tôt j'applique les margin au rouge et les padding au noir, on a bien:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin: 20px 5px 10px 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white; padding: 20px 5px 10px 10px;">Je suis un carré noir</div>


Notez qu'on peut également réduire le nombre de valeurs que l'on met, et ainsi "fusionner" plusieurs valeurs, mais cela suit des règles.

Par exemple, si les marges n'ont que trois valeurs:
Code:
margin: 20px 5px 10px;
padding: 20px 5px 10px;

Ici donc, top aura 20 px, left et right en auront 5px et bottom aura 10px. Ce sont donc les valeurs de droite et gauche qui seront les même.

Si les marges n'ont que deux valeurs:
Code:
margin: 20px 5px;
padding: 20px 5px;

Ici donc, top et bottom auront 20 px; left et right en auront 5px. Ce sont donc les valeurs haut et bas, ainsi que de droite et gauche qui seront les même. La valeur de top & bottom arrive en premier, celle de left & right en second.

Et comme nous l'avons vu tout au début, une seule et unique valeur donne les marge des quatre côtés:
Code:
margin: 20px;
padding: 20px;


Effets de margin et padding


Comme nous avons pu le voir un peu plus tôt, il est temps de voir les effets qu'ont les margin et padding sur les blocs, et leur interaction avec les autres éléments d'une page.

En réalité, le padding et le margin agissent sur la taille d'un élément, et plus particulièrement sur la place que ce dernier prend sur une page. En effet, en temps normal, la taille d'un élément, est pour sa hauteur height + border et pour sa largeur width + border.

Faites tout de même attention, car le border (= la bordure) fait, en général, tout le tour du bloc. Il faut donc compter autant la bordure de gauche que celle de droite en largeur (celle du haut + celle du bas en hauteur) dans votre calcul. Ainsi, si votre bordure est partout de 5 px, vous avez en tout 10 px de bordure en hauteur qui s'ajoute à la hauteur donnée de l'élément, idem pour la largeur.
Cependant, si vous n'avez qu'une bordure en haut de 5 px et nulle part ailleurs, vous n'avez que 5 pixels qui se rajoute à la hauteur de votre élément.


Ainsi, si on prend un bloc de 200 de haut et 200 de large, avec une bordure de 50 pixels, on a en tout un bloc de 300 de large et 300 de haut. Donc quelque chose comme ça:

Code:
<div style="height: 200px; width: 200px; border: 50px solid black; background: white; margin: auto;"></div>


Hey! C'est quoi ce margin: auto; me direz-vous, et c'est normal parce que j'en n'ai pas parlé. Le margin: auto vous permet en réalité de centrer sur la page ou dans l'élément contenant tout élément à largeur spécifiée et de type bloc. Cela correspond donc à mettre un margin-left: auto; margin-right: auto;. Vous pouvez rajouter des autres marges (de haut et de bas) en les rajoutant à la suite dans le CSS. Si vous les mettez avant, le margin: auto va les "annuler".
Pour savoir pourquoi, je vous conseille le tuto sur l'ordre et l'héritage de Manumanu.


Maintenant, si je venais à ajouter un padding, la taille de l'élément se modifierait en conséquence. Ainsi, au lieu d'avoir le calcul de plus haut, j'ai à présent: pour sa hauteur height + border + padding et pour sa largeur width + border + padding.

Notez que la réflexion sur combien est ajouté est le même que pour le border, vu que le padding fait aussi tout le tour de l'élément, selon les valeurs indiqués.


Donc reprenons notre bloc de 200 de haut et 200 de large, avec une bordure de 50 pixels, mais rajoutons un padding de 100px. On a donc en tout un bloc de 500 de large et 500 de haut. En effet, on avait les 300 d'origine (bordure + taille), mais on rajoute encore 200 de padding, vu qu'on a en haut et en bas (respectivement à gauche et à droite) 100 de padding, ce qui font 200 en tout.

Cela donne donc:

Code:
<div style="height: 200px; width: 200px; border: 50px solid black; background: white; margin: auto; padding: 100px;"></div>


Voici une image pour vous le représenter:
Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design 1452866498-6

Les margin, quant à elles, ne vont pas visuellement agrandir l'élément, mais va influencer la place que va prendre notre bloc sur la page. Par exemple, je vais à présent ajouter deux blocs à mon exemple. Un qui va venir à sa droite, et un qui sera juste en-dessous. N.B. : je vais retirer le margin: auto au bloc et mettre un display: inline-block; vertical-align: top;.


Code:
<div style="display: inline-block; vertical-align: top; height: 200px; width: 200px; border: 50px solid black; background: white; padding: 100px;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red;"></div><div style="height: 100px; width: 100px; background: blue;"></div>


On remarque donc actuellement que la "place" que prend mon élément n'est nulle autre que sa taille, c'est à dire: taille + bordure + padding. Cependant, avec une marge, la place que prendra mon élément sera: taille + bordure + padding + margin.

Donc reprenons notre bloc de 200 de haut et 200 de large, avec une bordure de 50 pixels et padding de 100px. Si on rajoute une marge de 100 px, mon bloc prendra 700 de large et 700 de haut. En effet, on avait les 500 d'origine (bordure + taille + padding), mais on rajoute encore 200 de marge, vu qu'on a en haut et en bas (respectivement à gauche et à droite) 100 de margin, ce qui font 200 en tout.

Dans notre exemple, cela donne ceci:

Code:
<div style="display: inline-block; vertical-align: top; height: 200px; width: 200px; border: 50px solid black; background: white; padding: 100px;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red;"></div><div style="height: 100px; width: 100px; background: blue;"></div>


Le carré rouge est passé sous notre bloc principal!

En effet, parce que la place que prend le grand bloc est trop "grande", le petit bloc rouge n'a plus la place de se mettre à côté de lui, et de ce fait, va passer à la ligne suivant. Ligne suivant, qui se retrouve donc sous la marge du grand bloc. Ainsi, quand vous utilisez les margin et padding, vous devez faire attention à leur valeur, car c'est avec des valeurs trop grandes que les différents éléments passent "à la ligne" car ils n'ont pas la place.

C'est aussi la raison du pourquoi le vertical-align: top ne semblait pas s'aligner avec le bloc correctement, parce que l'alignement se fait en réalité avec toute la place que prend le bloc, margin comprise. Donc si on aurait voulu que les blocs soient alignés en haut, on aurait du rajouter une margin-top au bloc noir comme ceci:

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; margin: 10px;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; margin-top: 10px;"></div>


Je ne rajoute qu'un margin-top, car je veux simplement l'aligner avec le début du bloc, et non pas avoir plus de marge.

Pour fini, foici visuellement, voici la place que prend notre bloc:
Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design 1452867524-7

On a donc:

Taille d'un élément = taille donnée + border + padding
Place que prend un élément = taille donnée + border + padding + margin


Cependant, on peut encore se poser une question légitime: qu'est-ce que je fais si je ne veux pas faire des maths dans ma tête pour toujours avoir la bonne taille de bloc? Donc:

Est-ce qu'il y a un moyen d'empêcher le changement de taille?


La réponse est oui, mais seulement depuis l'apparition du CSS3, grâce à la propriété box-sizing. Notez cependant que je ne vais pas vous l'expliquer en profondeur: je laisse le soin au cursus de le faire, notamment l'étape "Un peu de CSS3 et ses exigences". Je vais cependant vous donner un exemple et voir superficiellement cette propriété, simplement pour que vous la connaissiez et puisiez l'utiliser si le cœur vous en dit.

Cependant, la propriété box-sizing ne va influencer que la taille et non pas la place que prend l'élément. Donc le margin aura toujours le même effet.

Prenons donc notre élément, puis le même élément avec un padding, comme normalement:
Je suis une superbe boîte, je suis jolie!
Et moi je suis cette même boîte avec un padding!

Code:
<div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5;">Je suis une superbe boîte, je suis jolie!</div><div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5; padding: 20px;">Et moi je suis cette même boîte avec un padding!</div>


On voit donc, comme on l'a appris, que la taille va changer. Mais à présent, rajoutons à la boîte avec padding un box-sizing avec comme valeur border-box, qui va donc dire que la largeur de la boite est le contenu et le padding, et non pas juste le contenu.
Je suis une superbe boîte, je suis jolie!
Et moi je suis cette même boîte avec un padding!

Code:
<div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5;">Je suis une superbe boîte, je suis jolie!</div><div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5; padding: 20px; box-sizing: border-box;">Et moi je suis cette même boîte avec un padding!</div>


Les boîtes ne sont pas de la même taille?

Effectivement, la seconde est plus petite! Cela vient du fait que le box-sizing va également influencer sur la bordure, et ainsi, au lieu d'avoir taille totale = taille de base + bordure on a simplement taille totale = taille de base, et donc, la bordure et la padding, au lieu de se rajouter, resterons dans la boîte.

Donc pour avoir la même taille, on devrait rajouter 2 px partout au second bloc pour la bordure, comme ceci:
Je suis une superbe boîte, je suis jolie!
Et moi je suis cette même boîte avec un padding!

Code:
<div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5;">Je suis une superbe boîte, je suis jolie!</div><div style="width: 202px; height: 102px; background: white; border: 1px solid black; color: #24A8E5; padding: 20px; box-sizing: border-box;">Et moi je suis cette même boîte avec un padding!</div>


Donc de toute façon c'est embêtant?

Oui et non, dans le sens où vous êtes alors certain que votre élément fait bien X de large comme vous l'avez indiqué, quelque soit le padding ou la bordure que vous lui avez donné, et n'aurez alors plus qu'à calculer la marge en plus. donc au lieu de faire une somme de quatre chose, on en a plus que deux.  :star:

Quoiqu'il en soit, il vous est recommandé d'utiliser box-sizing: border-box partout si vous le pouvez, parce que ça facilite la vie de tout le monde! ♥

Et sur les éléments inline?


Mais oui, qu'en est-il du padding et margin des éléments inline? Parce que comme on le sait, les éléments inline se fichent pas mal de leur taille.

Par exemple:
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Code:
Je suis une jolie phrase avec du <span style="color: blue;">bleu</span> dedans, parce que c'est joli.


Si je rajoute une taille au span, un élément inline, eh bien... ça ne fait rien.
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Code:
Je suis une jolie phrase avec du <span style="width: 400px; height: 100px; color: blue;">bleu</span> dedans, parce que c'est joli.


Cependant, quand on rajoute une margin, la margin du haut et du bas n'ont aucune influence, mais les margin de gauche et droite, elle oui.
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Je suis une jolie phrase avec du <span style="color: blue; margin: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Donc si je n'avais qu'une margin-top, ça ne ferait rien:
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Je suis une jolie phrase avec du <span style="color: blue; margin-top: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Le padding réagit exactement comme le margin:
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Je suis une jolie phrase avec du <span style="color: blue; padding: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Cependant, ils se visualisent tout comme pour un bloc:
Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design 1452869267-8Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design 1452869267-9

Seulement, le haut et le bas n'ont aucun effet. Ou vraiment? Car en effet, s'ils ne "poussent" pas les autres lignes pour faire de la place, mais l'élément s'agrandit bien! Et ceci peut se voir avec un background:

Ici une phrase avant, parce que j'ai un background solide.
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Ici une phrase avant, parce que j'ai un background solide.
Je suis une jolie phrase avec du <span style="color: blue; background: orange; padding: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Pour le margin par contre? Toujours rien.

Ici une phrase avant, parce que j'ai un background solide.
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Ici une phrase avant, parce que j'ai un background solide.
Je suis une jolie phrase avec du <span style="color: blue; background: orange; margin: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Et voilà, vous savez à présent tout sur les margin et les padding! Utilisez cette connaissance à bon escient! :hug:

Toolbar > Cacher les liens Connexion et S'enregistrer - Mer 9 Déc 2015 - 15:46



Bonjour !

Un petit code en libre service à la demande de Chlirr ([url=/t58409-toolbar-elements-visibles-apres-la-connexion][TOOLBAR] éléments visibles après la connexion[/url])

Avant (en déconnecté) :
Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design Z1tYCZ3

Après (en déconnecté) :
Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design D3Vn8Rr

Le code CSS à rajouter sur votre forum :
PA > Affichage > Images et couleurs > Couleurs > Feuille de style CSS.
Code:
/* Boutons connexion / enregistrement de la toolbar */
#fa_right a[href$="login"],
#fa_right a[href$="register"] {
    display: none!important;
}

Astuce Forumactif Javascript - Informations membres - Sam 28 Nov 2015 - 23:44



Hello :)

Nous allons parler d'informations sur le membre qui regarde la page mises à disposition par Forumactif.

Vous connaissez peut-être déjà USERNAME et ses copines (vous pouvez voir la liste officielle ici → https://www.never-utopia.com/popup_help.forum?l=miscvars ). On écrit {USERNAME} et ceci est remplacé par le pseudo du membre qui lit (ou bien par "Invité").

Nous pourrons afficher des informations supplémentaires telles que :
  • si la personnes est connectée
  • son avatar
  • son pseudo
  • son nombre de MP
  • le nombre de message sur le forum
  • ses point de réputation
  • d'autres à voir un peu plus bas Wink


Ces informations peuvent être affichées sur le forum directement, par exemple avec l'avatar dans la barre de navigation :
Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design 7LLjg1y

Mais on peut aussi les utiliser pour élaborer d'autres codes, par exemple afficher certaines choses seulement si le membre est connecté / déconnecté, s'il a plus de X messages, etc ^^
Exemples possibles :
- Si on a un guide du nouveau, il sera mis en avant sur toutes les pages pour ceux qui ont peu de messages.
- Mettre en avant un message seulement pour les invités (message, ou bien le contexte "court"/"résumé", ou d'autres choses comme ça qui "prennent de la place" pour les membres)
- Faire une PA différente pour connecté / non connecté

Les données



Au moment où je commence ce tutoriel, voici les données que je peux récupérer :

  • session_logged_in : si le membre connecté ou non
  • username :  pseudo du membre
  • user_id : identifiant de membre
  • user_level : si je suis membre simple (0) / admin (1) / droit de modération quelque part (2)
  • user_lang :  langue
  • activate_toolbar : si la toolbar est activée (1) ou non (0)
  • fix_toolbar : la toolbar fixée ou non
  • notifications : notifications activées ou non
  • avatar :  html de l'image de l'avatar
  • user_posts :   nombre de messages du membre sur le forum
  • user_nb_privmsg : nombre de MP
  • point_reputation : nombre de points de réputation


Si la toolbar est activée, on peut également récupérer d'autres d'infos, dont le rang de la personne.

Comment trouver ces données ?



Ces données sont dans un objet javascript (ne partez paaaas !), si vous voulez connaitre leur valeur vous pouvez les trouver comme ceci :

- Avec la console du navigateur. Pour en savoir plus, lisez ce topic => Outils de débug par Valtena, surtout la section "la console".
On fait clic droit, inspecter l'élément. On va aller à l'onglet "Console" et écrire dedans _userdata (puis touche entrée ou cliquer sur Executer)
Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design 3gbDDqK

Cela vous donnera quelque chose comme ça :
Code:
_userdata["session_logged_in"] = 1; // connecté ou non
_userdata["username"] = "Nihil Scar Winspeare"; // mon pseudo
_userdata["user_id"] = 7734; // mon identifiant de membre (pour accéder au profil par exemple)
_userdata["user_level"] = 0; // si je suis membre simple (0) / admin (1) / droit de modération quelque part (2)
_userdata["user_lang"] = "fr"; // ma langue
_userdata["activate_toolbar"] = 1; // si la toolbar est activée (1) ou non (0)
_userdata["fix_toolbar"] = 0; // si j'ai fixée la toolbar ou non
_userdata["notifications"] = 1; // si j'ai les notifications activées
_userdata["avatar"] = '<img src="http://nihil.alwaysdata.net" alt="avatar" />'; // le html de l'image de mon avatar
_userdata["user_posts"] = 1986; // le nombre de messages sur le forum
_userdata["user_nb_privmsg"] = 506; // le nombre de MP
_userdata["point_reputation"] = 236; // le nombre de points de réputation


- Sinon, on peut voir tout ça directement dans le code source. On fait un  clic droit, "afficher le code source", et dedans on cherche "_userdata"
Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design 72sCy0S

Si ces données n'apparaissent pas, il se peut qu'une modification de votre template overall_header soit la cause. Vérifiez que la variable {HOSTING_JS} est bien présente.


Détail & exemples d'utilisation



J'ai essayé de détailler les variables que j'utilise le plus souvent, ou bien où il y a des petites subtilités à connaitre.

Connecté ou non ?


Code:
_userdata["session_logged_in"] = 1;

Si le membre est connecté la valeur sera 1, sinon cela sera 0.
Exemples d'utilisation :
- masquer un élément si le membre est déconnecté / afficher une zone seulement s'il est connecté, etc...
- pour les générateurs de présentation / commandes sur une page HTML, re-diriger ailleurs si le membre est déconnecté

Pseudo


Code:
_userdata["username"] = "Nihil Scar Winspeare";

Connecté : Pseudo du membre.
Déconnecté : Anonymous

Code:
_userdata["user_id"] = 7734;

Connecté : Identifiant de l'utilisateur. L'id (identifiant) permet par exemple d'accéder au profil de l'utilisateur. Je suis 7734, donc le lien est celui ci → https://www.never-utopia.com/u7734
Déconnecté : la valeur est -1

Autorisations


Code:
_userdata["user_level"] = 0;

0 = simple membre ou déconnecté
1 = admin
2 = droits de modération quelque part
/!\ Pour ce point là, on lit tout et son contraire, je vous conseille donc de faire quelques tests pour être absolument sûrs. Surtout qu'il existe d'autres façons de vérifier si une personne est modo / admin ^^

Avatar


Code:
_userdata["avatar"] = '<img src="http://nihil.alwaysdata.net" alt="avatar" />';

Dans tous les cas cela sera une balise image html.
Si connecté : avatar du membre
Si connecté et pas d'avatar : avatar par défaut dans le Panneau d'Admin
Si déconnecté : avatar par défaut dans le Panneau d'Admin
Exemple utilisation : - https://www.never-utopia.com/t56172-rajouter-l-avatar-de-l-utilisateur

Réputation


Code:
_userdata["point_reputation"] = 236;

Les points de réputation (Le système de réputation (Evaluation des posts + le bouton Merci))

Rang


/!\ Il faut que la toolbar soit activée
Code:
_lang["rank_title"] = "V.I.P.";

Si connecté : le rang de la personne (Les rangs)
Si déconnecté : vide
Exemple :
- Beaucoup de forum de RP utilisent les rangs pour les groupes. On pourrait par exemple changer le thème (ou juste certains petits éléments), ou encore rajouter un lien rapide vers le quartier général d'un groupe, etc)


Comment les utiliser ?


Certaines variables peuvent s'utiliser telle quelle en mettant leurs valeurs, d'autres permettent de faire des tests afin de faire un code différent en fonction de leur valeur.

Par exemple :
Code:
if (_userdata.session_logged_in == 1) {
    /* code si connecté */
}


Spoiler:


Pouvoir les utiliser comme on utilise {USERNAME}



On peut rajouter ce javascript sur toutes les pages :
PA > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript.
Code:
$(function(){
    $.each(_userdata, function(key, value){
        $(".js-" + key).html(value);
    });
});


Si je veux afficher seulement les MP, dans mon HTML je peux faire comme ceci par exemple :
Code:
Mes MP : <span class="js-user_nb_privmsg"></span>


Le code va insérer la valeur à l'intérieur de la balise span, pour insérer la bonne valeur :
Code:
Mes MP : <span class="js-user_nb_privmsg">155</span>


Voici un exemple avec plus de html :
Code:
Utilisateur connecté ? <span class="js-session_logged_in"></span><br/>
Pseudo : <span class="js-username"></span><br/>
Id : <span class="js-user_id"></span><br/>
Image de l'avatar : <span class="js-avatar"></span><br/>
Nombre de messages : <span class="js-user_posts"></span><br/>
Nombre de messages privés <span class="js-user_nb_privmsg"></span><br/>
Nombre de points de réputation <span class="js-point_reputation"></span><br/>


Et grâce au javascript, le contenu des span sera changé comme ceci :
Code:
Utilisateur connecté ? <span class="js-session_logged_in">1</span><br>
Pseudo : <span class="js-username">Nihil Scar Winspeare</span><br>
Image de l'avatar : <span class="js-avatar"><img src="http://img15.hostingpics.net/pics/602962nihiloffline.png" alt=""></span><br>
Nombre de messages : <span class="js-user_posts">1991</span><br>
Nombre de messages privés <span class="js-user_nb_privmsg">506</span><br>
Nombre de points de réputation <span class="js-point_reputation">237</span><br>


Un exemple avec toutes les variables :
Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design FY6TFIP
Je précise que c'est Neva qui a fait mon avatar :ange:


Précicison → si vous utilisiez précédemment ce tuto, vous pouvez l'enlever. En effet, le code fourni ici est plus complet. :)

Merci ♥

Rajouter l'avatar de l'utilisateur - Sam 27 Juin 2015 - 15:30



Rajouter sur la page l'avatar du membre connecté



Ce code permet d'ajouter l'avatar du membre où on le souhaite sur une page du forum.
Exemple d'utilisation :
- Ajouter l'avatar du membre à côté de la réponse rapide

Note : il y a des tas de manière de faire, ce tutoriel n'est qu'un exemple Wink
Pour faciliter le tutoriel, j'utilise jQuery qui est mis par défaut sur les forumactifs et qui va nous faciliter le code.

Utilisation



Partout où vous voulez mettre l'avatar de l'utilisateur, il suffit de rajouter la classe ".js-useravatar" à votre conteneur. La balise image avec l'avatar sera rajoutée ensuite en javascript à l'intérieur de votre élément.

Je dois donc par exemple mettre le code :
Code:
<div class="js-useravatar"></div>


Et le contenu de la div sera remplacé par l'image à l'intérieur de ma div.

   
Je peux aussi utiliser une balise span, une balise p, etc... Il faut juste que cela ne soit pas une balise orpheline (une balise auto-fermante, comme par exemple br, img, input etc).


Il est possible de mettre un contenu par défaut, qui sera ensuite remplacé par l'image de l'avatar, ou qui s'affichera si le javascript ne fonctionne pas. Par exemple :
Code:
<div class="js-useravatar">Contenu temporaire</div>


Styliser



Comment styliser l'image de l'avatar ?
Je vous conseille de rajouter une classe supplémentaire à votre balise.
Ainsi par exemple si mon avatar se trouvera dans un panneau coulissant sur le côté, je peux mettre une seconde classe comme ceci :
Code:
<div class="js-useravatar panneau_avatar"></div>


Et ensuite je met mon CSS comme ceci :
Code:
.panneau_avatar {
    /* style du bloc autour de l.image*/
}

.panneau_avatar img {
    /* style de l.image */
}


Pourquoi mettre une seconde classe, et ne pas styliser directement .js-useravatar ?
→ A priori, vous allez peut-être utiliser cet ajout de l'avatar à plusieurs endroits sur le forum. Si vous stylisez directement .js-useravatar, vous risquez de vous retrouver avec le même style à plusieurs endroits.
En rajoutant une seconde classe, vous êtes sûrs de bien séparer d'un côté le style (avec la classe supplémentaire ajoutée) et le javascript qui ajoute l'avatar (avec la classe .js-useravatar).


Javascript



Le JS, on le met dans PA > Modules > Gestion des codes Javascript.
Ensuite, on rajoute un nouveau script qu'on peut appeler par exemple "Ajouter avatar du membre", qu'on active sur les pages où on en a besoin :)

Code :
Code:
/* On attend le chargement */
$(function(){
    /* on récupère les endroits où on doit ajouter l'avatar */
    var $loadAvatar = $('.js-useravatar');
    
    /* s'il y a des endroits où on doit ajouter l'avatar */
    if ($loadAvatar.length > 0) {
        
        /* on remplace le contenu de .js-useravatar en mettant l'avatar */
        $loadAvatar.html(_userdata.avatar);
        
    }
});


Fonctionnement


Avant d'écrire le javascript, on va d'abord se demander "qu'est ce que je veux faire" ? On ne se jette pas d'un coup sur le code sans réfléchir :)

Je veux remplacer l'avatar de l'utilisateur à l'intérieur des éléments avec la classe js-useravatar.


A partir de cela, je vais me poser quelques questions :

- Comment sélectionner les éléments avec la class js-useravatar ?
En jQuery, on va mettre ceci, à l'intérieur de $(' '), je met mon sélecteur, ça fonctionne comme le CSS.
En CSS mon sélecteur est .js-useravatar, je fais donc
Code:
$('.js-useravatar');


- Comment je fais pour obtenir l'avatar de l'utilisateur  ?
Forumactif nous met gentiment à disposition une liste d'informations ♥. Il s'agit d'un objet javascript _userdata, qui contient diverses informations sur l'utilisateur sur le site. A ma connaissance, il n'y a pas de sujet officiel de ForumActif qui les recense. Pour en savoir plus, vous pouvez lire ce sujet
Celle qui nous intéresse est celle de l'avatar. Pour y accéder, il nous suffit d'écrire _userdata.avatar. Elle contient un code HTML avec l'image du membre.

Exemple du HTML qu'elle peut contenir :
Code:
<img src="http://r26.imgfast.net/users/2613/44/65/70/avatars/1-23.jpg" alt="" />


Si l'utilisateur est déconnecté ou bien qu'il n'a pas d'avatar, la valeur par défaut sera :
Code:
<img src="http://2img.net/i/fa/invision/pp-blank-thumb.png" alt="" />


Vous pouvez personnaliser ces avatars par défaut via le panneau d'administration.
PA > Affichage > Avatars > Gestion des avatars > Administration de vos avatars
On peut ainsi définir un avatar par défaut ainsi qu'un avatar pour les invités.

Si le membre est déconnecté et que vous n'avez pas défini d'avatar pour les invités, c'est l'avatar par défaut qui d'affichera. Sinon, cela sera l’avatar pour les invités :)


- Une fois que j'ai ces 2 informations... Comment je fais pour rajouter mon avatar à l'intérieur de .js-useravatar :toto: ?
On va utiliser une petite méthode de jQuery qui permet de remplacer le contenu d'un élément. Par exemple :
Code:
$('.js-useravatar').html("coucou");

Ce code là permet de remplacer le html de .js-useravatar par coucou :)


Code Javascript, un peu plus en détail


On peut voir que tout le contenu de notre code se trouve à l'intérieur de ceci :
Code:
$(function(){
    /* code à l'intérieur */
});

On ne peut pas manipuler de manière sûre une page tant que la page n'est pas "prête". Si vous tentez de sélectionner quelque chose sur une page qui n'est pas chargée, l'élément ne sera pas trouvable, et vous allez vous retrouver avec rien qui ne se passe ou de jolies erreurs :)

Avec ce code, on attend que le DOM (la structure de la page) soit chargé, comme ça on peut faire nos modifications, nos sélections, sans problème.

Précision:


Code:
var $loadAvatar = $('.js-useravatar');

Cette ligne permet de sélectionner les éléments avec la classe "js-useravatar", et on va les stocker dans une variable nommée $loadAvatar.

Code:
if ($loadAvatar.length > 0) {
    /* code à l'intérieur */
}

Cette partie là n'est pas obligatoire, mais elle permet d'être sûrs qu'on a bien un avatar à ajouter sur la page.
$loadAvatar.length va me donner le nombre d'éléments sélectionnés. Je regarde donc s'il y a plus de 0 (donc au minimum 1) élément sélectionné.
Cela signifie "s'il y a un élément dans $loadAvatar, fait ..."

Et enfin, la dernière ligne :
Code:
$loadAvatar.html(_userdata.avatar);

Elle dit → remplace le html de $loadAvatar par _userdata.avatar
Tout le contenu à l'intérieur de chaque $loadAvatar sera remplacé par notre image de profil.

En cas de problème, n'hésitez pas à poster dans la section Problème avec mon code.

Astuce ▬ Mettre en place les logos de partenariat dans le footer. - Jeu 29 Jan 2015 - 12:10



Bonjour, bonsoir:D

Ceci est mon premier tutoriel. Après la demande de Lisou pour afficher ces partenaires dans le footer, je me suis dit que j'allais le proposer.

Dans ce tuto je vais vous montrer comment placer ces partenaires en footer de deux manières différentes. Vous avez effectivement le choix de placer vos partenaires de sorte à ce qu'ils soient visible sur toutes les pages de votre forum ou uniquement sur l'index de celui-ci.

Alors commençons:)

/!\ Je rappelle que cette section existe en cas de problème!./!\


I. Visible uniquement sur l'Index du Forum.


✘ Mise en page avec scrollbare.

Aperçus d'un potentiel rendu.

Comme vous pouvez le voir sur le screen, sur la droite de votre box il y a une scrollbare. Et aussi, la box se trouve entre votre QEEL (Qui Est En Ligne) et votre légende des nouveaux messages, pas de nouveaux messages et forum verrouillé. Ainsi votre boxe et vos partenaires ne sont visibles uniquement que su votre index.

Le HTML :
Code:
<center><div class="titre_footer">Nos Partenaires Footer.</div><div class="partenaire_footer">
  <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a></div></center>


Voici donc le bout de code qu'il vous faut. Il est à placer dans le template « index_body » après la « {CHATBOX_BOTTOM} »

Le CSS :
Code:

/** PARTENAIRE Footer**/
.partenaire_footer {
background-color:#fff;
width: 620px;
height: 50px;
border: 2px solid red;
overflow: auto;
}

.titre_footer {
width: 620px;
height: 25px;
background-color:#000;
border: 2px solid red;
color: #209CC9 !important;
display: block;
font-family: Times New Roman !important;
font-size: 20px;
text-align: center;}

/** FIN PARTENAIRE FOOTER **/


Et en fin le bout de CSS associé. Il est à mettre dans la feuille de style. Vous pouvez tout changer, améliorer, mettre des effets en plus, en moins.

/!\ Ce qui met en place la scrollbare est « overflow:auto; », donc n'y touchez pas ! /!\

✘ Mise en page avec défilement.


La mise en page consiste à faire défiler les logos de la droite vers la gauche. Pour cela dans votre code HTML vous devez entourer vos logos avec la balise suivante :
Code:
<nobr><marquee> ...</marquee></nobr>


Ce qui donne :


Et dans votre CSS vous n'avez qu'à régler la hauteur de votre boxe comme bon vous semble et de retirer l'overflow.

✘✘ Variante du défilement.

Comme vue précédemment le défilement se fait de la droite vers la gauche, mais que diriez-vous de varier le défilement, de faire en sorte que lorsqu'on passe sa souris sur un logo le défilement se stop – ce qui est fort appréciable pour une clikeuse de logo partenaire comme moi xD

✘✘✘ Variante simple.

Les variantes simples seront juste de changer le sens du défilement. Au lieu d'aller de droite à gauche, pourquoi ne pas aller de gauche à droite, de bas en haut et de haut en bas. Pour cela il faut mettre un attribut à votre balise. Celui-ci sera « DIRECTION », puis vous ajouterez la direction souhaité :

Vers la gauche :


Vers la droite :


Vers le haut :


Vers le bas :


Pour définir le sens de défilement vous avez le choix entre les quatre valeurs suivantes :
- left.
- right.
- up.
- down.

✘✘✘ Variante « aller-retour ».

«Ce que j’appelle un « aller-retour » c'est le fait que sa aille à gauche puis reviens à droite et ceci à l'infini. Pour définir une variante de défilement il faut ajouter un attribut à la balise marquee qui sera « behavior ». ce qui donnera
Code:
<marquee behavior="..."></marquee>
, ce qui donne :



Pour obtenir cet effet nous allons ajouter à notre balise l'attribut « alternate » :
Code:
<marquee behavior="alternate">...</marquee>
Personnellement je conseille cette variante lorsque vous avez un petit nombre de logo à faire défiler.

✘✘ Stop Souris.

Le stop souris consiste à faire stopper le défilement au passage de votre souris.

Néanmoins ! J'ai rencontré un soucis avec le Stop souris. Et en ayant discuter avec Nihil, elle m'a fait découvert que le Stop Souris ne fonctionne pas chez tout le monde et sur tous les navigateurs. Ayant fais le test moi-même, le stop souris fonctionne parfaitement bien sous le navigateur Google Chrome, mais pas sous le navigateur Mozilla Firefox. Alors que chez Samhain cela fonction très bien sous les deux navigateurs.


La aussi il faut ajouter, non pas un, mais deux attributs qui se suivent : « onmouseover="this.stop();" » « onmouseout="this.start();" », ce qui donne :
Code:
<marquee onmouseover="this.stop();" onmouseout="this.start();"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></marquee>


✘✘ Le temps de défilement.

Vous pouvez choisir de faire défiler vos partenaires lentement, ou au contraire rapidement. La aussi on ajout un attribut à notre balise de départ : « scrollamount ». Vous définissez une valeur numérique compris en 1 et 100. A 1 vos logos défilerons très lentement et plus vous vous rapprocherez de 100 vos logos défilerons vite.

Valeur numérique de 5 :


Valeur numérique de 30 :



II. Visible sur toutes les pages du Forum (phpBB2).

Comme promis, voici comment mettre en place votre footer partenaire de sorte à ce qu'il soit visible sur toutes les pages de votre forum. Vous devez aller dans le template « overall_footer_begin ».

Prenez le code qui suit et changé intégralement le template avec.
Le HTML :
Code:
<!-- BEGIN html_validation -->
<div>
   <div>
      <table>
         <tbody>
            <tr>
               <td>
<!-- END html_validation -->
               </td>
               <td valign="top" width="{C3SIZE}">
               <div id="{ID_RIGHT}">
                  <!-- BEGIN giefmod_index2 -->
                  {giefmod_index2.MODVAR}
                  <!-- BEGIN saut -->
                  <div style="height: {SPACE_ROW}px"></div>
                  <!-- END saut -->
                  <!-- END giefmod_index2 -->
               </div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</div>
<!-- close div id="page-body" -->
<div id="page-footer">
   <div align="center">
      <div class="gen"><div class="titre_footer2">Nos Partenaires Footer.</div><div class="partenaire_footer2">
  <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a></div>
<!-- BEGIN html_validation -->
      </div>
   </div>
</div>
<!-- END html_validation -->


Votre morceau de code reste inchangé à la première partie :
Code:
<div class="titre_footer2">Nos Partenaires Footer.</div><div class="partenaire_footer2">
  <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a></div>


Le CSS :
Code:

/** PARTENAIRE Footer**/
.partenaire_footer2 {
background-color:#fff;
width: 620px;
height: 100px;
border: 2px solid red;
overflow: auto;
}

.titre_footer2 {
width: 620px;
height: 25px;
background-color:#000;
border: 2px solid red;
color: #209CC9 !important;
display: block;
font-family: Times New Roman !important;
font-size: 20px;
text-align: center;}

/** FIN PARTENAIRE FOOTER **/


La encore vous pouvez personnaliser le footer comme bon vous semble, en utilisant toutes les variantes cité plus haut.

II. Mise en page avec une image de fond.

Vous pouvez personnaliser à volonté votre footer et donc lui donner une image de fond. J'ai fait du basique pour vous montrer : Screen ou en Live.

Pour cela rien de plus simple pour les codeurs en herbe que vous êtes Very Happy Dans votre CSS vous allez changer le :
Code:
background-color : #fff;

en
Code:
background : url('METTRE ICI L'URL DE VOTRE IMAGE');


Et voilà, vous avez une image en fond ! Ah j’allai oublier ! Si vous définissez une image de fond vous devez changer la hauteur et la largeur en fonction de la taille de votre image.

Ensuite vous allez voir que vos logos sont mal positionné. Pas de problème nous allons remédier à cela. Vous allez ajouter une div dans votre code, comme ceci :
Code:
<div class="partenaire_footer2"><div class="logo_partenaires">...</div></div>


Puis dans votre CSS, vous ajoutez :
Code:
.logo_partenaires { padding : 35px ; }


Vous réglez la valeur du padding comme bon vous semble en fonction de votre image :)

Et voilà, le tuto est terminé \o/

/!\ Je rappelle que cette section existe en cas de problème!./!\

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

Chatbox - Styliser les messages de connexion / déconnexion (CSS) - Sam 27 Déc 2014 - 19:14



Chatbox
Changer le style des messages de connexion / déconnexion


Voici un petit libre service / tuto expliquant comment changer le style des messages de connexion et déconnexion sur la chatbox. Je fournis directement le code CSS, puis les explications suivent pour les intéressés :toto:

Rendu visuel
(en haut messages normaux, en dessous messages modifiés)

Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design 1419703079-screen-cb-nu
Oui oui, je sais, c'est moche, je donne ici un exemple très simple avec très peu de CSS.

Le code n'est pas sous hide,
mais bien entendu un petit merci est toujours apprécié ♥

Code en libre service


CSS
PA > Affichage > Couleurs > Feuille de style CSS

Code:
/* Message de connexion CB */
.msg span[style*="green"] strong {
    color: #2980b9; /* couleur */
    font-variant: small-caps; /* petites majuscules */
}

/* Message de déconnexion CB */
.msg span[style*="red"] strong {
    color: #8e44ad; /* couleur */
    font-variant: small-caps; /* petites majuscules */
}


Explications


Je vous invite à lire ces 2 tutoriels de Manumanu pour en savoir plus sur les sélecteurs CSS que nous allons utiliser : Principe du CSS : Les sélecteurs (Partie 1 : CSS2) et Principes du CSS - Les sélecteurs (Partie 2 : CSS3).

Prérequis


Je n'ai pas l'intention de faire un doublon du tuto sur les sélecteurs, donc si vous êtes intéressés, prenez le temps de le lire. (◕‿◕✿)

Voici les sélecteurs que l'on va utiliser (ils sont dans les tutoriels de Manumanu, pour vous rafraichir la mémoire, je vous met un exemple pour chaque) :

  • Sélectionner une balise.
    Code:
    strong { }


  • Sélectionner une classe.
    Code:
    .msg { }


  • Sélecteur de descendance.
    Code:
    .msg span { }


  • Sélecteur d'attribut :
    Code:
    a[href="#top"]




Le HTML


Voilà à quoi ressemble la structure HTML d'un message de connexion sur la chatbox (il y a juste la classe chatbox_row_1 qui change une ligne sur 2 pour être chatbox_row_2) :
Code:
<p class="chatbox_row_1 clearfix">
    <span title="27 Déc 2014" class="date-and-time">[17:52:55]</span> 
    <span class="msg">
        <span style="color:green"><strong>Truc a rejoint le chat le Sam 27 Déc 2014 - 17:52</strong></span>
    </span>
</p>


Pour comparer:


La partie qui nous intéresse étant celle ci :
Code:
<span class="msg">
    <span style="color:green"><strong>Truc a rejoint le chat le Sam 27 Déc 2014 - 17:11</strong></span>
</span>


  1. Les messages sont dans une span avec la classe "msg".

  2. Ensuite pour les messages de connexion il y a une span avec du CSS directement appliqué : style="color:green" pour un message de connexion et style="color:red" pour un message de déconnexion.

  3. Et enfin, le texte est dans une balise strong qui permet de mettre en gras. C'est celle ci que nous allons tenter de cibler ♥

Le CSS


Il nous suffit de reprendre ce qu'il y a au dessus :


  1. Sélectionner une span avec la classe "msg" :
    Code:
    .msg


  2. Ensuite, on va sélectionner à l'intérieur de la classe "msg" une balise span :
    Code:
    .msg span


    Cette span a du CSS directement appliqué, avec l'attribut style (style="color:green")
    Pour sélectionner une span avec l'attribut style :
    Code:
    span[style]


    Pour sélectionner une span avec l'attribut style qui a une valeur (eh oui, on veut pouvoir sélectionner seulement les couleurs de connexions et de déconnexions !)
    Ici notre HTML est :
    <span style="color:green"><strong>Truc a rejoint le chat le Sam 27 Déc 2014 - 17:11</strong></span>

    Le sélecteur CSS est donc :
    Code:
    span[style="color:green"]


  3. Et enfin... On veut sélectionner la balise strong à l'intérieur, ce qui donne donc :
    Code:
    .msg span[style="color:green"] strong {
       /* personnaliser ici */
    }




Les plus attentifs d'entre vous auront remarqué que j'ai pas utilisé [style="color"] mais [style*="green"] dans mon CSS fourni tout au début.

*= n'est pas la même chose que =.

[style*="green"] signifie "il faut qu'il y ait écrit "green" dans l'attribut style".

[style="color"] signifie il faut que l'attribut style ai exactement comme valeur "color:green" .

Il s'agit tout simplement d'un petit raccourci pour moi ಠ_ಠ, et permet d'éviter les cas où on oublierait le point virgule, ou si on mettait un espace en trop par exemple.


Ensuite pour le message de déconnexion c'est exactement la même chose, il suffit de changer "green" en "red".

Aucun risque d'interférer avec la couleur des messages mises par les membres sur la CB. Pour ces messages là FA met la couleur grâce au code couleur en hexa. Du coup, si quelqu'un met son message en rouge il y a aura #FF0000 et non pas "red".

Fangs

Menu déroulant moderne (HTML & CSS3) - Lun 10 Nov 2014 - 22:41






Menu déroulant moderne

(HTML & CSS3)


Bonjour à tous ! :gentleman:

Alors, comme son nom l'indique, dans ce ls, je vais vous ai réalisé un petit menu déroulant très moderne pour vos forums et vos pages web. Il est uniquement fait à partir de HTML et de CSS3, la dernière version du CSS qui propose beaucoup de possibilités.

Ce ls est donc divisé en deux parties:

- Le codage HTML
- Le codage CSS

Sachez que ce menu déroulant, qui peut servir de barre de navigation, est totalement personnalisable ! Il suffit de changer les textes dans le HTML et de changer des paramètres dans le CSS, et pour les plus à l'aise en codage, modifier cette barre à l'infini et selon leurs envies !
Attention
Je vous rappelle que les codeurs qui créent les ls et les tutoriels font ça bénévolement, il est donc normal que nous attention un crédit de Never Utopia sur vos forums. Merci :toto:

Assez parlé, passons aux choses sérieuses.

Aperçu de la barre de navigation

Aperçu
Voici donc un petit aperçu de ce que cela donne:
barre de navigation ; barre au survol

Codage: HTML


Voici donc le code que vous pouvez disposer où vous voulez: dans une page web, une template ou dans un message. (Si vous publiez ce code dans une template, n'oubliez pas de la publier par la suite).

Code:

<center>
        
   <div class="barre_nav">
               
      <div class="nav_1">
                          
         <div class="nav_txt">
                    Titre 1<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />     
      </div>
               
      <div class="nav_2">
                          
         <div class="nav_txt">
                    Titre 2<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />   
      </div>
               
      <div class="nav_3">
                          
         <div class="nav_txt">
                    Titre 3<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />
      </div>
               
      <div class="nav_4">
                          
         <div class="nav_txt">
                    Titre 4<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br /> 
      </div>
               
      <div class="nav_5">
                          
         <div class="nav_txt">
                    Titre 5<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />   
      </div>
           
   </div>
</center>


Codage: CSS


Et voici donc le code CSS qui en découle ! :)

Code:

/* DEBUT BARRE DE NAVIGATION */
.nav_txt {
  text-align: center;
  font-variant: small-caps;
  font-family: Gerogia;
  color: #e6e7e7;
  background: #091016;
  font-size: 20px;
  height: 25px;
  text-shadow:1px 1px 2px #000000;
  border-bottom: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
}
.barre_nav a{
  text-align: center;
  font-variant: small-caps;
  font-family: Gerogia;
  color: #e6e7e7;
  font-size: 15px;
  margin-left: 5px;
  text-decoration: none !important;
  -moz-transition:  0.2s all;
  -webkit-transition:  0.2s all;
  -o-transition:  0.2s all;
  -ms-transition:  0.2s all;
  -khtml-transition:  0.2s all;
  transition:  0.2s all;
}
.barre_nav a:hover {
  text-decoration: none !important;
  letter-spacing: 2px;
  -moz-transition:  0.2s all;
  -webkit-transition:  0.2s all;
  -o-transition:  0.2s all;
  -ms-transition:  0.2s all;
  -khtml-transition:    0.2s all;
  transition:    0.2s all;
}
.barre_nav {
  width:960px; /* à adapter selon la largeur de votre forum */
  height:175px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 100px; /* à adapter selon les éléments présents au dessus de votre barre */
  overflow: hidden;
  z-index: 10;
  border-top: 1px solid #e6e7e7;
}
.nav_1 {
  width:190px;
  height:25px;
  background: #080e13;
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_2 {
  width:190px;
  height:25px; 
  background: #080e13; 
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_3 {
  width:190px;
  height:25px;
  background: #080e13; 
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_4 {
  width:190px;
  height:25px;
  background: #080e13;
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_5 {
  width:190px;
  height:25px; 
  background: #080e13;
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_1:hover {
  width:190px;
  height:125px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_2:hover {
  width:190px;
  height:125px; 
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_3:hover {
  width:190px;
  height:140px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_4:hover {
  width:190px;
  height:125px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_5:hover {
  width:190px;
  height:125px; 
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}

/* FIN BARRE DE NAVIGATION */


Question ?

Si vous avez une question, je vous rappelle que cette section est disponible !

Voilà, voilà, je vous remercie. :)


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

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.

Empêcher les soucis des messages dans la Chatbox ForumActif - Mer 27 Aoû 2014 - 16:20



Bonjour, ou peut-être bonsoir si vous êtes du genre à aimer lire le soir Razz

La Chatbox de ForumActif (pour ne pas dire ForumActif tout court) offre son lot de soucis, pas tous très contraignant parfois même de simple de détails, mais ils peuvent quand même en déranger certains. Il n'est pas rare de voir quelqu'un qui envoi un long "AHHHHHHH[...]" qui créer une scrollbar en bas de la chatbox et que ça fasse râler les autres, ou même simplement parfois en postant un lien trop long. Il y a aussi le soucis des pseudo avec des espaces (C'est courant sur les forums RPG car généralement un pseudo est composé du nom et prénom) qui se coupent en deux (donc sur deux lignes) quand le message posté est trop loin. Il existe des solutions grâce au CSS pour palier à ce soucis, il vous faut donc être admin dû forum pour les mettre en place, ses astuces prennent peu de places et n'auront aucunes influences ailleurs. En clair, les mettre en place pourrait éviter que les gens demandent des clears à tout vas lorsqu'un @ est connecté à la CB Wink

Un long pavey d'introduction pour pas grand chose passons donc au premier soucis, celui des pseudo.

Fais ce que je t'ordonne de faire.


Le titre explique bien le principe du CSS que l'ont va utiliser ici, déjà pour savoir de quel soucis je parle, voici un exemple :

[XX:XX:XX] Machin Chose: Bonsoir, je suis....
[XX:XX:XX] Machin
Chose: TRUUUUUUUUUUUUUUUUUUUUUUCCCCCCCCCCCC


Evidemment, si vous testez mes paroles sur votre chatbox cela ne va pas peut-être pas crée le soucis étant donné que je n'ai pas testé et que ça dépendra de la largeur alloué à la CB., L'idée est cependant là et l'explication est fidèle à ce qui se passe parfois, c'est assez rare mais l'éviter tout court peut-être mieux non ? Ca arrivait souvent sur mon propre forum quand on se tapait des gros délires et parfois pour des trucs idiots, j'ai donc voulu palier à ce soucis et j'ai testé.

Il vous faudra donc utiliser votre feuille de style CSS pour vous faire en sorte que le pseudo reste sur une seule ligne.

Rappel
Si vous ne savez pas, ou simplement pour vous rappelez, l'accès à la feuille de style CSS ce fait via le Panneau d'Administration, puis Affichage, Couleur et enfin Feuille de style CSS


Une fois que vous vous êtes rendu dedans, il vous faudra ajouter (où que vous voulez) le code suivant :

Code:
#chatbox .user{white-space: nowrap;}


Pourquoi sur une ligne ? J'estime que si on ajoute juste une propriété à quelque chose, une seule ligne suffit pour éviter de prendre 3 lignes de la feuille juste pour ça. A partir de ce moment-là, si vous utilisez juste ça, vous allez vous retrouver avec ça :

[XX:XX:XX] Machin Chose: Bonsoir, je suis....
[XX:XX:XX]
Machin Chose: TRUUUUUUUUUUUUUUUUUUUUUUCCCCCCCCCCCC


C'est déjà mieux, mais ce n'est toujours pas ce qu'on veut, alors comment régler le soucis maintenant ? Pour faire simple, il vous faudra aussi ajouter cette propriété à la date/l'heure, donc remplacer ce que je vous ai donné au dessus par :

Code:
#chatbox .user, #chatbox .date-and-time{white-space: nowrap;}


Normalement, avec ça vous devriez avoir :

[XX:XX:XX] Machin Chose: Bonsoir, je suis....
[XX:XX:XX] Machin Chose: TRUUUUUUUUUUUUUUUUUUUUUUCCCCCCCCCCCC


A titre informatif
"white-space: nowrap" permet de forcer le texte à rester sur une seule ligne, c'est une version simple de son utilité alors ne vous en servez pas pour rien, mais ça reste cependant très utile quand un texte ne veut pas rester sur une seule ligne sans savoir pourquoi.


Stop ! Route barrée, accès interdit !


Encore une fois, le titre illustre bien l'utilité du second code que je vais vous fournir. Cette fois-ci, il sert à faire en sorte que le texte ne dépasse pas la largeur qu'il lui est alloué, ce soucis a dû vous arrivez souvent, la petite barre de scroll (ou l'ascenseur) qui s'affiche en bas de la chatbox quand un membre écrit quelque chose de trop long ou envoi un lien trop long sans espace (ni tiret même si parfois ils ne changent rien). Généralement, votre solution est de vous dépêcher de clear ou de flooder pour faire disparaître cette vilaine barre énervante. Et si au lieu de faire ça, on faisait carrément en sorte qu'elle ne puisse pas exister ?

C'est ce que je vais vous apprendre ici, le code css suivant permet de forcer le texte à retourner à la ligne quand il est censé dépasser de la largeur alloué et donc créer cette vilaine scrollbar.


Retournez donc dans votre feuille de style CSS, si vous n'y êtes pas déjà est ajoutez ceci :

Code:
#chatbox .msg{word-wrap: break-word;}


A titre informatif
"word-wrap: break-word" permet de forcer le texte à retourner à la ligne s'il dépasse la largeur qui lui est alloué, comme expliqué plus haut. Evidemment, encore une fois c'est une version simplifié de la chose mais c'est fort utile pour la Chatbox où nous n'avons pas d'autres moyens de faire ça, du moins pas à ma connaissance.


Il n'y a rien à voir ici, circulez !


Cette astuce permet la même chose qu'au-dessus, cependant au lieu d'empêcher la barre d'exister en faisant en sorte que le texte retourne forcément à la ligne, on va plutôt masquer la barre. Le texte restera donc sur une seule ligne mais il sera masqué. Difficile d'expliquer, pour faire simple, imaginez-vous qu'au lieu que la scrollbar apparaisse, elle n'apparaisse pas, mais que quelqu'un a quand même posté un texte trop long. En clair, vous n'aurez aucun moyen d'aller voir la suite de se texte sans la scrollbar.

Astuce
.Garder le clic droit enfoncer pour sélectionner le texte et aller jusqu'au bout permettra de scroller même sans la scrollbar, ou encore avec les flèches directionnelles du clavier Wink.


Comme précédemment, il vous faudra aller dans votre feuille de style CSS, cette fois-ci, au lieu d'ordonner au CSS d'influencer sur le conteneur des messages, on va lui demander d'influencer sur la partie qui concerne la chatbox, les messages, les pseudo, tout.

Code:
#chatbox{overflow-x: hidden;}


A titre informatif
"overflow-x: hidden" permet de faire comme si la scrollbar était là tout en la cachant, et ceux seulement pour celle horizontal (d'où le "X")


Bon à savoir
Dans le doute, si jamais ce que je vous ai donné de marche pas ou que vous n'êtes pas convaincu, ou même que vous voulez éviter des soucis, vous pouvez rajouter "!important" avant le point virgule à la fin de chaque propriété donc après "hidden" "word-break" et "nowrap"


Voilà, c'est donc tout pour cette fois-ci, j'espère que cela vous sera utile. Sachez que mon passe temps est de m'amuser avec ce qui est théoriquement impossible de toucher sur ForumActif, alors n'hésitez pas à consulter d'autres Tutos Wink

Manumanu

Gérer son header, son fond, et son logo - Dim 24 Aoû 2014 - 1:00



Présentation du tutoriel


Sur beaucoup de forum, je rencontre des problèmes d'intégration du fond, du logo, du header ou des trois. Souvent, les trois sont même totalement confondus. Voici une mise au point et quelques conseils.

Explications


Séparez votre fond et votre logo !



Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design Head-3c90a70
Un bon exemple à suivre

C'est bête à dire, mais peu de gens le font, et mettent ensuite une image vide par-dessus le fond pour avoir un lien cliquable... Faite votre fond et votre logo séparé, et mettez le logo sur un png transparent, c'est autrement plus simple et pratique ! De plus, vous pourrez changer de fond sans changer de logo, et inversement ! Ça vous donne aussi la possibilité d'avoir un fond répété sans vous casser la tête.

Alors si vous avez lu ceci, vous n'avez plus aucune excuse pour perpétuer cette sale manie !


Choisir un fond...


Toutes les images ne peuvent pas servir de fond. Enfin si, mais toutes ne le devraient pas. Par "fond", j'entend "tout" le fond du forum, et non simplement l'entête (header).

Oubliez le wallpaper magnifique que vous avez trouvé sur Google Image, avec tous ces elfes/ces arbres/ces maisons/autres trucs magnifiques. Un fond doit être SIMPLE, sans quoi il prend plus d'importance visuelle que le contenu du site, et en perturbe la lecture. De plus, une image de ce genre ne peut pas être répétée gracieusement, et donc il se produira un effet mosaïque d'autant plus perturbant :

Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design Fondrepeat-3c9912d
Un fond répété... Pas terrible.

Vous pensez peut-être qu'il suffit d'afficher l'image en plein écran ? Encore une mauvaise idée : Une image n'est pas faite pour être étirée. Si le résultat est bon sur votre écran, pensez à ceux qui en ont un plus grand : Il verront une bouillie infame de pixels, et probablement mal proportionnée :


Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design Fondetire-3c99242
Un fond étiré... Pas mieux.

C'est pour toutes ces excellentes raisons que votre image de fond devrait être un pattern prévu pour être répétable, ou bien une couleur unie !

BONUS-TIME
Une idée chouette pour vos sites : Le pattern de fond transparent sur une couleur unie. Par exemple, cette image :
Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design Noize-338456b
Elle donne à n'importe quel fond un effet "bruit" un peu granuleux. Vous pouvez donc l'appliquer en backgroud, en plus d'une couleur, sur n'importe quel élément (fond de page ou pas) :

Code:
element {
   background: #6aa690 url("http://img82.xooimage.com/files/f/c/6/noize-338456b.png");
}


Choisir un header


Le choix d'un header est différent, et peut-être tout à fait complémentaire avec un fond (même un fond en image). Tout d'abord, il faut savoir que grâce au CSS3, vous pouvez appliquer plusieurs images de fond à un élément :
Code:
element {
   background: url("image1.png") no-repeat, url("image2.png") repeat-x;
}


Spécifications de la propriété background (eng)

Ainsi, il faudra ajouter ces images non pas dans l'interface d'image "fond" de ForumActif que nous avons vu plus haut dans l'image de présentation, mais directement dans le CSS, sur la balise body. Pour ça, rendez-vous dans votre panneau d'administration → Affichage → Couleurs → Feuille de Style CSS.
Votre code serait alors celui-ci :

Code:
body {
   background: url("imageHeader.png") no-repeat center top,
          url("imageDeFond.jpg") repeat 0 0;
}


Mais venons-en au choix (ou la création) de l'image "header" en elle-même. Là encore, le redimensionnement n'est pas foncièrement une bonne idée, pour les mêmes raisons que plus haut... L'utilisation d'un fond prévu pour être répété est grandement conseillée. En revanche, il est possible de faire une image suffisament large pour la grande majorité des écrans (2600px de large), pourvu que sa taille reste légère à charger (chercher le meilleur compromis).

Le meilleur choix à mon sens reste de faire un header qui s'incruste parfaitement sur n'importe quel fond, c'est à dire sans "cassure" par rapport aux bords de l'image. Quelques exemples :


Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design Ltm-3ca12be
Sur cette image, le logo est le texte "Litanies des Terres Mortes", le fond est la couleur gris foncé unie, et le header est l'image d'arbre, dont les bords ont été gommés avec une brosse douce (Photoshop, ou n'importe quel logiciel d'image) afin que la rupture ne soit pas "brutale".

Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design Carbonsugar
Sur cette image, le logo est "*carbon sugar", le fond est le bois (vous l'avez reconnu !), et le header est le joyeux bazar.


Il n'y a rien de plus ici que cette simple séparation : fond, header, logo. Vous avez maintenant tous les codes nécessaires pour faire de même. Alors à vous de jouer. Wink


Petite note copyright


Le header de carbon sugar et l'image de l'arbre sont la propriété de leur auteur respectif.
Le site "Les Litanies de l'Ombre" m'appartient. Pour le reste, comme d'habitude : C'est gratuit.

A-Lice

Bandeau de navigation vertical - Jeu 31 Juil 2014 - 14:45




Bandeau de navigation vertical


Suite à une demande de Narakye voici un bandeau de navigation vertical collé sur la droite.

Je précise que l'arrière plan rose et jaune correspond à mon forum.

HTML & CSS ~ Voici donc un aperçu : www


Et le code :
HTML :
Code:
<link href='http://fonts.googleapis.com/css?family=Great+Vibes|Indie+Flower|Love+Ya+Like+A+Sister' rel='stylesheet' type='text/css' />
<div class="bandeau_fond"><span class="bandeau_titre" style="margin-top:30px; font-family: 'Great Vibes', cursive; font-size:30px">Bienvenue</span>
<div class="bandeau_image1"><img src="http://img11.hostingpics.net/pics/920644alice.jpg" alt="" /></div>
<span class="bandeau_titre">Liens utiles</span>
<div class="bandeau_lien"><div class="bandeau_lien_zoom"><a href="ICI LE LIEN">blabla blabla</a></div>
<div class="bandeau_lien_zoom"><a href="ICI LE LIEN">blabla blabla</a></div>
<div class="bandeau_lien_zoom"><a href="ICI LE LIEN">blabla blabla</a></div>
</div>
<span class="bandeau_titre">Les news</span>
<div class="bandeau_news">blablabla
blablablabla
</div>
<span class="bandeau_titre">Interphone</span>
<div class="bandeau_interphone1"><marquee direction="up" scrollamount="2" onMouseOver="this.stop();" onMouseOut="this.start();"><span class="bandeau_interphone2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lectus ultricies nisl vulputate molestie a sed lorem. Nullam consequat pulvinar quam, vel semper orci blandit quis. In id eros massa. Duis eget gravida mi. Aenean pellentesque, purus eget suscipit bibendum, justo lorem fermentum leo.</span></marquee></div>
<span class="bandeau_titre">Nos héros</span>
<div class="bandeau_image2" style="margin-left:30px;"><img src="http://img11.hostingpics.net/pics/920644alice.jpg" alt"" /></div><div class="bandeau_image2" style="margin-left:5px;"><img src="http://img11.hostingpics.net/pics/920644alice.jpg" alt"" /></div><br />
<a href="http://www.never-utopia.com/" class="ALice_credit">© By A-Lice</a>
</div>


Il faut placer ce dernier dans le template index-body, sur la deuxième ligne juste après ceci :
Code:
{JAVASCRIPT}


CSS :
Code:
.bandeau_fond {
width:175px;
padding:5px;
position:fixed;
background-image:url(http://imagesup.org/images12/1406735258-bordure.png);
height:100%;
right:0px;
top:0px;
z-index:100;
}

.bandeau_titre {
font-size:20px;
color:white;
display:block;
text-indent:45px;
margin-top:10px;
font-family: 'Love Ya Like A Sister', cursive;
}

.bandeau_image1 {
width:135px;
height:92px;
margin-left:30px;
overflow:hidden;
}

.bandeau_lien {
width:135px;
padding:5px;
height:11%;
overflow:hidden;
margin-left:25px;
font-family: 'Indie Flower', cursive;
}

.bandeau_lien_zoom {
font-size:12px;
opacity:0.8;
text-align:center;
}

.bandeau_lien_zoom:hover {
font-size:14px;
opacity:1;
text-align:center;
}

.bandeau_news {
background-color:white;
width:125px;
padding:5px;
height:15%;
margin-left:30px;
font-size:12px;
color:black;
text-align:justify;
overflow:auto;
border-radius:15px;
font-family: 'Indie Flower', cursive;
}

.bandeau_interphone1 {
width:135px;
padding:5px;
height:7%;
overflow:hidden;
margin-left:25px;
}

.bandeau_interphone2 {
text-align:justify;
font-size:12px;
color:black;
display:block;
font-family: 'Indie Flower', cursive;
}

.bandeau_image2 {
display:inline-block;
width:68px;
height:67px;
border-radius:100px;
overflow:hidden;
margin-top:5px;
}

a.ALice_credit {
font-size:12px;
text-decoration:none;
display:block;
text-align:center;
color:white;
margin-top:5px;
}



/!\ En cas de problème, c'est ici que ça ce passe.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Créer des onglets onclick en full CSS3 (ex: fiche de présentation) - Jeu 17 Juil 2014 - 14:58



Onglets en full CSS3



Mais oui je vous bombarde de tutos! Maintenant, un petit tuto qui fait suite à mon tuto sur le slideshow, bien que je vais prendre tous les points dont j'ai parlé dans le tuto des slideshow. Donc pas de panique: je ne vous demande pas d'avoir lu quoi que ce soit avant de lire ce tuto!


Toutes versions ▬ CSS3 & HTML5


Voici une rapide explication de comment le tuto est découpé: tout d'abord, je vais parler du principe général que j'utilise pour faire les onglets, pour vous expliquer rapidement comment ça marche. Ensuite, je passerais par un exemple pour montrer ce qu'on peut faire. Pour ce faire, je vais créer une fiche de présentation, car en effet, contrairement au Javascript qui n'est pas utilisable dans les messages,  le CSS3, lui, l'est! Du coup je découperais la deuxième partie en deux: la première sur le HTML et la seconde sur le CSS!

J'espère que je serais assez claire dans ce tuto, mais en cas de doute, n'hésitez pas à utiliser la section des problèmes en codage!


Le principe général


Comme vous pouvez vous l'imaginer, mon but était ici de créer des ognlets similaires au Javascript, c'est à dire qu'on a pas à chaque fois un "nouveau lien" pour chaque onglet qu'on ouvre, contrairement aux :target. C'est pour ça qu'en écrivant sur le slideshow à l'aide des input et des labels, j'ai vite eu l'idée de l'adapter au principe des onglets.

Le principe est très simple, et pour cela, il faut que je vous explique deux choses: ce qu'est le sélecteur ~ et ce qu'est la pseudo-élément :checked! (Vous retrouverez la même explication dans mon tuto sur le slideshow, mais ici, elle est "en clair" Wink )

Le pseudo-élément :checked
Le pseudo-élément checked est utilisé dans le CSS pour les formulaires, plus particulièrement pour les input de types radios (les petits ronds pour les votes quand vous ne pouvez voter que pour un choix) ou pour les types choix multiples (quand vous pouvez voter pour plusieurs choix). Ici, dans notre tutoriel, nous utiliserons uniquement des input de type radio (car on ne veut qu'un seul onglet à la fois).
En gros, :checked nous permet de voir si un input a été coché ou non. En somme, si nous avons par exemple ceci:
Code:
<input name="fiche" id="physique" type="radio" />

Si dans mon CSS je mets ceci:
Code:
#physique:checked ~ label {
color: white;
}

Cela veut dire que quand physique est coché, alors tout label frère sera blanc.

"Eh!" me direz-vous "mais je sais pas ce que c'est ce  ~ moi!". Bah oui, mais j'y arrive! =P

Cependant, tout ce que vous avez à retenir de :checked, c'est qu'on regarde lequel a été coché (d'input) et on agit en conséquence.


Le sélecteur ~
Ce sélecteur signifie "l'élément frère le plus proche".
Mais qu'est un élément frère? Eh bien ce sont des éléments qui sont "sur la même ligne verticale" ou plutôt, qui ont la même grandeur d'encapsulation. Cependant, même comme ça, ça ne doit pas vous dire grand chose, alors voici des exemples:

Exemple:
Code:
<div id="un">
 <div id="deux">
 </div>
</div>

Ici, un est l'élément père de deux, et deux est l'élément fils de un.
Code:
<div id="un">
</div>
<div id="deux">
</div>

Ici, un est deux sont des éléments frères.

En somme, si votre code est bien indenté, il est facile de voir quels éléments sont des frères/sœurs, et lesquels sont des parents/enfants les uns des autres. En effet, les frères/sœurs seront sur le même niveau, et les parents/enfants seront sur des niveaux différents!
Il est à noter que seul les deux éléments qui entourent le ~ doivent être des frères! On peut bien sûr faire appel à d'autres classes avant pour l'élément à gauche du sélecteur (par exemple si on veut sélectionner une class mais à un endroit spécifique du code, par exemple dans un id spécifique) ou alors plus bas dans la hiérarchie pour celui à droite du sélecteur. Par exemple .hallow #machin p .important ~.livres #chouette marche, tanr que .important (qui est le fils d'un p qui lui-même est le fils de #machin, qui lui-même est le fils de .hallow) est frère de .livres, le code va marcher, et effectivement s'exécuter sur #chouette qui se trouve dans .livres!


Et voilà, maintenant que vous connaissez ces deux petites choses, on peut commencer avec les choses sérieuses!
Tout d'abord, commençons donc avec une div tout simple, qui va entourer tout notre système d'onglets. C'est important, car cela nous permettra de facilement appeler par le CSS les input, si on ne veut pas mettre une class.
Ensuite, nous allons créer autant de input que nous voulons d'onglet, en leur donnant à chacun un id particulier. Je rappelle qu'un id est UNIQUE, donc ne doit pas se trouver ailleurs sur la page!
Pour vous donner un exemple, j'utilise déjà la fiche de présentation que je vais faire plus tard. Pour elle, j'ai cinq onglets, donc cinq input! Ils seront tous de type radio, et auront le même nom: la seule chose qui les différencie est l'id.

Code:
<div class="fiche"><!-- Ceci est donc la div qui va contenir l'ensemble du système d'onglets. -->
<input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" />
</div>



Maintenant: tout ce que vous ajoutez, mais surtout tout ce que vous voulez pouvoir change au click sur l'onglet doit se trouver en dessous des input. En effet, grâce au sélecteur que nous avons vu plus tôt, nous pourrons facilement choisir tout et n'importe quoi qui se trouve à la SUITE des input.
Du coup, je vous conseille toujours mettre les input tout en haut de votre conteneur principal d'onglets, le reste, même s'il ne change pas au gré des onglets, pourra être après: ça ne rajoute pas des lignes de CSS, ce n'est pas plus difficile, etc.

Bref, maintenant que nous avons nos input, nous devrions ajouter nos label. Les labels, ce sont les "boutons" qui vont nous permettre d'aller à un onglet à un autre. En effet, lorsqu'un label qui correspond à un input, est cliqué, eh bien c'est comme si on avait coché l'input correspondant. Cela vous rappelle quelque chose? Eh bien oui! C'est ce qui va nous permettre "d’appeler" le :checked dans le CSS!
Pour faire correspondre un lable à n input, il suffit de mettre dans l'attribut "for" du label, l'id de l'input correspondant.
Cependant, pour la pratique, vous devriez mettre tous les labels dans une seule et meme div d'une certaine classe, notamment si vous voulez leur donner à tous ne même allure lorsqu'ils sont actif, non actifs ou au passage de la souris!

Donc niveau code, on aurait ça:

Code:
<div class="fiche">
<input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" />
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
</div>


Vous voyez également que je leur ai donné à chacun deux classes (mettre class="lab hist" par exemple, signifie que l'élément est à la fois de la classe lab ET de la classe hist).

Maintenant, il vous suffit de placer tout ce que vous voulez dans vos onglets avant ou même après les label mais toujours après les input. Je vous conseillerais cependant de toujours mettre un div conteneur de tout les trucs changeant dans vos onglets pur facilement leur donner des position, ou des changements globaux, comme la taille, etc.
Pour mon code futur, j'aurais quelque chose comme ça:

Code:
<div class="fiche">
<input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" />
<div class="images"><!--  Ici des images qui changeront à chaque onglet --></div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="contenu_onglet"><!--  Ici des div contenant mes contenus (description physique, infos, etc) --></div>
</div>



Maintenant, parlons rapidement du CSS.
Tout d'abord, il faut savoir que les inut ne nous sont utiles à rien "visuellement" parlant. C'est pru cela que la première chose qu'on va faire, c'est de les "cacher" à l'aide d'un display. Cependant, attention de ne pas le faire sur les input seul, mais uniquement sur les input de votre fiche, ou sinon, vous serez incapable de créer des sujets ou envoyer des messages, vu que les boutons envoyer, prévisualiser et les titres sont TOUS des input.
Donc pour l'instant on a ça:

Code:
.fiche input {
  display: none;
}



Maintenant, pour ce qui est de l'effet lors du click du bouton de l'onglet, c'est ici qu'on va utiliser le sélecteur ~ tout comme :checked. Prenons par exemple, si je veux modifier le label "Infos" quand je clique dessus, pour bien indiquer que c'est sur CE label que je suis (comme l'onglet actif en Javascript) il me suffit d'écrir:

Code:
#informations:checked ~ .boutons .lab.infos { color: red; }


Ici, je dis: lorsque l'élément à id informations et coché (checked) alors le plus proche frère de classe boutons, verra son fils de classe lab ET infos modifié ainsi: sa couleur deviendra rouge.

C'est le même principe avec tout! Imaginons que j'ai une image de class="imag infos" que je veux aussi modifier lorsque #informations:checked, alors j'écris:

Code:
#informations:checked ~ .images .imag.infos { opacity: 1; }



Bien sûr, il faudrait de façon optimale qu'à la "base", c'est à dire que quand le label est non-coché, l'élément qui sera modifié (dans nos deux exemples le label d'informations puis l'image d'informations) ait une autre allure, et si possible, tous la même.  On pourrait par exemple penser à une opacité à 0 pour toutes les images quand l'input correspondant n'est pas coché, ou un display: none pour le contenu des onglets. C'est pour cela que les "double classes" sont utiles: dans mon exemple, j'aurais toutes les images qui seront de classe imag, et chacune des images aura une classe supplémentaire différente: infos, phys, car, hist et ecr. Cela me permettra donc de donner une allure générale à toutes mes images en mettant un:

Code:
.fiche .images .imag {
  opacity: 0;
  transition: all ease 1s;
]


Qui me permet de toutes les rendre invisibles, et le code plus haut me permet de les rendre visible seulement quand le on input est coché.

J'espère donc que tout ceci est assez claire: c'est vraiment la base de ce qu'il faut savoir, et si vous avez compris, l'exemple à la suite ne vous sera pas nécessaire. Cependant, si vous n'avez pas très bien compris, j'espère que l'exemple qui va suivre sera assez compréhensible pour que vous puissiez faire par vous même par la suite!


Exemple: faire une fiche de présentation


Pour cette exemple voilà ce que je vais vous montrer comment faire. Comme vous pouvez le voir, les labels sont donc les différentes parties usuelles d'une présentation (Infos, Physique, Caractère, Histoire et Derrière l'écran) et autant le texte interne que l'image du haut change.
Si vous avez bien lu ce qu'il y a plus haut, vous pouvez vous imaginer plus ou moins comment j'ai fait tout ça mais malgré tout, je vais vous expliquer pas à pas!

Le HTML


Rappelez-vous plus haut, j'ai dit que ma base était ceci:

Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images"></div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"></div>
</div>

J'ai juste renommé contenu_onglets par interne.

Vu que je veux en faire une fiche de présentation, je vais tout de suite ajouter deux choses: le Nom et Prénom et une petite citation:

Code:
<h1>Prénom Nom</h1>
<div class="citation">« Une jolie petite citation »</div>


Ce qui donne, sachant que je veux mettre le nom sous l'image et qui "empiète" sur l'image:

Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images"></div>
<h1>Prénom Nom</h1>
<div class="citation">« Une jolie petite citation »</div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"></div>
</div>



Maintenant, il est temps de rajouter les images. Je vais créer des div avec deux classes, comme expliqué plus haut: la class imag pour chacune d'entre elle, et leur classe qui leur est "propre" qui va me permettre de la changer au gré de boutons.

Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images">
<div class="imag infos" style="background-image: url('http://38.media.tumblr.com/baa66b83079e0cfb94328d9d721b7acc/tumblr_n8ucrv9CWu1taqwcpo5_500.gif');"></div>
<div class="imag phys" style="background-image: url('http://33.media.tumblr.com/6406227aace1b8d25a5c94c4fae05f04/tumblr_n8ucrv9CWu1taqwcpo6_500.gif');"></div>
<div class="imag car" style="background-image: url('http://33.media.tumblr.com/4cba62a69dc06430c78675a25b783669/tumblr_n8ucrv9CWu1taqwcpo9_500.gif');"></div>
<div class="imag hist" style="background-image: url('http://31.media.tumblr.com/22f282d3778e8ec3811cd6c82fa8977f/tumblr_n8ucrv9CWu1taqwcpo8_400.gif');"></div>
<div class="imag ecr" style="background-image: url('http://media.tumblr.com/tumblr_lnmvmtBDbM1qm00hqo1_500.gif');"></div>
</div>
<h1>Prénom Nom</h1>
<div class="citation">« Une jolie petite citation »</div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"></div>


Vous remarquerez que j'ai mit tout de suite dans la balise style l'image de fond. De cette façon, les membres pourront changer les images comme bon leur semble. C'est aussi la raison pour laquelle j'ai mit des balises div et non pas des balises img, car on ne sait jamais la taille des images que vont nous donner les membres. Je redimensionne ici la largeur automatiquement dans le CSS, mais je déteste donner une hauteur et une largeur fixe, qui déformerait alors les images. Je préfère donc mettre une div. C'est donc une préférence personnelle: vous n'êtes pas obligés de faire comme moi.

Maintenant, rajoutons les div qui contiendront nos descriptions physique, mental, l'histoire et les infos (tant RP que joueur). Ce sera le même principe que celui des images: je donne une classe générale à tous mes contenus qui s'appelle justement contenu et une class qui leur est spécifique. Vu que je n'utilise jamais les classes spécifiques aux images ou au contenu seules pour quoi que ce soit, et que j'écris toujours dans CSS leur deux classes (donc par exemple .imag.infos ou .contenu.info et jamais .infos seul) j'ai mit la même classe "spécifique" tant à l'image qu'au contenu correspondant.
J'ai le droit de le faire: une classe n'est pas un id, et donc, n'a pas à être unique! Cependant, faites bien attention de ne PAS spécifier dans le CSS de choses pour els classes communes à des choses qui n'ont rien à voir, mais bien d'utiliser les deux classes qui les décrivent!

Quoiqu'il en soit, voilà tout le HTML maintenant que j'ai ajouté le contenu de chaque onglet:

Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images">
<div class="imag infos" style="background-image: url('http://38.media.tumblr.com/baa66b83079e0cfb94328d9d721b7acc/tumblr_n8ucrv9CWu1taqwcpo5_500.gif');"></div>
<div class="imag phys" style="background-image: url('http://33.media.tumblr.com/6406227aace1b8d25a5c94c4fae05f04/tumblr_n8ucrv9CWu1taqwcpo6_500.gif');"></div>
<div class="imag car" style="background-image: url('http://33.media.tumblr.com/4cba62a69dc06430c78675a25b783669/tumblr_n8ucrv9CWu1taqwcpo9_500.gif');"></div>
<div class="imag hist" style="background-image: url('http://31.media.tumblr.com/22f282d3778e8ec3811cd6c82fa8977f/tumblr_n8ucrv9CWu1taqwcpo8_400.gif');"></div>
<div class="imag ecr" style="background-image: url('http://media.tumblr.com/tumblr_lnmvmtBDbM1qm00hqo1_500.gif');"></div>
</div>
<h1>Prénom Nome</h1>
<div class="citation">« Une toute petite citation »</div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"><div class="contenu infos">Hello, mon nom c'est [b]Mushu[/b] et je suis la [strike]mascotte[/strike] l'esprit animal de la famille Fa. En gros [b]je suis un peu pauvre[/b] parce qu'on m'oblige à m'occuper des vieux esprits de la famille Fa et c'est hyper chiant. Sinon [b]je suis vraiment très vieux[/b], mais genre, super vieux. Et [b]j'adore les pancakes, Mulan et les blagues pas drôles[/b] et je déteste [b]ce satané [strike]Cricket[/strike], les Huns et le faite que je sois si petit[/b].
Sinon [b]j'ai comme signe particulier le faite que je sois un dragon orange et très petit[/b]. Mon plus grand secret [b]ne vous regarde pas[/b]!</div>
<div class="contenu phys">Ici la description physique. </div>
<div class="contenu car">Ici la description du caractère</div>
<div class="contenu hist"> Ici l'histoire</div>
<div class="contenu ecr">Ici les informations joueurs</div></div>
</div>


Il est à noter que j'ai également deux link de polices de Google Fonts qui sont ajoutées à ma présentation, mais vus devriez les mettre dans votre overall_header. Ces deux polices sont Abel et Lobster.


Le CSS


Maintenant, il est temps de passer au CSS de ma fiche!

Tout d'abord, on va mette en forme la fiche de façon tout à fait normale. Du coup, ça ne tient que du CSS dont vous avez l'habitude et de mettre la fiche en forme comme on veut.

Tout d'abord, on va cacher les input en haut de fiche. On ne veut pas qu'ils apparaissent, parce qu'ils sont un peu moche, mais aussi et surtout parce qu'ils ne sont pas utiles. On  a donc ceci:

Code:
/* On cache les input */
.fiche > input { display: none; }



Ensuite, je crée la fiche. Bords arrondis, un fond, une taille, je la centre. Rien de bien compliqué.

Code:
/* On met en place la fiche et son image de fond */
.fiche {
  position: relative;
  width: 500px;
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
  background: url('http://image.noelshack.com/fichiers/2015/53/1451484327-img-thing.jpg');
  background-size: 150px;
}



Maintenant, je vais aussi mettre en forme tous els "invariants" de la fiche. C'est à dire, tout ce qui ne va pas changer au gré des onglets. Pour moi, c'est le titre et la citation. Je les mets donc en forme:

Code:
/* Mise en forme du titre de la fiche */
.fiche > h1 {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0px;
  margin-top: -34px;
  text-align: center;
  font-weight: normal;
  font-family: 'Lobster';
  font-size: 30px;
  color: white;
  text-shadow: 1px 1px 1px black;
}

/* Mise en forme de la citation de la fiche */
.fiche .citation {
  width: 100%;
  padding-bottom: 2px;
  background: #BA2F23;
  text-align: center;
  font-family: 'Abel';
  font-size: 15px;
  font-style: italic;
  line-height: 20px;
  color: white;
  text-shadow: 1px 1px 1px black;
}




Maintenant, on a les labels (qui sont donc nos titre des onglets), ainsi que le contenu à mettre en forme. Là, ça devient un peu plus corsé, parce qu'on veut que ça change.
Cependant, ce n'est pas si compliqué que cela. En effet, on va mettre en forme simplement comme s'il n'y avait pas d'onglets. Donc on va simplement mettre en forme les différents éléments, comme si on faisait une fiche normale.

Je commence par les images. Je vais donc leur donner des tailles (vu qu'elles sont dans des div), ainsi que de mettre une taille pour l'image de fond. Je les place alors toutes au bon endroit.

Petite subtilité ici: j'ai le conteneur "images" que je emts en relative, simplement parce que je veux créer un effet d'apparition en fondu pour les onglets. Du coup, il faut que toutes mes images ("imag") à l'intérieur aient une position absolue et se trouve au même endroit.

Pourquoi? Eh bien tout simplement parce que je devrais ensuite les mettre en opacité 0, mais que cela ne va pas les "effacer". C'est à dire qu'elles feront toujours la même taille, et donc, resteront à la même "place".
Si vous voulez éviter ceci, et que vous ne souhaitez pas forcément d'effet de fondu, vous pouvez tout simplement utiliser à la place de mes opacity et visibility, un display: none; puis un display: block; pour refaire apparaître.

Notez que cela sera pareil pour mes contenus plus bas.


Je mets également tout de suite l'opacité à 0 et la visibilité à invisible. En effet, je ne veux faire apparaître mes images que lorsque le bon onglet est sélectionné. Cependant, si vous voulez voir le résultat pour votre fiche avant d'avoir activé les onglets, juste pour voir à quoi ça ressemble, vous pouvez effacer ces deux lignes.

Code:
/* Mise en place la partie qui contient les images */
.fiche .images {
  position: relative;
  width: 500px;
  height: 220px;
}

/* Mise en place des images. On les cache également de base */
.fiche .images .imag {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 500px;
  height: 220px;
  background-size: 500px;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.5s;
}



Mettons également les lables, ou les titres d'onglets, en forme. Ici, on les met en forme quand les onglets sont non-sélectionnés, mais aussi lorsqu'on passe la souris sur eux. Je mets également le cursor: pointer;  pour que l'on voie que le label est cliquable, et représente donc un onglet.
Avec l'aide de mon conteneur "boutons" je vais aussi faire en sorte que les labels soient bien centrés.

Code:
/* On met les labels au centre */
.fiche .boutons { text-align: center; }

/* Mise en forme des labels/titre des onglets normal */
.fiche .boutons label {
  margin-left: 6px;
  margin-right: 6px;
  color: white;
  font-size: 23px;
  font-family: 'Abel';
  cursor: pointer;
  text-shadow: 1px 1px 1px black;
  transition: all ease 0.5s;
}

/* Effet au survol des labels */
.fiche .boutons label:hover {
  color: #EAFF05;
  transition: all ease 0.5s;
}



À présent, je vais mettre en place et en forme la partie de la contenue de ma fiche. Tout d'abord, vu que je veux un effet d'apparition en fondu, je dois donner une hauteur à mon contenuer "interne" et le mettre en position relative. Les "contenu" devront également avoir une hauteur prédéfinie et un overflow: auto; pour que le texte ne dépasse pas. Comme pour les images, je les mets tout de suite l'opacité à 0 et la visibilité à invisible, vu que je ne veux faire apparaître mon contenu que lorsque le bon onglet est sélectionné.

Si vous n'aimez pas les barres de navigation/scroll pour les longs contenus, vous pouvez très bien supprimer le positionnement absolu des "contenu" et plutôt que d'utiliser opacity: 0; et visibility: hidden;, vous pouvez utiliser display: none;. Vous n'aurez cependant plus d'apparition en fondu.

Code:

/* On met en place le bloc qui va contenir le contenu de chaque onglet */
.fiche .interne {
  position: relative;
  width: 90%;
  height: 300px;
  margin: auto;
  border-radius: 10px;
  background: white;
  box-shadow: 1px 1px 10px grey inset;
  font-family: 'Abel';
  font-size: 15px;
  color: black;
}

/* On met en place et en forme le contenu de chaque onglet */
.fiche .interne .contenu {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 90%;
  height: 260px;
  padding: 10px;
  margin: auto;
  overflow: auto;
  text-align: justify;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.5s;
}



Enfin, dernière partie de la mise en forme de base: je vais mettre un petit effet sur ce que je mets en gras dans la fiche. Je veux une autre couleur.

Code:
/* Petit effet sur les b: on change la couleur */
.fiche .interne strong { color: #BA2F23; }



Il est donc temps de modifier selon quel onglet est changé. En fait, c'est très simple à comprendre avec les explications de plus haut. Vu qu'on a bien fait en sorte que les input soient frères aux classes "boutons", "images" et "interne", il suffit pour chaque bon input/onglet (donc ce qu'on a décrit avec une id, qui deviendra donc #informations ) de faire apparaître ou modifier le bon élément.

Ici, vu qu'on a utilisé des classes similaires pour chaque éléments (donc .infos, .phys, .car, .hist et .ecr), on a n'a qu'à changer la classe qui précède. Pour plus de sécurité cependant, j'ai utilisé la "double-classe" comme ceci: .lab.infos. Cependant, au lieu de .fiche #informations:checked ~ .boutons .lab.infos vous auriez pu simplement écrire .fiche #informations:checked ~ .boutons .infos.

Si vous avez décidé d'utiliser le display: none; plutôt que l'opacité et la visibilité, n'oubliez pas ici d'utiliser un display: block; plutôt que le code actuel!


Code:

/* Fait le changement de style sur les labels sélectionnés */
.fiche #informations:checked ~ .boutons .lab.infos,
.fiche #physique:checked ~ .boutons .lab.phys,
.fiche #caractere:checked ~ .boutons .lab.car,
.fiche #histoire:checked ~ .boutons .lab.hist,
.fiche #ecran:checked ~ .boutons .lab.ecr {
  font-family: 'Lobster';
  color: #EAFF05;
}

/* Fait apparaitre l'image de l'onglet sélectionné */
.fiche #informations:checked ~ .images .imag.infos,
.fiche #physique:checked ~ .images .imag.phys,
.fiche #caractere:checked ~ .images .imag.car,
.fiche #histoire:checked ~ .images .imag.hist,
.fiche #ecran:checked ~ .images .imag.ecr {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.5s;
}

/* Fait apparaitre le contenu de l'onglet sélectionné */
.fiche #informations:checked ~ .interne .contenu.infos,
.fiche #physique:checked ~ .interne .contenu.phys,
.fiche #caractere:checked ~ .interne .contenu.car,
.fiche #histoire:checked ~ .interne .contenu.hist,
.fiche #ecran:checked ~ .interne .contenu.ecr {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.5s;
}



Voici donc le CSS complet et commenté:

Code:

    /************************************************ FICHE ************************************************/
/* On met en place la fiche et son image de fond */
.fiche {
  position: relative;
  width: 500px;
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
  background: url('http://image.noelshack.com/fichiers/2015/53/1451484327-img-thing.jpg');
  background-size: 150px;
}

/* On cache les input */
.fiche > input { display: none; }

/* Mise en place la partie qui contient les images */
.fiche .images {
  position: relative;
  width: 500px;
  height: 220px;
}

/* Mise en place des images. On les cache également de base */
.fiche .images .imag {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 500px;
  height: 220px;
  background-size: 500px;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.5s;
}

/* Mise en forme du titre de la fiche */
.fiche > h1 {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0px;
  margin-top: -34px;
  text-align: center;
  font-weight: normal;
  font-family: 'Lobster';
  font-size: 30px;
  color: white;
  text-shadow: 1px 1px 1px black;
}

/* Mise en forme de la citation de la fiche */
.fiche .citation {
  width: 100%;
  padding-bottom: 2px;
  background: #BA2F23;
  text-align: center;
  font-family: 'Abel';
  font-size: 15px;
  font-style: italic;
  line-height: 20px;
  color: white;
  text-shadow: 1px 1px 1px black;
}

/* On met les labels au centre */
.fiche .boutons { text-align: center; }

/* Mise en forme des labels/titre des onglets normal */
.fiche .boutons label {
  margin-left: 6px;
  margin-right: 6px;
  color: white;
  font-size: 23px;
  font-family: 'Abel';
  cursor: pointer;
  text-shadow: 1px 1px 1px black;
  transition: all ease 0.5s;
}

/* Effet au survol des labels */
.fiche .boutons label:hover {
  color: #EAFF05;
  transition: all ease 0.5s;
}

/* On met en place le bloc qui va contenir le contenu de chaque onglet */
.fiche .interne {
  position: relative;
  width: 90%;
  height: 300px;
  margin: auto;
  border-radius: 10px;
  background: white;
  box-shadow: 1px 1px 10px grey inset;
  font-family: 'Abel';
  font-size: 15px;
  color: black;
}

/* On met en place et en forme le contenu de chaque onglet */
.fiche .interne .contenu {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 90%;
  height: 260px;
  padding: 10px;
  margin: auto;
  overflow: auto;
  text-align: justify;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.5s;
}

/* Petit effet sur les b: on change la couleur */
.fiche .interne strong { color: #BA2F23; }

/* Fait le changement de style sur les labels sélectionnés */
.fiche #informations:checked ~ .boutons .lab.infos,
.fiche #physique:checked ~ .boutons .lab.phys,
.fiche #caractere:checked ~ .boutons .lab.car,
.fiche #histoire:checked ~ .boutons .lab.hist,
.fiche #ecran:checked ~ .boutons .lab.ecr {
  font-family: 'Lobster';
  color: #EAFF05;
}

/* Fait apparaitre l'image de l'onglet sélectionné */
.fiche #informations:checked ~ .images .imag.infos,
.fiche #physique:checked ~ .images .imag.phys,
.fiche #caractere:checked ~ .images .imag.car,
.fiche #histoire:checked ~ .images .imag.hist,
.fiche #ecran:checked ~ .images .imag.ecr {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.5s;
}

/* Fait apparaitre le contenu de l'onglet sélectionné */
.fiche #informations:checked ~ .interne .contenu.infos,
.fiche #physique:checked ~ .interne .contenu.phys,
.fiche #caractere:checked ~ .interne .contenu.car,
.fiche #histoire:checked ~ .interne .contenu.hist,
.fiche #ecran:checked ~ .interne .contenu.ecr {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.5s;
}

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 è_é

Mettre la navigation en colonne (verticalement), positionnement libre - Ven 29 Nov 2013 - 17:39



Navigation en colonne - positionnement libre


Bien que principalement pour PhpBB2, cette astuce est facilement adaptable pour toutes les versions de forumactif.

Dans cette astuce l'objectif est de changer l'affichage de la navigation pour qu'elle ne soit plus en ligne mais en colonne, les liens affichés les uns en dessous des autres. La navigation restera cependant celle d'origine et ses liens pourront être modifiés via le panneau d’administration (ajout du calendrier, du portail, etc...). De même, les connectés auront les liens de profil et messagerie que les invités n'auront pas. Bref, vous l'avez compris, la barre barre restera identique dans son contenu que la navigation classique mais son positionnement change, les liens seront les uns en dessous des autres et le bloc qui les contiendra pourra être placé où vous le souhaitez (par défaut dans le code il sera collé au bord gauche de la page.

Exemple de résultat (le lien "membre" étant survolé) :

Tag toutes_les_versions sur Never Utopia - graphisme, codage et game design 318675prov

1/ Modification du template

Tout d'abord il nous faut trouver le code affichant la navigation. Allez pour cela dans votre template "Haut de page" (dans "Affichage" > "Templates" > "Général") autrement nommé "overall_header". Notre bout de code se trouve de la ligne 265 à 269.

Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
</table>
De ce code, nous n'allons conserver que la variable affichant seulement la navigation :

Code:
{GENERATED_NAV_BAR}
Et donc remplacer tout le code plus haut (des lignes 265 à 269) par celui-ci :

Code:
<div id="navigation">
    <div id="navig">{GENERATED_NAV_BAR}</div>
  </div>
N'oubliez pas d'enregistrer puis de valider votre template.

Allez également changer l'affichage de votre navigation, si besoin. Assurez-vous que vous avez coché "non" dans "Affichage" > "En-tête et navigation" > "Afficher seulement des images dans la barre de liens".  


2/ Le CSS

Tout d'abord il faut savoir que l'affichage par défaut de chaque lien de navigation sont "inline" (en ligne), nous allons donc les changer en "block" (bloc).

Code:
#navig a
{
  display: block;
}
Rien que ce code permet de mettre votre navigation en colonne, mais cela décale alors tout vers le bas puisqu'elle prend désormais de la place en hauteur et non en largeur.
Pour corriger cela nous allons mettre le bloc "navigation" en absolute et délimiter sa taille.
Pour le reste, il suffira de mettre les couleurs, bordures et effets que vous souhaitez sur votre bloc. Voici le CSS expliqué :

Code:
/* NAVIGATION */

#navigation /* configure le bloc qui contient tout les liens */
{
  position: absolute; /* permet de mettre la navigation par dessus le reste sans decalage */
  top: 0; /* colle le bloc en haut de la page */
  left: 0; /* colle le bloc a gauche de la page */
  margin-top: 100px; /* marge haute */
  border: 3px solid #44a5ff; /* bordure */
}
#navig a /* personnalise les liens */
{
  display: block; /* met les liens en colonne */
  margin-bottom: -20px; /* enleve l'espacement par defaut des liens entre eux */
  background: #ffffff; /* couleur de fond des liens */
  border-bottom: 1px solid #e6e6e6; /* bordure basse des liens */
  padding: 3px 10px; /* marge interieure des liens */
  text-align: center; /* alignement du texte */
  text-transform: uppercase; /* met le texte en majuscule */
  transition: 1s; /* realise une transition lente avec l effet au survol */
  -moz-transition: 1s;
  -htm-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
}
#navig a:hover /* personnalise les liens au survol */
{
  background: #212121; /* couleur de fond du lien */
  color: #ffffff; /* couleur du texte lien */
  transition: 1s; /* permet la transition lente */
  -moz-transition: 1s;
  -htm-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
}
#navig img
{
  display: none; /* permet d enlever l espace vide de l image contenue par defaut dans le lien */
}
Quelques remarques et explications sur l'apparence de vos liens :
la marge : par défaut les liens de navigation sont très espacés. Pour combler cela j'ai ajouté une marge basse négative (margin-bottom) à mes liens (navig a). On aurait pu faire la même chose avec une marge haute négative mais cela faussait alors ma marge haute sur le bloc, je préférais mettre le margin-bottom, c'est plus logique à mon sens et posera moins de problème.
l'image : une image vide se trouve dans les liens, par défaut, c'est l'image de l’icône que vous pouvez ajouter aux liens lorsqu'ils sont affichés en "texte". Ce bloc vide possède des dimensions, il est petit, certes, mais vous gênera lors de votre personnalisation. C'est pour enlever totalement l'affichage de ce bloc que j'ai noté un "display: none" dans l'image des liens de navigation.


3/ Personnaliser

Positionner le bloc où vous le souhaitez - Pour cela vous aurez deux solutions, selon l'endroit où vous voulez placer votre bloc. Si votre bloc doit se placer par rapport au coin ou au bord de la page, vous pourrez simplement faire varier les "margin" (margin-top, margin-left) afin de le décaler plus ou moins du haut de page et du bord gauche. Si au contraire vous voulez mettre ce bloc par rapport à une bannière (si vous avez prévu dans votre bannière un cadre qui doit contenir la navigation), vous devrez commencer ABSOLUMENT par mettre le positionnement suivant :

Code:
#navigation
{
top: 0;
left: 50%;
}
Ce n'est que par rapport à cette position de référence que vous pourrez ensuite ajouter un margin-top ou un margin-left, quitte à mettre un margin-left négatif pour le ramener vers la gauche.
Je ne détaille pas le pourquoi du comment de cette méthode, si vous voulez la comprendre je vous encourage à consulter Le Cursus codage - Partie 4, TP1 (créer une page d'accueil HTML pour un forum) où je l'explique plus précisément.

Mettre des images à la place des liens textes - Même si je vous ai fait afficher uniquement les liens en début de tutoriel, vous pouvez parfaitement mettre des images à la place. Pour cela n'oubliez pas de changer l'affichage dans le panneau (Affichage > En-tête et navigation > Afficher seulement des images... > Oui). Tenez compte de la taille voulue dans la réalisation de vos images ! Prenez en considération que les images seront les unes sur les autres, et il est préférable qu'elles fassent toutes la même largeur.

Diminuer l'opacité - Si votre navigation est placé par rapport au bord de page comme dans mon premier exemple, il est possible que pour les résolutions basses elle soit par dessus la bannière... Il peut donc être judicieux, selon votre positionnement, d'afficher ce bloc de navigation en opacité réduite, et faire en sorte qu'il apparaisse en opacité totale au survol de la souris.
Pour cela, utilisez le code d'opacité suivant (à ajouter dans le début du css, pour "navigation") :

Code:
#navigation
{
opacity: 0.5;
-moz-opacity: 0.5;
-khtm-opacity: 0.5;
filter: alpha(opacity=50);
}
#navigation:hover
{
opacity: 1;
-moz-opacity: 1;
-khtm-opacity: 1;
filter: alpha(opacity=100);
}
Fixer la navigation ? - Fixer la navigation signifierait que le bloc ne bougera pas lorsque l'utilisateur scrollera la page. Il faut tenir compte de cela et bien visualiser que le bloc cachera tout ce qui passera en dessous de lui, c'est pourquoi je vous conseille de ne pas fixer le bloc et de le laisser en positionnement "absolute".

Combiner deux tutoriels ? - Avec le tutoriel que vous venez de consulter vous pouvez combiner "Bloc de navigation" (haut, bas et ancres) pour placer votre bloc de navigation DANS l'onglet et ainsi faire en sorte que cette navigation soit la vraie navigation de votre forum, et non des sortes de "liens utiles". Si vous faites cela, le positionnement "absolute" du bloc "navigation" n'est pas nécessaire.

Neva

Image de fond s'adaptant à toutes les résolutions - Dim 24 Nov 2013 - 12:19


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


IMAGE DE FOND FIXE S'ADAPTANT À
TOUTES LES RESOLUTIONS

Par défaut, si vous insérez une image de fond trop grande pour certaines résolutions, celle-ci est coupée. Le but de cette astuce est de vous permettre de mettre une image de fond sur votre forum qui apparaîtra à peu près pareil sur toutes les résolutions. Pour cela, cette image sera obligatoirement fixe (lorsque vous scrollez vers le bas de votre forum, l'image ne bouge pas).

A noter que le résultat ne sera pas totalement le même d'un écran à l'autre étant donné que les proportions des écrans peuvent changer (exemple de deux résolutions courantes : 1136*768px et 1024*768px => alors qu'on a la même hauteur, l'un est plus large que l'autre) mais cette solution permet tout de même d'harmoniser l'affichage au maximum sans déformer les proportions l'image.


Complétez ce code avec l'adresse de votre image et insérez-le dans votre CSS :

Code:
body {
  background: url('http://adresse de votre image') no-repeat center fixed;
  background-size: cover;
}

L'image doit être assez grande pour convenir à toutes les résolutions sans être pixelisée. 2560*1440px est la plus grosse des résolutions que j'ai trouvée mais elle paraît encore très peu utilisée (0,61%  selon http://fr.screenresolution.org/). Par contre, 1920*1080px semble être une grande résolution courante que je vous conseille de prendre en référence.
Attention au poids de votre image ! Je vous conseille d'enregistrer en JPG (le PNG est bien plus lourd) et n'hésitez pas à essayer de baisser la qualité du JPG dans les options d'enregistrement afin de voir le poids que vous pouvez atteindre sans affecter le rendu de l'image.

MAJ 18 juin 2014 : retrait des préfixes dans le CSS, devenus obsolètes

Neva

Design changeant selon l'heure (bannière, fond et autres) - Dim 22 Sep 2013 - 16:33


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


RAPPELS :
- Si vous avez un problème avec ce tutoriel, n'hésitez pas à poser vos questions mais faîtes-le ici : https://www.never-utopia.com/f177-probleme-avec-mon-code  (relisez le tutoriel en entier avant de le faire et, lorsque vous ouvrez votre sujet, fournissez l'adresse de ce tutoriel, le lien de votre forum ainsi que les codes CSS/Javascript/template posant problème)


Salut à tous !

Je vous propose un tutoriel permettant de modifier l’apparence de votre forum selon l’heure (que ce soit pour faire un effet jour/nuit, matin/après-midi, un changement pour seulement une heure ou deux dans la journée...). Les deux exemples proposés se concentreront sur la modification du fond du forum et la modification de la bannière mais je vous invite à tenter vos propres personnalisations =)

A SAVOIR :  
- Le code utilise l’heure de votre ordinateur donc, une fois le code installé, vous pouvez changer l’heure sur votre ordinateur et recharger la page pour tester les différentes périodes.  
- Les codes javascript sont à insérer dans panneau d'admin > modules > gestion des codes javascript
- Sur la page "Gestion des codes javascript", pensez à activer les codes en cochant "oui" après "Activer la gestion des codes Javascript" et en enregistrant.




MODIFIER LE FOND DU FORUM ENTRE LE JOUR ET LA NUIT


Tout d’abord, commencez par mettre votre image de fond pour la nuit à l’endroit habituel (panneau d’administration > affichage > gestion des images > mode avancé > Image du fond de page : collez l’adresse sur cette ligne et validez) et vérifiez qu’elle apparaît bien.

Ensuite, nous n’avons besoin que d’un peu de JavaScript.

Voici le code en question :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 7 && heure < 18){
          $("body").css("background-image", "url('ADRESSE FOND JOUR')");
        }
});


PERSONNALISATION :
Sur la troisième ligne, vous pouvez voir que j’ai défini le jour comme étant entre 7h et 18h. Vous pouvez modifier ces chiffres selon vos désirs (ne touchez qu’aux chiffres).
Attention, nous travaillons sur une base de 24h : 3h ne peut être que 3h du matin, on utilisera 15h pour 3h de l’après-midi.

Sur la quatrième ligne, pensez à remplacer ADRESSE FOND JOUR par l’adresse de ladite image (faites attention à ne pas supprimer les apostrophes, l’adresse doit être écrite entre).

Juste pour bien résumer, l'image que vous avez mise dans vos images est celle qui apparaît normalement et l'image mise dans le javascript est celle qui apparaît pendant la plage de temps inscrite dans le javascript.

INSTALLATION :
Une fois complété, le code est à mettre dans panneau d'admin > modules > gestion des javascript. Cochez bien la case Sur toutes les pages

Et voilà, c’est tout ce qu’il y a à faire ! =)




MODIFIER LA BANNIERE


Tout d’abord, commencez par mettre votre bannière pour la nuit à l’endroit habituel (panneau d’administration > affichage > gestion des images > mode avancé > logo : collez l’adresse sur cette ligne et validez) et vérifiez qu’elle apparaît bien.

Ensuite, il nous faut nos quelques lignes de JavaScript :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
        }
});



PERSONNALISATION :
Sur la troisième ligne, vous pouvez voir que j’ai défini le jour comme étant entre 7h et 18h. Vous pouvez modifier ces chiffres selon vos désirs (ne touchez qu’aux chiffres).
Attention, nous travaillons sur une base de 24h : 3h ne peut être que 3h du matin, on utilisera 15h pour 3h de l’après-midi.

Sur la quatrième ligne, pensez à remplacer ADRESSE FOND JOUR par l’adresse de ladite image (faites attention à ne pas supprimer les apostrophes, l’adresse doit être écrite entre).



Si la taille de la bannière de jour diffère de celle de nuit, il vous faut compléter et utiliser ce code :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
          $("#pun-logo img,#i_logo,#logo img").css("width", "LARGEUR EN PX");
          $("#pun-logo img,#i_logo,#logo img").css("height", "HAUTEUR EN PX");
        }
});


INSTALLATION :
Une fois complété, le code est à mettre dans panneau d'admin > modules > gestion des javascript. Cochez bien la case Sur toutes les pages




COMBINER LES DEUX CODES


Si vous souhaitez modifier votre bannière ET votre fond, lisez les deux explications plus haut et suivez la démarche pour le template et le CSS de la bannière mais utilisez ce JavaScript :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
          $("body").css("background-image", "url('ADRESSE FOND JOUR')");
        }
});





RAJOUTER DES TRANCHES HORAIRES


Pour rajouter des tranches horaires, il suffit de reproduire la partie de code qui suit (il s'agit du code pour changer le fond, je vous donne plus bas les parties pour les deux autres codes) en en changeant les infos et en collant  après le } de la précédente et avant le " }); " de fin :

Code:
       if(heure >= 7 && heure < 18){
          $("body").css("background-image", "url('ADRESSE FOND JOUR')");
        }


Voilà ce que ça donnerait en ajoutant un 19-23h :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 7 && heure < 18){
          $("body").css("background-image", "url('ADRESSE FOND 7-18h')");
        }
        if(heure >= 19 && heure < 23){
          $("body").css("background-image", "url('ADRESSE FOND 19-23h')");
        }
});


Pour la bannière, c'est cette partie que vous devez copier/coller/remplir avec les nouvelles infos de la même façon :
Code:
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
        }


Et cette partie pour le code combinant les deux effets :
Code:
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
          $("body").css("background-image", "url('ADRESSE FOND JOUR')");
        }





AUTRES :


Bien que cette astuce ait été fait avec la bannière et le fond en tête, il faut comprendre que cela peut fonctionner pour n'importe quoi.

Petit exemple où je veux qu'un bloc avec l'id "bloc_bleu" devienne rouge de 8 à 19h :
Code:
/*Partie html*/
<div id="bloc_bleu">Je suis un bloc bleu qui devient rouge de 8 à 19h.</div>

/*Partie javascript*/
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#bloc_bleu").css("background-color", "red");
        }
});


Petit exemple où je veux qu'une image avec l'id "image_quelconque" change d'images de 8 à 19h :
Code:
/*Partie html*/
<img id="image_quelconque" src="ADRESSE FOND NUIT" />

/*Partie javascript*/jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#image_quelconque").attr("src", "ADRESSE FOND JOUR");
        }
});


Bref, on sélectionne notre "id" avec le $("#JeSuisUnId") au début en changeant le "JeSuisUnId" par le nom de l'id de notre bloc/image.
Ensuite, on utilise .attr("src", "ADRESSE FOND JOUR"); pour changer l'adresse de l'image (seulement pour les images).
Ou, on utilise .css("propriété", "valeur"); pour changer une valeur dans le css, que cela soit le background-image, la couleur de l'écriture, etc.




CONSEILS SUPPLEMENTAIRES :
- En cas de problème, vérifiez bien tous les signes de ponctuation
- Pour faire apparaître/disparaître un élément, jouez sur la propriété display (je pense notamment à display: none; pour faire disparaître votre bannière)

Remplacer le règlement de base par le votre pour les inscriptions - Sam 16 Fév 2013 - 13:06


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


Bonjour !

Vous souhaitez que lorsqu'un membre s'inscrit sur votre forum, il ne tombe pas sur le célèbre règlement de base forumactif :
Spoiler:


Il vous faut tout d'abord concevoir votre propre règlement dans :
Panneau d'administration > Général > Règlement & FAQ > Règlement supplémentaire

Rédigez votre règlement et validez.


Ensuite, allez dans les templates :
Affichage > Template > Général > Agreement

Et retrouvez cette variable :
Code:
{AGREEMENT}

Et supprimez là.

Enregistrez et voilà, vous aurez supprimé le règlement de base et il ne restera plus que votre règlement personnalisé !


Voici le rendu maintenant :
Spoiler:


Voilà, bonne modifications. :)


Revenir en haut

La date/heure actuelle est Mar 19 Mar 2024 - 12:52