Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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
    FémininAge : 22Message(s) : 5018

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    10/10  (10/10)
    NyoTheNeko
    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


    MasculinAge : 28Message(s) : 82
    Nathaël
    le Ven 16 Sep 2016 - 16:05
    Je n'ai pas besoin du tuto, mais je suis toujours curieux de voir comment faire certaines choses. :)


    FémininAge : 24Message(s) : 190

    Les Guildes
    Guilde des Conteurs:
    7/30  (7/30)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    0/10  (0/10)
    Linaewen
    le Mer 21 Sep 2016 - 12:20
    Merci pour le tuto :)
    FémininAge : 25Message(s) : 18
    Lyly
    le Mer 21 Sep 2016 - 15:41
    Merci beaucoup pour ce tuto ! Very Happy
    FémininAge : 25Message(s) : 1173

    Les Guildes
    Guilde des Conteurs:
    3/10  (3/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    0/10  (0/10)
    Rozenbrez
    le Jeu 22 Sep 2016 - 20:33
    Voilà un tuto très intéressent. Je trouve que mettre un cadre à son forum permet de gagner en profondeur et d'améliorer l'immersion. Merci à toi pour le partage.

    J'aurais une question, est-il possible de fusionner ce tuto avec un sélecteur de thème et faire en sorte que le cadre change comme tout le reste ?

    Bisous.


    Contenu sponsorisé
    Aujourd'hui à 3:24

      La date/heure actuelle est Sam 3 Déc 2016 - 3:24