Aide - Recherche - Membres - Calendrier
Version complète: [TUTO Niv.2] Editer les couleurs du menu système
Wii-Addict > Customisation & Développement Amateur > Tutoriels
Pages: 1, 2
RiderFx3
Editer les couleurs du menu système

[TUTO Niv.2] car nous allons modifier le code des fichier brlyt avec Benzin.
Ce tuto peut paraître long mais il ne présente rien de compliqué, il est simplement très détaillé.


Avant de commencer ce tuto, vous devez maîtriser les suivants:
- [TUTO Niv.1] Appliquer un Thème .MyM sur votre Wii
- [TUTO Niv.1] Utiliser Benzin (Editer les Brlyt et Brlan)
- [TUTO Niv.1] Fabriquer son propre écran d'accueil Wii

Vous aurez besoin de:
-NotePad++
-ThemeMii

Sommaire:
- Principe
- Changer la couleur de la date
- Changer la couleur de l'heure
- Changer la couleur de la bordure du bas de la page des chaînes
- Changer la couleur des bordures des chaînes
- Changer la couleur du fond derrière les chaînes


PRINCIPE DE FONCTIONNEMENT:

Pour éditer les couleurs du system menu, nous devons changer les valeurs RGBA du brlyt correspondant.

RGBA? C'est quoi ça ?

RGBA est un sigle anglais représentant, en informatique, le codage des couleurs avec gestion de l'opacité.

Chaque couleur qui existe a donc son propre code couleur RGBA.
Le code RGBA sépare le canal rouge, vert, et bleu d'un couleur; l'intensité de chaque canal varie de 0 à 255.
L'opacité est gérée par le canal Aplha toujours sur une échelle de 0 à 255,
Le 0 étant transparent, et le 255 totalement opaque.


R= Rouge
G= Vert (Green)
B= Bleu
A= Aplha (transparence)


Quelques exemples:

R= 255; G= 0; B= 0; > Rouge (car R=255 mais pas de bleu ni de vert)
R= 0; G= 0; B= 255; > Bleu (car B=255 mais pas de rouge ni de vert)
R= 0; G= 255; B=0; > Vert (car G=255 mais pas de rouge ni de bleu)


Comment conaître la valeur RGB d'une couleur qui vous plait ?

C'est très simple smile.gif

Ouvrez le logiciel Paint fournit avec windows. et cliquez sur modifiez les couleurs.

vous pouvez choisir la couleur qui vous plaît et le logiciel vous donnera sa valeur RGB.




Bien maintenant que vous avez compris le principe RGBA,
Nous allons voir comment éditer les brlyt pour changer les couleurs.

On va commencer par quelque chose de simple: La DATE

CHANGER LA COULEUR DE LA DATE:

Explorez le dossier "ExtractedBaseApp" situé dans votre dossier ThemeMii.
La date se trouve dans "Root:/layout/common/board_ash_out/arc/blyt/my_IplTop_c.brlyt"

Copiez my_IplTop_c.brlyt dans votre dossier Benzin,
et convertissez le en xmlyt (vous êtes deja censé savoir le faire grâce à ce tuto)

et ouvrez le avec NotePad++
(Astuce: Associer tous vos fichier xmlan et xmlyt avec Notepad++ en faisant clic-droit > propriété > ouvrir avec..
Ainsi vous pourrez double-cliquer dessus et ils s'ouvriront directement avec NotePad++)


C'est ce brlyt qui gère le fond du bureau Wii.


Pour modifier la couleur de la date, il va falloir modifier les valeurs suivantes:
- T_Day_a
- T_Day_b
- T_Day_c

Pour les trouver, on va utiliser la fonction recherche de NotePad ++

cliquez donc sur: ou appuyez sur CTRL+H

Cette fenêtre va s'ouvrir:



dans le champ "Recherche:" entrez et cliquez sur suivant.

Le logiciel va rechercher cette partie du code pour vous et vous amener à la ligne 144.

C'est cette partie du code que nous allons modifier:


CODE

????
????????
????????
????????
????????
????????
????????
????????
????


Avant de modifier quoi que ce soit,
tâchons d'en savoir un peu plus sur ce bout de code:

Fonctionnement des masques:

Le system menu utilise des masques, c'est à dire qu'il utilise des images en noir et blanc,
et que c'est le brlyt qui indique quelle couleur appliquer à la partie noire de l'image, et quelle couleur appliquer à la partie blanche.

Pour exemple, voici le TPL du chiffre 8 de l'heure:



Il n'est pas du tout affiché comme ça sur votre wii car le brlyt indique que le noir doit être transparent, et que le blanc doit être gris.

Ce sont les balises et qui gèrent ça.


La balise détermine la couleur que la wii doit appliquer à la place du noir.
La balise détermine la couleur que la wii doit appliquer à la place du blanc.

Cette partie du code:
r="130" g="130" b="130" a="0"
sert, vous l'aurez compris, à entrer la valeur RGB de la couleur que vous souhaitez utiliser, comme expliqué en haut du tuto.

Si vous regardez à l'aide de paint à quoi correspond la valeur R=130 G=130 B=130
Vous retrouverez la couleur de la date:



Seulement, dans le blyt, la valeur Alpha peut tout changer !

Regardez:
a="0" />

Malgré le fait que la valeur RGB soit grise, la valeur alpha est égale à 0 donc transparent. La valeur RGB sera donc ignorée.
Comme c'est la balise , ça veut dire que tout ce qui est noir sur le masque, sera transparent.

Nous ne modifierons donc pas cette balise pour changer la couleur de la date.

Passons à la balise suivante:


Toujours le même gris mais cette fois le canal alpha = 255 donc l'opacité sera maximale !

Pour le tuto, je vais tenter d'afficher la date en noir au lieu du gris.
La valeur RGB du noir est R=0; G=0; B=0

Je vais donc écrire:
r="0" g="0" b="0" a="255" />

Mon code final sera donc:

CODE

????
????????
????????
????????
????????
????????
????????
????????
????


n'oublions pas que l'on doit également modifier ces 3 parties du code:

- T_Day_a > correspond à la couleur lorsqu'on appui sur (-) pour faire défiler la date
- T_Day_b > correspond à la couleur affichée continuellement
- T_Day_c > correspond à la couleur lorsqu'on appui sur (+) pour faire défiler la date

Voici une vidéo pour que vous compreniez mieux:



Il nous reste donc les parties et

Recherchez donc ces parties du code avec NotePad++, et éditez les couleurs comme bon vous semble wink.gif

Voila ce que ça donne lorsqu'on remplace toutes les couleurs par du noir:



Voila vous savez modifier la couleur de la date !

Voyons voir ce que l'on peut modifier d'autre:


CHANGER LES COULEUR DE L'HEURE

Le brlyt a éditer est le suivant "my_Clock_a.brlyt" situé dans "Root/layout/common/chanSel_ash_out/arc/blyt/"

C'est toujours le même principe, il va falloir éditer les valeurs RGB dans les parties suivantes:


Si vous ne modifiez pas ces 5 premières parties,
les changements que vous allez effectuer plus bas ne marcheront pas.







pour le chifffre 0
pour le chifffre 1
pour le chifffre 2
pour le chifffre 3
pour le chifffre 4
pour le chifffre 5
pour le chifffre 6
pour le chifffre 7
pour le chifffre 8
pour le chifffre 9
utilisé pour ne rien afficher (ex: les ":" qui disparaissent)
pour l'inscription AM
pour l'inscription PM
?
Inscription "Menu Wii" (Cliquez ici pour voir une photo)
?

Pour le menu SD, modifiez cet élément pour changer la couleur du texte "Menu carte SD"
ouvrez "mn-SDcardMenu_b.brlyt" dans "layout/common/Sdbutton_ash_out/arc/blyt/":



Voila ce que ça donne une fois la couleur de l'heure changée:
J'ai utilisé la couleur R=80; G=200; B=220; A=255






MODIFIER LA COULEUR DE LA BARRE DE LA PAGE DES CHAINES


Ouvrez "my_IplTop_a.brlyt" contenu dans "Root/layout/common/chanSel_ash_out/arc/blyt/"


Modifiez les entrées suivantes: (uniquement le backcolor)






Vous pouvez aussi modifier la couleur de l'ombre: (uniquement le backcolor)







Vous pouvez jouer sur la valeur alpha pour accentuer l'ombre selon la couleur de votre fond.

Voila ce que ça donne en remplaçant les valeurs RGB par du noir avec l'ombre en bleu:






CHANGER LA COULEUR DE LA BORDURE DES CHAINES

Ouvrez "my_IplTop_a.brlyt" contenu dans "Root/layout/common/chanSel_ash_out/arc/blyt/"


Modifiez les entrée suivantes pour la bordure des chaînes: (uniquement le backcolor)






Pour la couleur des bordures de chaînes lorsque le curseur passe dessus:

Ouvrez "my_IplTop_d.brlyt" contenu dans "Root/layout/common/chanSel_ash_out/arc/blyt/"

Modifiez la valeur suivante:



Modifiez backcolor et forecolor, et si cela ne s'affiche pas comme vous le souhaitez,
jouez sur le canal alpha de backcolor.

Voila ce que ça donne avec les bordures rouges:




CHANGER LA COULEUR DU FOND DERRIERE LES CHAINES

Ouvrez "my_IplTop_a.brlyt" contenu dans "Root/layout/common/chanSel_ash_out/arc/blyt/"


Modifiez les entrées suivantes: (forecolor et backcolor)

















Modifier uniquement backcolor crééra un dégradé noir sur la couleur choisie, et laissera les stries.
Modifier le backcolor et le forecolor de la même couleur crééra un fond uni.
Modifier le backcolor et le forecolor de couleurs différentes crééra un dégradé de couleur.


. Le faite de regler le backcolor et le forecolor
. de la même couleur que les éléments plus haut
. m'a supprimé les 4 chaînes vides
. sur le bord gauche de la première page.
. On peut aussi jouer sur la transparence.

Vous pouvez aussi garder le dégradé, mais supprimer les stries,
pour cela, il faut remplacer le TPL:

my_TVSheet_b.tpl (608x8)


par un TPL custom auquel on aurait enlevé les stries:


Voila ce que ça donne avec le fond dégradé + strié:


Voila ce que ça donne avec un fond uni:


Voila ce que ça donne avec un fond dégradé sans stries:



Nous avons fait le tour des modifications de base au niveau des couleurs du system menu !

J'espère avoir été le plus clair possible, si vous avez des questions le forum est fait pour ça.

Postez vos créations dans la partie Thème !

A vous de jouer !

wink.gif

Tuto créé et rédigé par RiderFx3 - Exclusivité www.Wii-Addict.fr - Toute reproduction même partielle est strictement interdite sans l'accord de son auteur.

© RiderFx3 - 2010 - www.Wii-Addict.fr
carbonyle
Whooo ça c'est sympa comme tuto. C'est vraiment du tunning de systemmenu laugh.gif
Nutnut
Je surkiffe tongue.gif
WiiD
Bravo superbe tuto wink.gif

Mais n'est-ce pas plutôt le TPL du chiffre 8 ??
RiderFx3
Exact je corrige desuite wink.gif
Antubis
Excellent tuto.
Ne reste plus qu'à faire le thème Wii-Addict pour illustrer les screens des tutos (et accessoirement pour bien marquer nos préférences niveau site consacré à la Wii wink.gif).
RiderFx3
Theme en cours ! va voir l'apperçu dans la section theme !
shunite
Excellent TUTO, Félicitation moi aussi je kiffe tongue.gif
RiderFx3
Merci les gars !

A vous de jouer maintenant !

tongue.gif
Claros
Une petite question, lorsqu'on a terminé la modification de tous le fichiers, comment on fait pour crée le thème ? smile.gif
J'ai essayé de faire avec ThemeMii un thème en y ajoutant des "container" et le tpl que j'ai fais, mais ça a brick ma wii xD Est-ce la bonne méthode ?


EDIT: sinon j'ai essayé de faire un my_TVSheet_b.tpl de 608*456, et j'ai remplacé le GX_REPEAT par GX_CLAMP pour tester, donc à mon avis un de mes problèmes doit venir de là smile.gif
RiderFx3
Je rentre chez moi et je te regarde ça...

Il te faut suivre le tuto Niv1 pour remplace le healthscreen

une fois que tu sais faire ça, c'est pareil pour tout le theme.

Tu n'a pas besoin d'ajouter de container avec thememii,

si tu change le brlyt, clique sur Static Data pour le remplacer...

Voila commence par les modifications simples et montre petit a petit dans les difficultés
Claros
Les modifications simples je les ai déjà toute faite smile.gif
?‡a marche à la perfection, juste que je ne savais pas si c'était container ou static data qu'il fallait choisir. J'ai essayé static data avant que tu postes et c'est bon wink.gif
Concernant le tuto de niv 1, c'est juste pour les images, du coup ça donne pas d'infos pour les brlyt.
RiderFx3
exact apres c'est le meme principe il suffit de choisir data ou image !

n'oubli pas de nous montrer tes themes !!! smile.gif
Claros
CITATION(RiderFx3 @ Mar 24 2010, 19:56 ) *
exact apres c'est le meme principe il suffit de choisir data ou image !

Oui mais comme on le dit souvent : "Nos créations ne sont pas à l'abri des bêta-testeurs de base". Du coup il y aura toujours des boulets comme moi qui utiliseront static image pour un .brlyt biggrin.gif

CITATION(RiderFx3 @ Mar 24 2010, 19:56 ) *
n'oubli pas de nous montrer tes themes !!! smile.gif

Pour l'instant j'essaye toute les fonctions et si j'arrive à quelque chose de concret, je partagerais volontiers wink.gif
RiderFx3
C'est comme ça que j'ai commencé !

Pour tout te dire, je rédigeais les tutos en même temps que je faisais ce que j'expliquais dans le tuto pour la première fois...

donc en gros, les vidéos que tu vois dans les tutos sont mes premiers tests !!!

Donc tu demarre pas longtemps après moi ! sauf que j'ai galeré pour tout comprendre lol
WiiD
CITATION(Claros @ Mar 24 2010, 19:34 ) *
Les modifications simples je les ai déjà toute faite smile.gif
?‡a marche à la perfection, juste que je ne savais pas si c'était container ou static data qu'il fallait choisir. J'ai essayé static data avant que tu postes et c'est bon wink.gif
Concernant le tuto de niv 1, c'est juste pour les images, du coup ça donne pas d'infos pour les brlyt.

Fallait lire mon tuto pour l'apprendre smile.gif
Claros
Ah je n'ai pas encore lu ton tuto, il m'avait paru assez détaillé du coup je m'y suis pas intéressé pour le moment ^^
WiiD
Le but du détail est précisément d'apprendre, et non d'exécuter simplement wink.gif
RiderFx3
Oui jsui d'accord avec WiiD d'ailleur c'est après avoir vu le preview de son tuto sur les health 16:9 que je me suis décidé à detailler mes tutos (comme celui pour les couleurs)
caratsu
Salut

comment réinjecte les fichier modifier dans un csm ??

EDIT: c'est bon j'ai réussi mais j'ai toujours un problème ohmy.gif c'est que au niveau de l'heure le fond est rester blanc et pareil pour la gauche de l'ecrant 'a coter de la chaine disque)
RiderFx3
Jcroi que c'est ça pour les chaines à gauche de la chaine disque:
CITATION
. Le faite de regler le backcolor et le forecolor
. de la même couleur que les éléments plus haut
. m'a supprimé les 4 chaînes vides
. sur le bord gauche de la première page.
. On peut aussi jouer sur la transparence.


Pour derriere l'heure t'a du oublié de changer les valeurs d'une ligne wink.gif
caratsu
pour l'heure je jetterai un coup d'?œil et pour le reste ou se trouve les ligne a modifier car dans la fonction recherche il ne trouve pas ceux qui tu ma citer
RiderFx3
Je les ai trouvé donc c'est qu'il y sont wink.gif
caratsu
bon ba je vais chercher manuellement ^^
caratsu
c'est bon j'ai réussi mais maintenent c'est a gauche que sa change pas les couleur et en haut des chaine la couleur est plus claire que le dégrader qui devrai être normalement
RiderFx3
si tu poste des photos ça sera plus simple pour qu'on t'aide ^^

Si les couleurs ne sont pas les memes c'est que tu t'es planté sur unes des lignes en rentrant les couleurs RGB!
caratsu
video ici

pour se qui est de la date c'est loi qui est aller trop vite!
RiderFx3
t'a du oublier de changer la valeur d'un des basemask
caratsu
pour le problème de couleur différente c'est régler j'ai juste supprimer les stries sinon pour le blanc a droite j'ai bien revérifier tous les basemask (du 0 au 4) et il son tous de mémé couleur don je pence que sa ne viens pas de la
RiderFx3
t'as du editer le backcolor au lieu du forecolor ou inversement... ou sinon il faut editer les deux.
caratsu
c'est avec les deux pour faire un dégrader et j'ai fait les deux
RiderFx3
Mmmm...

tu ne peux pas faire un dégradé sur les basemask.

Normalement tu ne devrait pas avoir ce soucis si tout est reglé à la meme couleur.

Copie ici le code des basemask de 0 à 4.
caratsu
je verai sa se week end car la brevet blanc ^^
RiderFx3
OK révise bien petit !
caratsu
mdr ne compte pas la dessus ^^ j'ai autre chose a faire c'est juste que ma mère ne veut pas que je reste tros sur le pc a cose du brevet mais je révise pas et pendent lexam je dort biggrin.gif

EDIT:Bonjour
désoler de ne pas avoir demander plus tôt suite a ton mp mais j'ai ester très occuper ses dernier temps alors voila je pose ma question.

n'étant pas cher moi je n'est pas sous les yeux la liste des fichier que javai siter dans le mp alors je vais faire cour pour le moment
voila je voulais savoir comment se nome le fichier qui correspond au couleur de la barre (menu wii ou d'amarrer) quand on choisi une chaine et avoir aussi la liste des ligne a modifier pour changer la couleur.
je te remercie encore de ton ais*de et je ne tenverai plus de mp.
merci

cordialement kikulol de wii-info
RiderFx3
Tu pourrais faire un minimum d'efforts niveau orthographe quand meme....

Sa fait un moment que je n'ai pas mis le nez dans un theme et je n'ai pas le temps de regarder desuite.... sad.gif

Essaye d'explorer un thème que j'ai déjà fais.
Griffith
Bonsoir ou Bonjour, bon voilà mon problème,
Le tuto est super mais je n'arrive pas à changer la couleur de l'heure et du fond, malgrès tout mes essais, rien à faire, rien ne change ohmy.gif :
CITATION
Si vous ne modifiez pas ces 5 premières parties,
les changements que vous allez effectuer plus bas ne marcheront pas.





Je suis d'accord qu'il faut changer, j'ai donc mis les même valeur que pour la couleur des numéros mais rien ne change.
angry.gif
CITATION
Modifier uniquement backcolor crééra un dégradé noir sur la couleur choisie, et laissera les stries.
Modifier le backcolor et le forecolor de la même couleur crééra un fond uni.
Modifier le backcolor et le forecolor de couleurs différentes crééra un dégradé de couleur.


. Le faite de regler le backcolor et le forecolor
. de la même couleur que les éléments plus haut
. m'a supprimé les 4 chaînes vides
. sur le bord gauche de la première page.
. On peut aussi jouer sur la transparence.


Je voudrais savoir avant tout si lorsqu'on modifie le backcolor uniquement, c'est d'abord noir puis blanc ou inversement

et je n'ai pas compris à quoi sert les BaseMask0
Tu dis que le fais de les régler de la même couleur que le reste ça à supprimer 4 chaînes vides mais cela ne dit pas à quoi cela sert-il. dry.gif

Je m'excuse si ces questions sont peut-être un peu ennuyeuse mais j'aimerais mieux comprendre mes modifications.
Merci de vos réponses si elles ont lieu

PS: ma Wii est en 3.2E
RiderFx3
CITATION
Tu dis que le fais de les régler de la même couleur que le reste ça à supprimer 4 chaînes vides mais cela ne dit pas à quoi cela sert-il.


Tu t'es répondu tout seul !!!

Il y a quatres chaines vides a gauche de la chaine disque, si tu change la couleur du fond, et pas ce basemask, elles vont rester blanches, du coup si tu les met de la meme couleur que ton fond elles disparaitrons !


Pour tes autres questions, es tu sur de bien avoir retransféré ton fichier ds ton theme!
Griffith
Pour ms autres question, je me demande si je pourrait récupérer les fichier brlyt de theme fonctionnel pour comparer mes modifs et ceux du theme par rapport au theme original
RiderFx3
Oui bien sur que tu peux c'est en partie comme ça que j'ai appris.
Griffith
Probleme résolue, ma wii est trop belle ^^ ( pour moi )
reste plus que le mod physique ^^
RiderFx3
Tu peux poster un screen de ton travail ça serai cool wink.gif
Griffith
Oui je le ferais lorsque tout sera fini
Mais j'ai une question comment peut-on modifier la couleur des cercles autour du bouton Wii et des lettres, même question pour le lancement d'une chaîne pour le bouton démarrer et Menu Wii
RiderFx3
La couleur des cercles autour du bouton wii se trouve sur l'image elle meme il faut éditer directement le TPL !
Griffith
J'avais trouvé les images, mais le modifier ne change rien, je vais approfondir mes recherches
RiderFx3
Oui je me souvien maintenant ! il te faut modifier dans le brlyt correspondant,

Si tu veux la meme image est supersposée 3 fois, la premiere sans masque,
et les deux autres sont retournées à 180° avec un masque bleu.. il te faut regler ce masqque à 0 avec le cannal alpha !
Griffith
CITATION(RiderFx3 @ Jun 15 2010, 10:53 ) *
Oui je me souvien maintenant ! il te faut modifier dans le brlyt correspondant,

Si tu veux la meme image est supersposée 3 fois, la premiere sans masque,
et les deux autres sont retournées à 180° avec un masque bleu.. il te faut regler ce masqque à 0 avec le cannal alpha !

Ok merci, ça va m'avancer beaucoup, as tu vu le début de mon theme
RiderFx3
Oui je t'ai meme répondu
caratsu
Salut voila je suis blocker dans mon theme et je voudrai savoir:

1. dans quel ficher se trouver le my_BackPic_a (image de fond derrière le menu wii la ou on lie nos message)
2.comment je doit mis prendre pour changer le curseur (je voudrai mettre celui du thème gx de grhum)
3.quel est le nom et l'emplacement du .brlyt permutant de changer la couleur de la barre (la ou il y a écrit démarrer ou menu wii quand on sélectionne une chaine)et si possible quel sont les ligne a modifier.

merci
RiderFx3
My backpic_a se trouve dans board.ash

Pour la barre ou il y a écrit demarrer ou menu wii, il faut éditer un brlyt se trouvant dans Chanttl.ash de mémoire. Ca fait tres longtemps que j'ai pas mis le nez dedans! il te faut t'armer de patience, et fouiller !
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.
Invision Power Board ? 2001-2012 Invision Power Services, Inc.
CommunitySEO 1.2.3 ? 2012? IPB SEO Module