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.


    Afficher le profil au dessus du message [template+css]

    Partagez
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31849

    le Mer 28 Mar 2012 - 12:40

    Rappel du premier message :

    Afficher le profil au dessus du message

    Bonjour, bonsoir,

    Dans ce tutoriel je vais vous donner un code déjà établi pour afficher votre profil au dessus du message correspondant sur votre forum. Cette mise en forme est par exemple effective ici, mais on peut la retrouver sur pas mal d'autres forum et elle prend de plus en plus d’ampleur. En effet, au delà de la "mode" que cette mise en forme représente, elle permet un gros gain de place. Lorsque les profils et les messages sont affichés en tableau, un espace vide assez conséquent est présent sous l'avatar et le profil du membre. Ce vide est inutile et il prend même de la place sur le message en lui-même.

    Voici donc en visuel ce que ce tutoriel vous propose : Voir l'aperçu

    Sachez déjà que cette modification est périlleuse car le code de base FA contient des tableaux dans des tableaux eux-même dans des tableaux... Bref, il y a des tableaux partout, et il faut en "casser" certains... mais pas tous, ou du moins pas sans être capable de tout reconstruire ensuite.
    C'est la raison pour laquelle je vous donne des codes déjà faits (que je viens de créer à l'instant sur mon forum test) et qui vous proposent un exemple de c qu'il est possible de faire. Libre à vous par la suite de disposer les éléments d'une façon différente à l'intérieur même du bandeau de profil, par exemple.

    Si vous utilisez ce code, je vous serais reconnaissant de bien afficher un CREDIT pour Never-Utopia. Je ne le mets pas directement dans le template car ce serait stupide, ça prendrait de la place et ça énerverait tout le monde, mais je compte sur vous pour ne pas oublier ceux qui vous aident, et bien mettre ce crédit sur votre forum, et ce même si vous avez ensuite modifié le code de base. Merci d'avance Wink


    Que vous propose ce tutoriel ?

    ▬ une mise en forme des profils en bandeau au dessus du message
    ▬ une largeur établie à 900px que vous pourrez modifier via le css
    ▬ une mise en forme prévue pour un avatar type RPG de 200x320px, la taille est cependant adaptable à votre propre taille règlementée
    ▬ un rang composé d'une image et d'un texte, mis en forme, dont l'image est de 50x50px par défaut. Il sera possible de modifier cette taille ou bien de ne pas afficher d'image du tout.
    ▬ une zone de profil dans ce même bandeau qui possède une hauteur fixe et qui, en cas de contenu trop long, possèdera une barre de scroll sur le côté
    ▬ un espace signature qui reste en bas du message mais prend toute la largeur de celui-ci, permettant à vos membre plus de liberté dans les éléments affichés.


    Le Template

    Vous devez être sur le compte fondateur de votre forum, et il doit être en version phpBB2 (ou punBB éventuellement) pour avoir l'accès aux templates.
    Allez dans le template "viewtopic_body", contenu dans "Général".

    Pour voir les codes postez une réponse à la suite du message.



    N'oubliez pas de valider votre modification.
    Si vous craignez de mal faire, ne vous inquiétez pas, il y a toujours possibilité de supprimer la modification de template et donc de restaurer son état par défaut.


    Le CSS

    Le code CSS se place dans "Affichage" > "Couleurs" > "Feuille CSS".

    Pour voir les codes postez une réponse à la suite du message.




    Le Online ?

    Vu que j'ai crée ce code exprès pour vous, je vous autorise à utiliser l'image de "online" qui est présente^^
    La voici (re-hébergez-la par contre) :




    La Personnalisation



    Rappel : N'oubliez pas le crédit ! x)


    Dernière édition par Sparrow-style le Ven 3 Mai 2013 - 13:48, édité 6 fois



    avatar
    Tatout
    FémininAge : 21Messages : 58

    le Dim 30 Aoû 2015 - 23:57

    Je veux voir le tutoriel :) Je sais pas si je vais l'utiliser ^^ je suis juste très curieuse xD
    avatar
    Ouat
    FémininAge : 33Messages : 74

    le Mer 2 Sep 2015 - 8:30

    Comme d'habitude, c'est un nouveau boulot superbe !
    avatar
    Méandre.
    FémininAge : 19Messages : 93

    le Sam 5 Sep 2015 - 13:14

    Merci !
    avatar
    catinaphone
    FémininAge : 25Messages : 93

    le Dim 6 Sep 2015 - 19:39

    Ca m'intéresse ! Merci ! Very Happy
    avatar
    neochrome_ltd
    MasculinAge : 35Messages : 63

    le Ven 11 Sep 2015 - 16:49

    Merci
    avatar
    Misery Mind™
    FémininAge : 26Messages : 151

    le Ven 11 Sep 2015 - 17:30

    merci !
    avatar
    Katell
    FémininAge : 23Messages : 17

    le Ven 11 Sep 2015 - 21:42

    Ça fait vraiment rêver, c'est incroyable tout ce qu'on peut faire avec un forum.
    En tout cas, un grand merci pour ce partage, qui sera fort utile. ^^
    avatar
    Zoé
    FémininAge : 17Messages : 175

    le Sam 12 Sep 2015 - 22:14

    merciiii



    avatar
    luna-chan86
    FémininAge : 27Messages : 171

    le Jeu 17 Sep 2015 - 3:08

    Owiiiie merciiii
    avatar
    Sokaro
    FémininAge : 21Messages : 194

    le Jeu 17 Sep 2015 - 13:16

    Vraiment magnifique! Merci beaucoup *-*




    (Signature provisoire.)
    avatar
    Stafo
    MasculinAge : 36Messages : 12

    le Dim 20 Sep 2015 - 0:39

    merci
    avatar
    Uther
    MasculinAge : 20Messages : 93

    le Ven 16 Oct 2015 - 1:23

    Merci
    avatar
    Sid'
    FémininAge : 26Messages : 67

    le Jeu 22 Oct 2015 - 12:08

    Merciiiii, pile ce que je cherchais Very Happy c'est super ! *^*
    avatar
    Llariarith
    FémininAge : 32Messages : 217

    le Dim 1 Nov 2015 - 17:29

    Superbe :)
    Merci !
    avatar
    Roxane.D
    FémininAge : 18Messages : 29

    le Ven 13 Nov 2015 - 16:17

    Merci beaucoup !
    avatar
    Patte Molle
    FémininAge : 23Messages : 137

    le Mer 18 Nov 2015 - 0:56

    Depuis le temps que je cherchais !! Merci beaucoup pour ce code ! :)
    avatar
    Nyusu97
    FémininAge : 19Messages : 60

    le Ven 20 Nov 2015 - 4:04

    Avant, j'étais un peu réticente à ce genre de profil, mais en fait, à force d'en voir, ça rend super bien ! Merci beaucoup !



    avatar
    Neffaly
    MasculinAge : 22Messages : 46

    le Mar 24 Nov 2015 - 21:57

    merci
    avatar
    anouk
    FémininAge : 25Messages : 17

    le Mar 26 Jan 2016 - 3:24

    Cette idée est géniale ! Merci *o*
    avatar
    valtena_ethan
    MasculinAge : 25Messages : 399

    le Sam 30 Jan 2016 - 11:25

    merci



    avatar
    Ayame
    FémininAge : 20Messages : 53

    le Sam 30 Jan 2016 - 20:33

    Merci~
    avatar
    Mawie62
    FémininAge : 22Messages : 125

    le Dim 31 Jan 2016 - 23:44

    Merci :)



    avatar
    leviarthrite
    FémininAge : 29Messages : 26

    le Jeu 4 Fév 2016 - 16:14

    Merci :)
    avatar
    Magico
    MasculinAge : 24Messages : 41

    le Ven 5 Fév 2016 - 14:15

    Merci
    avatar
    blastrall
    MasculinAge : 22Messages : 40

    le Sam 6 Fév 2016 - 19:20

    merci bien
    Contenu sponsorisé


      La date/heure actuelle est Sam 25 Mar 2017 - 1:06