In this part of the Tutorial we will explore two things, how to customize the appearance of the installer and how to use HM NIS Edit tools to do those changes. The Graphics files are included at compile time and they can be found in the NSIS directory... C:\Program Files\NSIS\Contrib\Graphics

There are four folders in there...
checks

 

  • Checks... This Folder contains the Bitmap images for the check boxes in the "Components screen". The section that users choose their options of your contents.





headers

  • Header... This Folder contains the Bitmap images for the small image above (set usually to the left side) pages other than the Welcome page like License, Components and Install Pages.

The Standard size of this bitmap is 150 pixels wide by 57 pixels high. You can change these standard ones to your own liking... a site logo...whatever.

Just have a look at them, you will see how the standard blue nsis.bmp starts off blue to the left... then fades to a white, white is the standard color of the installer body, this color can be changed.

 

Remember this trick when making your own, it's a way the images and the color settings of the installer body can blend different colors together.

icons

  • Icons... This Folder contains the .ico (Icon files) that the installer can use for the Setup file and the un-installer. There are a few to choose the standard one is... modern-install.ico (setup) and modern-uninstall.ico (un-installer).

You can make your own of course but you will need an icon editor program.

 

 

wiz

 

  • Wizard... This Folder contains the Bitmap images for the small image (set usually to the left side) on the Welcome pageThe standard image is "nullsoft.bmp". 

The Standard size of this bitmap is 164 pixels wide by 314 pixels high. You can change these standard ones to your own liking. It is the first page the user will see... so make an impact! If you do change the image have it describe the content.

You can use Paint to change these, Photoshop or any other Graphics programs are better... Paint.Net is a great Photoshop Freeware alternative. It works with most images and it can use layers and alpha channel support!

 

 

To insert a color using HM NIS Edit.

The Welcome page...


If you don't choose multiple Languages for your installer the Welcome Page is the first page you will see.

This page can be customized, there is a Bitmap on the left hand side that can be changed as I said before. The installer page color can also be changed.

You have to insert a "!define" in the "MUI Settings" section....

"!define MUI_BGCOLOR FFFFFF"

 

The "!define MUI_BGCOLOR" part sets up the custom change, "FFFFFF" is the color (White) ... don't want White?

welcome_big_inset_color

Do this then...

  • Click behind the last letter in the define options text ... "!define MUI_BGCOLOR"
  • Go to "Tools" "Insert color..."
  • A color box pops up, choose one.

Press OK ... the color is there... test it by "compile and run".

 

Note: Each time you "compile and run" you save the script file and overwrite the setup file automatically! No need to save the script again.

 

The License Page....

 

Let's say you had a readme you wanted to display on the License Page... before the user continues to any install. The License Page is the page that appears right after the Welcome page.

Now... in my Tutorial for the basic installer I said we didn't need one, well if you do, it's not too late we can add one now! As you have learned above the script the wizard makes can be customized. That is the whole point of this part of the tutorial... customizing and learning the NSIS scripting techniques.

 

To insert a License Page manually is easy.

There are three things to do...

    1. Make a readme. Just type your readme up, use notepad.
    2. We need to insert a "!insertmacro"...

"!insertmacro MUI_PAGE_LICENSE"

lic_file_name 3. Now we have to insert an address so the installer can find the readme when it compiles...

  • Click behind the last letter in the page options text, like ... "!insertmacro MUI_PAGE_LICENSE"
  • Go to "Tools" "Insert file name..."
  • A browse box pops up, navigate to your readme and select it.
  • Press OK ... the address is there... test it by "compile and run".

 

 

 

You can change the color of the readme! You have to insert a "!define" in the "MUI Settings" section....

"!define MUI_LICENSEPAGE_BGCOLOR FF8000"

The "!define MUI_LICENSEPAGE_BGCOLOR" part sets up the custom change, "FF8000" is the color (orange) ... don't want orange?

select_orange

Do this then...

 

 

  • Click behind the last letter in the define options text, like ...

"!define MUI_LICENSEPAGE_BGCOLOR"

  • Go to "Tools" "Insert color..."
  • A color box pops up choose one.
  • Press OK ... the color is there... test it by "compile and run"

select_orange2

So far we have covered only two pages of the installer but the important thing is you have learned how to use some of the tools in HM NIS Edit... they make life very easy :)

Now that you know how to insert a file name and change a color, the bitmap pictures for the Icons, header and the wizard images can be changed using the "Tools" "Insert file name..." method.

All of these can be found in the "MUI Settings" section. If they are not you can insert these manually and click after them to insert the address of your custom Icon or Image...

 

Note: You can copy and paste these in, note the ";" after the definfe and before the description? This tells the compiler to ignore this text after it in that line... also can be used to disable parts of the script if the compiler finds a problem with what you have just changed. Good for testing.

!define MUI_ICON ; This is the Setup icon and address after it.

!define MUI_UNICON ; This is the Un-Installer icon and address after it.

!define MUI_HEADERIMAGE ; Put no address here. Needed for the one below, without this the installer won't have a header image.

!define MUI_HEADERIMAGE_BITMAP ; Custom Header BMP address goes here.

!define MUI_BGCOLOR ; Custom color of installer body

!define MUI_WELCOMEFINISHPAGE_BITMAP ; Custom Wizard BMP address goes here.

!define MUI_COMPONENTSPAGE_CHECKBITMAP ; Custom Checks BMP address goes here.

!define MUI_LICENSEPAGE_BGCOLOR ;custom color of LICENSE PAGE Back Ground COLOR.

 

There are more defines, click on "?" in HM NIS Edit and NSIS Help browse the help file... C:\Program Files\NSIS\Docs\Modern UI\Readme.html