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
    Okhmhaka
    FémininAge : 31Messages : 31725

    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



    Nut'
    FémininAge : 16Messages : 37

    le Ven 30 Mar 2012 - 17:47

    Merci grand chef Ü/



    C'est ballot, j'ai pas de signa' q: Juste pour vous énervé tiens !
    fraisy
    FémininAge : 21Messages : 37

    le Ven 30 Mar 2012 - 18:43

    Haaaan veux voir >.<
    Wos
    MasculinAge : 21Messages : 59

    le Ven 30 Mar 2012 - 19:28

    merci



    Alinoé
    FémininAge : 24Messages : 35

    le Ven 30 Mar 2012 - 21:35

    Merci beaucoup pour ce partage !
    Zarwins
    FémininAge : 20Messages : 152

    le Sam 31 Mar 2012 - 4:56

    J'adore =D
    Merci



    Yesterday
    FémininAge : 21Messages : 57

    le Sam 31 Mar 2012 - 17:03

    Merci beaucoup!!
    _heymotion
    FémininAge : 20Messages : 21

    le Sam 31 Mar 2012 - 21:20

    intéressant !
    miss69
    FémininAge : 33Messages : 40

    le Sam 31 Mar 2012 - 22:11

    Merci beaucoup pour ce tutoriel :)
    Chôchô
    FémininAge : 23Messages : 16

    le Dim 1 Avr 2012 - 0:21

    Yeeah ! Merci ♥ Je cherchais comment le faire ! :)
    Always Escalate
    FémininAge : 32Messages : 46

    le Dim 1 Avr 2012 - 9:25

    Sparrrroooooooow ? Comment on fait comme toua avec la minage dans le profil qui défile ? Je n'ai absolument pas une traitre idée du code alors je reviens te demander. Mais pour un RPG, je trouve que ça ferait vraiment bien (et ça éviterait les grosses signatures, ce que je n'aime pas)

    C'est promis, je ferai un sujet "remerciements" rien que pour toi et tu apparais dans mon disclaimer en footer.
    Screen
    FémininAge : 24Messages : 92

    le Dim 1 Avr 2012 - 11:27

    Sparrroooww... j'ai une question
    Je veux mettre l'avatar différemment en 270x190 aligné, et non en haut et penché... x:
    Nessaleth
    FémininAge : 25Messages : 52

    le Dim 1 Avr 2012 - 14:30

    Ce tuto est fantastique! ((*o*))
    Merci beaucoup! Very Happy
    Vador
    MasculinAge : 16Messages : 63

    le Dim 1 Avr 2012 - 14:54

    Merci
    Nikos
    MasculinAge : 24Messages : 81

    le Dim 1 Avr 2012 - 15:44

    Depuis le temps que je cherchais comment faire !
    Merci beaucoup Sparrow ! Wink



    Asriel
    FémininAge : 21Messages : 112

    le Dim 1 Avr 2012 - 18:42

    Merci beaucoup



    Okhmhaka
    FémininAge : 31Messages : 31725

    le Dim 1 Avr 2012 - 19:07

    Escalate : utilise le tutoriel expliquant comment mettre la description de la catégorie cachée derrière l'illustration ^^ Tu combines en mettant la zone de signature et ça devrait aller.

    Screen : tu changes la taille dans le css d'abord, puis tu le positionnes où tu veux dans le template, et pour pas qu'il soit penché il te faut enlever toutes les lignes contenant "transform: rotate" ^^



    Swiff
    FémininAge : 22Messages : 24

    le Dim 1 Avr 2012 - 21:02


      Merci pour ce superbe tuto *-*

      edit: j'ai un sérieux problème au niveau de la bordure droite et en bas de forum :s
      voir ici
    Always Escalate
    FémininAge : 32Messages : 46

    le Dim 1 Avr 2012 - 23:51

    Je note ! Merci !
    Alexis06
    MasculinAge : 26Messages : 24

    le Lun 2 Avr 2012 - 4:48

    Sa me décale ton le corp de mon forum comment je dois faire ? oO
    Lady Doll
    FémininAge : 27Messages : 101

    le Lun 2 Avr 2012 - 11:58

    Ahah! Merci capitaine Very Happy
    crushed love
    FémininAge : 24Messages : 27

    le Lun 2 Avr 2012 - 13:38

    bravo (a) le profil est vraiment joli.
    Okhmhaka
    FémininAge : 31Messages : 31725

    le Lun 2 Avr 2012 - 17:14

    Swiff : je vois pas où est le bug ...

    Pour tous globalement : en cas de problème et afin que moi ou une autre personne puisse vous aider au mieux il faut poster dans les "problèmes en codage". Ainsi vous aurez une réponse pour votre souci en particulier et vos questions ne se perdront pas dans les réponses Wink



    Swiff
    FémininAge : 22Messages : 24

    le Lun 2 Avr 2012 - 17:18


      Bas de page -> la bordure devrait se prolonger, comme sur la page d'accueil
      Pour la bordure droite, c'est réglé !
    celianvdb
    MasculinAge : 16Messages : 28

    le Lun 2 Avr 2012 - 20:35

    merci
    Screen
    FémininAge : 24Messages : 92

    le Lun 2 Avr 2012 - 20:37

    Sparrow-style a écrit:
    Screen : tu changes la taille dans le css d'abord, puis tu le positionnes où tu veux dans le template, et pour pas qu'il soit penché il te faut enlever toutes les lignes contenant "transform: rotate" ^^

    Ah oui j'ai trouvé, merci beaucoup !!
    Contenu sponsorisé

    Aujourd'hui à 21:23


      La date/heure actuelle est Sam 10 Déc 2016 - 21:23