Viki

Codage : trucs et astuces


#1

Bonjour et bonne année 2016 à tout le monde !

J’ai décidé d’ouvrir ce sujet pour lister quelques aides concernant le codage sur Viki. M’étant moi-même posé des questions à mes débuts sur Viki et ayant reçu plusieurs demandes, j’espère que ceci pourra être utile à certains d’entre vous.

Ce n’est bien sûr pas une liste exhaustive, loin de là. N’hésitez pas à partager vos connaissances, je pourrai même les rassembler sur ce premier message si ça vous dit.
À noter : prenez bien soin qu’il n’y ait pas d’espace avant/après les chevrons, slash et guillemet dans le code en lui-même. Les codes ne marcheront pas, sinon.

Tout d’abord, à l’exception du code utilisé dans le point 0, tous les codes ont une balise d’ouverture et de fin : <div> blabla </div> et <span> blabla</span> par exemple.

0. Les sauts de lignes (profil et page de couverture)
Vous vous demandez pourquoi il y a un tel saut de ligne lorsque vous appuyez sur la touche Entrée alors que les autres semblent pouvoir écrire sans qu’il n’y ait un saut de ligne ? La solution est toute simple : il faut faire SHIFT + Entrée ! Dans le langage des codes, cela revient à ajouter un <br/> à la fin de votre ligne plutôt que de fermer votre paragraphe (<p> blabla </p>) et d’en rouvrir un autre.

1. Ajouter une image dans un message privé

Première astuce (concerne toutes les images) : le code <img alt=""src="lien_de_l_image">
Les images que j’envoie proviennent souvent de mon ordinateur (vu qu’elles sont personnalisées) donc deux solutions selon la taille et le format du fichier : soit on passe par un hébergeur d’image (j’ai créé un compte sur Imgur), soit on passe par l’ajout d’image sur Viki, comme sur le profil par exemple, mais on ne fait qu’envoyer l’image sur le serveur pour récupérer le lien Viki.

Deuxième astuce (seulement pour les images sur le net) : clic droit sur l’image > inspecter l’élément > copier le code HTML surligné. Avec cette astuce, il y a juste un blabla en plus pour la mise en forme de l’image, mais ça revient au final au même.

2. Mettre du texte en couleur dans un message privé
Il faut utiliser le code suivant : <span style="color:#code_couleur">Votre_texte</span>
On peut facilement trouver ces codes couleurs sur internet. Par exemple, voici le premier lien que ma recherche Google donne : http://html-color-codes.info/
Pour ma part, je me sers de ma palette Photoshop.

3. Ajouter un lien hypertexte à du texte dans un message privé
Code : <a href="lien_désiré">Texte</a>
Cela passera votre texte en bleu et souligné. Si vous désirez changer la couleur du texte, il faut utiliser le code du point 2 de part et d’autre du texte : <a href="lien_désiré "><span style="color:#code_couleur">Texte</span></a>

4. Mettre en gras, en italique dans un message privé
Pour mette en gras : <strong>Texte</strong>
Pour mettre en italique : <i>Texte</i>

5. Utiliser un conteneur
Qu’est-ce que j’entends par conteneur ? C’est une balise HTML qui va fonctionner comme un cadre dans lequel on pourra ajouter les tags que l’on voudra. Par exemple, cela permet d’ajouter un fond coloré, une bordure de texte du style et de la couleur voulue, modifier les angles etc. Voici la balise magique : <div style="mise_en_forme_voulue">Votre contenu</div>
Et maintenant, la mise en forme. À noter : tous les codes ci-dessous peuvent heureusement être combinés dans un même conteneur, il suffit de les séparer par des points-virgules ( ; ).

  • Pour ajouter un fond de couleur, il faut ajouter background:#code_couleur entre les guillemets. ( <div style="background:#code_couleur">Votre contenu</div> )
    Cf point 2 pour les codes couleurs.
  • Pour ajouter un fond imagé : background:url(lien_de_l_image)
  • Pour définir la taille et la position de votre conteneur :
  • Hauteur : length:XXX px
  • Largeur : width:XXX px
  • Si vous voulez faire un cadre déroulant (i.e. pour avoir un scroll automatique dans un cadre que l’on veut plus court que le contenu) : overflow:auto
  • Pour centrer le conteneur : margin:auto
  • Pour ajouter une bordure : border : épaisseur style #couleur
  • Épaisseur : XXpx
  • Style : on peut faire un cadre solide, en pointillé ou avec d’autres styles particuliers. Vous trouverez sur le site ci-contre plusieurs styles intéressants et le mot à écrire pour cela : http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=none
  • Couleur : cf les codes couleurs au point 2.
  • Ainsi, si je veux une bordure en pointillés noirs, épaisse de 5 pixels, j’utiliserai border : 5px dotted #000000
  • Pour changer les angles du cadre, i.e. pour avoir un cadre plus arrondi : border-radius: XXpx

Voici un exemple de code simple complet : <div style="width:50px;border:2px solid #000000;border-radius:5px">Coucou !</div>
Cela veut dire : une conteneur de 50 pixels de large, avec une bordure noire solide de 2 pixels et des coins arrondis de 5 pixels.

Voilà pour le moment. Je rajouterai probablement d’autres points lorsqu’ils me viendront à l’esprit. N’hésitez pas si vous avez des questions, à propos de ce qu’il y a là ou d’autres curiosités.

[EDIT du 12 janv. 2016 : ajout du point 0.]
[EDIT du 13 janv. 2016 : point 5 complété.]


Section d'aide non-officielle en français
#2

Toujours impossible de faire quelque chose avec nos pages de profil ?


#3

Toujours impossible, malheureusement. :sob:


#4

Bonjouuur,
Est-ce possible de mettre le texte en couleur sur les pages de profil parce que à chaque fois que j’en mets elles s’en vont directement ?


#5

Coucou, ce n’est malheureusement plus possible. Il y a eu des mises à jour au niveau du codage durant ton absence et depuis, impossible de faire quoi que ce soit sur les profils. On ne peut plus mettre de couleur, de fond, d’images redimensionnées etc etc. ><


#6

Aaaaaaaaaanh c’est nul :frowning:


#7

Merci pour ce récapitulatif ! Je l’ai mis en marque-page :smile:


#8

Coucou Angèle,
Un grand merci pour ce sujet qui va nous être très utile. Cette fois-ci, je le mets dans mes favoris.
Bon dimanche.


#9

Coucou !
J’ai beau essayé et réessayé, je n’y arrive pas :confused:


#10

Hello ! Qu’as-tu essayé exactement ? Quel point ? Que je voie si je peux trouver le problème.


#11

Les codes pour faire la mise en forme de la page de couverture, comme la couleur ou les bordures.
J’ai copié-collé sur Viki à côté du texte, en bas et haut mais ça ne fonctionne pas.


#12

Quand tu es sur la page de couverture, il faut cliquer sur le mot DIV (qui a aussi un S couché dessous) (il est à côté des deux espèces de grosses virgules) puis quand tu es là-dedans, tu cliques sur “advanced” et dans “Style” tu peux par exemple essayer de mettre
border:3px solid#6680CC; border-radius: 15px; background-color:#809FFF
tu peux ne rien mettre dans les autres lignes et tu auras un fond bleu clair avec une bordure bleu foncé


#13

Ah merci ! Ça a fonctionné :smiley:
Il faut juste que je m’y habitue un petit peu et ça ira comme sur des roulettes.
J’hésiterai pas à revenir ici si j’ai d’autres questions.

Bonne soirée à tous ! :relaxed:


#14

Ah, tant mieux, j’avais peur de ne pas avoir été claire dans la description des endroits où cliquer.:smile:


#15

Parfait si ça marche ! (^___^)
@kobolt Tu vas rire mais je n’ai jamais utilisé l’option du bouton. Bonne idée ! Je vais aller voir ça puis rajouter des captures d’écran quand j’aurai du temps. Merci ! :smile:


#16

Bonjour !
Il y a de cela assez longtemps, j’avais codé ma page de présentation mais il semblerait que la mise en page etc… ait disparu. J’ai bien sûr essayé de la recréer mais il semblerait que l’enregistrement supprime les couleurs et transforme les tableaux en de simple ligne horizontales séparant chaque parties…

Est ce normal ? Un bug de viki ? Est ce que ça va être réparé ? :confused:

Je ne sais pas vraiment si je poste dans le bon sujet mais comme il traite du codage des profils et couverture. ^^

Merci d’avance.

Cordialement.


#17

Bonjour !

Depuis une mise à jour de Viki, il n’est plus possible du tout de coder les pages de profil. Aucune mise en page possible, qu’il s’agisse d’alignement, de couleur ou quoi que ce soit, sans parler de plus compliqué. >< D’après ce que j’ai compris, Viki aurait enlevé tout codage des profils à cause d’un problème de sécurité.
Quoi qu’il en soit, il semblerait qu’ils travaillent actuellement sur une remise en page des profils. Quant à savoir si le codage sera réactivé, ça reste à voir.

Bonne journée. (^__^)


#18

Tu as été très claire ne t’inquiète pas ! :slight_smile:


#19

Ouf, j’ai parfois l’esprit un peu embrouillé !


#20

Yataaaaa ! Bonne nouvelle, les codes marchent de nouveau pour les pages de profils, whohoooo ! (o) C’est l’heure de faire joujou. :smiley: