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.

-24%
Le deal à ne pas rater :
PC Portable Gaming 15.6″ Medion Erazer Deputy P40 (FHD 144Hz, RTX ...
759.99 € 999.99 €
Voir le deal

    (NYO) Catégorie pour forum en construction

    Araik
    Araik
    FémininAge : 28Messages : 250

    Ven 2 Mai 2014 - 21:36

    Ma demande



    Bonjour, Bonsoir,
    Je souhaiterai faire une commande de catégorie, ne sachant que très peut codé. J'ai des idées en tête ou plutôt la structure en tête (vous la trouverai si dessous)Je remercie d'avance la personne qui fera se codage pour mon forum.


    Schéma(s) et Eléments
    Schémas :
    Catégorie actuel du forum:
    (NYO) Catégorie pour forum en construction Sans_t13

    Squellette de la catégorie souhaité:
    (NYO) Catégorie pour forum en construction Sans_t12

    Tailles des éléments : Je se sais pas trop a vrai dire, un peut près comme sur le schema
    Effets voulus : Je pense que le schémas explique pas mal les souhait


    Ressources
    Le fond étant déja sur le forum et les vignette news et autre étant en cours de réalisation je ne pense pas qu'il y ai a en rajouté. A moins que je me trompe.

    Autres précisions ?
    Au niveau des couleur je pensait rester dans des couleur sobre avec peut être quelque petite touche de couleur qui vont avec le fond ou les images news et autre, après je pense que je laisse un large choix au codeur qui souhaitera prendre en charge ma commande.

    Je ne suis peut-être pas très clair dans mes explication, veillez m'en excusé. J’espère avoir quelque chose qui colle avec mes idées, bien que je sais qu'il n'y a pas de solution magique



    Dernière édition par Araik le Ven 30 Mai 2014 - 13:38, édité 1 fois



    (NYO) Catégorie pour forum en construction Signat15
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Ven 9 Mai 2014 - 22:32

    Hello!
    Je me demandais: est-ce que tu veux garder le système d'onglets pour tes catégories? Parce que si c'est le cas (et que tu veux garder l'actuel) il faudrait fournir (sous hide si tu ne veux pas qu'on te le pique) ton template index_box, pour qu'on puisse modifier l'affichage des sous-forums sans détruire le système d'onglets! Parce que, de ce que j'ai compris, tu ne veux que changer l'aspect des sous-forums, et non pas des onglets?



    Araik
    Araik
    FémininAge : 28Messages : 250

    Dim 11 Mai 2014 - 14:42

    Salut,
    Mon système d'onglet est basé sur du javascript ainsi qu'un code CSS.
    Mon index box étant toujours celui de base.
    Donc voici si dessous se que je possède a propos des onglets.

    Code Javascript:
    Code:
    $(function(){
           
              /* variable temporaire */
              var t;
           
              /* liste des onglets avec les catégories en faisant partie */
              var onglets=  [
                                      ["Vie du forum",[0]],
                                      ["Lycée",[1]],
                                      ["Cour ",[2]],
                                      ["Dortoirs",[3]],
                              ["Club",[4]],
                              ["Capital",[5]],
                              ["Alentours",[6]],
                              ["Shun'u",[7]],
                              ["Akikaze",[8]],
                              ["Tokonatsu",[9]],
                              ["Fuyuzora",[10]],
                              ["Détente",[11]], 
                                      ["",[]]];

           
              /* fonction pour sélectionner un onglet d'après une string s */
              var getOnglet= function(s) {
                  var j;
                  for(j=0;j<onglets.length;j++)
                    if(JSON.stringify(onglets[j])==s) return onglets[j];
                  return !1;
              };
           
              /* fonction pour voir si un index de catégorie i est dans un onglet d */
              var inOnglets= function(d,i) {
                  var j;
                  for(j=0;j<d[1].length;j++)
                    if(d[1][j]==i) return !0;
                  return !1;
              };
           
              /* onglet sélectionné par défaut */
              var songlet= onglets[0];
              /* est-ce que l'onglet sélectionné est sauvegardé d'un affichage de l'index à l'autre */
              var save= false;
              /* temps pour slider en ms */
              var timeslide= 800;
           
              /* récupération de l'onglet sauvé d'une autre fois */
              if(save && window.localStorage)
                  if(t=localStorage.getItem("onglets"))
                    if(t=getOnglet(t))
                        songlet= t;
           
              /* entoure les catégories d'un <div class="cat-table" /> */
              $("th.secondarytitle").closest("table").wrap('<div class="cat-table" />');
           
              /* affichage de l'onglet en cours */
              $(".cat-table").filter(function(index) {
                return !inOnglets(songlet,index);
              }).hide();
           
              /* ajout du div des onglets */
              $(".cat-table:first").before('<div id="cat-onglets"></div>');
           
              /* ajout des onglets dans le div */
              for(t=0;t<onglets.length;t++)
              {
                  $("#cat-onglets").append('<div class="co-item'+(onglets[t]==songlet?' co-actif':'')+'">'+onglets[t][0]+'</div>');
              }
           
              /* clic sur un onglet */
              $("#cat-onglets .co-item").click(function(){
                  $("#cat-onglets .co-actif").removeClass("co-actif");
                  $(this).addClass("co-actif");
                  var o= onglets[$("#cat-onglets .co-item").index(this)];
                  $(".cat-table").not($(".cat-table").filter(function(index) {
                    return inOnglets(o,index);
                  }).slideDown(timeslide)).slideUp(timeslide); 
                  if(save && window.localStorage) localStorage.setItem("onglets",JSON.stringify(o));
              });
           
            });

    Code CSS du forum (état actuel)
    Code:
    /* catégories a onglets */

            /*onglets catégories*/
            #cat-onglets {
              margin: 15px auto;
              text-align: center; }
           
            .co-item {
              background: #FFFFFF;
              color: #478DAD;
              border: 1px solid  #FFFFFF;
              display: inline;
              cursor: pointer;
              margin: 5px;
              padding: 0px;
              border-radius: 1px;
            }
           
            .co-item:hover{
              background: #FFFFFF;
              border: 1px solid #FFFFFF;
              color:#478DAD;
              display: inline;
              cursor: pointer;
              margin:  5px;
              padding: 0px;
              border-radius: 1px;
            }
           
            .co-actif {
              background: #FFFFFF;
              color: #478DAD;
              border:0px solid #FFFFFF; }


    /* fin categories à onglets */
    /* CATEGORIES AUX DESCRIPTIONS CACHEES */


    .cate
    {
      width: 600px;
      height: 150px;
      overflow: hidden;
      border: 2px solid #000000;
      background-color: #ffffff;
    }
    .cate_img
    {
      position: relative;
      z-index: 2;
      width: 600px;
      height: 150px;
      margin-left: 0px;
        transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    .cate:hover .cate_img
    {
    margin-left: 600px;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    .cate_description
    {
      position: relative;
      z-index: 1;
      width: 600px;
      height: 150px;
      margin-top: -120px;
      text-align: center;
      font-size: 15px;
      color: #8c8c8c;
      padding: 2px;
      overflow: auto;
    }
    /* FIN CATEGORIES AUX DESCRIPTIONS CACHEES */



    (NYO) Catégorie pour forum en construction Signat15
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Mar 13 Mai 2014 - 14:55

    Et voilà! Click
    Bien sûr, tes titres de catégories restent, et j'ai du modifier les templates Wink Je n'ai donc fait que la mise en forme des sous-forums, et je n'ai pas touché aux titres de catégories, etc. Tu me dis si ça te plait ou si tu veux des changements Wink



    Neva
    Neva
    FémininAge : 32Messages : 18565

    Ven 23 Mai 2014 - 21:56

    Hey !
    Tu as vu la proposition de Nyo ?



     
    Araik
    Araik
    FémininAge : 28Messages : 250

    Sam 24 Mai 2014 - 21:35

    Oui j'ai vue, désolé du retard j'avais plus internet depuis 1 semaine.
    J'ai juste une petite modification c'est quand pour les sous-catégorie soit centré si possible. Sinon c'est vraiment super j'adore merci beaucoup nyo.  ham1 



    (NYO) Catégorie pour forum en construction Signat15
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Sam 24 Mai 2014 - 23:01

    Tu veux que le texte soit centré, c'est ça?
    Si c'est ça c'est fait, sinon je n'ai pas compris Wink



    Araik
    Araik
    FémininAge : 28Messages : 250

    Jeu 29 Mai 2014 - 12:20

    Oui c'est exactement ça.
    Merci encore pour ces catégorie.



    (NYO) Catégorie pour forum en construction Signat15
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Jeu 29 Mai 2014 - 15:02

    Alors voici ce que tu dois mettre entre BEGIN et END forumrow (la première et dernière balise dans le code):


    Et voilà ce qui est à mettre dans ta fiche CSS:



    Araik
    Araik
    FémininAge : 28Messages : 250

    Jeu 29 Mai 2014 - 15:23

    Excuse moi, mais j'ai un petit problème d'affichage. Est ce que tu pourrai m'aidé a bien le régler.
    Voici ce que j'obtient:
    Spoiler:



    (NYO) Catégorie pour forum en construction Signat15
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Jeu 29 Mai 2014 - 16:01

    A oui excuse-moi c'est parce que j'ai retiré un bout de code aussi plus haut!
    Mets ceci dans ton template à la place:


    Donc retirer ton catrow actuel aussi Wink



    Araik
    Araik
    FémininAge : 28Messages : 250

    Ven 30 Mai 2014 - 11:17

    Il me reste encore un petit problème avec le rond:
    Spoiler:



    (NYO) Catégorie pour forum en construction Signat15
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Ven 30 Mai 2014 - 12:18

    Tu as bien l'image qui est à la bonne grandeur? C'est à dire du 130x130 ?
    Sinon, est-ce que tu peux me donner le lien vers ton forum?



    Araik
    Araik
    FémininAge : 28Messages : 250

    Ven 30 Mai 2014 - 13:09

    Ah d'accord merci je vais me marqué ça quelque part pour pas oublier. Sinon tout est bon. Encore merci pour ton aide. ham1 



    (NYO) Catégorie pour forum en construction Signat15
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Ven 30 Mai 2014 - 13:28

    N'oublie pas de mettre que la commande est terminée à l'aide du vue dans ce cas! Wink



    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 20:05