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.


    [Invision & PHPBB2] Coder un cadre autour du forum en images

    Partagez
    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Ven 2 Jan 2015 - 12:58

    Rappel du premier message :

    [Invision & PHPBB2] Coder un cadre autour du forum en images



    Je comprends rien à ton titre...

    Oui, le titre n'est pas le plus clair du monde, mais grâce à la gentillesse extrême de Gravity et Hismé, laissez-moi vous expliquer ce dont je veux parler! Ou plutôt même: vous montrer. En effet, voici donc ce que je vais vous apprendre à faire. Imaginez que Gravity vous fasse une superbe maquette comme pour la commande de Hismé pour Heiwa et que GASP! Mais il y a un cadre autour du forum! Voyez seulement:

    Et là, vous vous demandez comment vous allez faire, parce qu'il y a un haut, un bas, et surtout, un motif de pierres qui doit se répéter... et si le motif ne se répète pas à la bonne hauteur, vous faite comment? Et là il faut toucher aux templates et tout ça, et ça va pa bien s'adapter à l'écran des gens avec une taille fixe, et ça va pas le faire et... FAUX! En réalité, c'est très facile.

    Bref, c'est peut-être un peu difficile de voir comment faire, c'est pourquoi j'écris... ce tuto! YOUPI! =D
    Cependant, je vous conseille de lire le tuto sur les sélecteurs de Manumanu qui vous sera utile, vu que nous utilisons des :before et :after. Sinon, tout le reste sera expliqué.

    Notez que les explications sont visibles mais que les codes sont sous hide. Un petit merci, et tout s'affichera à la suite! =D

    Pour le PHPBB2


    On commence tout de suite avec la plateforme la plus utilisée: le PHPBB2. Vous verrez, c'est aussi la plus "simple" des deux Wink

    Le HTML


    Il n'y a pas de HTML à faire. Vraiment, rien, nada. C'est pour ça que c'est si facile! Cependant, il y a quelques trucs que vous pouvez faire, simplement pour vous faciliter la vie par la suite. La plupart de ces choses n'ont même pas besoin de toucher du HTML.
    La première: mettre une image transparente dans Affichage -> Images et Couleurs -> Gestion des images -> Mode Avancé -> Logo du forum. Peu importe sa taille, suffit qu'elle soit transparente, vu que la taille est modifiable dans le CSS Wink
    La seconde: Centre le logo et la barre de navigation en allant dans Affichage -> Page d'accueil -> En-tête & Navigation et cocher "Centré" à Position du logo ET Position du menu.
    Mettez également la bonne couleur de fond à votre forum, la même que celle qui sera autour de votre cadre, optimalement.
    Maintenant, une autre chose que vous pouvez faire pour retirer des break intempestif, c'est de toucher aux templates.

    Là vous allez sous Affichage -> Templates -> Général -> overall_header et vous suprimez ce petit bout de code:

    À la limite, vous pouvez également simplement supprimer les balises br dans ce code, mais si de toute façon vous ne voulez pas afficher la description et le nom du forum, autant les retirer complètement Wink

    Le CSS


    Là c'est le plus long! Évidemment, vous devez avoir les images à disposition pour le haut, le bas et le centre qui se répète.

    Mais d'abord, commençons par le commencement. Première ligne du CSS:

    Comme je l'ai écrit dans mon petit commentaire, cette ligne très simple permet de faire en sorte que l'intérieur du forum va s'adapter à la taille de l'écran, en prenant simplement toute la largeur du forum. Normalement, le bodylinewidth prend la largeur que vous lui avez indiqué dans Général -> Forum -> Configuration -> Largeur du forum (nombre ou %) :. Mais là, en gros, on lui dit de ne pas le rendre en compte. Bon là, forcément, votre forum ressemble à plus grand chose, du coup on va redonner la largeur que l'on veut au forum en ajoutant ceci:


    En gros, on redonne une taille "normale" à tout ce qui doit se trouver dans le cadre et on le centre.

    Bon, tout ça c'est super, mais maintenant, il est temps de mettre en place la bannière et le forum. Voici donc le code très important:

    Expliquons donc ce code, parce que sinon, vous n'allez rien comprendre. (Enfin peut-être que si, mais avec explications c'est plus sympas x) )

    Tout premièrement, on met en position: relative et un z-index plus haut ce sur quoi on applique le before et after. Cela va nous permettre après de le placer correctement (bien qu'on utilise pas d'absolute), surtout pour pouvoir faire passer le corps de page au-dessus du before et after sans trop de peine, notamment le logo.

    Ensuite, vous remarquerez que le :before et :after ont tous deux un width: 100%; C'est tout simplement pour faire ne sorte que cela s'adapte à l'écran. Pas beaucoup de surprise non plus au niveau du height, qui est simplement la hauteur de l'image de votre haut, respectivement bas du cadre du forum. Ne prenez donc pas les valeur que j'ai mise mais mettez celle de vos images, sinon ça ne va évidemment pas marcher!

    Vous vous dites probablement que le content: '' et le display block ne sont pas important. Mais c'est tout le contraire. Un :before u un :after ne s'affichera tout simplement pas s'il n'y a pas de "content: '' " et le display block nous permet de le faire agir comme un div. Sinon, encore une fois, impossible de le voir s'afficher ainsi. Ils sont donc très importants, et à garder!


    Cependant, vous verrez tout de suite un problème, notamment par rapport à la partie du haut de votre cadre... eh bien le logo transparent n'est tout simplement pas dessus! Pas de panique, on va encore s'occuper de ça, mais d'abord, mettons en place le corps de page!


    Vous voyez donc que l'on change d'élément sur lequel on applique, mais en gros, on entoure le corps, on met un width: 100%; (pour s'adapter à toute largeur d'écran), et on fait se répéter le background seulement sur l'axe des y (donc verticalement). Maintenant, votre forum ressemble déjà un peu plus à l'encadrement que vous devriez avoir! Cependant, bien sûr, la bannière est encore au-dessus du logo, et le bas de votre forum ne touche pas le milieu. Embêtant, mais facilement corrigeable à l'aide des margin!

    Cependant, avant de nous amuser avec les margin, changeons la taille du logo pour qu'il ait la bonne hauteur et largeur (toute la hauteur de la bannière donc). Chez moi, ça donne ça:

    Bien sûr, chez vous la taille peut être différente.

    Il faut le faire avant de jouer avec les margin, car la hauteur du logo détermine aussi la taille de la margin: plus le logo est grand, plus le margin le sera aussi.


    Reprenons donc le code que nous avions avant, et ajoutons-y des margin (les miennes sont tout à la fin de chacun des deux bouts de code):


    Mettez toujours les margin-top, margin-bottom, margin-left ou margin-right après les margin: tout court. En effet, sinon, votre margin-top/bottom/left/right ne sera pas prit en compte!


    Ert voilà, votre forum est dans un joli cadre! =D
    Cependant, si vous n'avez pas retiré la couleur du cadre de bodyline, vous remarquerez que le cadre n'arrive pas vraiment jusqu'au bout de votre page de navigateur... C'est normal, parce que le body a une marge, et le bodyline a un cadre! On peut donc retirer tout ça en mettant ceci dans le CSS:


    Le Javascript


    Bon c'est bien beau tout ça, vous avez un joli cadre et tout, mais... Le centre ne se répète pas correctement! Et si par malheur vous n'avez pas la bonne taille à l'intérieur du cadre, eh bien ça peut mal se répéter et mal "fusionner" avec le footer, et vous donner un truc comme ça:
    Pas génial hein?

    Eh bien avec ce script, ce n'est plus un problème!
    Allez sous Modules -> HTML & JAVASCRIPT -> Gestion des codes Javascript -> Créer un Nouveau Javascript,nommez-le quelque chose comme "Multiplication en taille du page-body" cochez sur toutes les pages et vous y mettez:

    Ici, le 201 correspond à la hauteur de mon image qui se répète au centre. Donc, si votre image ne fait que 100px, replacez le 201 par 100!


    En gros, voilà ce que ce code dit, ligne par ligne. Prendre la div du nom de page-body. Calculer ce qui reste de la division entre la hauteur de ce div et 201 (qui est la hauteur de mon image de répétition). Ensuite, créer une nouvelle hauteur en prenant la hauteur actuelle de page-body, et en y ajoutant la différence entre 201 et le reste que je viens de calculer. Appliquer cette nouvelle hauteur à page-body.
    Et tadaaa! ça se répète tout bien! =D

    Et voilà qui est fait et tout simple pour PHPBB2!

    Pour Invision


    Invision est une des plateformes que j'utilise personnellement le plus, parce qu'il n'y a pas vraiment de tableaux. Du coup c'est la deuxième version que je vais vous montrer, et je ne vais pas vous montrer pour les autres versions. Désolée!

    Le HTML


    Ici, c'est légèrement plus difficile que pour le PHPBB2, car il y a deux templates sur lesquels on va devoir modifier quelque chose. En réalité, on ajoute une seule et même div, cependant, vu que la div s'ouvre sur overall_header, il faut la fermer sur overall_footer_begin !

    Cherchez dans votre template overall_header ceci:


    Il vous suffit alors d'ouvrir une div entre deux en lui donnant une class, comme par exemple:


    Maintenant, dans overall_footer_begin, tout à la fin du template, vous avez ceci:


    Rajoutez-y simplement une div fermante, comme ceci:


    Et voilà qui est terminé pour la partie compliquée!
    Pour la partie simple, nous avons pareil pour que le PHPBB2, donc je vous le remets ici:
    La première: mettre une image transparente dans Affichage -> Images et Couleurs -> Gestion des images -> Mode Avancé -> Logo du forum. Peu importe sa taille, suffit qu'elle soit transparente, vu que la taille est modifiable dans le CSS Wink
    La seconde: Centre le logo et la barre de navigation en allant dans Affichage -> Page d'accueil -> En-tête & Navigation et cocher "Centré" à Position du logo ET Position du menu.
    Mettez également la bonne couleur de fond à votre forum, la même que celle qui sera autour de votre cadre, optimalement.
    Maintenant, une autre chose que vous pouvez faire pour retirer des break intempestif, c'est de toucher aux templates.

    Le CSS


    Plus compliqué tout de même que le HTML, le code reste cependant assez simple et similaire à sa version du PHPBB2, à quelque changements près!

    Commençons tout de suite par mettre les images de bannière et de footer du forum:

    Expliquons donc ce code, parce que sinon, vous n'allez rien comprendre. (Enfin peut-être que si, mais avec explications c'est plus sympas x) )

    Tout premièrement, on met en position: relative et un z-index plus haut ce sur quoi on applique le before et after. Cela va nous permettre après de le placer correctement (bien qu'on utilise pas d'absolute), surtout pour pouvoir faire passer le corps de page au-dessus du before et after sans trop de peine, notamment le logo.

    Ensuite, vous remarquerez que le :before et :after ont tous deux un width: 100%; C'est tout simplement pour faire en sorte que cela s'adapte à l'écran. Pas beaucoup de surprise non plus au niveau du height, qui est simplement la hauteur de l'image de votre haut, respectivement bas du cadre du forum. Ne prenez donc pas les valeur que j'ai mise mais mettez celle de vos images, sinon ça ne va évidemment pas marcher!

    Vous vous dites probablement que le content: '' et le display block ne sont pas important. Mais c'est tout le contraire. Un :before u un :after ne s'affichera tout simplement pas s'il n'y a pas de "content: '' " et le display block nous permet de le faire agir comme un div. Sinon, encore une fois, impossible de le voir s'afficher ainsi. Ils sont donc très importants, et à garder!


    Cependant, vous verrez tout de suite un problème, notamment par rapport à la partie du haut de votre cadre... eh bien le logo transparent a un fond, tout d'abord, et il ne se met pas au-dessus de l'image de bannière! On va donc tout de suite régler notre premier problème:

    Expliquons rapidement son code. Sur Invision, le logo est dans deux div: #logostrip et #logo. #logo a une marge qui est mise automatiquement, une marge que je retire dans le CSS, et #logostrip doit être mit au centre (avec margin-auto). Je mets aussi une largeur et une hauteur à notre image du logo (pour qu'elle prenne toute la hauteur de la bannière et une bonne largeur. Et enfin, je retire la couleur de fond à notre logo, avec le background:none!

    Maintenant, occupons-nous du corps du forum!

    Ici c'est simple, on met un width: 100% à ipbwrapper pour qu'il s'adapte à la taille de l'écran et on retire tout padding, ensuite, on utilise la div qu'on a créée pour mettre l'image de fond qui se répète verticalement, en mettant un width de 100% pour qu'elle s'adapte à toute taille d'écran.

    Maintenant, vraiment, on n'a plus qu'un seul problème: tout ce qui est à l'intérieur prend toute la alrgeur... vraiment pas pratique, et pas franchement ce qu'on veut! Du coup, une seule solution: mettre une largeur max à tout ce qu'il y a à l'intérieur et un joli margin: auto pour que ça se centre:

    Le left: 3px est mit parce qu'en réalité, sur Invision, tout est un tout petit peu décalé. Rien de bien grave donc, qui ne peut être corrigé avec un petit position: relative!

    Et à présent, vient donc le moment de retirer tout trou béant entre le header et notre corps,ou le footer et notre corps. Dans mon cas, le footer est déjà collé au corps, donc je n'y touche pas (mais vous pourriez simplement ajouter un margintop négatif à .container_IE:after ), alors il me suffit de changer le .container_IE:before comme ceci:


    Et voilà le CSS qui est terminé!

    Le Javascript


    Le Javascript pour Invision est le même que celui de PHPBB2 à un détail près: il s'applique sur #contour_forum ! Du coup, je vus copie-colle juste ce qu'il y a plus haut en changeant ce détail (parce que j'ai la flemme =P)
    Bon c'est bien beau tout ça, vous avez un joli cadre et tout, mais... Le centre ne se répète pas correctement! Et si par malheur vous n'avez pas la bonne taille à l'intérieur du cadre, eh bien ça peut mal se répéter et mal "fusionner" avec le footer, et vous donner un truc comme ça:
    Pas génial hein?

    Eh bien avec ce script, ce n'est plus un problème!
    Allez sous Modules -> HTML & JAVASCRIPT -> Gestion des codes Javascript -> Créer un Nouveau Javascript,nommez-le quelque chose comme "Multiplication en taille du contour_forum " cochez sur toutes les pages et vous y mettez:

    Ici, le 201 correspond à la hauteur de mon image qui se répète au centre. Donc, si votre image ne fait que 100px, replacez le 201 par 100!


    En gros, voilà ce que ce code dit, ligne par ligne. Prendre la div du nom de contour_forum. Calculer ce qui reste de la division entre la hauteur de ce div et 201 (qui est la hauteur de mon image de répétition). Ensuite, créer une nouvelle hauteur en prenant la hauteur actuelle de contour_forum, et en y ajoutant la différence entre 201 et le reste que je viens de calculer. Appliquer cette nouvelle hauteur à contour_forum.
    Et tadaaa! ça se répète tout bien! =D

    Et voilà qui sonne la fin de ce tuto! ^w^


    Dernière édition par NyoTheNeko le Jeu 22 Jan 2015 - 22:51, édité 5 fois



    shala
    FémininAge : 24Messages : 213

    le Dim 3 Mai 2015 - 19:15

    merci ^^ pour ton tuto il est génial



    Youp
    FémininAge : 21Messages : 498

    le Jeu 14 Mai 2015 - 5:37

    C'est vraiment super super ! Je rêvais de comprendre comment faire, merci Nyo :love:



    picka234
    Age : 51Messages : 415

    le Lun 22 Juin 2015 - 14:13

    merci



    Flitch
    MasculinAge : 27Messages : 35

    le Sam 4 Juil 2015 - 7:23

    Une intégration total ça doit être pas mal :) A mes lectures!
    SethGuex
    MasculinAge : 16Messages : 7

    le Dim 12 Juil 2015 - 13:26

    @Flitch a écrit:Une intégration total ça doit être pas mal :) A mes lectures!
    Rain'
    FémininAge : 16Messages : 14

    le Sam 5 Sep 2015 - 10:43

    Merci beaucoup pour ce tuto je sens qu'il va bien m'aider Very Happy
    miekid
    FémininAge : 25Messages : 31

    le Dim 20 Sep 2015 - 21:26

    merciii
    Romann
    FémininAge : 22Messages : 183

    le Sam 26 Sep 2015 - 0:03

    MERCIII ♥



    Morry
    FémininAge : 32Messages : 28

    le Sam 26 Sep 2015 - 23:12

    Merci :p



    Flaura
    FémininAge : 13Messages : 148

    le Mar 29 Sep 2015 - 17:35

    Un grand merci :3



    Grande
    FémininAge : 28Messages : 205

    le Lun 19 Oct 2015 - 20:35

    Merci



    Shi
    MasculinAge : 25Messages : 54

    le Jeu 5 Nov 2015 - 14:56

    Quelle perle ♥ Encore merci =D
    Soft™
    MasculinAge : 19Messages : 3

    le Sam 30 Jan 2016 - 19:46

    Merci ! :)
    Suisen
    FémininAge : 22Messages : 52

    le Sam 13 Fév 2016 - 14:28

    Un grand merci pour les explications ♥
    miss69
    FémininAge : 33Messages : 40

    le Dim 6 Mar 2016 - 10:25

    Bonjour, merci pour ce gentil tuto !
    Bunny Lune
    FémininAge : 27Messages : 134

    le Mar 8 Mar 2016 - 20:03

    Merci beaucoup pour le partage.
    Cornelia
    FémininAge : 28Messages : 39

    le Dim 3 Avr 2016 - 15:21

    merci <33
    Saphira
    FémininAge : 20Messages : 72

    le Sam 16 Avr 2016 - 19:28

    Ah super ! Merci :)
    Ryukaï
    MasculinAge : 18Messages : 522

    le Sam 7 Mai 2016 - 14:56

    Merci c'est vraiment trooooooooooooooop ouf!!!!!!!



    Jenifael92
    FémininAge : 14Messages : 12

    le Mer 1 Juin 2016 - 20:34

    Super tuto merci ♥
    Ezekielle
    FémininAge : 24Messages : 6

    le Sam 11 Juin 2016 - 17:29

    Je ne sais pas si j'arriverai a l'utiliser, mais je veux voir ça!
    :aww:
    Merci!
    Jenifael92
    FémininAge : 14Messages : 12

    le Ven 12 Aoû 2016 - 14:59

    Merci <3
    NekoMiaouw
    FémininAge : 20Messages : 85

    le Lun 22 Aoû 2016 - 18:13

    C'est très jolie, merci du tuto <3



    dean winchester
    MasculinAge : 22Messages : 83

    le Mer 7 Sep 2016 - 2:25

    merci ! :)
    TheHG
    FémininAge : 22Messages : 52

    le Lun 12 Sep 2016 - 12:28

    Merssssi Wink
    Contenu sponsorisé

    Aujourd'hui à 7:51


      La date/heure actuelle est Sam 10 Déc 2016 - 7:51