[Zooper] expertise 05 : Texte enrichi par BBCode (2)

Par Buick59 - Le 14/03/14 - Affichages : 3672
Ce tutoriel est la suite évidente de la longue série Zooper Widget: Personnalisez avec Zooper Widget! No limite!, nous allons donc continuer à maîtriser cet outil très complet, qu'est Zooper Widget.

Nous avions découvert précédemment dans ce tutoriel d'Edem84: [Zooper] expertise 02 : Texte enrichi par BBCode, comment manipuler le BBCode dans un texte enrichi. Je vous propose d'aller plus loin, en tentant d'isoler la première lettre d'une fonction, pour la mettre en majuscule et en couleur.

Nous travaillerons ici, un widget très simple, qui intègre une date complète: "jour de la semaine, jour du mois, mois de l'année, année". (jeudi 13 mars 2014)

Voici le résultat que l'on obtiendra à la fin cette explication:
Image

Inutile de vous rappeler comment créer et redimensionner un widget, car vous avez lu les liens cités plus haut ;)

Nous allons donc commencer par créer la date, en créant un texte enrichi et en allant dans "édition manuelle du texte"
1- Une fois dans ce dernier, cliquons simplement sur les différentes fonctions qui nous intéressent, à savoir:
Code: Select All Code
#DEEEE# #Dd# #DMMMM# #Dy#

Nous obtenons alors ceci:
Image

Maintenant, on travaille sur l'objet qui nous intéresse, à savoir: le jour de la semaine ou #DEEEE#
2- On entoure donc #DEEEE# avec la balise [tc][/tc], qui aura pour résultat, de mettre une majuscule à notre jour:
Code: Select All Code
[tc]#DEEEE#[/tc]

Image

La majuscule créée, nous pouvons maintenant nous occuper de la couleur
3- On entoure alors notre [tc]#DEEEE#[/tc] avec la balise couleur ou [c=#123123][/c] en remplaçant les "123123" par une valeur hexadécimale, dans notre cas, ça sera #ff0000 pour du rouge, mais libre à vous d'en choisir une autre ;)
Code: Select All Code
[c=#ff0000[tc]#DEEEE#[/tc][/c]

Image

Vous remarquerez que c'est toute notre fonction qui a prit la couleur rouge, c'est balo!! :D Car nous, nous voulons uniquement la 1ère lettre en rouge, et toute l'astuce commence ici.
Il va nous falloir une balise qui permettrait d'afficher une partie bien définie de la fonction #DEEEE#. Cette balise existe bien et s'appelle par défaut [tr=5,10][/tr]. Elle se traduit en français par: à partir de la 5e lettre de la fonction, afficher uniquement les 10 lettres suivantes. Par exemple le mot "constitutionnalisera" deviendrait "itutionnal"
Vous pouvez modifier les valeurs, comme vous le souhaitez. Et c'est ce que l'on va faire en lui demandant d'afficher à partir de la lettre 0, la lettre suivante. La lettre "0" n'existant pas, il affichera uniquement la première lettre de la fonction. Ce qui donne en BBCode [tr=0,1][/tr]

4- On entoure alors ce que l'on a fait auparavant avec [tr=0,1][/tr]
Code: Select All Code
[tr=0,1][c=#ff0000[tc]#DEEEE#[/tc][/c][/tr]

Image

Maintenant, il faut afficher "eudi". Mais comment??? :o
C'est simple, il va falloir ré-utiliser la balise [tr=5,10][/tr], en lui demandant "à partir de la première lettre, afficher le reste des lettres de la fonction". Elle se traduit "bizarrement" par [tr=1,1][/tr] ou en français "afficher, à partir de la 1ere lettre, tout le reste du mot". Par exemple reprenons le mot "constitutionnalisera": si on lui applique la balise [tr=1,1][/tr], il deviendra "onstitutionnalisera", il n'y a donc que la 1ère lettre qui disparait.
Nous devons par contre, utiliser la fonction #DEEEE# (car on ne peut pas utiliser 2 fois la même balise sur une fonction)

5- Pour résumer, nous allons taper, à la suite et sans espace, de ce qu'on a fait :
Code: Select All Code
[tr=1,1]#DEEEE#[/tr]

Image

Il ne vous reste donc plus qu'à refaire les étapes 2 à 5, pour faire la même chose sur le mois, afin d'obtenir ce que l'on voulait en début de tuto (je ne vais pas tout faire non plus! :lol: ). Mais vous pouvez utiliser cette méthode avec un lieu, une année ect,... tout comme vous pouvez rajouter d'autres balises afin d'aller plus loin dans l'optimisation ;)

Voilà, j'espère que mon (tout premier) tuto sur le forum, aura été assez clair pour vous (dans le cas contraire, faites-le moi savoir ;)) et j'espère aussi voir le résultat dans vos prochains widgets en postant dans [skins Zooper] Vos contributions ;)

Merci à franck_29, Edem84, jhowlett468 de m'avoir demandé de faire ce tuto, c'était un plaisir de servir la communauté :D
16 réponse(s) -