avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 30 Mai 2018 - 0:57
J'ai beau cherché, je ne vois pas de catastrophe x)
Ton code est très bien :3

Dans le HTML, dans les divtexte tu peux mettre du texte normal, les trucs avec le gras et soulignement c'était juste pour pratiquer ces balises. Donc un seul bloc suffira, p ou div comme tu veux. Tu peux aussi remplacer i par span et la mettre en italique via le CSS.

Sinon pour le grand titre tu aurais pu aligner uniquement l'image en left et laisser le titre centré, ça t'aurait éviter de calculer une marge de 150px.

A titre informatif, une transformation SkewY aurait eu le même effet également.

Tu peux mettre ta fiche en LS si tu veux :3




avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 30 Mai 2018 - 20:33
Ok, j'ai corrigé certains trucs :3

Pour le margin-left du grand titre, en fait j'ai fait comme ça pour que peu importe comment le titre est long, il commence toujours à cet endroit, alors que si je met en centré, un titre plus long pourrait se retrouvé coupé donc on le verrait pas forcément. Enfin, ça fait du coup que quand le titre est sur deux lignes on voit qu'il est pas centré, mais je crois pas que ce soit dérangeant :3

Au fait, j'ai un soucis avec la police Kaushan Script, je comprends pas d'où ça vient et comment régler le problème ?_?

J'avais déjà eu un peu de problème hier sur CodePen, elle voulait pas s'afficher même si au bout d'un moment elle a fini par apparaitre, mais là, je viens de mettre la fiche sur mon forum de test pour voir ce que ça rendrait sur un forum forumactif et corriger les derniers détails, et la police s'affiche pas, est-ce que ça vient que de moi ?

Pourtant il y a bien la balise link, ça devrait marcher... J'ai même essayé en mettant deux fois la balise link (une pour Caveat et une pour Kaushan Script) plutôt qu'une seule pour les deux comme j'ai mis, mais pareil ça marche pas, et en la mettant dans le css non plus. Donc je comprends pas ce qui cloche... Caveat s'affiche bien et j'ai essayé d'autres polices, elles s'affichent aussi...

Bref, du coup, je pourrais la mettre en LS après ? Tu avais pas déjà mis ta version à toi en LS ? Faudrait te mettre dans les crédits aussi, non ? x'3
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 31 Mai 2018 - 1:06
Le souci ce n'est pas le lien. Dans ton CSS le navigateur affiche
Code:
font-family: 'Kaushan Script',cursive;

C'est le code pour un i mais ça devrait pas être traduit ainsi, c'est peut-être un bug de FA.
Tu peux mettre le code exactement comme tu l'as collé dans ton message pour que je teste sur mon forum ?

Sinon, tu peux aussi réactiver le JS depuis le PA > modules si tu ne l'as pas déjà fait. La MAJ du 25 Mai l'a désactivé sur tous les forums.

Edit : bah même avec la balise code le i s'affiche, donc sur le navigateur il a mis un code bizarre avec &# 105; au lieu du "i" dans script.

Edit 2 : Ah j'ai oublié de répondre pour le LS. Au fait non je l'ai posté en tant qu'exercice et non LS. Je l'ai déjà codé mais bon je te laisse t'en occuper :3


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 31 Mai 2018 - 2:20
J'ai... rien compris ?_? Que quoi un code pour un i ?? De quoi tu parles ??

Le code exactement comme j'ai collé sur mon message, j'ai mis ça :
Code:
<style type="text/css">.ficheentiere{background-color:#fdb987;width:500px;overflow:hidden;margin:auto;color:beige;font-family:Verdana;font-size:13px;text-align:center}.zonegrandtitre{width:600px;padding:25px 0 15px;background-color:beige;transform-origin:0 0;transform:rotate(5deg);margin-top:-45px;margin-bottom:50px;text-align:left}.zonegrandtitre h1{font-family:'Kaushan Script',cursive;color:#aa91a7;font-size:40px;margin: 0px 0px 10px 150px;}.zonegrandtitre img{width:550px}.petitephrase{font-style:italic}.ficheentiere hr{width:400px;margin-bottom:15px;border:1px solid beige}.ficheentiere h2{background-color:beige;color:#765b7e;font-size:24px;text-transform:uppercase;font-weight:bold;font-family:'Caveat',cursive;width:450px;margin:0 auto;padding:10px 0}.ficheentiere p{width:430px;margin:0 auto 15px;background-color:#765b7e;padding:10px}.credit{font-size:10px;color:#aa91a7;background-color:beige;opacity:.5;padding:0 25px;display:inline-block;margin-bottom:5px}.credit a{color:#765b7e;text-decoration:none}</style>


<link href="https://fonts.googleapis.com/css?family=Caveat|Kaushan+Script" rel="stylesheet" /><div class="ficheentiere"><div class="zonegrandtitre">
<h1>Grand Titre</h1><img src="https://redcdn.net/hpimg15/pics/183098minibaann.png" /></div><span class="petitephrase">une petite phrase qui devrait être un peu longue</span><hr /><h2>Premier sous titre</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis vel dolor veritatis porro ut, ratione sunt cum doloremque eius perferendis molestiae, hic deserunt asperiores nostrum, nisi qui voluptatum facilis assumenda!</p><h2>Deuxième sous titre</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos distinctio aperiam officiis nobis autem fugit repellendus vel esse dolor nihil magnam recusandae dicta, culpa odio saepe sint nam eum expedita.</p><span class="credit">Fiche codée par Tigrlion sur <a href="http://www.epicode-entraide.com/">Epicode</a></span></div>
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 31 Mai 2018 - 3:20
Je te fais un screen pour que tu comprends de quoi je parle



Alors, j'ai testé beaucoup de choses et il s'est avérée que nous venons de faire une découverte extraordinaire /pan
Les fonts dont le nom comporte le mot "script" ne fonctionne pas sur FA mais si tu mets le CSS dans la feuille de style ça fonctionne. Donc ça doit être un autre bug après la màj de FA.

Du coup tu peux soit changer la police, laisser ça comme ça en attendant que le problème soit réglé ou encore dire qu'il vaut mieux mettre le CSS dans le PA. Bon je crois que changer la police serait plus simple pour l'instant mais c'est comme tu veux.

En tout cas je crois que Chesh' peut reporter les problèmes à FA donc je vais la prévenir. Tu as sauvé forumactif bravo xD


Concernant la marge de 150px. Au fait je crois que logiquement si le titre est trop long et que tu le forces à commencer à 150px du côté gauche au contraire tu auras moins de place. De plus tu as un overflow hidden donc à part les deux ou trois premiers mots le reste du titre sera caché. Quand tu mets pas de marge ton bloc sera plus grand et tu auras plus d'espace pour écrire un titre long. Avec un alignement centré plus le texte est long plus il commence à gauche. Bon techniquement le bloc a la même taille mais si on le décale de 150px, on aura 150px de largeur caché à droite à cause de l'overflow: hidden.
Perso ça ne me dérange pas que tu gardes ça comme ça mais c'est juste pour t'expliquer un peu vu que la raison de ton choix est la longueur du texte.

Ah et pour les crédits ce n'est pas la peine, au pire tu peux dire que c mon schéma mais bon perso ça m'est bien égal.
Sinon ton code est parfait Lovely


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 1 Juin 2018 - 22:49
Ah oui, effectivement j'avais pas pensé à ça pour le margin-left. Du coup, cette fois, j'ai corrigé encore et tout devrait être bon maintenant !

Si ça marche tant que c'est dans la feuille de style du PA c'est tant mieux alors, j'avais l'intention dès le départ de dire de mettre là bas de toute façon, je l'avais mis directement sur le sujet sur mon forum pour pas encombrer ma feuille de style, j'imaginais vraiment pas que ça causerait un bug x)

Je vais de ce pas le proposer en LS du coup o/
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 2 Juin 2018 - 1:34
Avec ça je crois qu'on a bien maitrisé les structures et une grande partie du CSS.
ça te dirait de passer aux templates ?


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 2 Juin 2018 - 3:46
Ça me fait un peu peur mais ouais, je veux bien !
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 2 Juin 2018 - 18:59
Coucou :3

Mais tu n'as pas à avoir peur :3
Voici donc le schéma qu'on va utiliser



Je te laisse donc faire le codage hors template un peu comme ce qu'on a fait pour le concours.

Spoiler:


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 5 Juin 2018 - 20:59
Il est beaucoup trop beau ton schéma *-*

J'ai galéré avec les sous-forums, genre vraiment, il se peut que ce soit coder un peu n'importe comment x) Pour le reste, je suis plutôt confiante, je crois que je m'en suis assez bien sorti ?

Voila mon code sur Codepen : https://codepen.io/anon/pen/zaqBMe?editors=1100

Code:
<div style="background-color: #DCDCDC; min-width:800px;">

  <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">

  <div class="titrecat">
    <h2>Titre de la catégorie</h2>
  </div>

  <div class="blocforum">
    <div class="contenuforum">
      <img src="https://i62.servimg.com/u/f62/17/26/27/57/new11.png" class="newimg" alt="nouveau" />
      <div class="colonne1"><span>1 S | 5 M</span></div>
      <div class="colonne2">
        <div class="titreforum"><a href="">Titre du forum</a>
        </div>
        <div class="derniersujet"><a href="">Dernier sujet</a><br/> Aujourd'hui à 12:00<br/>
          <a href="">Tigrlion</a></div>
      </div>
      <div class="colonne3">
        <div class="descriforum">
          <img src="https://zupimages.net/up/18/23/ul38.png" />
          <p>Decription Praesent hendrerit ac dui ut volutpat. Quisque vitae elit ligula. Pellentesque ut eleifend dolor. Quisque semper mollis congue. Duis euismod, enim eget fermentum eleifend, quam justo gravida lorem, non scelerisque tellus lacus a risus. Ut ac turpis odio. Nunc sed elit at lacus fringilla interdum. </p>
        </div>

      </div>
    </div>

    <div class="blocsousforum">
      <div class="sousforum">
        <span><a href="">Sous forum</a> |
    <a href="">Sous forum</a> |
    <a href="">Sous forum</a> |
    <a href="">Sous forum</a> |
    <a href="">Sous forum</a> |
    <a href="">Sous forum</a>
  </span>
      </div>

    </div>
  </div>

  <div class="blocforum">
    <div class="contenuforum"><img src="https://i62.servimg.com/u/f62/17/26/27/57/new11.png" class="newimg" alt="nouveau" />
      <div class="colonne1"><span> </span></div>
      <div class="colonne2">
        <div class="titreforum"><a href="">Titre du forum</a>
        </div>
        <div class="derniersujet">
          
        </div>
      </div>
      <div class="colonne3">
        <div class="descriforum">
          <img src="https://zupimages.net/up/18/23/ul38.png" />
          <p> </p>
        </div>

      </div>
    </div>

    <div class="blocsousforum">
      <div class="sousforum">
        <span></span>

      </div>
    </div>
  </div>
  
</div>
Code:
.titrecat h2 {
  font-family: "Dancing Script", cursive;
  font-size: 45px; font-weight: normal;
  color: #ff9c9c; text-shadow: 1px 2px 0px white;
  letter-spacing: 1px; line-height: 35px;
  text-align: center; margin: 0px 0px 15px;
}

.blocforum {
  font-family:Arial;
  font-size:12px;
  margin-left: 30px;
}
.contenuforum {
  background-color: #ff9c9c;
  padding: 10px 0px; color:white;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
  position:relative; height:90px;
  }

.newimg {
  width:75px; height:75px;
  border-radius:70px;
  border:2px solid white;
  position:absolute; z-index:2;
  top:-35px; left:-30px;
}

.colonne1 {
  float:left; margin:0px 1.5%;
  width:10%; height:90px;
  position:relative;
}
.colonne1 span {
  position:absolute; bottom:0px;
  display:block; width:100%;
  padding:5px 0px;
  background-color:white;
  color:#ff9c9c; font-size:15px;
  text-align:center;
}

.colonne2 {
  float:left; margin-right:1.5%;
  text-align:center;
  width:25%; height:90px;
}
.titreforum {
  height:30px; overflow:auto;
}
.titreforum > a {
  font-family: "Dancing Script", cursive;
  font-size: 25px; transition:.5s;
  color: white;  letter-spacing: 1px;
  text-decoration:none;
}
.titreforum > a:hover {
  color:#e0e2f9;
}

.derniersujet {
  background-color:pink;
  text-shadow:0px 0px 2px #ff9c9c;
  height:55px; margin-top:5px;
  text-transform:uppercase;
  font-size:10px; line-height:18px;
}
.derniersujet a {
  text-decoration:none;
  color:#e0e2f9; transition:.3s;
}
.derniersujet a:hover {
  color:white;
}

.colonne3 {
  float:left; width: 59%; height:90px;
}
.descriforum {
  width:450px; height:86px;
  margin:auto; overflow:hidden;
  border:2px solid white;
  background-color:#e0e2f9;
  position:relative;
}
.descriforum img {
  position:absolute;
  transition:1s ease-out;
  width:450px; height:86px;
  }
.descriforum:hover img {
  transform:translate(-450px);
}
.descriforum p {
  color:#ff9c9c;
  margin:0px; padding:5px 30px;
  height:78px; overflow:auto;
  line-height:20px;  text-align:center;
}

.blocsousforum {
  margin: -2px 15px 8px 40px; height: 30px;
}

.sousforum {
  background-color: #ff9c9c;
  border-radius: 0px 0px 60px 60px;
  border: 2px solid white; border-top: 0;
  width: 65px; height: 30px; overflow: hidden;
  float: right; transition: 0.5s;
  text-align: center; position: relative;
  font-family: arial; color: #e0e2f9;
}
.sousforum:hover {
  width: 100%; transition: 1s;
}
.sousforum span {
  display: inline-block;
  opacity: 0; transition: 0.3s;
  padding: 3px 10px; margin: 0px 50px;
  border-top: 1px solid white;
  font-size: 13px; letter-spacing:-1px;
  max-height: 23px; overflow: auto;
}
.sousforum:hover span {
  opacity: 1; transition-delay: 0.7s;
}
.sousforum::after {
  content: "open";
  position: absolute;
  bottom: 5px; right: 5px;
  font-size: 16px; transform: rotate(-30deg);
}
.sousforum:hover::after {
  content: "close";
}
.sousforum a {
  color: #e0e2f9;
  font-weight: bold; transition:.5s;
  text-decoration: none;
}
.sousforum a:hover {
  color: white;
}
Ne fais pas attention à la première div (avec le background-color et min-width), c'est juste pour l'aperçu, ça fait pas parti du code final x'3
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 7 Juin 2018 - 18:39
Coucou,

Aaaah j'ai eu peur en voyant ta première div. J'avais pas encore lu ta remarque à la fin et j'étais genre "What ? l'attribut style ? sérieux ?" xD

Au fait pour simuler un fond de forum, tu peux mettre ce bout de CSS directement dans le sélecteur body, comme la balise body existe par défaut en html.

Après quand j'ai vu le reste ça a tout changé, j'étais si fière et impressionnée. J'ai trop aimé le open et close en pseudo-élément, c'était ingénieux
Les transformations sont parfaites aussi c'est cool :3
Ton rendu correspond à 100% au schéma, tu as fait du bon travail.

Les polices j'ai oublié de les préciser mais c'est bien Dancing Script pour les titres. Pour la police sans-sérif j'ai pris Roboto mais Arial est tout aussi bonne.

Alors je passe aux codes.

Je vois une bonne représentation du template en général, ça prouve que tu as retenu des choses de ton premier essai.

Pour l'image du statut (new), je vois un z-index qui ne sert pas à grand chose, tu as sorti l'image du flux mais des éléments voisins sont dans le flux donc on aura pas de superposition.

Tu as mis une span dans le bloc colonne1, je vois que tu l'as positionné en absolu mais je trouve que c'est trop casse-tête pour un élément qu'on va pratiquement pas bougé. Je me serai contentée de la div en lui attribuant une hauteur relative au texte, genre 20px et pour descendre ton bloc tu peux soit mettre simplement un margin-top à 65px ou 70px (la différence) ou le décaler avec top en relatif.

Dans la colonne3 tu auras une seule variable qui sera remplacée par le contenu de la description des forums. Donc si tu mets une div > img + p tu vas devoir demander à la personne qui va utiliser ton code de garder ce pattern dans la description de ses forums et donc de mettre le texte dans p et l'image à l'extérieur. Ce n'est pas difficile ou impossible mais c'est assez délicat surtout pour les personnes qui ne sont pas douées en codage, une simple modification de la description où on retire un chevron ou une balise par mégarde et le code est cassé. Tu peux laisser comme ça en gardant en tête de préciser qu'il faut mettre img + p dans la description ou tu peux mettre div.colonne3 > (p ou div) > img + texte.

idem pour la partie sous forum, tu as mis une div à l'intérieur d'une div et je ne comprends pas l'intérêt. Une seule div aurait suffit je pense, sauf si tu as une raison que je ne vois pas. Sinon tu peux mettre tes marges au même conteneur.

Voilà, j'ai beaucoup écrit mais en réalité y a pas grand chose, ton code est presque parfait, très bon travail :3


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 7 Juin 2018 - 20:49
Huhu, oui, c'est une habitude que j'ai du mettre une div avec une couleur de fond pour voir ce que ça donne, j'ai pas pensé au body dans le css, c'est vrai que c'est mieux, et l'aperçu est plus clair aussi x'3

Oui, t'avais pas dit les polices, j'ai fouillé Google Fonts pour retrouver la bonne police des titres en comparant avec ton plan XD

Contente que mes open/close en pseudo-élements te plaisent et que les transformations soient bonnes ! :3

Le z-index, je me souviens pourquoi j'avais mis ça, c'était pour que les sous-forums soient en dessous quand ils se déroulaient, sinon ils se mettaient au dessus, mais comme au final j'aimais pas même quand c'était en dessous, j'ai fait en sorte que les sus-forum ne touchaient pas l'image tout simplement, mais j'ai oublié d'enlever le z-index après x'3 Je l'enlève tout de suite !

Pour le span en absolute, en fait, c'est que quand c'est des petits chiffres, ça va, mais en imaginant un sous-forum avec genre 100 sujets et 500 messages sur un forum pas très grand en largeur (moins de 930px d'après mes essais, ce qui est déjà pas mal en fait) ça va se mettre sur deux lignes donc ça agrandit le bloc, alors je me suis dit que c'était mieux de le mettre en absolute en bas comme ça, parce que je vois pas d'autres moyens pour que l'agrandissement dérange pas ? Je sais pas x) Ou alors je devrais mettre le texte plus petit ?

La colonne 3 du coup, arf justement, j'aimerais mieux qu'on ait juste à mettre l'image dans le champs de forumactif et a écrire le texte normalement, sans avoir à insérer de codage particulier. Si je comprends bien je dois enlever la balise p pour ça du coup ? J'ai du mal à voir comment obtenir le même résultat autrement du coup en fait ?_?

Pour les sous-forums, c'est parce que j'ai beaucoup galéré avec, j'avais prévenu que c'était surement n'imp x'3 j'arrivais pas à obtenir ce que je voulais avec une seule balise. Du coup j'ai fait une première balise pour déterminer la taille qu'aura le bloc et les marges, et un deuxième pour bien placer mon truc à droite avec tous les effets et tout. Le premier est juste un bloc référant quoi, sans lui, j'arrivais pas à placer le bloc comme je le voulais et à le faire s'arrêter là ou je voulais quand il s'agrandissait >//<

Voila x'3 Du coup, j'ai quasiment rien modifié, je sais pas trop quoi faire ?_?
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 8 Juin 2018 - 14:07
Ah j'avoue ne pas avoir testé avec de grands nombres de sujets et messages.
Du coup tu peux augmenter la margeur du bloc, tu l'as en pourcentage ce qui est bien et franchement il reste pas mal d'espace inutilisé à droite donc autant augmenter la largeur à 11% ou 12% et diminuer celle de la troisième colonne. Tu peux aussi diminuer la police, ça me semble être une bonne idée, ne serait-ce que pour l'esthétique, à 13px ça rend plus joli je trouve mais bon c'est un gout personnel.

Pour la partie description. On peut déplacer le p de façon à englober l'image et le texte. Tu auras donc toujours ton conteneur en relatif, il suffira de mettre le paragraphe à la même dimension (en prenant en compte le padding) pour que le texte et l'image ne dépasse pas. Donc si tu mets un padding de 5px, il faut diminuer width et height de 10px. L'image étant en absolu elle se placera automatique au dessus du texte. La translation va permettre de la dégager au hover.
Dans ce genre de situation où l'image et le texte sont dans la même balise on a que deux choix qui se présentent au hover, soit la translation, soit le display: none. On ne peut pas jouer sur l'opacité ou la visibilité parce que ces deux propriétés ne permettent pas de sortir l'image du flux et donc même si on peut voir le texte au hover, on ne pas le "toucher" pour défiler ou autre vu que l'image est toujours là au dessus, elle est juste rendue transparente.

Les sous-forums sont plutôt bien fait, ce n'est pas n'importe quoi. ça nous arrive tous d'ajouter des balises pour arriver au résultat, le plus important est quand même d'avoir le bon rendu, surtout dans les commandes.
Alors j'ai testé sans la div parente, j'ai à peu près le même CSS que toi, pour avoir un espace entre les forums, j'ai mis un margin-bottom dans .blocforum, puisque tu as un bloc qui englobe le tout, autant l'utiliser.
Ton bloc sousforum est en relatif tu peux donc mettre top: -2px pour cacher la bordure au lieu d'une marge, et right pour avoir l'espace à droite. Pour la largeur j'ai mis 90% au hover ainsi ça ne touche pas l'image à gauche quelque soit la taille globale.

Je crois que c'est tout ce que j'ai modifié au pire tu peux vérifier CodePen. Je n'ai pas mis tout le CSS, j'avais la flemme xD


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 14 Juin 2018 - 23:47
OOkayyy, tout est bon pour moi maintenant ! :3
https://codepen.io/anon/pen/zaqBMe?editors=1100
J'ai pas changé pour la colonne1 (à part la taille de la police), moi ça me convient comme ça... je trouve pas ça laid quand ça s'agrandit le bloc en hauteur, au contraire j'aime bien en fait donc... >//<
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 15 Juin 2018 - 22:34
Coucou :3

Je trouve que c'est très bien ainsi :3

Je te laisse d'abord revoir ces deux tutoriels pour qu'on puisse transformer notre code.
Introduction aux templates
Template index_box

Si tu as des questions à propos des tutos n'hésite pas et si tu veux déjà faire un essai tu peux :3


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 22 Juin 2018 - 22:51
Salut, pardon j'ai mis du temps à répondre, pas mal occupée cette semaine >//<

Je crois pas avoir de question, je vais commencer à faire un petit (ou grand quasi complet) essai du code ce week-end, j'essaie de pas mettre trop de temps DX
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 23 Juin 2018 - 1:22
D'accord, pas de souci :3


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 26 Juin 2018 - 0:47
Voilaaa, mon résultat ici : http://toraion.forumactif.org/

Template index_body


J'ai eu un léger soucis avec les liens des sous-forums, ils s'affichaient en tout petit au lieu d'être à 13px comme spécifié dans la classe .sousforum span, du coup, j'ai ajouté un deuxième font-size:13px; dans .sousforum a... et j'ai changé le margin top du titre à 20px au lieu de 0 aussi, mais à part ça le CSS est exactement le même que sur Codepen, mais je le remet là quand même :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 26 Juin 2018 - 14:15
Tu peux être fière de toi, c'est parfait :3
Les liens aiment avoir leur propre couleur et taille, si tu as mis le font-size dans a il me semble qu'on peut le retirer du span vu qu'il ne servira plus là-bas.

Est-ce que tu as des questions sur cette partie du template index_box ?


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 27 Juin 2018 - 21:12
Le font-size du span affecte les barres | qui separe chaque sous forum en fait, vu que c'est pas des liens, si je l'enlève, elles se mettent dans la taille par défaut du texte du forum je crois.

J'ai pas de questoon, je crois que pour cette template là, je m'y retrouve ! ^^
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 28 Juin 2018 - 17:07
Ah oui les barres de séparation, je les ai complètement oubliées pardon.

Sais-tu à quoi sert le premier tableau du template?

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


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Lun 2 Juil 2018 - 13:02
Je crois que c'est la partie où y a marqué la date de notre dernière connexion et qu'il y a les liens type "voir tous les messages sans réponse"? Je suis pas sûr. Je savais pas trop si il valait mieux l'enlever ou le laisser, mais comme sur les autres catégories que j'avais fait on l'avait laissé, j'ai laissé aussi.

Envoyé depuis l'appli Topic'it
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 3 Juil 2018 - 14:27
Oui tout à fait.
On garde ou on supprime cette partie selon le design au fait. Cependant, les liens pour voir les nouveaux messages par exemple sont assez important et très souvent utilisés par les membres donc les supprimer serait dommage.

Donc pour comprendre la totalité du template on va gérer cette partie aussi.

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

On a donc un tableau avec une ligne et deux colonnes.
Code:
 <!-- BEGIN switch_user_logged_in -->

 <!-- END switch_user_logged_in -->
Cette boucle veut dire que son contenu sera afficher seulement si le membre est connecté (user logged in).
Nous avons donc ici deux variables dans la première boucle

{LAST_VISIT_DATE} : La date de notre dernière visite
{CURRENT_TIME} : La date et heure actuelle

Code:
<a href="{U_INDEX}">{L_INDEX}</a>
Lien et titre du forum

{NAV_CAT_DESC} : Description s'il y en a, qui se trouve généralement à la suite du lien

Cette partie est hors la boucle vu qu'elle s'affiche même pour les invités.

A la suite on trouve encore la boucle pour les connectés

On a deux variables :
{L_SEARCH_NEW} : nouveaux messages depuis la dernière visite
{L_SEARCH_SELF} : voir ses messages

Et le troisième hors boucle vu qu'il s'affiche pour les invités aussi
{L_SEARCH_UNANSWERED} : messages sans réponses

Bien sûr si on veut les utiliser il faut garder tout le lien j'ai juste la flemme de tout copier :3
Par exemple :
Code:
<a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>

Pour se retrouver dans un template il faut faire attention à deux choses généralement.
Les boucles qui s'écrivent comme des commentaires
et les variables qui s'écrivent entre accolades
C'est du code PHP, bon je ne connais pas le PHP mais en gros :
Les boucles se répètent en général et les variables sont remplacés par du HTML et du texte évidemment selon les paramètres dans le PA.
L'intérêt est donc d'avoir des infos à jour et correspondante au forum.

Si j'écris Tigrlion, bah ça sera ainsi toujours si je mets username, chaque personne verra son pseudo et si jamais tu changes de pseudo tu verras toujours celui d'actualités.
CURRENT_TIME permet d'afficher l'heure actuelle selon le fuseau horaire de chaque personne. On peut donc se connecter au même temps, on aura pas forcément la même heure parce que nous venons de différents pays.

Donc, pour notre exemple précédent, on va mettre en forme un peu l'entête de nos catégories :

Spoiler:

Je te laisse donc faire selon les variables qu'on a vu. Tu peux le faire en bloc comme tu peux garder le tableau, c'est comme tu veux.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Lun 9 Juil 2018 - 20:35
J'ai fait ça vite fait :

avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 12 Juil 2018 - 22:19
Hello :3

Et bien c'est tout bon bravo.
J'espère que tu te sens plus à l'aise avec ce template à présent.

Tu peux bien sûr mettre ton code en LS si tu veux :3

Voudrais-tu revoir un autre exemple de catégories ou passer à autre chose ?


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