[TUTORIAL] Edit system menu colors

Post by **RiderFx3** » Tue 23 Mar 2010 07:28

Hi everyone!

Editing the colors of the system menu
[TUTORIAL Level 2] because we're going to edit the code of the brlyt files with Benzin.
This tutorial may seem long but there's nothing complicated about it, it's just very detailed. Before starting this tutorial, you must be comfortable with the following:
- [TUTORIAL Level 1] Applying a .MyM Theme on your Wii
- [TUTORIAL Level 1] Using Benzin (Editing Brlyt and Brlan files)
- [TUTORIAL Level 1] Making your own Wii home screen

You will need:
-NotePad++
-ThemeMii

Contents:
- Principle
- Changing the color of the date
- Changing the color of the time
- Changing the color of the bottom border of the channel page
- Changing the color of the channel borders
- Changing the color of the background behind the channels
HOW IT WORKS:

To edit the colors of the system menu, we need to change the RGBA values of the corresponding brlyt.

RGBA? What's that?

RGBA is an English acronym representing, in computing, color coding with opacity management.

So every existing color has its own RGBA color code.
The RGBA code separates the red, green, and blue channels of a color; the intensity of each channel varies from 0 to 255.
Opacity is managed by the Alpha channel, also on a scale from 0 to 255,
0 being transparent, and 255 fully opaque. R= Red
G= Green
B= Blue
A= Alpha (transparency)

A few examples:

R= 255; G= 0; B= 0; > Red (because R=255 but no blue or green)
R= 0; G= 0; B= 255; > Blue (because B=255 but no red or green)
R= 0; G= 255; B=0; > Green (because G=255 but no red or blue)

How do you find out the RGB value of a color you like?

It's very simple

Open the Paint software that comes with Windows, and click on edit colors.

you can pick the color you like and the software will give you its RGB value.

Image unavailable (removed by its host)

Alright, now that you understand the RGBA principle,
we're going to see how to edit brlyt files to change colors.

We'll start with something simple: the DATE

CHANGING THE COLOR OF THE DATE:

Browse to the folder "ExtractedBaseApp" located in your ThemeMii folder.
The date is found in "Root:/layout/common/board_ash_out/arc/blyt/my_IplTop_c.brlyt"

Copy my_IplTop_c.brlyt into your Benzin folder,
and convert it to xmlyt (you're already supposed to know how to do this thanks to this tutorial)

and open it with NotePad++
(Tip: Associate all your xmlan and xmlyt files with Notepad++ by right-clicking > properties > open with..
That way you can double-click on them and they'll open directly with NotePad++)

This brlyt is what manages the Wii desktop background. To change the color of the date, you'll need to edit the following values:
- T_Day_a
- T_Day_b
- T_Day_c
To find them, we'll use the search function of NotePad ++

so click on: Image unavailable (removed by its host) or press CTRL+H

This window will open:

Image unavailable (removed by its host)

in the "Search:" field enter <entries name="T_Day_a"> and click next.

The software will search for this part of the code for you and take you to line 144.

This is the part of the code we're going to edit:

Code: Select all

<entries name="T_Day_a">
   <colors>
      <forecolor r="130" g="130" b="130" a="0" />
      <backcolor r="130" g="130" b="130" a="255" />
      <colorReg3 r="255" g="255" b="255" a="255" />
      <tev_k1 r="ff" g="ff" b="ff" a="ff" />
      <tev_k2 r="ff" g="ff" b="ff" a="ff" />
      <tev_k3 r="ff" g="ff" b="ff" a="ff" />
      <tev_k4 r="ff" g="ff" b="ff" a="ff" />
   </colors>

Before changing anything,
let's try to learn a bit more about this bit of code:

How masks work:

The system menu uses masks, meaning it uses black and white images,
and it's the brlyt that indicates which color to apply to the black part of the image, and which color to apply to the white part.

For example, here's the TPL of the digit 8 from the clock:

Image unavailable (removed by its host)

It's not displayed like this at all on your Wii, because the brlyt specifies that black should be transparent, and white should be gray.

These are the tags <forecolore> and <backcolor> that manage that. The tag <forecolor> determines the color the Wii should apply in place of black.
The tag <backcolor> determines the color the Wii should apply in place of white.
This part of the code:
r="130" g="130" b="130" a="0"
is used, as you'll have understood, to enter the RGB value of the color you want to use, as explained at the top of the tutorial.

If you check with Paint what the value R=130 G=130 B=130 corresponds to
you'll find the color of the date:

Image unavailable (removed by its host)

Except, in the blyt, the Alpha value can change everything!

Look:
<forecolor r="130" g="130" b="130" a="0" />

Despite the fact that the value RGB is gray, the alpha value equals 0 so it's transparent. The RGB value will therefore be ignored.
Since this is the <forecolor>tag, that means everything that is black on the mask will be transparent.

So we won't modify this tag to change the color of the date.

Let's move on to the next tag:
<backcolor r="130" g="130" b="130" a="255" />

Still the same gray but this time the alpha channel = 255 so opacity will be maximum!

For this tutorial, I'm going to try to display the date in black instead of gray.
The RGB value of black is R=0; G=0; B=0

So I'm going to write:
<backcolor r="0" g="0" b="0" a="255" />

So my final code will be:

Code: Select all

<entries name="T_Day_a">
   <colors>
      <forecolor r="130" g="130" b="130" a="0" />
      <backcolor r="0" g="0" b="0" a="255" />
      <colorReg3 r="255" g="255" b="255" a="255" />
      <tev_k1 r="ff" g="ff" b="ff" a="ff" />
      <tev_k2 r="ff" g="ff" b="ff" a="ff" />
      <tev_k3 r="ff" g="ff" b="ff" a="ff" />
      <tev_k4 r="ff" g="ff" b="ff" a="ff" />
   </colors>

let's not forget that we also need to edit these 3 parts of the code:

- T_Day_a > corresponds to the color when pressing (-) to scroll through the date
- T_Day_b > corresponds to the color displayed continuously
- T_Day_c > corresponds to the color when pressing (+) to scroll through the date

Here's a video so you understand it better:

External content (video or audio) hidden: it sets its own cookies.

So we still have the parts <entries name="T_Day_b"> and <entries name="T_Day_c"> left

So search for these parts of the code with NotePad++, and edit the colors however you like

Here's what it looks like when you replace all colors with black:

External content (video or audio) hidden: it sets its own cookies.

There you go, you now know how to change the color of the date!

Let's see what else we can change: CHANGING THE COLOR OF THE TIME

The brlyt to edit is the following "my_Clock_a.brlyt" located in "Root/layout/common/chanSel_ash_out/arc/blyt/"

It's still the same principle, you'll need to edit the RGB values in the following parts: If you don't modify these first 5 parts,
the changes you'll make further down won't work.
<entries name="Clock3">
<entries name="Clock2">
<entries name="Clock0">
<entries name="Clock1">
<entries name="ClockTen">

<entries name="Num0"> for digit 0
<entries name="Num1"> for digit 1
<entries name="Num2"> for digit 2
<entries name="Num3"> for digit 3
<entries name="Num4"> for digit 4
<entries name="Num5"> for digit 5
<entries name="Num6"> for digit 6
<entries name="Num7"> for digit 7
<entries name="Num8"> for digit 8
<entries name="Num9"> for digit 9
<entries name="NumNull"> used to display nothing (e.g. the ":" that disappear)
<entries name="AM"> for the AM label
<entries name="PM"> for the PM label
<entries name="AM_PM">?
<entries name="T_WiiMenu"> "Wii Menu" label (Click here to see a photo)
<entries name="AM_PM_R">?
Here's what it looks like once the color of the time has been changed:
I used the color R=80; G=200; B=220; A=255

External content (video or audio) hidden: it sets its own cookies.
CHANGING THE COLOR OF THE BAR ON THE CHANNEL PAGE
Image unavailable (removed by its host)

Open "my_IplTop_a.brlyt" contained in "Root/layout/common/chanSel_ash_out/arc/blyt/" Edit the following entries: (backcolor only)
<entries name="Line0">
<entries name="Line1">
<entries name="Line2">
<entries name="Line3">
<entries name="Line4">

You can also change the color of the shadow: (backcolor only)

<entries name="Shade0">
<entries name="Shade1">
<entries name="Shade2">
<entries name="Shade3">
<entries name="Shade4">
You can play with the alpha value to make the shadow stand out more depending on your background color.

Here's what it looks like when replacing the RGB values with black with the shadow in blue:
External content (video or audio) hidden: it sets its own cookies.

CHANGING THE COLOR OF THE CHANNEL BORDER

Open "my_IplTop_a.brlyt" contained in "Root/layout/common/chanSel_ash_out/arc/blyt/" Edit the following entries for the channel border: (backcolor only)
<entries name="Edge0">
<entries name="Edge1">
<entries name="Edge2">
<entries name="Edge3">
<entries name="Edge4">

For the color of channel borders when the cursor hovers over them:

Open "my_IplTop_d.brlyt" contained in "Root/layout/common/chanSel_ash_out/arc/blyt/"

Edit the following value:

<entries name="Cursur_a"> Edit backcolor and forecolor, and if it doesn't display the way you want,
play with the alpha channel of backcolor.

Here's what it looks like with red borders:
External content (video or audio) hidden: it sets its own cookies. CHANGING THE COLOR OF THE BACKGROUND BEHIND THE CHANNELS

Open "my_IplTop_a.brlyt" contained in "Root/layout/common/chanSel_ash_out/arc/blyt/" Edit the following entries: (forecolor and backcolor)

<entries name="Picture_00">
<entries name="Picture_01">
<entries name="Picture_02">
<entries name="Picture_03">
<entries name="Picture_04">
<entries name="Picture_05">
<entries name="Picture_06">
<entries name="Picture_07">
<entries name="Picture_08">
<entries name="Picture_09">
<entries name="board0">
<entries name="board1">
<entries name="board2">
<entries name="board3">
<entries name="board4">
Editing only backcolor will create a black gradient over the chosen color, and will leave the stripes.
Editing backcolor and forecolor with the same color will create a solid background.
Editing backcolor and forecolor with different colors will create a color gradient. <entries name="BaseMask0"> . Setting the backcolor and forecolor
<entries name="BaseMask1"> . to the same color as the elements above
<entries name="BaseMask2"> . removed the 4 empty channels for me
<entries name="BaseMask3"> . on the left edge of the first page.
<entries name="BaseMask4"> . You can also play with transparency.
You can also keep the gradient, but remove the stripes,
to do that, you need to replace the TPL:

my_TVSheet_b.tpl (608x8)
Image unavailable (removed by its host)

with a custom TPL from which the stripes have been removed:
Image unavailable (removed by its host)

Here's what it looks like with the gradient + striped background:
External content (video or audio) hidden: it sets its own cookies.

Here's what it looks like with a solid background:
External content (video or audio) hidden: it sets its own cookies.

Here's what it looks like with a gradient background without stripes:
External content (video or audio) hidden: it sets its own cookies.

We've covered the basic color edits for the system menu!

I hope I was as clear as possible, if you have any questions the forum is here for that.

Post your creations in the Theme section!

Your turn now!

Tutorial created and written by RiderFx3 - Exclusive to Wii-Addict.fr - Any reproduction, even partial, is strictly forbidden without the author's consent.

© RiderFx3 - 2010 - Wii-Addict.fr

Post by **Jiiwah** » Tue 23 Mar 2010 07:44

Sure your tuto is nice, but here I find it a bit much to just put a link to WA, putting your tuto+WA as source would go over better.

Here it's simply pure and blatant advertising

Post by **Oops** » Tue 23 Mar 2010 07:45

It's nice of you to let us enjoy your tutos which are well made too but you could take the trouble to do the presentation here rather than throwing out a link that isn't even tagged (when you click on it you get kicked out of the Tgames forum). Nothing stops you from putting the official source at the bottom of your presentation: wii-addict.fr

Thanks

edit:

jiiwah

Post by **iAnn** » Tue 23 Mar 2010 09:56

I admit the tuto, leaves something to be desired

Post by **RiderFx3** » Tue 23 Mar 2010 11:40

The problem is it's not the same tags so I'll have to redo everything.

For info I'm allowing myself to do this because Tgames himself spammed every wii forum to advertise his Exclusive Tgames tuto for making animated channels.

So well... I wouldn't have dared otherwise

Post by **Oops** » Tue 23 Mar 2010 11:49

ok the tags aren't all exactly the same but that's quickly fixed... and as for tgames' topic on animated channels that dates from before you were born

Post by **pocchami** » Tue 23 Mar 2010 11:54

RiderFx3 wrote:The problem is it's not the same tags so I'll have to redo everything.

If you want I can do it

Post by **shunite** » Tue 23 Mar 2010 13:11

Excellent TUTO bravo

Post by **pocchami** » Tue 23 Mar 2010 14:42

You need to register

Post by **RiderFx3** » Tue 23 Mar 2010 17:22

where on Wii-Addict?

are you required to register to see the tuto?

Post by **Antonito** » Tue 23 Mar 2010 17:25

Yeah, you have to register!

(I logged out of my account and tried to check.)

Post by **Oops** » Tue 23 Mar 2010 17:26

yes

that's doubly not cool

Post by **barman47** » Tue 23 Mar 2010 17:29

W addict spy

nnnooonnnnnnnnnnnnnnnnnnnn

Post by **RiderFx3** » Tue 23 Mar 2010 17:47

Ha well I didn't know that much about me.

Sorry guys it's not me who designed the forum.

I'm not a spy quite the opposite I share the tutos that I create (which by the way only exist on WA) so it's kind of the exact opposite of a spy...

The problem is I really don't have time to change all the tags so if someone's up for it, contact me by PM, I'll send them the txt, they edit it for me and I'll update it thanking them for the adaptation of course.

Post by **Oops** » Tue 23 Mar 2010 18:10

you shouldn't listen to barman47... he often talks nonsense.

Post by **pocchami** » Tue 23 Mar 2010 19:02

RiderFx3 wrote:Ha well I didn't know that much about me.

Sorry guys it's not me who designed the forum.

I'm not a spy quite the opposite I share the tutos that I create (which by the way only exist on WA) so it's kind of the exact opposite of a spy...

The problem is I really don't have time to change all the tags so if someone's up for it, contact me by PM, I'll send them the txt, they edit it for me and I'll update it thanking them for the adaptation of course.

If nobody does it I'm willing to do it but I'll only be available starting at 2pm tomorrow

Post by **AN54** » Tue 23 Mar 2010 19:03

Don't worry I'm ok with it, it's kind of my job ^^

Post by **RiderFx3** » Tue 23 Mar 2010 23:19

you shouldn't listen to barman47... he often talks nonsense.

Yeah I can see that LOL!

For those who want to edit the tuto they can PM me and we'll swap TXT files, or if it's a proofreader they can edit my post. (I'd like the post to not change author ^^)

Post by **corenting** » Wed 24 Mar 2010 07:41

RiderFx3 wrote:Ha well I didn't know that much about me.

Sorry guys it's not me who designed the forum.

I'm not a spy quite the opposite I share the tutos that I create (which by the way only exist on WA) so it's kind of the exact opposite of a spy...

The problem is I really don't have time to change all the tags so if someone's up for it, contact me by PM, I'll send them the txt, they edit it for me and I'll update it thanking them for the adaptation of course.

I'll do it!
Send me the txt and I'll edit all that on friday!

Post by **corenting** » Thu 25 Mar 2010 15:53

It's done it's fixed...
But I won't do it all the time

Post by **shunite** » Sun 28 Mar 2010 08:42

Cool thanks corenting

Post by **RiderFx3** » Mon 29 Mar 2010 20:44

THANK YOU VERY MUCH FOR THE ADAPTATION!!!

[TUTORIAL] Edit system menu colors

[TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Re: [TUTORIAL] Edit system menu colors

Everything for Wii · Wii U · Switch

Related topics

Everything for Wii · Wii U · Switch