AccueilFAQRechercherMembresGroupesS'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.


    Catégories en un bloc

    Partagez
    avatar
    NyoTheNeko
    FémininAge : 23Messages : 5018

    le Mar 1 Juil 2014 - 0:20

    Catégories



    Ceci est un code de catégories crée suite à la Demande de Risa, ici.

    Pour phbb2 ▬ CSS3 & HTML5 ▬ Code mit sous hide ▬ Ce que ça donne


    Les effets et images


    Le carré noir tout à gauche est l'image de nouveaux/pas de nouveaux messages et est en 75px de largeur et 90px de hauteur.
    Le second carré noir (légèrement transparent) est l'image de description de catégories et est en 130px de largeur et 70px de hauteur. Vous pouvez également le mettre en 90px de hauteur (pour qu'il soit de la même hauteur que le reste) mais vous devrez alors changer quelque peu sa position dans le CSS (cf. indications plus bas). Au passage de la souris, l'image va d'une opacité de 70% à 100%.
    Il y a un overflow: auto aussi bien sur la description que sur la liste des sous-forums. Cependant, sur certains navigateurs, la barre ne se voit pas pour les sous-forums (notamment Firefox).
    Tous les liens ont un effet au passage de la souris (le texte s'allonge et change de couleur).
    L'écriture spéciale utilisée est Nothing You Could Do. Vous retrouvez son link juste au-dessus de BEGIN catrow. Vous pouvez la changer/retirer, mais pensez alors à retirer ou changer chacune de ses apparitions dans le CSS (sous la forme de font-family: 'Nothing You Could Do')!

    Le code


    Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> index_box /!\ Attention!: C'est le template en entier! /!\ :


    Code HTML à placer dans chaque description de catégories :


    Le CSS:


    Pour mettre l'image de description à 90px et bien la placer


    Le code correspondant est celui-ci et vous verrez que tout est déjà indique dans le CSS::


    Cependant, pour être plus claire, voilà ce qui est à mettre exactement, si seul la hauteur de cette image change:



    avatar
    Nana-Yankee
    FémininAge : 22Messages : 65

    le Dim 13 Juil 2014 - 0:00

    merci
    avatar
    Sachem
    FémininAge : 20Messages : 51

    le Lun 21 Juil 2014 - 3:01

    Merci !
    avatar
    Halloween
    FémininAge : 23Messages : 9741

    le Mar 22 Juil 2014 - 18:30

    Merci pour le partage Nyo, je déplace Wink



    Je déménage sur NMD o/
    avatar
    Tine
    FémininAge : 19Messages : 37

    le Mar 22 Juil 2014 - 19:02

    Mici ♥
    avatar
    Illiade
    FémininAge : 24Messages : 21

    le Mar 22 Juil 2014 - 21:41

    Encore une fois, merci pour ce code, ça m'aide vraiment à comprendre les templates et le CSS ^^
    avatar
    Immortaly
    FémininAge : 16Messages : 10

    le Mer 23 Juil 2014 - 0:42

    Merchi !
    avatar
    Dacina moe
    FémininAge : 39Messages : 152

    le Mer 23 Juil 2014 - 5:04

    merci
    avatar
    Smokerlilitrope
    FémininAge : 28Messages : 40

    le Mer 23 Juil 2014 - 6:24

    merci
    avatar
    Afterglow.winter
    FémininAge : 22Messages : 136

    le Mer 23 Juil 2014 - 14:33

    Merci :)



    How do you get up from an all time low?
    avatar
    Eshon
    FémininAge : 36Messages : 191

    le Mer 23 Juil 2014 - 18:30

    Merci ! C'est très réussit ! ^^
    avatar
    Tatia38
    FémininAge : 28Messages : 304

    le Jeu 24 Juil 2014 - 12:00

    merci pour le partage
    avatar
    Airore
    FémininAge : 18Messages : 132

    le Ven 25 Juil 2014 - 11:52

    Merci !
    avatar
    Allison01
    FémininAge : 33Messages : 176

    le Ven 25 Juil 2014 - 12:31

    Whaouu superbe  :hug: 
    Merci ^^
    avatar
    Clarisse
    FémininAge : 17Messages : 3934

    le Ven 25 Juil 2014 - 16:02

    Merchi. ^^
    avatar
    Little Melody
    FémininAge : 16Messages : 64

    le Ven 25 Juil 2014 - 18:08

    Merci
    avatar
    Asuka
    FémininAge : 23Messages : 104

    le Mer 6 Aoû 2014 - 1:02

    Merci !



    avatar
    Angie H.-Carter
    FémininAge : 33Messages : 691

    le Lun 11 Aoû 2014 - 17:04

    merci nyo ^^ je vais le testé^^



    Your my brillant! You shine into the darkness and you guide me in my life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    avatar
    SpicAsh
    FémininAge : 20Messages : 157

    le Mer 13 Aoû 2014 - 11:00

    Merci !
    avatar
    NaruChan
    FémininAge : 15Messages : 36

    le Ven 15 Aoû 2014 - 23:51

    Je vais tester, merci
    avatar
    soraya
    FémininAge : 26Messages : 38

    le Dim 17 Aoû 2014 - 11:37

    wow j'aime beaucoup. je vais sûrement l'utiliser pour la prochaine version de mon forum. merci <3




       
    Cory Monteith  1982 - 2013 Oh, why you look so sad? Tears are in your eyes come on and come to me now. Don't be ashamed to cry, let me see you through 'cause I've seen the dark side too. © by anaëlle.
    avatar
    Zappy
    FémininAge : 17Messages : 55

    le Dim 17 Aoû 2014 - 21:45

    Merci
    avatar
    Dydy
    FémininAge : 26Messages : 490

    le Lun 18 Aoû 2014 - 18:27

    merci du partage



    avatar
    kingyo-chan
    FémininAge : 20Messages : 61

    le Jeu 21 Aoû 2014 - 14:18

    je t'aime très beaucoup avec tous pleins de cœurs partout. ♥♥♥



    avatar
    black . Devil
    FémininAge : 27Messages : 37

    le Jeu 21 Aoû 2014 - 15:17

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Ven 18 Aoû 2017 - 23:51