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 :
Réassort du coffret Pokémon 151 ...
Voir le deal

    (ONYX) Catégorie pour Hesperae

    Fluff'
    Fluff'
    FémininAge : 36Messages : 55

    Lun 2 Déc 2013 - 0:38

    Bonjour, encore moi :)

    Commande
    Elément à coder :Catégorie

    Adresse du forum : http://hesperae.rpgboard.net/

    Description du résultat voulu : https://2img.net/r/ihimizer/img713/1365/v825.jpg
    C’est ma maquette de forum faite dans photoshop, mais comme je suis une gourde en codage, je n’arrive pas à placer les éléments comme je le voudrais et sans avoir de bogues...

    Couleurs ou tons : Tout est là :) En somme, c'est noir.

    Images :
    À max 750 pixels de large si possible ^^
    Bouton verrouillé : https://2img.net/r/ihimg/a/img844/5209/4ypo.png
    Bouton No New : https://2img.net/r/ihimg/a/img268/2263/8s2j.png
    Bouton New : https://2img.net/r/ihimg/a/img138/8418/3i3i.png
    Texture de fond de catégorie : https://2img.net/r/ihimg/a/img194/3403/d6s0.png
    Exemple d'image de catégorie : https://2img.net/r/ihimg/a/img22/5612/rz28.png
    Section 1 haut: https://2img.net/r/ihimg/a/img189/2623/7x3p.png
    Section 2 haut : https://2img.net/r/ihimg/a/img819/2953/92sk.png
    Section 3 haut : https://2img.net/r/ihimg/a/img203/9598/v7tm.png
    Section 4 haut : https://2img.net/r/ihimg/a/img826/9342/v1sv.png
    Section 5 haut : https://2img.net/r/ihimg/a/img854/5002/dqsf.png
    Section haut vierge : https://2img.net/r/ihimg/a/img600/5803/te30.png
    Section centre : https://2img.net/r/ihimg/a/img196/7608/2nmd.png
    Section bas : https://2img.net/r/ihimg/a/img29/6756/3eib.png

    Autres précisions :
    La police a utilisé est ‘‘Roboto’’, sur Google font.
    Je veux aussi garder l’effet qui se trouve déjà sur mes catégories (le slide + changement de couleur quand le curseur se retrouve sur le titre ‘‘ Le parchemin ‘‘) et aussi l'effet d'ombre portée (shadow) derrière les catégories. Ne tenez pas compte des noms des sous-catégories, ce n'est qu'une simulation.
    Est-il aussi possible de mettre le même corps pour la PA et la CB ?

    Merci à celui ou celle qui s’occupera de ma commande :).


    S’il y a quoi que ce soit, n’hésitez pas à me le faire savoir.


    Dernière édition par Fluff' le Mer 25 Déc 2013 - 19:42, édité 3 fois
    • Revenir en haut
    Neva
    Neva
    FémininAge : 32Messages : 18565

    Mar 3 Déc 2013 - 15:50

    Hey,

    Peux-tu donner au moins un exemple d'icône new/old/locked pour que le codeur puisse régler sa création dessus ? Et idem pour une image des descriptions. Aussi, tu te rends compte que vu que tu as une auteur fixe il faut 4 forums dans chaque catégorie ? Si tu veux qu'il y ait un fond qui s'adapte, il faut que tu découpes le haut et le bas ainsi qu'une partie du milieu qui puisse se répéter en hauteur.



     
    • Revenir en haut
    Fluff'
    Fluff'
    FémininAge : 36Messages : 55

    Mer 4 Déc 2013 - 0:23

    Kookoow,

    Je m'occupe de ça dès ce soir puisque je bosse toute la journée ^^.
    Aussi, j'ai arrangé les crédits. C'était un problème de couleur. J'éditerai donc ce message dès que les ajouts seront fait.

    Merci !

    EDIT :Voilà, c'est fait ^^
    • Revenir en haut
    Neva
    Neva
    FémininAge : 32Messages : 18565

    Mer 4 Déc 2013 - 10:26

    Génial, merci. Je valide

    La commande est validée !▬ il est autorisé de la relancer toutes les 48h minimum
    ▬ une commande laissée sans nouvelles sera relancée au bout de 10 jours et archivée au bout de 10 jours supplémentaires sans réponse
    ▬ nous rappelons que l'aide devra être créditée vers Never Utopia



     
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 5 Déc 2013 - 0:35

    Salut!

    Tant qu'à tavoir fait ta barre de navigation, je me suis dit que je pouvais bien te faire tes catégories, sauf que...

    Ton bouton New/Old/Lock fait 100px de largeur. Ton image de catégorie en fait 525. Cela te donne 625px sur un fond de catégorie qui ne fait même pas 750px de largeur parce qu'il y a de l'espace vide sur les côtés. Du coup... Ça ne rentre pas tout en largeur, comme tu peux le constater ici (oui c'est pas beau, j'ai pas fini ><).
    • Revenir en haut
    Fluff'
    Fluff'
    FémininAge : 36Messages : 55

    Jeu 5 Déc 2013 - 1:36

    Kookoow :)

    Merci Onyx c'est gentil ^^. Je t'envoie de nouveaux boutons et une image de catégorie plus petite. Si tu as un format à me suggérer, n'hésite pas. J'arrangerai mon format dans photoshop.

    Les boutons en 70px x 100 px :
    https://2img.net/r/ihimg/a/img198/9510/mvgr.png (verrouillé)
    https://2img.net/r/ihimg/a/img855/1162/bxtk.png (new)
    https://2img.net/r/ihimg/a/img163/821/mh4o.png (no new)

    Et l'image de catégorie à 350 px de large :
    https://2img.net/r/ihimizer/img854/7707/wj4v.png

    PS: C'est déjà du bon boulot je trouve Wink
    • Revenir en haut
    Fluff'
    Fluff'
    FémininAge : 36Messages : 55

    Dim 8 Déc 2013 - 14:42

    Je passe faire un petit up :)
    Cependant, j'avais une question... ça vient de me sauter aux yeux en fait. Si j'ai 750 px de large ce sera beaucoup trop étroit une fois que l'on sera sur une page message.

    Mon code message a 600 px de large, l'avatar 200. Peut-être serait-ce préférable de le mettre à 900 ou 950 px de large ?
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 9 Déc 2013 - 6:22

    Roh, je venais juste de terminer en plus è_é
    Files-moi tes images avec la nouvelle largeur et j'ajusterai le tout Wink



    • Revenir en haut
    Fluff'
    Fluff'
    FémininAge : 36Messages : 55

    Lun 9 Déc 2013 - 18:20

    Zuuuuut ! Je suis vraiment désolée... >.<
    Je te fais ça se soir en rentrant sans faute.

    EDIT:
    https://2img.net/r/ihimg/a/img51/4195/rwmm.png
    https://2img.net/r/ihimg/a/img845/4078/29ku.png
    https://2img.net/r/ihimg/a/img36/55/33am.png
    https://2img.net/r/ihimg/a/img513/8641/1cty.png
    https://2img.net/r/ihimg/a/img35/1575/3qco.png
    https://2img.net/r/ihimg/a/img854/1645/4or6.png

    https://2img.net/r/ihimg/a/img191/9180/liup.png

    https://2img.net/r/ihimg/a/img209/4331/72k9.png

    Vraiment navrée d'avoir été aussi lente avant de voir ça. J'ai la tête folle avec le taff ^^''
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 12 Déc 2013 - 9:05

    Salut!
    Désolée du délai, je ne t'oublie pas, c'est juste que je suis en période de tests à l'école alors c'est un peu serré ><
    Bref, tes catégories sont terminées, excepté pour l'effet d'ombre que je ferai en fin de semaine (idem pour la PA et la CB, je verrai en fin de semaine).
    C'est ici si tu veux voir le résultat ^^

    D'ailleurs, pour ce qui est de la texture et de l'ombre, il s'agit de graphisme, pas de codage.
    En effet, ton image est un "rectangle" dans lequel certaines parties sont effacées (transparentes) et cela donne donc l'impression qu'il y a des courbes et tout. Seulement, le codage ne voit que le rectangle, il ne voit pas la différence entre le transparent et le visible. Du coup, quand on ajoute de l'ombre, cela ajoute de l'ombre autour du rectangle et non de la partie que tu souhaites. C'est la même chose pour la texture que j'ai ajouté en graphant et non pas avec le codage.
    Je sais grapher alors j'ajouterai l'ombre sans problème, mais ce ne sont pas tous les codeurs qui savent comment grapher, donc fais attention la prochaine fois Wink

    PS: Comme la largeur a grossi, j'ai repris les images new/old/lock qui étaient trop grandes au départ. Idem pour l'image de description des catégories.
    • Revenir en haut
    Fluff'
    Fluff'
    FémininAge : 36Messages : 55

    Jeu 12 Déc 2013 - 18:30

    Ne t'en fais pas, je suis patiente et les vacances de Noël arrive aussi ^^
    J'avais une petite question encore, par rapport à ceci : http://forum-test-onyx2.forum-canada.com/f5-sixieme-titre-de-forum. Est-il possible de rendre tout uniforme, avec la shape, ou il s'agit d'une autre commande (idem pour la section avatar, soit : http://forum-test-onyx2.forum-canada.com/t11-plasdlasop-eopkoroke) ?

    Pour l'ombre, je l'ai enlevée car je croyais qu'on faisait par codage. Je saurai pour la prochaine fois ^^. Si jamais ça t'arrange, je peux toujours te le faire.

    Prend ton temps et merci encore :)
    • Revenir en haut
    Fluff'
    Fluff'
    FémininAge : 36Messages : 55

    Sam 21 Déc 2013 - 13:52

    Toujours d'actu :)
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 23 Déc 2013 - 5:00

    Salut!

    Tes catégories sont normalement terminées et il manquerait juste la PA et la Chat-Box.
    Pour la PA, je vais te demander de me prêter le code afin que je puisse le remanier s'il-te-plaît.
    Quant à la Chat-Box, elle est placée où sur ton forum? Sur le côté, en haut, en bas, ou... ?

    Pour les deux parties que tu viens de montrer, ce sont tous les deux des templates différents, alors je considérerais cela comme une nouvelle commande personnellement.



    • Revenir en haut
    Fluff'
    Fluff'
    FémininAge : 36Messages : 55

    Lun 23 Déc 2013 - 23:18

    Okay ^^

    Voilà mon CSS :
    Code:
    /* BACKGROUND */
    body { background-attachment: fixed; background-repeat: no-repeat; background-position: top center;  background: url(#)}

    /* NAVIGATION */

    .navbig {
      position: fixed;
      top: 0px;
      left: 0px;
      width: 100%;
      background-color: #000000;
      z-index: 5;
      border-bottom: 2px solid #FFFFFF;
    }
    .navbig a, .navbig a:link, a.navbig a:visited, .navbig a:active, .navbig a:hover {
      font-size: 11px;
      display: inline-block;
      margin-left: 5px;
      margin-right: 5px;
      padding: 10px;
      padding-top: 3px;
      padding-bottom: 3px;
      color: #C4C4C4;
      font-family: Roboto;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-decoration: none!important;
      transition: 0.5s;
      -moz-transition: 0.5s;
      -o-transition: 0.5s;
      -htm-transition: 0.5s;
      -webkit-transition: 0.5s;
    }
    .navbig a:hover {
      color: #000000;
      background-color: #FFFFFF;
    }

    /* FONT */
    font-family: 'Roboto', sans-serif;
    font-family: 'Buenard', serif;


    /* PA */

    #pafocus_head
    {
      width: 750px;
      height: 151px;
      background: url(#) no-repeat;
    }
    #pafocus_body
    {
      width: 750px;
      height: 340px;
      background: url(#) no-repeat;
    }
    #pafocus_foot
    {
      width: 750px;
      height: 109px;
      background: url(#) no-repeat;
    }

    #pafocus
    {
      padding-top: 80px;
      padding-bottom: 20px;
      text-align: center;
    }
    .pafocus_onglet1
    {
      width: 150px;
      height: 20px;
      padding: 4px;
      margin-left: 0;
      margin-bottom: 10px;
      background: #000000;
      border: 1px solid #ffffff;
      box-shadow: 0px 0px 4px #000000;
      -moz-box-shadow: 0px 0px 4px #000000;
      -o-box-shadow: 0px 0px 4px #000000;
      -htm-box-shadow: 0px 0px 4px #000000;
      -webkit-box-shadow: 0px 0px 4px #000000;
      font-weight: bold;
      color: #ffffff;
      text-shadow: 1px 1px 0px #000000;
      text-align: center;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .pafocus_onglet2
    {
      width: 150px;
      height: 20px;
      padding: 4px;
      margin-left: 0;
      margin-bottom: 10px;
      background: #000000;
      border: 1px solid #ffffff;
      box-shadow: 0px 0px 4px #000000;
      -moz-box-shadow: 0px 0px 4px #000000;
      -o-box-shadow: 0px 0px 4px #000000;
      -htm-box-shadow: 0px 0px 4px #000000;
      -webkit-box-shadow: 0px 0px 4px #000000;
      font-weight: bold;
      color: #ffffff;
      text-shadow: 1px 1px 0px #000000;
      text-align: center;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }

    .pafocus_onglet1:hover, .pafocus_onglet2:hover, .pafocus_onglet3:hover
    {
      margin-left: 20px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .pafocus_contenu1
    {
      position: absolute;
      z-index: 1;
      width: 550px;
      height: 340px;
      overflow: auto;
      margin-left: 200px;
      margin-top: -58px;
      background: #e6e6e6;
      border: 1px  solid #f5f4ee;
      box-shadow: 0px 0px 4px #38342d;
      -moz-box-shadow: 0px 0px 4px #38342d;
      -o-box-shadow: 0px 0px 4px #38342d;
      -htm-box-shadow: 0px 0px 4px #38342d;
      -webkit-box-shadow: 0px 0px 4px #38342d;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
    }
    .pafocus_contenu2
    {
      position: absolute;
      z-index: 2;
      width: 550px;
      height: 340px;
      overflow: auto;
      margin-left: 200px;
      margin-top: -98px;
      background: #e6e6e6;
      border: 1px  solid #f5f4ee;
      box-shadow: 0px 0px 4px #38342d;
      -moz-box-shadow: 0px 0px 4px #38342d;
      -o-box-shadow: 0px 0px 4px #38342d;
      -htm-box-shadow: 0px 0px 4px #38342d;
      -webkit-box-shadow: 0px 0px 4px #38342d;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
    }

    .pafocus_contenu3
    {
      position: absolute;
      z-index: 3;
      width: 550px;
      height: 340px;
      overflow: auto;
      margin-left: 200px;
      margin-top: -120px;
      background: #e6e6e6;
      border: 1px  solid #f5f4ee;
      box-shadow: 0px 0px 4px #38342d;
      -moz-box-shadow: 0px 0px 4px #38342d;
      -o-box-shadow: 0px 0px 4px #38342d;
      -htm-box-shadow: 0px 0px 4px #38342d;
      -webkit-box-shadow: 0px 0px 4px #38342d;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
    }

    .pafocus_contenu4
    {
      position: absolute;
      z-index: 4;
      width: 550px;
      height: 340px;
      overflow: auto;
      margin-left: 204px;
      margin-top: -120px;
      background: #e6e6e6;
      border: 1px  solid #f5f4ee;
      box-shadow: 0px 0px 4px #38342d;
      -moz-box-shadow: 0px 0px 4px #38342d;
      -o-box-shadow: 0px 0px 4px #38342d;
      -htm-box-shadow: 0px 0px 4px #38342d;
      -webkit-box-shadow: 0px 0px 4px #38342d;
    }

    .pafocus_contenu
    {
      padding: 4px;
      color: #74685d;
      font-size: 11px;
      text-shadow: 1px 1px 0px #f7f6f0;
      text-align: justify;
      font-weight: normal;
     
    }
    .pafocus_onglet1:hover .pafocus_contenu1, .pafocus_onglet2:hover .pafocus_contenu2,
    .pafocus_onglet3:hover .pafocus_contenu3
    {
      margin-left: 180px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .pafocus_onglet1:focus .pafocus_contenu1, .pafocus_onglet2:focus .pafocus_contenu2,
    .pafocus_onglet3:focus .pafocus_contenu3
    {
      z-index: 10;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      opacity: 1;
      -moz-opacity: 1;
      -khtml-opacity: 1;
      filter: alpha(opacity=100);
    }

    /* GENERAL */

    .bodylinewidth
    {
      width: 920px;
      margin-left: auto;
      margin-right: auto;
      margin-top: -8px;
      margin-bottom: -8px;
    }

    .bodyline
    {
      background: url(http://img33.imageshack.us/img33/8349/40xq.png) repeat;
      border: 1px solid #ffffff;
      box-shadow: 0px 0px 20px #000000;
      -moz-box-shadow: 0px 0px 20px #000000;
      -htm-box-shadow: 0px 0px 20px #000000;
      -webkit-box-shadow: 0px 0px 20px #000000;
      -o-box-shadow: 0px 0px 20px #000000;
    }

    a:link, a:hover
    {
      text-decoration: none !important;
      text-shadow: 1px 1px 0px #;
    }

    /* CATEGORIES */

    .forumline
    {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    background: #000000;
    background-repeat: repeat;
    -moz-box-shadow: 1px 1px 2px #000000;
    box-shadow: 1px 1px 2px #000000;
    padding: 5px;
    margin-bottom: 10px;
    }

    a.forumlink
    {
      display: block;
      font-size: 13px;
      font-variant: small-caps;
      background: url(#) top right repeat-y #000000;
      letter-spacing: 2px;
      border-bottom: 1px solid #434343;
      padding-bottom: 3px;
      padding-left: 0;
      margin-bottom: 3px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }

    a.forumlink:hover
    {
      padding-left: 10px;
      border-bottom: 1px solid #00a8c2;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .stats_last
    {
      width: 180px;
      height: 80px;
      background: #3e3e3e;
      border: 1px solid #555555;
      box-shadow: 0px 0px 2px #c1c1c1;
      opacity: 0.6;
      -moz-opacity: 0.6;
      -khtml-opacity: 0.6;
      filter: alpha(opacity=60);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .stats_last:hover
    {
      opacity: 1;
      -moz-opacity: 1;
      -khtml-opacity: 1;
      filter: alpha(opacity=100);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .stats
    {
      display: block;
      text-align: center;
      font-size: 12px;
      margin-bottom: 10px;
    }
    .last
    {
      display: block;
      text-align: center;
      font-size: 12px;
    }

    /* CORPS DE CATÉGORIE */

    .cathead
    {
      background: url('http://imageshack.us/a/img4/2934/ij6x.png') top center no-repeat;
      width: 950px;
      height: 182px;
      margin: auto; /*Permet de centrer la partie du corps*/
    }

    .catbody
    {
      background: url('http://img200.imageshack.us/img200/5074/mny0.png') center repeat-y;
      width: 950px;
      margin: auto;
    }

    .catfoot
    {
      background: url('http://imageshack.us/a/img11/4852/wfvj.png') bottom center no-repeat;
      width: 950px;
      height: 90px;
      margin: auto;
    }


    /* MESSAGES */

    .cattitle
    {
      display: block;
      font-size: 18px;
      color: #6c6c6c;
    }
    .profil
    {
      width: 200px;
      padding: 4px;
      background: #3b3b3b;
      border: 1px solid #565656;
      box-shadow: 0px 0px 2px #c1c1c1;
      opacity: 0.6;
      -moz-opacity: 0.6;
      -khtml-opacity: 0.6;
      filter: alpha(opacity=60);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      text-align: center;
    }
    .profil:hover
    {
      opacity: 1;
      -moz-opacity: 1;
      -khtml-opacity: 1;
      filter: alpha(opacity=100);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .profil_avatar img
    {
      background: #1d1d1d;
      padding: 2px;
      border: 1px solid #b4b4b4;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .postbody
    {
      display: block;
      font-size: 11px;
      text-align: justify;
      padding: 5px;
    }
    .message_contenu
    {
      background: #323232;
      border: 1px solid #3a3a3a;
      padding: 15px;
      line-height: 14px;
    }

    .spoiler_closed, .spoiler_content, .quote
    {
      display:block;
      background: #747474;
      color: #1f1f1f;
      border: 1px solid #747474;
      padding: 5px;
    }
    .code
    {
      background: #1c1c1c;
      color: #747474;
      padding: 5px;
      border: 2px inset #000000;
    }

    /* BORDURES */

    .row3Right
    {
    border: none !important;
    }
    .thHead
    {
    border: none !important;
    }
    .thCornerL, .thCornerR, .thTop
    {
    border: none !important;
    }
    .thLeft, .thRight
    {
    border-left: none !important;
    border-right: none !important;
    }
    .catLeft, .catRight
    {
    border: none! important;
    }
    .catHead
    {
    border: none !important;
    }
    .catBottom
    {
    border: none !important;
    }

    /* FOOTER */

    #page-footer a
    {
      font-size: 13px;
    }

    /* ZONE TEXTE */

    .sceditor-container{
    background-color:#bababa !important;
             
    }
    .sceditor-container iframe, .sceditor-container textarea{
    background-color:#bababa !important;
    }

    .sceditor-toolbar {
    background: black !important;
    }

    /* TCHAT BOX */

    body.chatbox
    {
    background-color: black;
    }

    #chatbox_header .chatbox-options .genmed,
    #chatbox_header .chatbox-options,
    #chatbox_header .chatbox-options a
    {
    Vos Modifications;
    }

    #chatbox_header{
    background: #000000;
    }

    /* OPACITÉ IMAGES */

    img[class="opac"]
    {
      opacity:0.5;
      -moz-opacity:0.5;
      -webkit-opacity:0.5;
      filter: alpha(opacity=0.5);
      transition:all 1.5s ease-in-out;
      -o-transition:all 1.5s ease-in-out;
      -moz-transition:all 1.5s ease-in-out;
      -webkit-transition:all 1.5s ease-in-out;
    }

    img[class="opac"]:hover
    {
      opacity:1;
      -moz-opacity:1;
      -webkit-opacity:1;
      filter: alpha(opacity=1);
    }

    Et le code dans l'onglet Généralité si jamais :
    Code:
    <div id="pafocus_head">
    </div>
    <div id="pafocus_body">
       <div id="pafocus">
          <div class="pafocus_onglet1" tabindex="0">
             Nouveautés
             <div class="pafocus_contenu1">
                <div class="pafocus_contenu">
                    <br />
                   <center>
                      Contenu
                   </center>
                   
                </div>
                
             </div>
          </div>
          <div class="pafocus_onglet2" tabindex="0">
             Crédits & Partenaires
             <div class="pafocus_contenu2">
                <div class="pafocus_contenu">
                    <br />
                   <center>
                      Un gros merci à Onyx pour la barre de navigation,Sparrow-style pour le code PA <a style="float: center; display: block; text-align: center; font-size: 9px; color: #000000; letter-spacing: 2px; " href="http://www.never-utopia.com">(c) CREDIT Codes - Never-Utopia</a><br /><br /><br /><br /><br /><br /><br /><br />© Toute reproduction partielle ou totale est strictement interdite.
                   </center>
                   
                </div>
                
             </div>
          </div>
          <div class="pafocus_contenu4">
             <div class="pafocus_contenu">
                 <br />
                <center>
                   Ce forum est actuellement en cours de reconstruction.Ayant ouvert ses portes la première fois en 2002, Hesperae fait un come back dans une version améliorée. <br />Merci d'être patient :) <br /><br />Message de bienvenue, Top-sites + Staff
                </center>
                
             </div>
          </div>
       </div>
    </div>
    <div id="pafocus_foot">
    </div>
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 24 Déc 2013 - 6:05

    Okie c'est bon. Il va me manquer l'image de fond que tu as l'intention de mettre sous ta PA ainsi que ta réponse à ma question sur la CB, à savoir si elle va être en haut du forum, en bas ou ailleurs?
    • Revenir en haut
    Fluff'
    Fluff'
    FémininAge : 36Messages : 55

    Mar 24 Déc 2013 - 15:15

    La CB sera en haut et l'image c'est celle-ci : http://www.deviantart.com/art/Searching-142326817
    Dis-moi si tu veux que je la réajuste niveau format. Ça me fera plaisir ^^
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 25 Déc 2013 - 0:22

    Bouh!

    Voilà, tout est ici.
    J'ai mis la CB visible aux invités, mais elle ne l'est habituellement pas.
    • Revenir en haut
    Fluff'
    Fluff'
    FémininAge : 36Messages : 55

    Mer 25 Déc 2013 - 2:16

    C'est super :)
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 25 Déc 2013 - 6:32

    Parfait! Du coup, je te file les codes ^^



    Voilà!



    • Revenir en haut
    Fluff'
    Fluff'
    FémininAge : 36Messages : 55

    Mer 25 Déc 2013 - 14:57

    Un très très gros merci à toi Onyx. C'est un beau cadeau de noël Very Happy.
    Les crédits ont été modifiés !
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 25 Déc 2013 - 19:02

    De rien ^^

    J'avoue oublié de le préciser, mais j'ai utilisé l'image 525x110 pixels pour l'image de catégorie et les images New/Old/Lock de 100x100 pixels.

    Si tout est bon, n'oublie pas le crochet vert pour faire archiver la commande Wink



    • Revenir en haut
    Fluff'
    Fluff'
    FémininAge : 36Messages : 55

    Mer 25 Déc 2013 - 19:41

    Ça roule ^^ !
    • Revenir en haut
    Klash
    Klash
    MasculinAge : 43Messages : 20653

    Ven 27 Déc 2013 - 8:47

    Le symbole est placer j'archive, merci Onyx pour ton travail.



    (ONYX) Catégorie pour Hesperae 376864signichigo
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Jeu 2 Mai 2024 - 15:14