Reply to this topic Topic Options
Rating 5 V 2 Pages V   [1] 2 ... Next
[Tutorial] Creating a Windows Vista Visual Style, The Beginners Guide
UK.Intel
Post #1 Jul 31 2007, 08:37


Neowinian²
Group Icon

Group: Registered
Posts: 110
Joined: 20-March 07
Member No.: 213,390
Click Here to Download this tutorial (PDF) | Click Here to View this tutorial in German

How to make a Visual Style for Windows Vista


Getting Started

1. Download and Install The uxTheme Patch from this LINK
This will allow you to apply custom themes

2. Download and Install my Theme Template from this LINK
This will install a copy of the original aero theme and place all the required files into the correct locations with Jemaho’s Improved Shellstyle, ready for modifying.

3. Download and Install Restorator 2007 from this LINK
This is your Tool for extracting and replacing resources from within the .msstyle and shellstyle.dll

4. Download and Install Alpha Image Convertor from this LINK
This will convert your images to Alpha Aero.msstyle Compatible Images

5. Buy and Install a Paintshop Program
This will be your main Image editing software, I recommend Adobe Photoshop CS3
Or Corel PaintShop Pro XI



Naming Your Theme Files

If you have installed my Theme Template, Navigate to C:Windows\Resources\Themes.

You will need to rename the following files to the name you wish to call your theme.
I recommend you name all the files the same.

• Template.Theme
• Template Folder
• Template.msstyle (Located within the Template folder)
• Template.msstyle.mui (Located within Template folder/en-US)


Editing Your Theme File

1. Navigate to C:Windows\Resources\Themes.
2. Right Click on your Theme file and select Open with Notepad

Here you will see many changes you can make to you theme.
For Example: Cursors, Wallpaper, Title bar Text Colours, Padded Border Width (frame width)

I have Bolded only the IMPORTANT parts that you need to Edit
Display Name, Visual Style Location, Wallpaper Location

Quote - (Vista Theme File)
; Copyright © Microsoft Corp. 1995-2001

[Theme]
DisplayName=
Template Theme

; My Computer
[CLSID\{20D04FE0-3AEA-1069-A2D8-08002B30309D}\DefaultIcon]
DefaultValue=%SystemRoot%\System32\imageres.dll,-109

; My Documents
[CLSID\{450D8FBA-AD25-11D0-98A8-0800361B1103}\DefaultIcon]
DefaultValue=%WinDir%SYSTEM32\mydocs.dll,0

; My Network Places - SHIDI_MYNETWORK
[CLSID\{208D2C60-3AEA-1069-A2D7-08002B30309D}\DefaultIcon]
DefaultValue=%WinDir%SYSTEM32\imageres.dll,-25

; Recycle Bin
[CLSID\{645FF040-5081-101B-9F08-00AA002F954E}\DefaultIcon]
full=%SystemRoot%\System32\imageres.dll,-54
empty=%SystemRoot%\System32\imageres.dll,-55


[Control Panel\Colors]
ActiveTitle=153 180 209
Background=0 0 0
Hilight=51 153 255
HilightText=255 255 255
TitleText=0 0 0
Window=255 255 255
WindowText=0 0 0
Scrollbar=200 200 200
InactiveTitle=191 205 219
Menu=240 240 240
WindowFrame=100 100 100
MenuText=0 0 0
ActiveBorder=180 180 180
InactiveBorder=244 247 252
AppWorkspace=171 171 171
ButtonFace=240 240 240
ButtonShadow=160 160 160
GrayText=128 128 128
ButtonText=0 0 0
InactiveTitleText=67 78 84
ButtonHilight=255 255 255
ButtonDkShadow=105 105 105
ButtonLight=227 227 227
InfoText=0 0 0
InfoWindow=255 255 225
GradientActiveTitle=185 209 234
GradientInactiveTitle=215 228 242
ButtonAlternateFace=0 0 0
HotTrackingColor=0 102 204
MenuHilight=51 153 255
MenuBar=240 240 240


[Control Panel\Cursors]
Arrow=%SystemRoot%\cursors\aero_arrow.cur
Help=%SystemRoot%\cursors\aero_helpsel.cur
AppStarting=%SystemRoot%\cursors\aero_working.ani
Wait=%SystemRoot%\cursors\aero_busy.ani
NWPen=%SystemRoot%\cursors\aero_pen.cur
No=%SystemRoot%\cursors\aero_unavail.cur
SizeNS=%SystemRoot%\cursors\aero_ns.cur
SizeWE=%SystemRoot%\cursors\aero_ew.cur
Crosshair=
IBeam=
SizeNWSE=%SystemRoot%\cursors\aero_nwse.cur
SizeNESW=%SystemRoot%\cursors\aero_nesw.cur
SizeAll=%SystemRoot%\cursors\aero_move.cur
UpArrow=%SystemRoot%\cursors\aero_up.cur
DefaultValue=Windows Aero
Hand=%SystemRoot%\cursors\aero_link.cur
Link=

[Control Panel\Desktop]
Wallpaper=%SystemRoot%\resources\themes\
Template\Wallpaper.jpg
TileWallpaper=0
WallpaperStyle=2
Pattern=
ScreenSaveActive=0

[Control Panel\Desktop\WindowMetrics]

[Metrics]
IconMetrics=76 0 0 0 75 0 0 0 75 0 0 0 1 0 0 0 244 255 255 255 0 0 0 0 0 0 0 0 0 0 0 0 144 1 0 0 0 0 0 1 0 0 5 0 83 101 103 111 101 32 85 73 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
NonclientMetrics=84 1 0 0 1 0 0 0 17 0 0 0 17 0 0 0 19 0 0 0 19 0 0 0 244 255 255 255 0 0 0 0 0 0 0 0 0 0 0 0 144 1 0 0 0 0 0 1 0 0 5 0 83 101 103 111 101 32 85 73 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 17 0 0 0 17 0 0 0 244 255 255 255 0 0 0 0 0 0 0 0 0 0 0 0 144 1 0 0 0 0 0 1 0 0 5 0 83 101 103 111 101 32 85 73 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 19 0 0 0 19 0 0 0 244 255 255 255 0 0 0 0 0 0 0 0 0 0 0 0 144 1 0 0 0 0 0 1 0 0 5 0 83 101 103 111 101 32 85 73 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 244 255 255 255 0 0 0 0 0 0 0 0 0 0 0 0 144 1 0 0 0 0 0 1 0 0 5 0 83 101 103 111 101 32 85 73 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 244 255 255 255 0 0 0 0 0 0 0 0 0 0 0 0 144 1 0 0 0 0 0 1 0 0 5 0 83 101 103 111 101 32 85 73 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
PaddedBorderWidth=4

[boot]
SCRNSAVE.EXE=%WinDir%\System32\logon.scr


[MasterThemeSelector]
MTSM=DABJDKT
ThemeColorBPP=4


[VisualStyles]
Path=%SystemRoot%\resources\Themes\
Template\Template.msstyles
ColorStyle=NormalColor
Size=NormalSize
ColorizationColor=0X45409EFE

Now you have edited those 3 important parts, Save and Exit the file.


Creating your Style (Editing the .msstyle and shellstyle)

• Navigate to C:Windows\Resources\Themes.

Inside your themes folder right click on the .msstyle and select Open with Restorator 2007

Now you will see the contents of the .msstyle
All of the images are located in the IMAGE Folder and one is located in the STREAM Folder.
(See the Next section “Resource Locations” for a rough guide to show you what images to edit)

Extract the Individual images (or the entire image folder)
Drag and Drop to your desktop

Edit the images in your Paintshop program
If your Paintshop program does not make Alpha aero compatible images then this is when you need to use the Alpha Image convertor.
If your image is not Alpha compatible then you will notice a horrible white background when applied to your theme


Replace the Images back into the folder they came from
(e.g. .msstyle\Image) by using Restorator 2007 to drag and drop

Save the .msstyle in Restorator 2007

Apply your theme to see changes
Control Panel\Personalization\Theme Apply

Repeat the Above Process for the Shellstyle.dll
(Windows\Resources\Themes\**Your Theme Folder**\Shell\NormalColor\Shellstyle.dll)


Resource Locations

This is just a rough guide of some of the Common Images you can edit to make your style, there are Hundreds of images you can edit and most of them are used for both aero and basic.

You can also try my .msstyle Resource Finder. to help you narrow down the search to the nearest 40 images. Download LINK

KEY: Aero Basic Both












Advanced Styling

For more advanced Styling see my other tutorials

Vista Hex-Editing - for Text colours, Margins and much more. Download LINK

Vista Font Change - for changing Font types. Download LINK

This post has been edited by UK.Intel: Aug 1 2007, 18:53
Profile Card PM + Reply to Post Go to the top of the page

Log In or Register · Advertise on Neowin
njlouch
Post #2 Jul 31 2007, 08:39


Neowinian Super Star
Group Icon

Group: Registered
Posts: 22,709
Joined: 14-January 03
From: Leicester, UK
Member No.: 21,654
Very nicely done! You are a major part of the Vista skinning comunity, and pushing it forward with helpful posts like this.
Profile Card PM + Reply to Post Go to the top of the page Email Poster
+jeston
Post #3 Jul 31 2007, 08:43


Resident Elite
Group Icon
Group Icon

Group: +Subscriber²
Posts: 1,714
Joined: 7-July 05
From: Las Cruces, NM, US
Member No.: 117,480
Thanks a lot, I will definitely try this out.
Profile Card PM + Reply to Post Go to the top of the page
Rascally
Post #4 Aug 1 2007, 08:27


Play to win.
Group Icon

Group: Registered
Posts: 203
Joined: 4-September 03
From: Vancouver, Canada
Member No.: 34,735
Dude, this is EXCELLENT! Thank you very much for contrbuting this. It solves a couple little issues I was having with making a new VS on Sunday. smile.gif
Profile Card PM + Reply to Post Go to the top of the page Email Poster
UK.Intel
Post #5 Aug 2 2007, 18:14


Neowinian²
Group Icon

Group: Registered
Posts: 110
Joined: 20-March 07
Member No.: 213,390
Quote - (njlouch @ Jul 31 2007, 09:39) *
Very nicely done! You are a major part of the Vista skinning comunity, and pushing it forward with helpful posts like this.

Thank you for the encouraging comments smile.gif It means alot.

I wish anyone who wants to make a visual style for vista all the best of luck, and no matter what the outcome I know how much effort goes into it smile.gif
Profile Card PM + Reply to Post Go to the top of the page
ThehAWKs
Post #6 Aug 2 2007, 18:17


Neowinian³
Group Icon

Group: Registered
Posts: 433
Joined: 15-December 04
From: Brooklyn, New York
Member No.: 85,962
always thought about making a theme now i can thanks
Profile Card PM + Reply to Post Go to the top of the page
UK.Intel
Post #7 Aug 4 2007, 22:55


Neowinian²
Group Icon

Group: Registered
Posts: 110
Joined: 20-March 07
Member No.: 213,390
Quote - (TheMassAppeal @ Aug 2 2007, 19:17) *
always thought about making a theme now i can thanks

I look forward to seeing it (if you decide to go for it) smile.gif
Profile Card PM + Reply to Post Go to the top of the page
QuangT
Post #8 Aug 17 2007, 01:17


Neowinian
Group Icon

Group: Registered
Posts: 2
Joined: 16-August 07
Member No.: 234,552
How do you edit stream folder? I see only one image in it. where are those 822 to 846 images in stream folder?
Profile Card PM + Reply to Post Go to the top of the page
Minifig
Post #9 Aug 18 2007, 05:50


Neowinian Wise One
Group Icon

Group: Registered
Posts: 4,427
Joined: 31-May 07
From: Mishawaka, Indiana.
Member No.: 227,023
Great tutorial!
Profile Card PM + Reply to Post Go to the top of the page
ozgeek
Post #10 Sep 5 2007, 11:25


Neowinian UNSTOPPABLE
Group Icon

Group: Registered
Posts: 6,556
Joined: 8-June 03
From: Queensland, Australia
Member No.: 30,282
Hi all, I am using Restorator 2007 to replace the start menu pngs with the ones from maxclear onto the thin taskbar mod. When I do that, I get this:

(yes, I did use the AlphaConv.exe file to convert them to pngs.)

Attached image(s)
Attached Image
 
Profile Card PM + Reply to Post Go to the top of the page Email Poster
Mr.Matt
Post #11 Oct 1 2007, 23:31


Neowinian
Group Icon

Group: Registered
Posts: 4
Joined: 1-October 07
Member No.: 238,237
uk intel i can't thaknk you enough bro , but when i tried to edit the first couple of lines in the notepap code it whouldn't let me save the file so any help with this whould be great
Profile Card PM + Reply to Post Go to the top of the page Email Poster
Mr.Matt
Post #12 Oct 2 2007, 23:26


Neowinian
Group Icon

Group: Registered
Posts: 4
Joined: 1-October 07
Member No.: 238,237
also im running a 64 bit version of vista and tryed to install a vis style and it whould not werk can sum body help me put please
Profile Card PM + Reply to Post Go to the top of the page Email Poster
hobbester
Post #13 Dec 15 2007, 23:43


Neowinian
Group Icon

Group: Registered
Posts: 3
Joined: 16-April 05
Member No.: 105,862
Sorry to bump, but I'm going through this and wondered whether it was possible to find the provided template originally found here.
Mediafire no longer hosts the file

Also, there is a minor error in the original post and pdf:
Quote -
Naming Your Theme Files

If you have installed my Theme Template, Navigate to C:Windows\Resources\Themes.

You will need to rename the following files to the name you wish to call your theme.
I recommend you name all the files the same.

• Template.Theme
• Template Folder
• Template.msstyles (Located within the Template folder)
• Template.msstyle.mui (Located within Template folder/en-US)


This post has been edited by hobbester: Dec 15 2007, 23:54
Profile Card PM + Reply to Post Go to the top of the page
stylong
Post #14 Dec 17 2007, 22:38


Neowinian
Group Icon

Group: Registered
Posts: 2
Joined: 16-December 07
From: Cydonia
Member No.: 243,606
Meaning of other resource ID's I found:
list items background as used eg. in file explorer:
565 - selected focused item
566 - hovered item
567 - selected&hovered item
568 - selected item
.. and you NEED to change these when creating aero mods, cause MS made hover and selection look almost the same, realmad.gif !
897 - aero taskbar button glyph

I started creating a skin with some stuff and ideas taken from plastik xp by contra (only available for XP now sad.gif ) and based an aero out of necessity.
What I changed also is nasty mandatory bubbly bluish menu and toolbar background.
Profile Card PM + Reply to Post Go to the top of the page
downtheory
Post #15 Dec 18 2007, 20:35


R-Evil
Group Icon

Group: Registered
Posts: 136
Joined: 30-April 07
From: Tennessee
Member No.: 221,454
Not to go offtopic here, but could anyone please tell me how to align a new start button after I design it?
Everytime I try this my start button has white all around it, and its never aligned properly with the rest of the taskbar. I`ve been using the default Vista start button as a reference but still no luck. As of right now I have ForXy over at deviantart helping me out, but I would like to know how to do this for future reference. smile.gif And btw, thanks Uk.Intel for the great tutorials.
Profile Card PM + Reply to Post Go to the top of the page
« Older · Customizing Windows Vista · Newer »
2 Pages V   [1] 2 ... Next  Reply to this topic