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 : 31718

    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



    âme
    FémininAge : 51Messages : 150

    le Mar 24 Avr 2012 - 19:53

    Merci beaucoup Sparrow Very Happy
    Bonne soirée.



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    âme
    FémininAge : 51Messages : 150

    le Mar 24 Avr 2012 - 23:10

    Bonsoir,

    Ce codage a supprimer la totalité de mes sondages en lignes affraid
    Plus de sondage Concours, plus de sondages Défis....Ils apparaissent bien lorsque l'on édite le message du sondage mais ce dernier n'apparaît plus dans les posts....



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    Tropik
    MasculinAge : 22Messages : 58

    le Mer 25 Avr 2012 - 0:44

    Merci beaucoup




    lovedesign

    Irys
    FémininAge : 27Messages : 141

    le Mer 25 Avr 2012 - 13:05

    Plus par curiosité qu'autre chose pour le moment, mais qui sait... Un jour peut-être !

    Merci pour ce code Sparrow. :3
    Okhmhaka
    FémininAge : 31Messages : 31718

    le Mer 25 Avr 2012 - 14:10

    Ame : :hum: il faudrait que je teste directement sur le forum, c'est vrai que n'utilisant pas le rappel du premier message je n'en ai pas tenu compte :/ Je dois revoir ce tuto' de toute façon x)



    Loris74
    MasculinAge : 26Messages : 11

    le Mer 25 Avr 2012 - 14:16

    Merci. Je metterai le lein dans la barre du forum.
    âme
    FémininAge : 51Messages : 150

    le Mer 25 Avr 2012 - 14:18

    Sparrow, je l'ai momentanément enlevé car il me supprime mes sondages.
    Mais s'il faut que tu visualise directement sur Color', dis moi quand ça te conviendrais et je te donnerais mes connexions en privé.
    Je remettrais tout en place étant donné que j'ai sauvegardé avec mes codes couleurs et dimensions.
    Merci à toi Wink



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    Orange
    MasculinAge : 26Messages : 48

    le Jeu 26 Avr 2012 - 22:55

    Bonjour,

    Un de mes membres éprouvent de la difficulté avec le tuto, j'regarde, c'est tout ^^




    Nab'Mada
    MasculinAge : 21Messages : 51

    le Ven 27 Avr 2012 - 15:19

    Zolie
    Zouzou
    FémininAge : 17Messages : 19

    le Ven 27 Avr 2012 - 15:29

    Sublime <3
    MissHousee
    FémininAge : 22Messages : 15

    le Ven 27 Avr 2012 - 21:18

    hate d'esseyer !
    Ryuu
    FémininAge : 22Messages : 58

    le Sam 28 Avr 2012 - 18:20

    MA-GNI-FIQUE ♥



    Elricka
    MasculinAge : 25Messages : 77

    le Sam 28 Avr 2012 - 19:00

    Bon, bah, j'ai aussi un problème au niveau de la signature, elle ne s'affiche pas ><.
    âme
    FémininAge : 51Messages : 150

    le Sam 28 Avr 2012 - 19:11

    Elricka,
    J'ai du changer le code sign' et si ça peut t'aider afin qu'elles ne débordent pas par dessus le profil du membre qui postera à la suite (comme ça le faisait chez moi), j'ai mis ça :
    Code:
    }
    .signature_div img {
    max-height:300px;
    max-width:450px;
    }



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    Elricka
    MasculinAge : 25Messages : 77

    le Sam 28 Avr 2012 - 19:22

    Tu as ajoutée ceci à la suite du codage, ou tu l'as remplacé ?
    Car là, je viens d'essayer ton codage, et j'ai rien d'afficher ><.
    âme
    FémininAge : 51Messages : 150

    le Sam 28 Avr 2012 - 19:47

    Il faut le remplacer Wink



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    Elricka
    MasculinAge : 25Messages : 77

    le Sam 28 Avr 2012 - 19:48

    Je suppose que le "img" que tu as ajouté à la fin, il faut également le placer dans le template ?
    Et merci de l'info ^^.
    âme
    FémininAge : 51Messages : 150

    le Sam 28 Avr 2012 - 19:58

    Non absolument pas !
    Ce que je viens de te donner est le code de remplacement signature pour le redimensionnement.
    Dans les Templates, il ne faut pas toucher au codages de Sparrow à moins que tu soit certaine de bien savoir coder et encore, je ne suis pas certaine de mon côté que l'on ai le droit de modifier un codage offert.
    Là, celui que j'ai changé est uniquement pour le ccs.
    Maintenant, si les sign' sur ton fo' n'apparaissent pas c'est sans doute que certains de tes membres n'ont pas coché dans leur profil "Toujours afficher la signature" ou alors, c'est que tu as mal fais ton Cop/Col.
    Remet ton Template par défaut et replace à nouveau le codage de Sparrow.
    De mon côté, ça fonctionnait parfaitement, les seuls blems étaient le rappel du 1er message que Sparrow n'avait pas pensé à inclure et la suppression d'un sondage mis en ligne dès que l'on plaçait son codage.

    J'espère que ces deux problèmes seront vite résolus car ce codage est superbe !!!

    Pour tes signatures, revérifie bien ton Template Wink



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    Elricka
    MasculinAge : 25Messages : 77

    le Sam 28 Avr 2012 - 20:21

    En fait, il s'agit de ma propre signature, qui ne s'affiche pas.
    Et je viens de faire ce que tu m'as dit, toujours la même chose ><.
    âme
    FémininAge : 51Messages : 150

    le Sam 28 Avr 2012 - 20:23

    Étonnant !
    Sparrow étant un expert, il vaut mieux attendre son conseil Wink



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    Titane
    FémininAge : 32Messages : 11

    le Sam 28 Avr 2012 - 22:06

    Very Happy
    Little Ghost
    FémininAge : 26Messages : 80

    le Sam 28 Avr 2012 - 23:36

    Waou super code merci =)
    Caldinia
    FémininAge : 18Messages : 7

    le Dim 29 Avr 2012 - 11:11

    C'est vraiment très beau !
    J'aime beaucoup.
    OMJ
    FémininAge : 26Messages : 85

    le Dim 29 Avr 2012 - 13:31

    Merci pour le partage
    ChocoCookie
    FémininAge : 17Messages : 22

    le Dim 29 Avr 2012 - 13:41

    Wow ! J'ai hâte de tester ce tuto' :3 !

    Encore merci :)



    Life in colors
    Contenu sponsorisé

    Aujourd'hui à 23:08


      La date/heure actuelle est Jeu 8 Déc 2016 - 23:08