AccueilDernières imagesRechercherS'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.

Le Deal du moment : -23%
EVGA SuperNOVA 650 G6 – Alimentation PC 100% ...
Voir le deal
77.91 €

    Index des tutoriels

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Dim 9 Fév 2014 - 19:26

    Index des tutoriels



    A la différence du libre service, les tutoriels sont des codes détaillés, expliqués, de la même façon qu'un TP de cursus par exemple. Ils contiennent donc plusieurs étapes pour arriver à vos fins. C'est donc forcément moins "rapide" à l'utilisation que d'aller copier un code, mais vous pourrez mieux le comprendre et l'appliquer.

    En cas de problème ou question sur un tutoriel, merci de poster dans "Problème avec mon code" afin d'avoir une aide personnalisée efficace.

    Si vous souhaitez poster un tutoriel que vous avez rédigé, nous vous remercions tous en premier lieu, et nous vous demandons de le poster dans "Proposer un tutoriel codage".


    Dans les encadrés suivants, les titres des tutoriels son en réalité des liens, et la petite image d'aperçu à droite est cliquable, de telle sorte à ce que vous voyez en entier le but final du tutoriel, si tenter qu'il en ait un.

    Tout en bas de ce message, vous retrouverez également les tutos en cours. Merci d'y jeter un coup d’œil pour ne pas faire doublon!


    Templates ForumActif



    Les catégories sur ForumActif n'auront plus aucun secret pour vous! Dans ce petit guide, Asmareth vous fait faire le tour du index_box de votre forum, en vous apprenant tous ses secrets! Des variables PHP à la structure du template, vous devriez mieux vous ne sortir à l'aide de ce sujet très bien tourné.

    PHPBB2


    Les messages sur ForumActif n'auront plus aucun secret pour vous! Dans ce petit guide, Asmareth vous fait faire le tour du viewtopic_body de votre forum, en vous apprenant tous ses secrets! Des variables PHP à la structure du template, vous devriez mieux vous ne sortir à l'aide de ce sujet très bien tourné.

    PHPBB2


    Bien que Taktiik ne regarde qu'une partie du template index_body, une fois que vous aurez lu ce tuto, votre QEEL n'aura plus aucun secret pour vous et il vous sera très facile de le modifier à votre guise!

    PHPBB2


    Les qui est en ligne, la barre de connexion rapide et l'index en général de ForumActif n'auront plus aucun secret pour vous! Dans ce petit guide, Onyx vous fait faire le tour du index_body de votre forum, en vous apprenant tous ses secrets! Des variables PHP à la structure du template, vous devriez mieux vous ne sortir à l'aide de ce sujet très bien tourné, et ce, pour toutes versions de forums!

    Toutes versions


    Le profil simple de ForumActif n'auront plus aucun secret pour vous! Dans ce petit guide, Sélène vous fait faire le tour du profile_view_body de votre forum, en vous apprenant tous ses secrets! Des variables PHP à la structure du template, vous devriez mieux vous ne sortir à l'aide de ce sujet très bien tourné !

    PHPBB2


    Généralités sur le codage



    Si vous êtes le genre de personne à ne jamais réussir à suivre les tutos, ou toujours sembler avoir un problème avec ces derniers, alors peut-être que celui-ci va résoudre tous vos problèmes en vous aident à prendre du bon bout tout tutoriel de code qui croiserait votre chemin!

    -


    Skyleen vous explique dans ce petit tuto ce qu'est une div et comment en créer une, tout en vous donnant quelques propriétés d'une div.

    HTML&CSS


    Angelusia nous fait un petit inventaire des erreurs les plus fréquentes en codage, et vous donne ce qui est à faire. Donc si votre code ne marche pas, venez jeter un petit coup d’œil par ici: peut-être avez-vous fait une de ces erreurs?

    HTML5/CSS3


    Vous apprendrez dans ce tuto à utiliser les filtres CSS3 qui vous permettront de transformer une image de façon suivante: transformer en nuance de gris, flouter, saturer, sepia, changer la couleur/les teintes, inversion, luminosité, contraste, opacité et mettre une ombre. Attention cependant, certains de ces filtres ne marchent pas pour tous les navigateurs!

    HTML5/CSS3


    Bien que dans son tuto Yui explique également comment intégrer le JavaScript dans ForumActif, ce tuto vous permettra d'avoir de petites bases quant à ce langage et à son utilisation, comme comment l'intégrer à une page ou le déboguer facilement.

    Javascript
    jQuery


    Dans ce tuto, vous apprendrez à utiliser les margin et les padding, ce que ces mots veulent dire, les effets sur tout élément et comment calculer la taille d'un objet et la place qu'il prend.

    HTML/CSS


    Ce tuto vous apprendra un concept du CSS: l'ordre et l'héritage parmi les déclarations. Ainsi, cela vous permettra de mieux comprendre pourquoi certaines parties du CSS n'affectent pas les mêmes choses, et comment marche l'héritage des déclarations.

    CSS


    Outils de debug
    par valtena_ethan

    valtena_ethan vous apprendra comment utiliser les outils de debuggage qui se trouvent dans votre navigateur en prenant comme exemple l'outil qui est intégré dans le navigateur de Mozilla Firefox. Utile pour vous apprendre à trouver seul où se trouve le problème dans votre code.

    -


    Ce tuto vous apprendra un concept du CSS: le poids des déclarations. En effet, selon comment vous déclarez vos classes dans le CSS, elles auront un "poids" qui feront qu'elles seront prise en compte ou non, selon ce que vous avez dans le reste du CSS. Pas de panique: tout est expliqué dans ce tuto!

    CSS


    Manu vous donne quelques petites règles basiques et plus avancées sur le HTML et le CSS, en vous donnant quelques liens vers des points de cursus ou des tutoriels capables de vous aider à écrire un code plus propre et surtout, correcte.

    HTML & CSS


    -webkit-o, -o-, -moz-, -ms-, ces petits préfixes que l'on voit dans certains codes et pas dans d'autres. Quand faut-il les utiliser? quand est-ce qu'on en a pas besoin? Eh bien Manumanu vous aidera à répondre à cette question!

    CSS


    Dans ce tuto, Manumanu vous apprend à utiliser les sélecteurs en CSS, tel que le +, le > et :hover. Très utile pour sélectionner un élément par le CSS, ou pour faire des effets spécifiques!

    CSS


    Dans ce tuto, Manumanu vous apprend à utiliser les sélecteurs en CSS, cette fois-ci ceux qui sont spécifiques au CSS3, tel que le ~ ou nth-child(n) . Très utile pour sélectionner un élément par le CSS, ou pour faire des effets spécifiques!

    CSS3


    Ce tuto vous permet de dresser un exemple de la majorité des propriétés liées à l'esthétique qui vous permettront donc de réaliser avec précision ce que vous avez en tête.

    CSS


    Ce tuto vous montrera comment faire des coins arrondis ainsi qu'une méthode plus avancée pour en faire.

    HTML



    Éléments de forums



    Onyx nous explique comment personnaliser nous même en CSS les différentes balises bbcode spoiler / citation / hide et code. Elle détaille pour chaque version les sélecteurs CSS à utiliser

    Toutes versions
    CSS


    Hiro' vous explique comment mettre en place le profil "caché derrière" l'avatar, en vous menant étape par étape! Il vous donne également le code en entier toue à la fin, pour les plus flemmards!

    PHPBB2
    CSS&HTML


    Nihil vous explique comment faire en sorte que le Lancer de Dé ne s'affiche que sur certaines sections du forum, et non pas sur toutes, lors que vous avez choisi de l'activer sur votre forum, en utilisant pour cela du JavaScript et en touchant un peu aux templates.

    PHPBB2, PunBB & Invision
    Javascript


    Nihil vous apprend ici à modifier les couleurs des messages de connexion et de déconnexion sur la chatbox, donc au lieu du vert et rouge habituel, vous pourrez utiliser du violet et du bleu, par exemple!

    Toutes versions
    CSS


    Onyx vous montre ici tous les codes CSS (ou presque) qui vous permettrons de personnaliser votre chatbox.

    phpBB2
    CSS


    Dans ce tuto, vous apprendrez à encadrer votre forum au moyen d'images, c'est à dire que si vous avez crée un design qui a un "cadre" qui aura alors en son intérieur tout le forum (PA, catégories, QEEL, etc), vous pourrez simplement l'installer sur votre forum en suivant ce tuto.

    PHPBB2 & Invision
    HTML & CSS3


    Dans ce tuto, vous pourrez faire en sorte d'avoir à la fois des forums qui sont côte à cote, mais aussi des images de haut et bas de catégorie, pour créer des "blocs", ce qui n'est pas forcément aisé en prenant simplement chacun des LS séparément!

    PHPBB2
    HTML & CSS


    Hiro' vous explique comment rendre votre page de liste des membres plus dynamique et la modifier comme vous le souhaitez. Et pour les plus flemmards, le code en entier se trouve à la fin!

    PHPBB2
    CSS&HTML


    Nihil vous montrera comment utiliser _userdate afin d'afficher n'importe où des informations particulières sur la personne qui est sur le forum (soit vous) comme son avatar, si la personnes est connectée, son pseudo, son nombre de MP, le nombre de message sur le forum, ses point de réputation et encore plus !

    HTML & Jquery


    Si vous en avez marre des pseudo dans la chatbox qui retournent à la ligne ou des messages trop longs qui créent une scrollbar horizontale vous forçant à clear constamment la chatbox, Alzufen a la solution pour vous. Un tutoriel proche d'une astuce, qui ne nécessite que quelques lignes de CSS!

    Toutes versions
    CSS


    Si vous aussi vous êtes comme Alumine et n'aimez pas les petits liens comme "Voir les nouveaux messages depuis votre dernière visite", ce tuto vous donne le moyen de les supprimer ou simplement de les déplacer!

    PHPBB2
    HTML


    Alumine vous apprend comment retirer, ou modifier d'une manière ou d'une autre, les liens de la navigation, voire tous les liens que vous souhaitez en fonction de leur url.

    Toutes versions
    CSS3


    Avec une simple suppression d'une petite variable dans le overall_header, supprimez la petite description de votre forum qui peut vous gêner, tout en la gardant dans le Panneau d'Administration pour être référencé!

    PHPBB2
    HTML


    Onyx vous explique comment donner à chacune de vos catégories un design différent. Vous pourrez donc personnaliser individuellement les fonds de catégorie, les titres, etc.

    PHPBB2


    Dans ce tuto, on vous explique comment bien gérer et séparer le fond, le header et le logo de votre forum, pour que cela soit plus esthétique et optimisé pour la plupart des écrans.

    Toutes versions
    HTML & CSS



    Dans ce tuto, vous apprendrez comment utiliser les pages HTML disponibles sur le forum et les utiliser en tant que page d'accueil, tout en ayant quelques conseils quant au contenu de ces dernières.

    Toutes versions
    HTML & CSS


    Ici, vous apprendrez à modifier l'apparence de votre barre de navigation pour la laisser non pas en ligne, mais dans un bloc, et de la positionner où bon vous semble sur votre page.

    PHPBB2
    HTML & CSS3


    Nihil nous explique comment supprimer le cadre de recherche rapide qui apparaît après avoir cliqué sur le bouton "Rechercher" de la navigation.

    JavaScript
    jQuery


    Nihil vous explique comment modifier les phrases usuelles du QEEL sans avoir à utiliser du Javascript, mais en utilisant une simple astuce dans le CSS et en modifiant votre template. Vous pouvez également appliquer cette tactique à d'autre éléments.

    Toutes versions
    HTML & CSS


    Nihil vous explique comment mettre un style différent à chacun de vos forums sur votre index, le tout seulement avec du CSS !

    PHPBB2
    HTML & CSS


    À l'aide des positions, Okhmhaka vous apprend comment placer au sein d'un sous-forum les éléments, tel que le titre, la description, le dernier message ou encore l'image facilement, en usant comme exemple les forums sur deux colonnes, à l'aspect plus carrés.

    PHPBB2
    HTML & CSS


    Rajouter l'avatar de l'utilisateur
    par Nihil Scar Winspeare

    Nihil vous explique comment afficher l'avatar d'un membre, et ce, n'importe où sur le forum, à l'aide d'une simple classe et d'un petit code Javascript. Simple et efficace.

    Toutes versions
    avascript


    Alzufen vous apprend à utiliser une alternative au JavaScript pour mettre vos sous-forums en retour à la ligne, en utilisant simplement le CSS.

    Toutes Versions
    CSS


    Skyleen vous explique dans ce petit tuto ce qu'est une div et comment en créer une, tout en vous donnant quelques propriétés d'une div.

    HTML&CSS


    Nihil vous explique dans ce petit tuto comment modifier l'apparence de votre chatbox pour que ce ne soit plus les noms qui soient de la couleur du groupe, mais le fond du nom qui le soit. Attention cependant, ce tuto n'est pas pour les débutants !

    HTML&CSS


    Éléments généraux (hors-forums)



    Créer une page HTML (pour fiche de pub, formulaires, etc,)
    par NyoTheNeko avec ajouts de Cheshire Cat

    Bien que ce tuto peut être utile en dehors du cadre d'un ForumActif, Nyo vous explique ici comment créer une page HTML sur votre Forum, et comment l'utiliser via une iframe, ainsi que les balises qui sont à utiliser et à quoi elles servent!

    HTML & CSS


    Après de nombreuses demandes, Onyx nous explique ici comment créer soi-même un formulaire pour ensuite l'envoyer via les messages de forumactif. Tuto très utile quand on veut générer automatiquement le code des fiches de présentation ou partenariat !

    HTML, CSS & JavaScript


    Créer une Infobulle
    par NyoTheNeko

    Ce tuto vous apprend à créer une infobulle, ainsi que quelques effets simples pour la faire apparaître en utilisant le CSS3 et les transitions. Que ce soit sur une image, sur un bloc (une div) ou dans un texte (tout span), vous pourrez créer des petites infobulles où vous le voudrez!

    HTML & CSS3


    Ce tuto vous apprend à créer une lettrine, c'est à dire une lettre qui est plus grande, voire mise en forme différemment, que le reste de votre texte.

    HTML & CSS3


    Onglets en full CSS3
    par NyoTheNeko

    Ce tuto va vous apprendre à créer un système d'onglets en utilisant uniquement le CSS3. Ainsi, cela vous permet de créer des onglets même dans les messages ForumActif.
    Pour vous aider, le tuto donne une fiche de présentation en exemple à suivre.

    HTML & CSS3


    Onglets en Javascript
    par NyoTheNeko

    Ce tuto va vous apprendre à créer un système d'onglets en utilisant le JavaScript. Cependant, il est à noter que ceci ne marche pas dans les messages ForumActif, vu que le JavaScript y est désactivé.

    HTML & CSS
    JavaScript


    En utilisant le principe très simple des ancres, Nyo vous montre comment créer des sommaires internes à votre page. Certainement utile lorsque vous avez des annexes avec beaucoup de sous-titre, ou un long texte que l'on peut découper en plusieurs morceaux vers lesquels vous voudriez rapidement naviguer!

    HTML


    Vous apprendrez dans ce tuto à utiliser les input, les labels et le sélecteur ~ pour créer un slideshow: des images défilantes. Vous pourrez alors l'utiliser pour créer une Page d'Accueil ou un élément de cette dernière.

    HTML5 & CSS3


    Eiv vous apprend ici comment prendre n'importe quelle police libre trouvée sur Internet (dafont, freefont, etc.) pour ensuite pouvoir la mettre sur votre forum en toute simplicité.

    CSS


    Effets



    Aeden vous explique ce que signifie :hover et comment l'utiliser.

    HTML & CSS


    Ce tuto vous fait faire un tour de quelques animations possibles en CSS en vous expliquant l'utilisation des keyframes: du CSS3 pour les animations! Plus besoin de photoshop ou gimp pour les créer: tout se fait en code !

    HTML5 & CSS3


    Ce tuto vous expliquera la base des balises marquee afin que vous puissiez faire défiler un texte ou une image.

    HTML


    Shoki vous apprend comment créer facilement des animations en CSS3 uniquement en utilisant les keyframes.

    CSS3


    Okmhaka vous apprend à créer un effet lightbox, cela veut dire qu'au clic de la souris, le fond de votre fenêtre de navigateur s'assombrit et une petite boite, contentant des informations ou avec un rapport à ce bouton, s'ouvre. Et tout cela, entièrement en CSS !

    HTML & CSS3


    Fond en transparence
    par NyoTheNeko

    Dans ce tuto, vous apprendrez à faire un fond, soit une image soit une couleur unie, avec un petit effet de transparence: c'est à dire qu'il ne sera pas complètement opaque.

    HTML5 & CSS3


    Ce tuto vous permet de changer une image de noir et blanc en couleur au survol (ou vice-versa). Attention cependant! Contrairement au filtre, ce sont bien deux images distinctes qu'il faut utiliser!

    HTML & CSS


    Les Ombres
    par Aeden

    Ce tuto vous permet de créer des ombres, que cela soit pour vos textes, ou pour vos blocs (comme les div ou une image). Vous apprendrez donc comment faire une ombre externe, mais aussi une ombre interne, et tout ça en CSS!

    HTML & CSS


    Ce tuto vous permet de créer un effet d'apparition de texte au survol des images. Vous apprendrez donc comment utiliser hover.

    HTML & CSS


    Logiciels



    Encrine vous donne quelques astuces pour faire vos premiers pas sur un éditeur de texte gratuit du nom de Notepad++. Elle en profite aussi pour vous montrer comment héberger votre feuille de style sur un serveur externe en utilisant Archive Host

    Logiciel


    Tutos en Cours



    Voir https://www.never-utopia.com/f78-proposer-un-tutoriel-codage

      La date/heure actuelle est Jeu 28 Mar 2024 - 16:43