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.

Le Deal du moment :
Jeux, jouets et Lego : le deuxième à ...
Voir le deal

    (Keylha) Codage de catégories

    HazelW
    HazelW
    FémininAge : 30Messages : 51

    Dim 7 Aoû 2016 - 19:35

    Ma demande



    Bonjouuuur !  cheers  J'ai quelques notions de codage, mais ça ne va pas bien loin, et je suis incapable de réussir à coder ce que j'ai en tête. Je me permets donc de poster une demande et je remercie miiiille fois par avance de la personne qui voudra bien s'occuper de moi !  :heart:

    Schéma(s) et Eléments
    Schémas :
    Spoiler:
    Tailles des éléments : Ouhlà... Je sais juste que la taille de mon forum est à 75%, je ne sais pas si c'est suffisant comme précision ?
    Effets voulus : Si possible, pour le titre sur fond blanc, que les lettres s'écartent un peu au passage de la souris !
    (et rien à voir mais ce sont des couleurs mises au hasard pour mieux faire ressortir les différences!)
    Version de votre forum : PHPBB2


    Ressources
    //

    Autres précisions ?
    J'aimerais beaucoup que tous les textes soient modifiables (polices, couleurs) si possible ! Ah oui, et dans le carré du milieu, en rose, si le nombre de sous-catégories est trop important et dépasse, serait-il possible de mettre un petit menu défilant discret, de haut en bas ? Merci !
    HazelW
    HazelW
    FémininAge : 30Messages : 51

    Mer 10 Aoû 2016 - 11:22

    Up Very Happy



    (Keylha) Codage de catégories Wsld90(Keylha) Codage de catégories GryffindorBase(Keylha) Codage de catégories Gryffindor-gryffindor-21480238-100-100
    HazelW
    HazelW
    FémininAge : 30Messages : 51

    Lun 15 Aoû 2016 - 18:57

    Up (:



    (Keylha) Codage de catégories Wsld90(Keylha) Codage de catégories GryffindorBase(Keylha) Codage de catégories Gryffindor-gryffindor-21480238-100-100
    Keylha
    Keylha
    FémininAge : 23Messages : 82

    Lun 15 Aoû 2016 - 23:06

    Salut ! Je prends en charge ta commande ^-^
    La structure n'est pas trop compliquée donc je vais probablement coder ça dans la soirée.



    HazelW
    HazelW
    FémininAge : 30Messages : 51

    Mar 16 Aoû 2016 - 15:47

    Oh super !! Merci beaucoup j'ai hâte de voir ça *_*



    (Keylha) Codage de catégories Wsld90(Keylha) Codage de catégories GryffindorBase(Keylha) Codage de catégories Gryffindor-gryffindor-21480238-100-100
    Keylha
    Keylha
    FémininAge : 23Messages : 82

    Jeu 18 Aoû 2016 - 15:31



    Alors alors :3 J'ai respecté tes couleurs et la taille de ton forum, je n'ai pas annoté le code tu as besoin que je laisse des commentaires pour que tu puisses le modifier ou ça va aller ? c: J'espère que ça te va j'ai essayé de respecter ton schéma au maximum x) Si tu veux que je change quelque chose ou que quelque chose ne va pas dis le moi !



    HazelW
    HazelW
    FémininAge : 30Messages : 51

    Jeu 18 Aoû 2016 - 22:03

    Franchement merciiii énormément !!! C'est comme je voulais !!  :love:

    J'ai essayé de bidouiller sans annotation, je pense que ça va le faire, j'ai juste quelques petites questions de réglages. Est-ce qu'il est possible de :


    -> Réduire un peu la taille des blocs, un hauteur comme en largeur totale ? Je voudrais que ça soit un tout peu plus petit/fin !

    -> Réduire la police du bloc de droite, ça s'affiche en très grand ?

    -> Garder la couleur des groupes du forum, là j'ai l'impression que le nom du dernier posteur s'affiche dans une couleur indiquée dans le code ?

    -> Modifier la police du titre du haut, le centrer, et modifier la couleur ? Je ne trouve pas... (j'ai aussi l'impression que mes titres sont décalés vers le bas u_u)


    Voilà l'image de ce que ça rend sur mon forum test :

    Spoiler:



    (Keylha) Codage de catégories Wsld90(Keylha) Codage de catégories GryffindorBase(Keylha) Codage de catégories Gryffindor-gryffindor-21480238-100-100
    Keylha
    Keylha
    FémininAge : 23Messages : 82

    Ven 19 Aoû 2016 - 15:19

    Je suis contente que ça t'aille ! ^-^
    Alors pour la largeur tout est en % donc réduis le % du bloc forum (c'est le bloc qui contient tous les autres blocs)

    Code:
    .forum{
      display: flex;
      width: 90%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 50px;}
    Celui-ci du coup. Normalement ça devrait réduire la largeur des autres blocs tout en gardant les même proportions !

    Ensuite en hauteur tu vas devoir redimensionner chaque bloc un part un désolée donc c'est ceux-là :

    Code:
    .description{
      overflow: auto;
      padding: 5px;
      color: #e6e6e8;
      font-size: 12px;
      width: 60%;
      background: #1d00a5;
      height: 140px;
      border-top: solid #e31d95 5px;
      border-bottom: solid #e31d95 5px;}

    .sousf{
      padding: 5px;
      margin-left: 20px;
      height: 140px;
      border-top: solid #e31d95 5px;
      border-bottom: solid #e31d95 5px;
      width: 15%;
      background: #e51d98;}

    .lpost{
      overflow: auto;
      text-align: center;
      color: #e6e6e8;
      padding: 5px;
      margin-left: 20px;
      height: 140px;
      border-top: solid #e31d95 5px;
      border-bottom: solid #e31d95 5px;
      background: #1d00a5;
      width: 20%;}

    Donc là ils sont tous en 140 de hauteur.

    Pour la police du bloc de droite je l'avais pas trop modifié comme la police de base sur mon forum était assez petite ça faisait pas trop gros désolée xD
    Mais en tout cas tout est ici :

    Code:
    .lpost{
      overflow: auto;
      text-align: center;
      color: #e6e6e8;
      padding: 5px;
      margin-left: 20px;
      height: 140px;
      border-top: solid #e31d95 5px;
      border-bottom: solid #e31d95 5px;
      background: #1d00a5;
      width: 20%;}

    .lpost a{
        -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      transition: all 0.5s;
      -ms-transition: all 0.5s;
     -o-transition: all 0.5s;
      color: #e6e6e8;}

    .lpost a:hover{
      color: #e51d98;}

    .lpost a strong{
      color: #e6e6e8;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 14px;}

    Je t'ai fait un petit schéma pour que tu t'y retrouves :siffle:
    (Keylha) Codage de catégories 1471612448-lpost
    Voilà !
    Si tu veux personnaliser le "2 messages, 2 sujets" indépendamment du reste remplace
    Code:
    <br />{catrow.forumrow.POSTS} messages, {catrow.forumrow.TOPICS} sujets

    Par
    Code:
    <br /><span class="topic">{catrow.forumrow.POSTS} messages, {catrow.forumrow.TOPICS} sujets</span>

    Et ajoute dans ton CSS
    Code:
    .topic{
    font-size: 11px;
    color: grey;}
    Etc... Je sais pas comment tu veux le personnaliser après Razz
    Je sais pas si tu as tout compris pour cette partie j'explique très mal donc si t'as un doute hésite vraiment pas à demander x)

    Alors oui du coup.
    Donc remplace
    Code:
    .lpost a strong{
      color: #e6e6e8;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 14px;}

    Par
    Code:
    .lpost a strong{
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 14px;}

    Ah je pensais que tu voulais pas les centrer et que tu les voulais justement un peu sur le côté désolée o:
    Du coup c'est tout là
    Code:
    .forumname{
      position: absolute;
     margin-left: 120px;}

    .forumname a{
        -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      font-family: Verdana;
      transition: all 0.5s;
      font-size: 30px;
      -ms-transition: all 0.5s;
     -o-transition: all 0.5s;
      color: #0000d5;}
    (j'ai enlevé le margin-top: 30px; dans forumname tes titres ne seront plus vers le bas normalement ! S'ils sont néanmoins un peu trop haut tu peux ajouter un margin-top: 10px et régler le nombre de px comme tu le souhaites)

    J'espère que j'ai répondu à toutes tes questions si tu as un autre problème hésite vraiment pas n_n




    HazelW
    HazelW
    FémininAge : 30Messages : 51

    Ven 19 Aoû 2016 - 16:26

    Merciiii et c'est très bien expliqué j'ai tout réussi Razz

    J'ai juste encore deux questions que je n'arrive pas à élucider :
    Spoiler:

    La police de "Forum" dans la barre bleu foncé, je n'arrive pas à comprendre comment la modifier ?

    Et aussi :
    Spoiler:

    J'ai donc bien réussi à rajouter la balise dans le template Very Happy mais pour autant ça ne fait pas ce que je voudrais : que la totalité des écritures dans le bloc soit plus petite, plus rapprochée, et tienne en gros sans besoin de menu déroulant. Je pense qu'il y un saut de ligne à enlever mais je préfère te demander avant car je ne veux rien péter du code XD Et aussi je cherche à réduire de la même manière le "mercredi 11 mars" etc !



    EDIT : je me rends compte que j'ai un problème aussi, je voudrais que la barre bleue sépare les grandes catégories or j'ai l'impression que sur mon forum test ça ne fait pas ça... Après, je n'ai pas les mêmes catégories sur mon forum test que mon vrai forum donc je ne me rends pas compte mais j'ai essayé d'en ajouter et ça affiche tout de la même manière... (ce que j'appelle "grandes catégories" c'est par exemple sur NU "Le forum / La bibliothèque / Les guildes /etc")



    (Keylha) Codage de catégories Wsld90(Keylha) Codage de catégories GryffindorBase(Keylha) Codage de catégories Gryffindor-gryffindor-21480238-100-100
    Keylha
    Keylha
    FémininAge : 23Messages : 82

    Sam 20 Aoû 2016 - 18:36

    Re' !
    Aloors juste perso pour moi Catégorie c'est par exemple Le Forum, La bibliothèque etc... Et forum c'est Communauté votre Vie à bord etc Razz

    C'est ici
    Code:
    .cattitre{
      width: 90%;
      margin-top: 50px;
      height: 70px;
      margin-left: auto;
      margin-right: auto;
      background: #1d00a5;}

    .cattitre h2{
      font-size: 30px;
      letter-spacing: 2px;
      font-family: Verdana;
      font-weight: lighter;
      line-height: 70px;
      text-align: center;
      color: #e6e6e8;}

    Cattitre h2 va agir sur ton texte alors que cattitre c'est le fond donc si tu veux ajouter un fond c'est dans cattitre c: (et c'est background: url(URL))

    Pour ça c'est un petit plus complexe je reprends mon mini schéma :siffle:
    (Keylha) Codage de catégories 1471612448-lpost

    On va regarder cette portion de code là :
    Code:
    .lpost{
      overflow: auto;
      text-align: center;
      color: #e6e6e8;
      padding: 5px;
      margin-left: 20px;
      height: 140px;
      border-top: solid #e31d95 5px;
      border-bottom: solid #e31d95 5px;
      background: #1d00a5;
      width: 20%;}

    .lpost a{
        -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      transition: all 0.5s;
      -ms-transition: all 0.5s;
     -o-transition: all 0.5s;
      color: #e6e6e8;}

    .lpost a:hover{
      color: #e51d98;}

    .lpost a strong{
      color: #e6e6e8;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 14px;}

    lpost correspond donc à tout le bloc de droite ! :3 Or comme tu peux le voir j'ai ajouté un lpost:a et un lpost:a strong qui sélectionne le pseudo et le titre du sujet.
    Comme tu as ajouté la balise dans ta template, topic sélectionne "2 messages, 2 sujets"
    Donc au final la seule chose qui n'est pas sélectionné dans tout ça c'est Mercredi 11 Mars 2015

    Dooonc ! Si tu changes la taille de la police, la couleur ou n'importe quoi dans lpost ça affectera seulement la date.
    Donc dans lpost on va rajouter un font-size qui va changer la taille d'écriture de ta police
    Code:
    .lpost{
    font-size: 11px;
      overflow: auto;
      text-align: center;
      color: #e6e6e8;
      padding: 5px;
      margin-left: 20px;
      height: 140px;
      border-top: solid #e31d95 5px;
      border-bottom: solid #e31d95 5px;
      background: #1d00a5;
      width: 20%;}

    Tu peux aussi changer de cette même manière la couleur de la date c: (color: #tacouleur)
    Du coup tu procéderas de la même manière pour le titre du sujet & de l'auteur. Razz (auteur = lpost a strong et titre du sujet = lpost a)
    Je sais pas si c'est clair D: Il n'y a pas de br en passant tout se passe dans le CSS x)

    Si tu veux que ton texte soit plus rapproché ajoute dans lpost
    Code:
    line-height: 120%;
    Tu peux changer la valeur plus elle sera haute et moins ton texte sera rapproché

    Hm tu peux me passer le lien de ton forum test s'il te plait ? n_n



    HazelW
    HazelW
    FémininAge : 30Messages : 51

    Dim 21 Aoû 2016 - 15:42

    Ok c'est nickel pour le bloc de droite j'ai rajouté les balises et ça donne bien ce que je veux !! Very Happy

    Pour le reste je ne comprends pas tout désolée... Crying or Very sad J'ai l'impression que je me suis mal exprimée du coup ! Mais pour que ce soit plus clair je te montre mes liens de forum du coup tu as raison ! Voilà mon forum test (en cours de modification) : http://collegepoupou.forumactif.org/

    Comme point de comparaison pour cette histoire de catégorie/forum, voilà mon forum : http://collegepoudlard.virtuaboard.com/forum

    En fait, ce que je visualisais c'est que la barre bleu foncé que je t'ai mis en image dans mon post précédent séparent les catégories, comme par exemple sur mon forum la barre marron ! Tu vois ce que je veux dire ? (du coup désolée mais je n'ai toujours pas bien compris comment centrer l'écriture de cette barre bleue u_u)

    Voilà j'espère avoir été claire cette fois cheers Question Et merciii encore de ton aide !



    (Keylha) Codage de catégories Wsld90(Keylha) Codage de catégories GryffindorBase(Keylha) Codage de catégories Gryffindor-gryffindor-21480238-100-100
    HazelW
    HazelW
    FémininAge : 30Messages : 51

    Dim 28 Aoû 2016 - 16:35

    Up ? Razz désolée d'insister mais je n'arrive pas à régler ces petits problèmes toute seule u_u



    (Keylha) Codage de catégories Wsld90(Keylha) Codage de catégories GryffindorBase(Keylha) Codage de catégories Gryffindor-gryffindor-21480238-100-100
    HazelW
    HazelW
    FémininAge : 30Messages : 51

    Jeu 8 Sep 2016 - 14:30

    Up !

    Désolée d'insister, mais vu qu'il reste juste un petit réglage, je me demande si au pire quelqu'un autre que Keylha pourrait me filer un coup de main ! Je ne veux pas du tout paraître ingrate, elle m'a fait de magnifiques catégories dont je suis fan, mais je ne peux pas les installer à cause de cette histoire de séparation de catégories, donc je voulais savoir si quelqu'un pouvait m'aider à ce sujet ! Merci d'avance (:



    (Keylha) Codage de catégories Wsld90(Keylha) Codage de catégories GryffindorBase(Keylha) Codage de catégories Gryffindor-gryffindor-21480238-100-100
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 18 Sep 2016 - 11:20

    Salut!

    Est-ce que le sujet est toujours d'actualité? Merci de donner upper au moins une fois par semaine pour éviter que le sujet soit archivé.

    Si tu es toujours là, je vais prendre en charge le problème. Juste, je ne suis pas sûre de comprendre le problème, surtout que je vois là même chose sur les 2 liens que tu as donné ><



    HazelW
    HazelW
    FémininAge : 30Messages : 51

    Dim 18 Sep 2016 - 17:40

    Bonjour !!

    Toujours d'actualité en effet :)

    La bonne nouvelle : j'ai réglé le problème que j'expose ci-dessus. Donc plus de soucis de ce côté là !

    En revanche, en installant le code sur mon forum, il s'est avéré que j'ai un autre problème... Je mets l'imprim écran ça sera plus simple :

    Spoiler:

    Les sous-catégories sortent du bloc violet... Est-ce qu'il serait possible de les faire tenir dans le bloc violet et de les faire défiler avec un petit menu sur le côté ? Le truc que je ne comprends pas c'est que je l'avais dit dans ma commande et ce menu apparaît bien sur les autres blocs, mais pas sur celui-là u_u J'espère que ce n'est pas un bugg !

    Merci d'avance de ton aide en tout cas cheers



    (Keylha) Codage de catégories Wsld90(Keylha) Codage de catégories GryffindorBase(Keylha) Codage de catégories Gryffindor-gryffindor-21480238-100-100
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 18 Sep 2016 - 20:18

    Salut!

    C'est juste un oubli je crois. Retrouve ce bout de code :
    Code:
    .sousf{
      padding: 5px;
      margin-left: 20px;
      height: 140px;
      border-top: solid #e31d95 5px;
      border-bottom: solid #e31d95 5px;
      width: 15%;
      background: #e51d98;}

    Et remplace-le par :
    Code:
    .sousf{
      padding: 5px;
      margin-left: 20px;
      height: 140px;
      border-top: solid #e31d95 5px;
      border-bottom: solid #e31d95 5px;
      width: 15%;
      overflow: auto;
      background: #e51d98;}



    HazelW
    HazelW
    FémininAge : 30Messages : 51

    Mar 20 Sep 2016 - 11:51

    C'est nickel !! Merciii beaucoup cheers cheers cheers



    (Keylha) Codage de catégories Wsld90(Keylha) Codage de catégories GryffindorBase(Keylha) Codage de catégories Gryffindor-gryffindor-21480238-100-100
    Contenu sponsorisé


      La date/heure actuelle est Sam 27 Avr 2024 - 17:26