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.


    Les forum sur deux colonnes [html/css]

    Partagez
    MasculinAge : 31Message(s) : 31661

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Dim 12 Fév 2012 - 13:54
    Vos forum sur deux colonnes

    Bonjour à vous,

    Je vais vous présenter aujourd'hui un tuto' qui a été très attendu, et dont la technique a été très demandée dans les commandes de codage. Taktiik s'est chargé de vous aider avec mon accord, mais je viens vous présenter ce tutoriel de façon plus "officielle., en espérant qu'il vous aide.

    Tout d'abord, quelques éléments d'indication :

    ▬ pour installer l'ensemble de ce qui est proposé sur votre forum vous n'avez pas besoin de grosses connaissances en codage, je dirais même aucune. Par contre, pour le personnaliser de façon simple (changer les couleurs...) vous devez savoir reconnaitre les codes (donc identifier un code couleur, identifier le nom d'un élément, etc...).
    ▬ pour personnaliser et modifier ce code vous devez avoir des connaissances en codage, suffisamment pour quoi enlever, quoi laisser, à quoi correspond telle "class" etc...
    ▬ vous constaterez que le codage est déjà assez poussé, avec des effets fluides et modernes. Vous avez donc concrètement plusieurs tutoriels en un dans ce message x)

    Si la mise en forme des forum sur deux colonnes (autrement dit l'intitulé du message) ne vous parle pas, voici en application directe sur un forum ce que ça donnera :

    ▬ Lien forum test ▬

    Vous avez donc :
    ▬ les forum sur deux colonnes
    ▬ la description de la catégorie qui apparait progressivement au dessus de l'image l'illustrant à son survol
    ▬ les sous-forum apparaissant progressivement au survol de la languette "voir les sous-forum".

    Je vais donc proposer ce tutoriel en deux partie : la première donne directement les codes, où les placer et comment les modifier de façon simple, pour ceux qui sont pressés ou n'y connaissent pas grand chose en html/css ; la seconde partie s'adresse aux autres et vous permet de comprendre de façon plus technique comment il est possible de réaliser cette apparence sur vos forum.

    Quoi qu'il en soit, si vous utilisez ce tutoriel pour personnaliser l'apparence de votre forum, je vous demande de mettre un crédit à Never-Utopia sur votre accueil, de manière lisible cela va de soi, en guise de remerciement pour l'aide que nous vous avons apportée.

    Avantage de cette mise en forme : elle permet de diminuer grandement la longueur de votre forum. Si votre forum est court, il n'est guère utile de l'utiliser si ce n'est juste pour "le style" qui peut-être vous plait.
    Inconvénient : cette mise en forme est détestée par IE... Très mal interprétée, ça devient le bordel sur vos forum si le navigateur utilisé est IE, et malheureusement c'est encore beaucoup le cas, malgré les progrès qu'ils font, ils ne sont toujours pas suffisamment à la page.


    Les Codes

    Postez à la suite pour voir le contenu des trois messages du tutoriel.



    Et voilà !

    Il ne reste plus qu'à.... personnaliser Wink.

    Rappel : n'oubliez pas le crédit à Never-Utopia svp ! C'est important pour nous et pour que vous puissiez bénéficier de toutes les nouveautés pour vos forum à la pointe du css Wink

    Tutoriels suivants conseillés :
    - Coupler "forum en 2 colonnes" et "catégories en bloc"
    - Placer facilement des éléments dans un bloc (forum)


    Dernière édition par Sparrow-style le Dim 8 Déc 2013 - 12:12, édité 8 fois


    MasculinAge : 31Message(s) : 31661

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Dim 12 Fév 2012 - 13:55
    Personnaliser !

    La personnalisation se fera essentiellement via le css, surtout si vous n'êtes pas à l'aise en codage, ne vous aventurez pas trop à modifier le template.

    Sachez das un premier temps qu'un code css est composé de plusieurs éléments :
    1) le nom de l'élément auquel s'applique le code, précédé d'un point "." ou d'un "#" selon les cas.
    2) les propriétés appliquées à cet élément, contenues entre accolades {...} et qui sont tout les styles que l'on va appliquer à l'élément nommé.

    En personnalisant, vous n'avez pas à toucher aux noms, mais uniquement à ce qui se trouve entre accolades.





    Dernière édition par Sparrow-style le Dim 12 Fév 2012 - 19:01, édité 1 fois


    MasculinAge : 31Message(s) : 31661

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Dim 12 Fév 2012 - 14:25
    Comprendre ...


    Comment réaliser des colonnes avec les forum ?



    Dernière édition par Sparrow-style le Dim 12 Fév 2012 - 19:02, édité 2 fois


    MasculinAge : 31Message(s) : 31661

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Jeu 28 Mar 2013 - 14:07
    [Zut je voulais juste alléger en enlevant une ou deux pages de réponse et j'ai tout enlevé U_U, bref, les 1000 et quelques réponses ont été divisées pour que le sujet reste en place tel quel]


    FémininAge : 47Message(s) : 192
    katia06
    le Jeu 28 Mar 2013 - 16:55
    oh on ne voit plus rien
    ben alors sparrow il faut arrêter de faire des bêtises Razz


    FémininAge : 38Message(s) : 66
    bibi0712
    le Jeu 28 Mar 2013 - 18:58
    Eh bien du coup je redis merci encore une fois ^^
    MasculinAge : 22Message(s) : 129

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Noob's
    le Jeu 28 Mar 2013 - 21:25
    Encore merci alors Razz
    MasculinAge : 19Message(s) : 20
    Draigon
    le Ven 29 Mar 2013 - 2:59
    Merchi cher ami Very Happy
    FémininAge : 20Message(s) : 30
    Cocotawa
    le Ven 29 Mar 2013 - 10:24
    Merci beaucoup, c'est exactement ce qu'il me fallait Very Happy
    FémininAge : 48Message(s) : 111
    bianca ~♥~
    le Ven 29 Mar 2013 - 17:52
    Merci!


    FémininAge : 26Message(s) : 61
    Bavouille
    le Ven 29 Mar 2013 - 18:08
    ah j'ai déjà utilisé le tuto mais j'ai besoin de revoir un truc pour modifier certaines choses du coup je poste un message ^^ merci encore pour le tuto
    FémininAge : 25Message(s) : 1147

    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 Ven 29 Mar 2013 - 20:31
    Encore merci pour le tuto - oui j'ai envie d'utiliser ton code aussi <3


    MasculinAge : 22Message(s) : 18
    Arcanata
    le Ven 29 Mar 2013 - 21:06
    Merci :)
    MasculinAge : 23Message(s) : 73
    patate_masquey
    le Ven 29 Mar 2013 - 21:45
    merci
    FémininAge : 30Message(s) : 98
    Kripterya
    le Sam 30 Mar 2013 - 4:45
    i though that i already post over here,thank! ^^
    FémininAge : 16Message(s) : 52
    Sparky59
    le Sam 30 Mar 2013 - 10:20
    Bravo ! C'est superbe.
    FémininAge : 26Message(s) : 25
    Leiden
    le Sam 30 Mar 2013 - 12:36
    Merci !
    FémininAge : 24Message(s) : 87
    Kamesora
    le Sam 30 Mar 2013 - 12:54
    merci beaucoup
    FémininAge : 23Message(s) : 45
    Boou
    le Mar 6 Mai 2014 - 16:58
    Merci beaucoup c:
    FémininAge : 31Message(s) : 250
    Ashem
    le Mer 7 Mai 2014 - 10:24
    Merci
    FémininAge : 21Message(s) : 14
    Asha
    le Jeu 8 Mai 2014 - 1:30
    Et encore une fois. )
    FémininAge : 17Message(s) : 115
    Neko-Rika
    le Jeu 8 Mai 2014 - 9:20
    Merci !
    FémininAge : 16Message(s) : 60
    Ailou ~3
    le Jeu 8 Mai 2014 - 13:28
    merci
    FémininAge : 14Message(s) : 20
    Narlya
    le Ven 9 Mai 2014 - 20:38
    Ah oui je connais ce genre de catégorie je trouve ça sympa ! ^^ merci du partage ! ^^
    FémininAge : 22Message(s) : 116
    Shuna
    le Sam 10 Mai 2014 - 15:29
    merci j'adore *^*
    Contenu sponsorisé
    Aujourd'hui à 20:54

      La date/heure actuelle est Sam 1 Oct 2016 - 20:54