[Tutorial] Create Your Own Visual Styles in Windows 7

Today we are going to share another article for Windows 7 users that really loves customizing their Windows with new visual styles that are available in the internet.

Windows is only an operating system. In order to use Windows in a good look, we have to use a visual style. Visual style is another name for a theme but it is for Windows only. For example, if we download a theme from the internet, the theme that we are downloading is actually called a visual style.

In the IT world, many people can create executable files (applications) by coding it using the available programming languages (VB, C#, C++, etc.) and the available software for creating the UI.
But in the other side, some people does not understand programming and they want to do something else for the future, like creating their own visual style for customizing their system and spread their creation on various websites like deviantArt.

As we can see, creating visual styles for customization is more easier than programming because it does not need syntax (codes) to use and enjoy it, but it only needs some resources like the UI (User Interface) for the visual style that we want to create.

So if you are the type of user that want to learn of how to create a visual style, we really recommend you to read this article!

REQUIREMENTS

Creating a visual style also needs a software requirement. Without it, the visual style will not born.

In order to create a visual style, all you need are:

- Windows 7 x86 or x64.

- Ave's Vista Style Builder (Important!).

- The image resource for the theme.

1. INSTALLING VISTA STYLE BUILDER

Once you are all done with all of the resources for the theme, it is time to create the theme!

1. When Vista Style Builder is downloaded, double click the file and run it.

2. Vista Style Builder is a shareware. In order to use it forever, you have to activated by buying the serial number for it.

3. On the new window that is showing, click on the Start New Visual Style option.

4. Wait for the Vista Style Builder to load the Aero.msstyles.

5. Once the loading is complete, you are ready to use Vista Style Builder!


2. CREATING THE VISUAL STYLE

After knowing of how to install Vista Style Builder, we are now ready to create the visual style.

- Setting the Font for the Visual Style

Every 3rd party themes has it own fonts. To begin, we need to set the font for the theme first! If you want to set the font for the theme, follow the steps below.

1. In the window of Vista Style Builder, navigate to Fonts, Colors & System Metrics | Fonts & System Metrics.

2. Now you can set the font for the theme. First of all, I want to change the font for the Window Caption.

3. To change the font for the window caption, move the cursor to the right bottom side of the window and click on the value of CAPTIONFONT:FONT, and select your font.

4. Do the same thing for the other stuffs. Here is a small fact for you who want to see more details.

- CAPTIONFONT:FONT : The font for the caption (titlebar).

- SMALLCAPTIONFONT:FONT : The font for small caption.

- MENUFONT:FONT : The font for menu bars in Windows Explorer.

- MSGBOXFONT:FONT : The font for message box that pops-up.

- STATUSFONT:FONT : The font for the status bar.

- ICONTITLEFONT:FONT : The font for the title bar with icons.


- Customizing the Radio Button

As we all can see, all 3rd party themes has its own button style. In this part of the tutorial, we are going to learn of how to change the style of the buttons in Windows Explorer using our theme creations.

For example here I am going to change the default radio button style with a new one, so the radio button colors will be changed.

1. Move your cursor to the left side of the screen and navigate to Buttons, Boxes & Controls | Buttons | Button | RadioButton.

2. As you can see, you can modify one button each. But, in order to make this more easier, let's just modify it all together.

3. Now to change the radio button style, download the sample image here first.

Download Sample RadioButton Images

4. After downloading the file, extract the RAR file into a desired folder.

5. Now move your cursor to the right side of the screen, and change the list box item on the top right of the screen to Minimal DPI: 96.

6. Now, move your cursor to the bottom side, and click the Import option, and select the downloaded GREEN_96.png image file.

7. Now change the list box item to Minimal DPI: 120 and import the downloaded GREEN_120.png image file.

8. After that, change the list box item to Minimal DPI: 144 and import the downloaded Button_RadioButton_dpiMinimal DPI_ 144.png image file.

9. Now you are all done! Just click on Test option if you want to see your changes before saving it!

10. Here are some changes that we have did to the radio button.

- Customizing the Buttons

In Windows Explorer, we can see that are buttons showing in a rectangle shape. If you want to change this for your visual style, follow the steps below.

1. Download the sample image from this link to start.

Download Sample Image

2. After downloading, extract the RAR file to a desired folder.

3. Now open Vista Style Builder, and navigate to Buttons, Boxes & Controls | Button | PushButton.

4. Move your cursor to the right side of the screen and click on the Import option and select the downloaded image called Button_PushButton.png

 

5. When done, click on Test and see the results!

6. As we can see, the button is now changed to orange!


 



As you can see, you can find out more stuff to customize with this ultimate tool, Vista Style Builder. Maybe on our next post, we will share more things that we can do with this software to create a visual style.


FINISHING

After you have customize everything using Vista Style Builder, you can customize Windows system files (DLLs) using Resource Hacker just for extras that will be installed for your theme.

SAVING AND USING YOUR THEME

1. When you are done with the theme that you have create in Vista Style Builder, click on the Save option, and save the msstyles file to a desired location with a desired name (e.g. My theme).

2. Now after saving the msstyles file, navigate to %windir%\Resources\Themes.

3. Find the folder called Aero and a file called aero.theme, and copy it into a desired location.

4. After copying the files into a desired location, replace your saved msstyles file to the aero folder that has been copied to a desired location, with the aero.msstyles file.

5. Rename the copied aero.theme file and aero folder into your theme name (e.g. My theme)

6. Now let's do the important part.

7. To make your theme follows the way the msstyles "styles" your PC and to make your theme show in the Personalization gallery, open the Notepad application, and drag your theme (My theme.theme) file to the text editor in notepad.

8. When the text file has been filled with text from the theme, find the DisplayName=@%SystemRoot%\System32\themeui.dll,-2013 text.

9. Now, replace theme with DisplayName=My theme (You can changed the underlined text with the any theme you want).

10. After setting a name for your theme, now let's "connect" your theme with the custom msstyles file.

11. We are still in the notepad, now find the Path=%ResourceDir%\Themes\Aero\Aero.msstyles text.

12. Replace it with Path=%ResourceDir%\Themes\My theme\My theme.msstyles (The underlined text has to be the same with your theme folder name and the theme's msstyles name).

13. To set a custom wallpaper for your theme, copy an image file to the theme's folder that has the msstyles file inside, and rename the image to wall.jpg (If the extension is different, replace jpg with the extension that is in the image).

14. Now go back to notepad, and find this text: Wallpaper=%SystemRoot%\web\wallpaper\Windows\img0.jpg

15. Replace it with this Wallpaper=%SystemRoot%\Themes\My theme\wall.jpg (The underlined word has to be the same with your theme's folder name).

16. Hit CTRL + S (Save text) and close the Notepad.

17. Now, copy your .theme file and your theme's folder to %windir%\Resources\Themes.

18. After that, open the Personalization gallery and you will see your theme showing.