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.


    Forums en images de fond

    Partagez
    avatar
    NyoTheNeko
    FémininAge : 23Messages : 5018

    le Jeu 18 Déc - 9:18

    Rappel du premier message :

    Forums en images de fond



    Ceci est un code de mise en forme des forums, idée survenue suite à la Demande d'Ayfoth et tiré d'un schéma qui trainait sur mon bureau x)

    Pour PHPBB2 & Invision ▬ CSS3 & HTML5 ▬ Code mit sous hide ▬ Ce que ça donne en PHPBB2Ce que ça donne sous Invision


    Les effets et images


    L'image de fond est en 400 pixels de largeur et 250 pixels de hauteur.
    Votre forum doit faire 850px de largeur.

    Au passage de la souris, les "sous-titre" disparait, et la description vient en slidant depuis le côté droit. Aparaissent alors les sous-froums avec la description, ainsi que le denrier message en-dessous.
    Notez qu'optimalement, vous avez un nombre paire de sous-forums. Avec un nombre impaire, vous risquez d'avoir quelques soucis d'alignements ^^"

    Les deux polices utilisées sont Amatic SC et Courgette. Vous retrouverez leurs link dans le template, comme ceci:
    Code:
    <link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
                      <link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
    . Vous pouvez les changer/retirer, mais pensez alors à retirer ou changer chacune de leurs apparitions dans le CSS (sous la forme de font-family: 'Amatic SC' et font-family: 'Courgette' )!

    PHPBB2: Le code


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


    Le code a mettre dans les descriptions des catégories:


    Le CSS:


    Invision: Le code


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


    Le code a mettre dans les descriptions des catégories:


    Le CSS:


    Voilà qui est tout! ^^ En espérant que ça va vous plaire! :hug:


    Dernière édition par NyoTheNeko le Jeu 18 Déc - 11:23, édité 1 fois



    avatar
    Iliass
    MasculinAge : 26Messages : 24

    le Dim 15 Fév - 12:53

    merci
    avatar
    Sukinette
    FémininAge : 32Messages : 1190

    le Dim 15 Fév - 13:39

    Merci du partage ♥



      Merci pour les avatars Clémentine & Narakye ♥♥
    avatar
    MOON LEE
    FémininAge : 23Messages : 146

    le Dim 15 Fév - 18:51

    Merci
    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Lun 16 Fév - 18:12

    Merci ! Je vais disséquer ton code jusqu'à ce qu'il soit à mouahahahahahaaaaa ! *se prépare à s'écorcher le cerveau sur les angles râpeux des sélecteurs CSS3*



    Alumine
    avatar
    Err0r
    FémininAge : 24Messages : 134

    le Mer 18 Fév - 22:17

    c'est trop beau :o (c'est un coup à être perdue quand on à pas l'habitude xD)



    avatar
    Madras
    FémininAge : 32Messages : 279

    le Jeu 19 Fév - 20:14

    Merci du partage
    Lupa
    FémininAge : 21Messages : 179

    le Jeu 19 Fév - 22:45

    Merci beaucoup <3



    To die would be an awfully big adventure... ~ Peter Pan, James M. Berrie.
    avatar
    Frosty Blue
    FémininAge : 21Messages : 162

    le Sam 21 Fév - 15:56

    Merci beaucoup ^^
    avatar
    Invité

    le Sam 21 Fév - 18:00

    Merci pour le partage.
    avatar
    Alcida
    FémininAge : 28Messages : 33

    le Sam 21 Fév - 18:01

    Trop classe !



    avatar
    Hayate747
    MasculinAge : 28Messages : 196

    le Sam 28 Fév - 10:21

    Merci Wink
    avatar
    Kirito
    MasculinAge : 21Messages : 200

    le Mar 3 Mar - 22:50

    Ouaw, j'adooore !!
    avatar
    Solitude
    FémininAge : 42Messages : 283

    le Jeu 5 Mar - 17:30

    Merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    avatar
    Maya Seiko
    FémininAge : 24Messages : 121

    le Ven 6 Mar - 8:58

    ohhh *0* merci
    avatar
    SweetGumiho
    FémininAge : 27Messages : 146

    le Lun 9 Mar - 16:31

    Merci pour ce tutoriel ! :)



    미쳐버리지 않으려면 때때로 미친 짓을 조금씩 해 주어야만 한다.

    — On doit faire des choses folles parfois pour éviter de devenir complètement cinglé.
    avatar
    Invité

    le Mar 10 Mar - 6:07

    Waouh merci pour le partage, je suis curieuse de le voir en oeuvre Very Happy
    avatar
    Kyu
    FémininAge : 18Messages : 42

    le Sam 14 Mar - 11:32

    Merci beaucoup ♥
    avatar
    Isiiis
    FémininAge : 24Messages : 39

    le Sam 14 Mar - 11:35

    C'est vraiment un beau rendu après, bravo.
    Et merci du partage, si j'ai l'envie de l'utiliser, je n'hésiterais pas
    avatar
    Abysse Yclette
    FémininAge : 25Messages : 123

    le Mer 18 Mar - 11:33

    Super ! Très intéressant, merci



    avatar
    Adèle
    FémininAge : 26Messages : 96

    le Sam 28 Mar - 9:46

    Très joli, merci ♥
    avatar
    Cruelly
    FémininAge : 24Messages : 2547

    le Sam 28 Mar - 19:26

    Merci beaucoup :)




    avatar
    Phoenix Elen
    FémininAge : 25Messages : 93

    le Sam 4 Avr - 20:33

    Oh... j'adore ! 
    C'est la deuxième catégories qui m'attire et les deux viennent de toi. 
    Beau travail et merci beaucoup pour ce codage.



    avatar
    moram22
    MasculinAge : 23Messages : 7

    le Mar 7 Avr - 18:03

    Merci !
    avatar
    Oror
    FémininAge : 27Messages : 95

    le Jeu 9 Avr - 8:17

    C'est très sympa j'aime beaucoup le rendu ! =)
    Merci pour le partage ! =)



    avatar
    Sweetdead
    FémininAge : 22Messages : 37

    le Ven 10 Avr - 21:16

    Merci beaucoup !
    Contenu sponsorisé


      La date/heure actuelle est Mer 22 Nov - 12:51