Astuces pour vos fiches (2)

Forums » Entraide


laurine5096
chat Astuces pour vos fiches (2)
par laurine5096 en octobre 2013

Sakii
140ème
2 847 points
En janvier 2017
Sakii niveau/12 experience 700 facteur
design/quote.png
Sakii Parce que ce topic m'a vraiment beaucoup aidé -avec Créa' Fiche- et pour aider les lapinautes, je fais un petit récapitulatif que quelques codes -c'est pénible de chercher dans le topic smiley/bete.png- et en ajoute certains :


~ Sommaire :

→ Mettre un fond de fiche.
→ Texte clignotant.
→ Remonter en haut d'la fiche.
→ Texte défilant.
→ Texte avec ombre.
→ Ecrire en dehors de sa fiche.
→ Taille d'une image.
→ Colorafond.
→ Fond de couleur.
→ Cadre blanc opaque.
→ Cadre transparent.
→ Cadre rouge.
→ Barre de couleur avec pseudo.
→ Avatar rond.
→ Ascenseur.
→ Infobulle.
→ Curseur.
→ Musique. ~


• Mettre un fond de fiche :
<div style="background: url(URL IMAGE) no-repeat #FFFFFF; width: 480px; padding: 10px 10px 10px 10px;">
<div style="text-align: left;">Texte</div></div >


• Texte clignotant :
<blink>texte qui clignote</blink>


• Pour remonter en haut de la fiche :
<a href="#">haut de page</a>


• Texte défilant :
<marquee>Texte défilant</marquee>


• Texte avec de l'ombre derrière :
<div style="text-shadow: rgb(119, 119, 119) 0px 0px 5px;" align="center">Texte<br& gt;</div>


• Pour écrire en dehors de sa fiche :
<center style="text-align: left; left: 61%; top: 17%; width: 320px; position: absolute;">Texte </center>


• Pour modifier la taille d'une image (il suffit de modifier les chiffres) :
<img height="300" width="300" src="URL IMAGES"/>


• Colorafond :
<div style="background-image:url(URL IMAGE);op acity:1.0; background-color:#FFFFFF; background-repeat; background-attachment: fixed; position: fixed; left: -450px; top: -472px; width: 3000px; height:3000px; z-index: -1;">


• Fond de couleur :
<div style="background-color: green;">Du texte.</div>

[Les couleurs :
orange : orange;
noir : black;
blanc : white;
violet : purple;
bleu : blue;
rouge : red;
gris : grey;
jaune : yellow;
blanc jauni : whitesmoke;
rose : pink;
marron : brown]


• Cadre blanc opaque :
<div style="background: rgb(255, 255, 255); margin: auto; padding: 5px; border-radius: 10px; width: 400px; color: black;" class="bloc">
<br>Texte<br><br><b r><br><br></div>< ; ;/div> <br>


• Cadre transparent à bords noir :
<div style="background-color: rgba(255, 255, 255, 0.5); margin: auto; padding: 20px 20px 20px 20px; width: 400px;border: 1px solid #000;;">
<div style="text-align: center;">Texte</div>
</div><div style="text-align: center;">
<br></div>
</div>


• Cadre rouge :
<center><div class="erreur">Texte</di v></center>


• Une barre de couleur avec son pseudo :
<div style="background-color: #199aca; width: 400px; padding: 10px 50px;">
<div style="text-align: left;"><font size="6" color="##000000" face="arial">Pseudo</fon t></div></div>
<div style="position: relative; left: 375px; top: -100px; height:0px;">

[Quelques couleurs :
noir : #000000
blanc : #ffffff
rouge : ff0033
vert : #00cc33
bleu : #0099cc
jaune : #ffff00
rose : #ff3399
violet : #cc33ff]


• Avatar rond dans la fiche :
<div style="position: relative; left: 375px; top: -100px; height:0px;"><img src="URL AVATAR" style="border: 2px solid #fff; width: 80px; height: 80px; border-radius: 80px;"></div>


• Ascenseur :
<div style="height: 330px; width: 500px; overflow: auto;"><div align="center">Texte</di v></div>


• Infobulle :
<span TITLE="Texte de l'infobulle">


• Curseur :
Au début du HTML :
<div style="cursor: url(URL du curseur), pointer;">
Et à la fin du HTML :
</div>


• Musique : [Je n'en ai vérifier qu'un seul, donc pas sûre que les trois marchent.]
-Code vidéo normale :
<div style="text-align: center;"><object width="500" height="282" data="https://www.youtube.com/v/CODE?" ></object></div>

- Code vidéo qui se lance toute seule :
<div style="text-align: center;"><object width="500" height="282" data="https://www.youtube.com/v/CODE?autoplay=1" ></object></div>

-Code musique :
<div style="text-align: center;"><object width="0" height="0" data="https://www.youtube.com/v/CODE?autoplay=1" ></object></div>


[Je tiens à préciser que le n'ai pas tout mis.]
Voilà, j'espère que ça va vous aider. smiley/dents.png

Petit up. smiley/dents.png
non classé
En avril 2017
un inconnu niveau/ experience
Up
Arasan
89ème
3 700 points
En avril 2017
Arasan niveau/12 experience 820 facteur
Quelqu'un pourrait m'envoyer le code musique s'il vous plait, le miens ne fonctionne plus 😔
Sakii
140ème
2 847 points
En août 2017
Sakii niveau/12 experience 700 facteur
Petit up. x)
(En vrai c'est juste pour arrêter de chercher le topic à chaque fois mdrr me jugez pas. smiley/bete.png)
Julinelle
4 753ème
546 points
En août 2017
Julinelle niveau/6 experience 240 facteur
Merci Sakii d'avoir justement remonté le topic. smiley/dents.png

J'ai essayé de créer mon propre cadre à l'aide de Créa'fiche et je n'ai strictement rien compris au codage. x) Est ce qu'on pourrait m'expliquer en décortiquant un peu plus que sur Créa'fiche s'il vous plait ? ^^
(Créa'fiche est un site génial, je ne dis pas le contraire. smiley/rigole.png)
Merci d'avance.
Awani
224ème
2 107 points
En novembre 2017
Awani niveau/12 experience 700 facteur
Code pour écrire en dehors de sa fiche et que ça reste toujours au même niveau (jsp comment expliquer essayez vous verrez (ça marche pas sur téléphone/tablette je crois)) :

<center style="text-align: left; left: 50px; top: 200px; background-attachment: fixed; position: fixed">TEXTE OU CODE</center>



Vous pouvez modifier la position grâce à :

« left: 50px » qui modifie la position horizontale : plus le chiffre écrit est grand plus votre texte/code/image/... est vers la droite
et
« top: 200px » qui modifie la position verticale : plus le chiffre écrit est grand plus votre texte/code/image/... est vers le bas
Saka
182ème
2 440 points
En novembre 2017
Saka niveau/12 experience 755 facteur
design/quote.png
Arasan Quelqu'un pourrait m'envoyer le code musique s'il vous plait, le miens ne fonctionne plus 😔

Tu en as toujours besoin ?
Car, les codes musique marchent, c'est juste que certaines musiques ne marchent pas !
Essaye avec d'autre musique
loumeuni
1 132ème
955 points
En novembre 2017
loumeuni niveau/8 experience 525 facteur
design/quote.png
Sakii Parce que ce topic m'a vraiment beaucoup aidé -avec Créa' Fiche- et pour aider les lapinautes, je fais un petit récapitulatif que quelques codes -c'est pénible de chercher dans le topic smiley/bete.png- et en ajoute certains :


~ Sommaire :

→ Mettre un fond de fiche.
→ Texte clignotant.
→ Remonter en haut d'la fiche.
→ Texte défilant.
→ Texte avec ombre.
→ Ecrire en dehors de sa fiche.
→ Taille d'une image.
→ Colorafond.
→ Fond de couleur.
→ Cadre blanc opaque.
→ Cadre transparent.
→ Cadre rouge.
→ Barre de couleur avec pseudo.
→ Avatar rond.
→ Ascenseur.
→ Infobulle.
→ Curseur.
→ Musique. ~


• Mettre un fond de fiche :
<div style="background: url(URL IMAGE) no-repeat #FFFFFF; width: 480px; padding: 10px 10px 10px 10px;">
<div style="text-align: left;">Texte</div></div >


• Texte clignotant :
<blink>texte qui clignote</blink>


• Pour remonter en haut de la fiche :
<a href="#">haut de page</a>


• Texte défilant :
<marquee>Texte défilant</marquee>


• Texte avec de l'ombre derrière :
<div style="text-shadow: rgb(119, 119, 119) 0px 0px 5px;" align="center">Texte<br& gt;</div>


• Pour écrire en dehors de sa fiche :
<center style="text-align: left; left: 61%; top: 17%; width: 320px; position: absolute;">Texte </center>


• Pour modifier la taille d'une image (il suffit de modifier les chiffres) :
<img height="300" width="300" src="URL IMAGES"/>


• Colorafond :
<div style="background-image:url(URL IMAGE);op acity:1.0; background-color:#FFFFFF; background-repeat; background-attachment: fixed; position: fixed; left: -450px; top: -472px; width: 3000px; height:3000px; z-index: -1;">


• Fond de couleur :
<div style="background-color: green;">Du texte.</div>

[Les couleurs :
orange : orange;
noir : black;
blanc : white;
violet : purple;
bleu : blue;
rouge : red;
gris : grey;
jaune : yellow;
blanc jauni : whitesmoke;
rose : pink;
marron : brown]


• Cadre blanc opaque :
<div style="background: rgb(255, 255, 255); margin: auto; padding: 5px; border-radius: 10px; width: 400px; color: black;" class="bloc">
<br>Texte<br><br><b r><br><br></div>< ; ;/div> <br>


• Cadre transparent à bords noir :
<div style="background-color: rgba(255, 255, 255, 0.5); margin: auto; padding: 20px 20px 20px 20px; width: 400px;border: 1px solid #000;;">
<div style="text-align: center;">Texte</div>
</div><div style="text-align: center;">
<br></div>
</div>


• Cadre rouge :
<center><div class="erreur">Texte</di v></center>


• Une barre de couleur avec son pseudo :
<div style="background-color: #199aca; width: 400px; padding: 10px 50px;">
<div style="text-align: left;"><font size="6" color="##000000" face="arial">Pseudo</fon t></div></div>
<div style="position: relative; left: 375px; top: -100px; height:0px;">

[Quelques couleurs :
noir : #000000
blanc : #ffffff
rouge : ff0033
vert : #00cc33
bleu : #0099cc
jaune : #ffff00
rose : #ff3399
violet : #cc33ff]


• Avatar rond dans la fiche :
<div style="position: relative; left: 375px; top: -100px; height:0px;"><img src="URL AVATAR" style="border: 2px solid #fff; width: 80px; height: 80px; border-radius: 80px;"></div>


• Ascenseur :
<div style="height: 330px; width: 500px; overflow: auto;"><div align="center">Texte</di v></div>


• Infobulle :
<span TITLE="Texte de l'infobulle">


• Curseur :
Au début du HTML :
<div style="cursor: url(URL du curseur), pointer;">
Et à la fin du HTML :
</div>


• Musique : [Je n'en ai vérifier qu'un seul, donc pas sûre que les trois marchent.]
-Code vidéo normale :
<div style="text-align: center;"><object width="500" height="282" data="https://www.youtube.com/v/CODE?" ></object></div>

- Code vidéo qui se lance toute seule :
<div style="text-align: center;"><object width="500" height="282" data="https://www.youtube.com/v/CODE?autoplay=1" ></object></div>

-Code musique :
<div style="text-align: center;"><object width="0" height="0" data="https://www.youtube.com/v/CODE?autoplay=1" ></object></div>


[Je tiens à préciser que le n'ai pas tout mis.]
Voilà, j'espère que ça va vous aider. smiley/dents.png

Je me permet d'apporter quelques modifications:

1/ Pour le code du colorafond, pour moi ça n'a marché que si je le mettais tout à la fin, aprs les autres codes HTML.

2/ Pour le fond de fiche, je propose plutôt ça:

<div style="background: url(URL IMAGE) #FFFFFF; width: 450px; padding: 10px 10px 10px 10px;">

(j'ai changé 3 trucs: 1) j'ai enlevé le "no repeat" que je trouvais gênant, 2) j'ai changé le 480px en 450px, 3) j'ai enlevé un bout du code)

Je précise que je n'avais aucune prétention en modifiant tes codes, et d'ailleurs je ne m'y connais pas trop, j'ai juste testé des choses sur ma fiche et vu ce qui marchais le mieux.

Voilà, j'espère vous avoir aidé ^^

Lou~
Li-Lé
69ème
4 145 points
En janvier 2018
Li-Lé niveau/12 experience 810 facteur
Es ce que les codes que vous cité marche sur tablette /smartphone ?
Awani
224ème
2 107 points
En février 2018
Awani niveau/12 experience 700 facteur
design/quote.png
Li-Lé Es ce que les codes que vous cité marche sur tablette /smartphone ?

Pour la plupart, oui. smiley/dents.png

(je remonte le topic au passage, il est fort utile)
Allochoco.
238ème
2 206 points
En février 2018
compte supprimé niveau/10 experience 585 facteur
Mais, comment savoir à quel endroit on doit placer ces codes ?
sweet.peachie
2 321ème
719 points
En février 2018
design/quote.png
Allochoco. Mais, comment savoir à quel endroit on doit placer ces codes ?

c'est dans l'ordre chronologique, de haut en bas, si tu vois que code X soit avant code Y met code X avant code Y. Si tu veux mettre code Y dans code X, tu ne fermes pas la balise du code X avant d'avoir mis code Y.

j'espère avoir été comprise lolilol
non classé
En février 2018
un inconnu niveau/ experience
c'est idiot mais je suis sensé les mettre ou les codes ?
sweet.peachie
2 321ème
719 points
En février 2018
design/quote.png
un inconnu c'est idiot mais je suis sensé les mettre ou les codes ?

quand tu édites ta fiche, dans la base grise, juste en haut à droite, il y a un carré bleu, c'est là que tu places le code
Confined
270ème
1 909 points
En avril 2018
Confined niveau/12 experience 615 facteur
design/quote.png
Hikari. Pour le code "Colorafond" sur la fiche :

<div style="background-image:url(URL IMAGE);op acity:1.0; background-color:#FFFFFF; background-repeat; background-attachment: fixed; position: fixed; left: -450px; top: -472px; width: 3000px; height:3000px; z-index: -1;">

Voila, normalement ça devrait marcher smiley/fiere.png

a chaque fois que je mets le nouveau colorafonf ma fiche est détruite smiley/pleure.png
Awani
224ème
2 107 points
En avril 2018
Awani niveau/12 experience 700 facteur
design/quote.png
Confined a chaque fois que je mets le nouveau colorafonf ma fiche est détruite smiley/pleure.png

C'est peut-être parce que la balise n'est pas fermée. Rajoute </div> à la fin du code 😊
Papillon120 <3
448ème
1 405 points
En avril 2018
compte supprimé niveau/6 experience 285 facteur
Merci !
Lapi-mimi
155ème
2 664 points
En mai 2018
Lapi-mimi niveau/12 experience 745 facteur
Comment on met un lien sur une fiche ? smiley/dents.png
Confined
270ème
1 909 points
En avril 2019
Confined niveau/12 experience 615 facteur
design/quote.png
Blizzard≠ ⓈⓄⓂⓂⒶⒾⓇⒺ

0-Fond de couleur
1- une image de fond
2- Cadre transparent
3-Cadre Blanc opaque
4-Cadre rouge
5-Cadre vert
6-Ascenseur blanc opaque
7-Ascenseur transparent
8-Pointeur Image
9- infobulle noie
10-infobulle blanche (1sec avant apparition)
11-Ecrire en dehors de se fiche (déplacement avec la souris)
12- Bouton
13-Clique dessus et on se retrouve en haut de la fiche
14-Texte défilant


ⒸⓄⒹⒺⓈ

0 ▶ Fond de couleur
<div style="background-color: green;">Du texte.</div>

choisir votre couleur :
orange : orange;
noir : black;
blanc : white;
violet : purple;
bleu : blue;
rouge : red;
gris : grey;
jaune : yellow;
blanc jauni : whitesmoke;
rose : pink;
marron : brown
.

1 ▶ Image de fond
<div style=
"background: url(lien de l'image) no-repeat #806552; width: 435px; margin: auto; padding: 5px; border: 1px solid #d8d8d8; color: white;">
<br />

2 ▶ Cadre transparent
<div style="background: url(&quot;http://bildberg.eu/jRWexSrj.png&quot;*); padding: 15px 20px; border-radius: 0px 10px; border: 1px dotted rgb(0, 0, 0); width: 360px; color: rgb(0, 0, 0);"><font size="5">Écris ici le texte que tu souhaites </font><br></div>

3 ▶ Cadre Blanc opaque
<div style="background: rgb(255, 255, 255); margin: auto; padding: 5px; border-radius: 10px; width: 400px; color: black;" class="bloc">
<br>Texte<br><br><b r><br><br></div>< ; ; ;/div> <br>

4 ▶ Cadre rouge
<center> <div class="erreur"><font color="#ffffff">Texte<br ><br></font> </div></center>

5 ▶ Cadre vert
<div id="valideAmi" class="valide">Ton texte <br></div>

6 ▶ Ascenseur opaque blanc
<br>
<div style="text-align: left; overflow: auto; max-height: 85px;" class="texteClair"><p> ; ; ; Ton</p><p>Texte</p>< ; ; ;p>ici</p><p>;*)<br> ; ; ;</p><span style="color: rgb(0, 204, 0);"><strong></strong&a mp;a mp;g t;<!-- span--></span></div><s trong>
<br></strong>

enlever le *

7 ▶ Ascenseur transparent
<font color="#000000"><b>&a mp;a mp;l t;i><br></i></b>< ; ; ;b><i><br></i></ b>
</font><div style="overflow: auto; width: 200px; height: 110px;" align="center"><br>&a mp;a mp;l t;br><br><br><br>To n texte<br>ici<br><br>&a mp;a mp;l t;br>;*)<br></div><fon t color="#000033"><b>&a mp;a mp;l t;i>
</i></b></font>

enlever le *

8 ▶ Pointeur Image
<div style="cursor: url('Adresse de l'image'*), pointer;">Texte/fiche ou tu veux voire le pointeur</div>

9 ▶ Info bulle noire
<div style="font-family: 'Lucida Grande', arial; text:;" onmouseover="EcranPlat.infoBulle($( this), 'infoBulle', 'Dans la bulle'*)" align="center">texte ou on verra l'info bulle<br><br><br><b r><br></div>

enlever le *


10 ▶ infobulle blanche (1sec avant apparition)
<span TITLE="Texte de l'infobulle">Texte où doit apparaître l'infobulle.</span>

11 ▶ Ecrire en dehors de se fiche (déplacement avec la souris)
<div class="uiScaledImageContainer profilePic"><br><font size="1"></font><c enter style="left: 511px; top: 294px; margin-top: -275px; margin-left: 410px; position: absolute;"><font size="1"><br>
</font><font size="1">Mots/codes/image souhaités ici !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!</font><p></p> </center></div><font style="color: rgb(0, 0, 0);" size="5"><font size="1">
</font></font>

12 ▶ Bouton
<input id="voteJoueur" value="Texte de ton bouton" type="submit">

13 ▶ Clique dessus et tu te retrouve en haut de ta fiche .
<a href="#">haut de page</a>

14 ▶ Texte défilant (marche a l'enregistrement de la fiche)
<marquee>Texte défilant</marquee>

Petit up x)
Aujourd'hui, à 07:05
Publicité 1
scroll-top