AccueilAccueil  Epic'Top  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

classe 4 - Roxane
 :: Codage :: Entraînement :: Cours :: Classe Jamy
Aller à la page : Précédent  1, 2
Administratrice
avatar

Fiche Membre
Lots gagnés:
Administratrice
Administratrice
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 04/12/2016
Messages : 1049
Sam 20 Mai 2017 - 23:24
Voilà mon premier essai !

J'ai lu tous les tutos que tu m'as mis (d'ailleurs dans le premier les images n'apparaissent plus. Je pense qu'il faudrait les refaire et les rehéberger)

Voici donc les codes de mon template (seulement la partie qui concerne le qeel, mais si tu as besoin de tout tu me dis):
Code:
<!-- BEGIN disable_viewonline -->
<div class="qeel">
   <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
         <td class="colonne1">
            <div class="titre">Statistiques</div>
               <span class="gensmall">
                  <div class="bloc">{TOTAL_USERS}
                  <br />
                                             {TOTAL_POSTS}</div>
                  <br />
                  <div class="bloc">{NEWEST_USER}</div>
                  <br />
                  <div class="bloc">{RECORD_USERS}</div>
                                             <br />
               </span>
            
         </td>
         <td class="colonne2">
               <span class="gensmall">
                  <div class="bloc">{LOGGED_IN_USER_LIST}
                  <br />
                  {TOTAL_USERS_ONLINE}</div>
                  <br />
                                          <div class="bloc"><table>{L_CONNECTED_MEMBERS}</table></div>
               </span>
         </td>
         <td class="titre">
            <div class="titre">Ils peuplent Scylla</div>
            <div class="bloc">
               <span class="gensmall"> {GROUP_LEGEND}</span>
            </div>
         </td>
      </tr>
   </table>
</div>

Et voici le CSS correspondant:
Code:
    .qeel .titre{
      text-align:center;
      font-family: 'IM Fell English SC', serif;
      font-size: 22px;
      color:#3B3C4A;
      text-transform:uppercase;
      text-decoration: none !important;
      font-weight:normal;
    }

.qeel .colonne1{
  background-color:blue;
}

.qeel .colonne2{
  background-color:red;
}

.qeel .colonne3{
  background-color:purple;
}

    .qeel .bloc{
      font-size:12px;
      color:#006600;/*couleur de rien*/
      font-family:Arial;
      width:200px;
      height:auto;
      margin:0 auto;
      text-align:justify;
      border-left: 5px solid #3B3C4A;
      border-right: 5px solid #3B3C4A;
      background-color:#A8ADBD;
      padding:8px;
    }

Pour voir ce que ça donne sur mon forum tu peux aller voir ici: http://charybde-en-scylla.forumactif.com/

Je ne sais pas trop comment intégrer l'image dans le template. Est-ce que c'est les mêmes balises que pour la fiche de PV, ou est-ce que le fait que ce soit un template change quelque chose ?
Et je ne sais pas non plus comment changer le texte qui accompagne les statistiques, ni comment ordonner les groupes pour qu'ils arrivent au bon endroit. Ni comment ajouter une description de groupe.

_________________________________________

Mes claviers d'ordinateur sont en qwerty, donc mes posts manquent parfois d'accents. Je m'en excuse si ca gene un peu la comprehension.

Cadeaux:
 
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2698
Lun 22 Mai 2017 - 15:21
J'ai remis des images valides !! Merci de me l'avoir signalé !

Pour le code, c'est pas mal du tout ! :D Du coup tu fais en tableau, c'est bien, et je te le laisse pour cette fois ci, mais au maximum, privilégie des div et les display pour faire des blocs côte à côte, les table, on doit vraiment garder ça pour si on met en forme des données, c'est plus propre ! :)

Citation :
Je ne sais pas trop comment intégrer l'image dans le template. Est-ce que c'est les mêmes balises que pour la fiche de PV, ou est-ce que le fait que ce soit un template change quelque chose ?
>> non le fait que ce soit un template ne change rien ! C'est exactement les même balises HTML ! :)
A vrai dire c'est le même langage ! Le fait que ce soit un template, avec des variables va juste permettre de n'écrire qu'une fois le code et qu'il va s’exécuter autant de fois qu'on a de données ! C'est plus clair quand on commence par les catégories à vrai dire, mais les catégories on va coder 1 titre, un bloc de de forum, 1 description ... Et la boucle va se faire autant de fois qu'on a de ligne enregistrée dans le panneau admin ... :)
mais c'est les mêmes balises qu'on utilise, donc c'est bien une img ! :) tout simplement


Citation :
Et je ne sais pas non plus comment changer le texte qui accompagne les statistiques, ni comment ordonner les groupes pour qu'ils arrivent au bon endroit. Ni comment ajouter une description de groupe.
alors pour changer le texte des statistiques, on va utiliser le JavaScript (=JS), un langage dynamique! :) Pareillement pour les différents groupes qui vont avoir changement de description au clique (comme sur épicode non ?) on va enlever le code de base qui affiche les groupes et recoder from scratch. :)

En fait le JS il a la faculté de récupérer un élément dans le code HTML (qu'on appel alors le DOM), et de le modifier. Cette modification elle peut se faire instantanément, ou alors au survol, ou alors au clique, au scroll... Le JS, bien utilisé ça rend des truc méga beau !
Mais alors atta, je veux t'apprendre ça dans les règles de l'art, et faut que j'organise mes pensées x)
En plus je voulais écrire des tutos JS pour épicode, tu vas être ma béta-readeuse x) (désolé pour ça !! x))


Du coup, je te propose de continuer à mettre en place l'image et le hover, car ça tu devrais savoir faire : il suffit de prévoir 3 blocs :
- un texte qu'on survol pour les stat
- une image (qui sera remplacée par du texte)
- un texte qu'on survol pour dernièrement
et le hover tu sais faire ! :) après, pour l'apparitions disparitions d'un cadre, il faut jouer avec le display none >> transformé au display block QUAND on survol le quatre ! :)
les terme que j'utilise devrait t'aider à construire le code normalement ! N'hésites pas si tu as besoin d'autres tips ! Coeur 2

et d'ici ce soir, j'édite ce post avec une superbe intro et chap 1 au JS pour récupérer des éléments et remplacer du texte ! :)

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

Administratrice
avatar

Fiche Membre
Lots gagnés:
Administratrice
Administratrice
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 04/12/2016
Messages : 1049
Mar 23 Mai 2017 - 18:45
Alors apres un combat contre les selecteurs et les positions, j'ai finalement réussi à gérer le hover de l'image comme je le souhaitais pour la partie centrale. J'ai aussi commencé à travailler sur la partie de droite, même si tous les contenus vont dépendre du javascript, j'ai au moins la structure de base.

Voilà donc le résultat: http://codepen.io/RoxaneEmerson/pen/GmPWPR

Je l'ai aussi installé sur le forum pour vérifier que ça marchait:
http://charybde-en-scylla.forumactif.com/

_________________________________________

Mes claviers d'ordinateur sont en qwerty, donc mes posts manquent parfois d'accents. Je m'en excuse si ca gene un peu la comprehension.

Cadeaux:
 
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2698
Jeu 25 Mai 2017 - 18:08
Hey ! Alors, je trouve le texte apparaît un peu tard au survol, en général, un utilisateur va pas attendre autant de temps ... Et puis, il va essayé de cliquer, il va pas comprendre croire que ça marche pas, va passer à autre chose ... Je pense il faudrait accélérer la transition mais ce n'est que mon avis ! ;)

Du coup, ne manque plus que le système d'onglet et modification des phrases ! Je suis en train de faire les tutos JS correspondant, je les postes le plus vite que possible pour continuer !


ps: je vais te changer ton niveau de codage en intermédiare !! qui correspond vachement plus à tes progrès !!!

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

Contenu sponsorisé
Aller à la page : Précédent  1, 2
Page 2 sur 2

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum