Convert your installer to the Ultra Modern UI interface

 

This will change the look of your installer. The Ultra Modern UI interface is a very easy way to skin the UI without much effort at all.

Why... well the Ultra Modern UI interface gives you a bigger GUI (Graphic User Interface) and it also gives you more control over the look of the installer.

It may not suit all your content, but if you need more room or you just like this style, then all that is required is to replace a few lines of the script and adjust a couple of graphic files.

You will need to download and install the files so you can use this GUI, don’t worry it’s easy and has its own installer combined with the latest NSIS version.

If you find that link missing the standalone version is here with documentation, I found installing the combined package better.

It changes the install and un-install icons...

 

 

 

 

 

 

 

 

 

 

It changes the size and look of the installer GUI....

 

Here is the same Standard script with the standard GUI...

As you can see, the size is bigger. Notice I was able to fit more in the left Graphic with no loss of size. Now size may not be important to some and you are sitting there saying... so what?

Well on the topic of size, (come on... stop giggling mate we are talking about installers) there are some points to consider. The image size on the welcome page...

Standard Modern UI = 164 wide X 314 High. Welcome/Finish Page only

Ultra Modern UI = 171 wide X 384 High.

This has a slightly bigger Graphic, you can play with it and fit a bit more in. The other thing is the standard GUI has the Graphic on the Welcome/Finish Page only, the Ultra Modern UI graphic is on all pages.

Compare the two types on the Components page. The Ultra Modern UI first...

Now the Standard type...

As you can see, if you have a lot of info as I did with this content item, there is a lot more you can fit in and the graphic is also there. Notice the differences...

 

• The “NOTE: THE SMALL FONTS FILE IS UNTICKED BY DEFAULT.” Did not fit.
• The Tick box section is bigger.
• The Description section allows much more text.
• The Branding information has a lot more room, see the bottom bar? The text in the Ultra Modern UI has two colors, White for the top layer and black behind it...like a shadow.
• There is more room for your brand/content logo in the top right of the header graphic.

So all-in-all it’s bigger, more adjustable than the standard one. It’s the easiest way to make your content stand out from the crowd without going to too much trouble with custom pages and skinning.

 

What do I adjust to make this?

 

Make sure you have the files installed if you have not done so, download and install the files, it’s easy and has its own installer, just go here, get it and install it.

Open up one of your scripts that you have already made.

Now go down to where the compiler will look for the UI type to use, a !include ...

; MUI 1.67 compatible ------

!include "MUI.nsh"

Replace it with this...

;Include UltraModernUI

!include "UMUI.nsh"

 

You can compile and run right now if you wish to see the changes, what you will see is the default blue UI type (if you have the standard “MUI Settings” in your script)...

A very easy step, now lets see what else we can do.

The section in your script below the !include you just changed should be the “MUI Settings” or “Interface Settings”

This is where you can change the installers looks with the use of some special commands...

; MUI Settings For the standard user interface

!define MUI_ABORTWARNING

!define MUI_ICON "${NSISDIR}\Contrib\Graphics\Icons\orange-install.ico"

!define MUI_UNICON "${NSISDIR}\Contrib\Graphics\Icons\orange-uninstall.ico"

!define MUI_HEADERIMAGE

!define UMUI_HEADERBGIMAGE_BMP "Installer Graphics\Header\MOHVER3_Swastika.bmp"

!define MUI_BGCOLOR 666666

!define MUI_WELCOMEFINISHPAGE_BITMAP "Installer Graphics\Wizard\164x314MOHwizVER3_Swasika.bmp"

!define MUI_COMPONENTSPAGE_CHECKBITMAP "Installer Graphics\Checks\not used\red.bmp"

 

That is what I have for my MOH Swastika HUD but those are for the standard UI, you may only see a couple in a standard script.

Most of those can be deleted, only two are needed but get rid of the lot anyway and we will add that whole section back as a group.

Note: Jan 2008 Tutorial changed...

• "MUI_TEXT_COLOR" has been changed to... "UMUI_TEXT_COLOR"
• "UMUI_HEADERIMAGE_BMP" has been changed to... "UMUI_HEADERBGIMAGE_BMP"

The rest to be replaced are !define types that help you control the background, the font colors, the icon type. Below are mine but just look at the line and adjust your color or file address of a Graphic to suit. I have divided them up into areas to help explain them but you can cut and paste them in if you like, then adjust...

;Start "MUI Settings"

!define MUI_ABORTWARNING ;This brings up the warning box when you exit the installer...

; ";" in front of it will cancel out that pop-up box... it is wise to leave it in.

!define MUI_COMPONENTSPAGE_CHECKBITMAP "${NSISDIR}\Contrib\Graphics\Checks\red.bmp" ; This is the check box graphic type, this define and the address after it allows the use of custom checkboxes.

;The Icons for the setup file and the un-install icons...

!define MUI_ICON "${NSISDIR}\Contrib\Graphics\UltraModernUI\Icon.ico" ; The install icon, ico file address.

!define MUI_UNICON "${NSISDIR}\Contrib\Graphics\UltraModernUI\UnIcon.ico" ; The Un-install icon, ico file address.

;The main body colors, font colors of the titles and main body fonts...

!define UMUI_TEXT_COLOR F5F5F5 ; This is the Text Color of the font on the installer main body.

!define MUI_BGCOLOR 666666 ; This is the background color of the installer main body.

!define UMUI_TEXT_LIGHTCOLOR 000000 ; Font color of Titles like the "Description" in the components screen and "Destination Folder" on the install screen.

;The Two installer images, extract the standard ones from..

;"C:\Program Files\NSIS\Contrib\UltraModernUI\Skins\blue"

;(or grey, green / other folders) work on them, save them and adjust the new name and address to suit.

!define UMUI_LEFTIMAGE_BMP "${NSISDIR}\Contrib\UltraModernUI\Skins\blue\LeftBranding.bmp" ;The file address of the 171 wide X 384 High .BMP graphic file for the left side image.

!define UMUI_HEADERBGIMAGE_BMP "${NSISDIR}\Contrib\UltraModernUI\Skins\blue\Header.bmp" ; The file address of the 690 wide X 59 High .BMP graphic file for the top Header image.

;The Bottom Bar, in the same place as the above images, font colors and "Branding text"...

!define UMUI_BOTTOMIMAGE_BMP "${NSISDIR}\Contrib\UltraModernUI\Skins\green\BtmImg.bmp" ; The file address of the 690 wide X 30 High .BMP graphic file for the top Header image. The bottom bar graphics file address.

!define UMUI_BRANDINGTEXTFRONTCOLOR F5F5F5 ;The topside font color for the "Brand Name" on the bottom bar.

!define UMUI_BRANDINGTEXTBACKCOLOR 000000 ;The background (shadow) font color for the "Brand Name" on the bottom bar.

; End "MUI Settings"

Now once you have all those adjusted don’t forget you can add them to the Code template tool as mentioned in the previous pages of this guide. Others you can include here or elsewhere in the script are below, you don’t have to include them. They are mentioned in case you want to adjust them.

BrandingText "dodbits NSIS Steam Mod Installer" ; just put your “Brand Name” details and it show on the bottom bar.

ComponentText "Select your options. Most are...” ; Put in some text here for the custom message on the Components page. (where the user selects the content to install).

With all those adjustments there is also the License page adjustments too (if you use one) and a lot more, You can read about them in the file inside the UltraModernUI folder NSIS directory ...

C:/Program Files/NSIS/Contrib/UltraModernUI/Readme.html

There is another feature that may come in handy, how about a back up of the users file system... then install your software, and then when uninstalled, the users file system is left the way you found it before the install. Its possible and quite easy!