Oyé braves gens ! Votre admin des blagues à un cadeau pour vous !!!
Alors pour faire simple, la fiche de Kitsune m'a donné une idée pour une petite mise en pages pour les fiches de personnage. Rien d'aussi graphique que notre nouvelle amie (je suis un mec sobre et chiant quand je fais du design, navré) mais, un truc plus propre que la mise en page actuelle.
Et comme je suis un mec bien, et que j'aime partager les trucs que je fais... Je vous offre le code que j'ai tapé pour que vous ayez une aussi jolie fiche de personnage ! Comme pour la mienne quoi !
Attention les amis... Il ne s'agit pas d'une obligation. J'ai posté se sujet dans les outils pour une simple raison, c'est à votre bon vouloir. Comme je le dis plus haut, j'ai un style très sobre, et ça ne plaît pas à tout le monde, nous n'allions surement pas vous l'imposez !
Alors maintenant, pour les personnes que cela intéresserait, vous pouvez continuer votre lecture, je vais vous expliquez le déroulement des opérations ! Pour les autres, je ne vous en voudrais pas... De trop !
***
Pour les quelque courageux(ses), sachez que je vous aime déjà ! Merci d'avoir choisi mes services, ça ne vous coûtera rien, mis à part du temps. Si vous faites cette démarche, vous allez devoir coder. Oui, je sais, c'est triste, mais la beauté à un prix ! Armez-vous de votre patience et d'un bon logiciel de traitement de texte.
Mais avant de mettre les doigts dans le cambouis, parlons affaires. Si vous faîte cette démarche, vous allez remplir le code que je fournis et ensuite, l'admin des compétences / votre boss / moi, car je me porte garant de cette idée, postera votre nouvelle fiche de compétence. Donc, vous n'aurez pas votre nouvelle fiche tant qu'elle ne sera pas validée par les personnes citée plus hauts (oh, la vieille époque de création de fiche fait son retour en force).
Donc une dernière fois, une fois votre nouvelle fiche finie, vous l'envoyez à votre boss / admin des compétences / admin des blagues !
Commençons maintenant !
Première chose, afin d'avoir les jolis ronds de couleurs, vous aurez deux choses à faire dans le code, rentrez les valeurs dans le bon endroit.
Les petits filous que vous êtes auront remarquer la présence de chiffre dans cette portion de code, et il s'agit, bien entendu, de votre degré de maîtrise dans celle-ci ! Dans mon exemple, mon personnage à 12 en force (For), mais ce n'est pas la vôtre ! Je vais vous dire comment changer ça.
Vous allez être deçu devant tant de simplicité. Il vous suffit simplement de remplacer le chiffre présent dans la balise, regardé :
Maintenant, il à 18, ça correspond surement mieux à votre personnage ! Mais il y a encore un truc à faire pour que ce soit parfait les amis. Vous aurez remarqué plus haut que, il y a un autre “12”, mais précédé de “progress”. Dans mon code, il s'agit de l'avancement de la barre bleu dans le cercle, donc un truc relativement important. Donc vous l'aurez compris, il suffit simplement de remplacer le chiffre la aussi !
Et voilà ! Nous avons fini de modifier notre force, il ne vous reste qu'à faire la même chose avec les six autres cercles et se sera fini, pour cette partie !
Maintenant, parlons des compétences, il serait temps ! Pour inscrire vos compétences dans la mise en pages, rien de plus simple, il suffit donc de placer votre compétence à l'endroit signalé et la magie opérera !
Et ça ressemblera à celà :
Et le tour est joué, recommencé l'expérience avec vos autres compétences comme avant, mais faite bien attention à mettre vos compétences entres les balises :
Sinon, vous cassez mon code et je vais me fâcher tous rouge. Mais bon, une fois que tout ce travail sera fini, il ne vous restera plus qu'à l'envoyé à la vérification et vous aurez une mise en page presque aussi jolie que moi !!!
Au plaisir les enfants ! Et si vous avez une question, une incompréhension, n'hésitez pas à me contacter.
Dernière édition par Chen Stormstout le Mer 4 Sep 2019 - 11:32, édité 4 fois
Sam 21 Mar 2015 - 15:58Alors pour faire simple, la fiche de Kitsune m'a donné une idée pour une petite mise en pages pour les fiches de personnage. Rien d'aussi graphique que notre nouvelle amie (je suis un mec sobre et chiant quand je fais du design, navré) mais, un truc plus propre que la mise en page actuelle.
Et comme je suis un mec bien, et que j'aime partager les trucs que je fais... Je vous offre le code que j'ai tapé pour que vous ayez une aussi jolie fiche de personnage ! Comme pour la mienne quoi !
Code:
<link rel="stylesheet" href="https://sd-5b.archive-host.com/membres/up/50015752241776705/chen/screen.css"><div class="wrap"><h3 class="characterName">Nom de votre personnage</h3>
<div class="myStats">
<div class="progress-radial progress-12"><div class="overlay">12</div>
<div class="stat">For</div>
</div>
<div class="progress-radial progress-16"><div class="overlay">16</div>
<div class="stat">Def</div>
</div>
<div class="progress-radial progress-38"><div class="overlay">38</div>
<div class="stat">Mag</div>
</div>
<div class="progress-radial progress-52"><div class="overlay">52</div>
<div class="stat">Psy</div>
</div>
<div class="progress-radial progress-64"><div class="overlay">64</div>
<div class="stat">Vit</div>
</div>
<div class="progress-radial progress-82"><div class="overlay">82</div>
<div class="stat">Dex</div>
</div>
<div class="progress-radial progress-100"><div class="overlay">100</div>
<div class="stat">Sym</div>
</div>
</div>
<div class="myComps">
<div class="comp">
<h4>Compétences Naturelles</h4>
<div class="comps">Vos compétences Naturelles</div>
</div>
<div class="comp">
<h4>Compétences Physiques</h4>
<div class="comps">Vos compétences physique viennent ici.</div>
</div>
<div class="comp">
<h4>Compétences Défensives</h4>
<div class="comps">Vos compétences défensive viennent ici.</div>
</div>
<div class="comp">
<h4>Compétences Magiques</h4>
<div class="comps">Vos compétences magique viennent ici.</div>
</div>
<div class="comp">
<h4>Compétences Psychiques</h4>
<div class="comps">Vos compétences psychique viennent ici.</div>
</div>
<div class="comp">
<h4>Compétences de Vitesse</h4>
<div class="comps">Vos compétences de vitesse viennent ici.</div>
</div>
<div class="comp">
<h4>Compétences de Dextérité</h4>
<div class="comps">Vos compétences de dextérité viennent ici.</div>
</div>
<div class="comp">
<h4>Compétences de Symbiose</h4>
<div class="comps">Vos compétences de symbiose viennent ici.</div>
</div>
</div></div>
Attention les amis... Il ne s'agit pas d'une obligation. J'ai posté se sujet dans les outils pour une simple raison, c'est à votre bon vouloir. Comme je le dis plus haut, j'ai un style très sobre, et ça ne plaît pas à tout le monde, nous n'allions surement pas vous l'imposez !
Alors maintenant, pour les personnes que cela intéresserait, vous pouvez continuer votre lecture, je vais vous expliquez le déroulement des opérations ! Pour les autres, je ne vous en voudrais pas... De trop !
***
Pour les quelque courageux(ses), sachez que je vous aime déjà ! Merci d'avoir choisi mes services, ça ne vous coûtera rien, mis à part du temps. Si vous faites cette démarche, vous allez devoir coder. Oui, je sais, c'est triste, mais la beauté à un prix ! Armez-vous de votre patience et d'un bon logiciel de traitement de texte.
Mais avant de mettre les doigts dans le cambouis, parlons affaires. Si vous faîte cette démarche, vous allez remplir le code que je fournis et ensuite, l'admin des compétences / votre boss / moi, car je me porte garant de cette idée, postera votre nouvelle fiche de compétence. Donc, vous n'aurez pas votre nouvelle fiche tant qu'elle ne sera pas validée par les personnes citée plus hauts (oh, la vieille époque de création de fiche fait son retour en force).
Donc une dernière fois, une fois votre nouvelle fiche finie, vous l'envoyez à votre boss / admin des compétences / admin des blagues !
Commençons maintenant !
Première chose, afin d'avoir les jolis ronds de couleurs, vous aurez deux choses à faire dans le code, rentrez les valeurs dans le bon endroit.
Code:
<div class="progress-radial progress-12">
<div class="overlay">12</div>
<div class="stat">For</div>
</div>
Les petits filous que vous êtes auront remarquer la présence de chiffre dans cette portion de code, et il s'agit, bien entendu, de votre degré de maîtrise dans celle-ci ! Dans mon exemple, mon personnage à 12 en force (For), mais ce n'est pas la vôtre ! Je vais vous dire comment changer ça.
Vous allez être deçu devant tant de simplicité. Il vous suffit simplement de remplacer le chiffre présent dans la balise, regardé :
Code:
<div class="progress-radial progress-12">
<div class="overlay">18</div>
<div class="stat">For</div>
</div>
Maintenant, il à 18, ça correspond surement mieux à votre personnage ! Mais il y a encore un truc à faire pour que ce soit parfait les amis. Vous aurez remarqué plus haut que, il y a un autre “12”, mais précédé de “progress”. Dans mon code, il s'agit de l'avancement de la barre bleu dans le cercle, donc un truc relativement important. Donc vous l'aurez compris, il suffit simplement de remplacer le chiffre la aussi !
Code:
<div class="progress-radial progress-18">
<div class="overlay">18</div>
<div class="stat">For</div>
</div>
Et voilà ! Nous avons fini de modifier notre force, il ne vous reste qu'à faire la même chose avec les six autres cercles et se sera fini, pour cette partie !
Maintenant, parlons des compétences, il serait temps ! Pour inscrire vos compétences dans la mise en pages, rien de plus simple, il suffit donc de placer votre compétence à l'endroit signalé et la magie opérera !
Code:
<div class="comp">
<h4>Compétences Naturelles</h4>
<div class="comps">Vos compétences Naturelles</div>
</div>
Et ça ressemblera à celà :
Code:
<div class="comp">
<h4>Compétences Naturelles</h4>
<div class="comps">[u]Science de l'Olfaction[/u] : Nécessite un Odorat développé. Permet de pouvoir sentir les odeurs aux alentours de vous, si vous connaissez l'odeur d'un ennemi, vous pourrez ainsi l'éviter.</div>
</div>
Et le tour est joué, recommencé l'expérience avec vos autres compétences comme avant, mais faite bien attention à mettre vos compétences entres les balises :
Code:
<div class="comps> </div> Sinon, vous cassez mon code et je vais me fâcher tous rouge. Mais bon, une fois que tout ce travail sera fini, il ne vous restera plus qu'à l'envoyé à la vérification et vous aurez une mise en page presque aussi jolie que moi !!!
Au plaisir les enfants ! Et si vous avez une question, une incompréhension, n'hésitez pas à me contacter.
Dernière édition par Chen Stormstout le Mer 4 Sep 2019 - 11:32, édité 4 fois