joejoe.org Community: [Tutorial] How to make a Visual Style for Vista - joejoe.org Community

Jump to content


  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

[Tutorial] How to make a Visual Style for Vista The Beginners Guide

#1 User is offline   UK.Intel™ Icon

  • Sophisticated Member
  • Icon
  • Group: Designer
  • Posts: 124
  • Joined: 21-March 07
  • Gender:Male
  • Location:UK-Hertfordshire
  • OS: Vista 6.0

Post icon  Posted 31 July 2007 - 08:30 AM

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

Vista Visual Style Tutorials:
| How to make a VS | Hex-Editing | Font Change | .msstyle Resource Finder |

#2 User is offline   Devjit Icon

  • Sophisticated Member
  • Icon
  • Group: Member
  • Posts: 108
  • Joined: 23-November 06
  • Gender:Male
  • Location:Glasgow,UK
  • Interests:Abstract Painting
  • OS: Vista Ultimate 32 Bit / Windows 7 7068

Posted 31 July 2007 - 08:47 AM

Now I think I will finally give it a shot I always thought I would be difficult to make one of those..thanks man

#3 User is offline   Vishal Gupta Icon

  • Microsoft MVP
  • Icon
  • Group: Member
  • Posts: 3,024
  • Joined: 26-August 06
  • Gender:Male
  • Location:AskVG.com
  • Interests:Surfing, Foruming, Registry & Resource Hacking
  • OS: Windows 7, Vista & XP

Posted 31 July 2007 - 08:55 AM

Awesome work. big_smile.png

Topic Pinned...

#4 User is offline   Greyham Icon

  • Boo?
  • Icon
  • Group: Member
  • Posts: 5,199
  • Joined: 18-July 06
  • Gender:Male
  • Interests:Many things!
  • OS: Mac OS X Leopard

Posted 31 July 2007 - 09:56 AM

awesome tutorial as usual mate byebye.png 10/10 big_smile.png

#5 User is offline   UK.Intel™ Icon

  • Sophisticated Member
  • Icon
  • Group: Designer
  • Posts: 124
  • Joined: 21-March 07
  • Gender:Male
  • Location:UK-Hertfordshire
  • OS: Vista 6.0

Posted 31 July 2007 - 05:56 PM

Thank you for your encouraging comments, I wish anyone who now plans to make a visual style all the best of luck,
and no matter what the outcome, i know how much effort goes into making a style big_smile.png

Vista Visual Style Tutorials:
| How to make a VS | Hex-Editing | Font Change | .msstyle Resource Finder |

#6 User is offline   kicko Icon

  • Rookie
  • Icon
  • Group: Member
  • Posts: 38
  • Joined: 27-June 07
  • Gender:Male

Posted 31 July 2007 - 06:11 PM

nice, i was trying to find info Thanks

#7 User is offline   neo.joejoe Icon

  • Microsoft® MVP
  • Icon
  • Group: Member
  • Posts: 1,110
  • Joined: 09-July 06
  • Gender:Male
  • Location:India
  • Interests:Microsoft® Technologies
  • OS: Windows Vista™ Ultimate

Posted 31 July 2007 - 06:30 PM

UK.Intel™ ! You are genius big_smile.png

#8 User is offline   Empress Icon

  • Rookie
  • Icon
  • Group: Member
  • Posts: 7
  • Joined: 20-March 07
  • OS: Linux- Gentoo /Debian & Vista Ultimate

Posted 11 August 2007 - 07:07 PM

Many Thanx big_smile.png big_smile.png big_smile.png

#9 User is offline   Ludacris Icon

  • g0dl1k3
  • Icon
  • Group: News Poster
  • Posts: 3,825
  • Joined: 23-September 06
  • Gender:Male
  • Location:Vienna, Austria
  • Interests:My GF, Reading,IT,...
  • OS: 6.1.7600

Posted 11 August 2007 - 09:35 PM

Perfect man! Is it also possible to add those progress bars to my visual style?


Ready for future?

#10 User is offline   Tech Geek Icon

  • ^ ^ Oh yeah that is me :D
  • Icon
  • Group: VIP Member
  • Posts: 3,097
  • Joined: 10-April 07
  • Gender:Male
  • Location:Hyderabad, India
  • OS: Windows XP Pro with SP2

Posted 12 August 2007 - 06:50 AM

That is a real nice tut..

thanks a lot mate!! big_smile.png

#11 User is offline   Neological™ Icon

  • Live much?
  • Icon
  • Group: Member
  • Posts: 4,363
  • Joined: 07-March 07
  • Gender:Male
  • Location:Southampton, UK
  • OS: Leopard!

Posted 12 August 2007 - 04:11 PM

Tis Wicked.....

I have allways wondered wheni have seen them released but wow, alot of work must go into this....shocked.png I might try it when i have a spare copple of hours.....
@pureelite
Professional Website Developer
Business Owner
Business, Computing and Economic Student
http://www.ukstarbuck.com

#12 User is offline   UK.Intel™ Icon

  • Sophisticated Member
  • Icon
  • Group: Designer
  • Posts: 124
  • Joined: 21-March 07
  • Gender:Male
  • Location:UK-Hertfordshire
  • OS: Vista 6.0

Posted 12 August 2007 - 04:22 PM

QUOTE(Ludacris @ Aug 11 2007, 10:35 PM) <{POST_SNAPBACK}>
Perfect man! Is it also possible to add those progress bars to my visual style?

Im not sure but i dont think so because the image would stretch "I think"

Vista Visual Style Tutorials:
| How to make a VS | Hex-Editing | Font Change | .msstyle Resource Finder |

#13 User is offline   Corey Icon

  • Digitally Yours
  • Icon
  • Group: VIP Member
  • Posts: 6,025
  • Joined: 09-July 06
  • Gender:Male
  • Location:Great White North
  • OS: Snow Leopard

Posted 17 August 2007 - 01:23 AM

How do I give a theme it's own name??

#14 User is offline   Mik Icon

  • Genius
  • PipPipPipPipPipPip
  • Group: Banned
  • Posts: 1,274
  • Joined: 19-November 06
  • Gender:Male

Posted 17 August 2007 - 02:03 AM

QUOTE(Corey @ Aug 16 2007, 08:23 PM) <{POST_SNAPBACK}>
How do I give a theme it's own name??

There's a hack on AeroXP, its a glitch with the desk.cpl.

#15 User is offline   Corey Icon

  • Digitally Yours
  • Icon
  • Group: VIP Member
  • Posts: 6,025
  • Joined: 09-July 06
  • Gender:Male
  • Location:Great White North
  • OS: Snow Leopard

Posted 17 August 2007 - 03:00 AM

Found it... It was up there I never realized it big_smile.png Thanks again to Uk the king big_smile.png

#16 User is offline   michelino Icon

  • Rookie
  • Icon
  • Group: Member
  • Posts: 4
  • Joined: 19-January 07
  • OS: vista rc2

Posted 07 September 2007 - 08:08 PM

Nice.Thanks.I have a question.Haw change colour of this(white in black).Thanks!!!

http://www.filecrunch.com/file/~s5y6sl

#17 User is offline   UK.Intel™ Icon

  • Sophisticated Member
  • Icon
  • Group: Designer
  • Posts: 124
  • Joined: 21-March 07
  • Gender:Male
  • Location:UK-Hertfordshire
  • OS: Vista 6.0

Posted 07 September 2007 - 08:25 PM

QUOTE(michelino @ Sep 7 2007, 09:08 PM) <{POST_SNAPBACK}>
Nice.Thanks.I have a question.Haw change colour of this(white in black).Thanks!!!

http://www.filecrunch.com/file/~s5y6sl

See the Hex-editing thread, or download the tutorial from below my signiture big_smile.png

Vista Visual Style Tutorials:
| How to make a VS | Hex-Editing | Font Change | .msstyle Resource Finder |

#18 User is offline   michelino Icon

  • Rookie
  • Icon
  • Group: Member
  • Posts: 4
  • Joined: 19-January 07
  • OS: vista rc2

Posted 08 September 2007 - 07:59 PM

Thanks big_smile.png but i"m novice end i do"t see this in tutorial.Thanks enyway big_smile.png

#19 User is offline   Sevan Icon

  • Genius
  • PipPipPipPipPipPip
  • Group: Banned
  • Posts: 2,343
  • Joined: 31-May 07

Posted 30 November 2007 - 06:37 AM

shocked.png Damn... that looks complicated!

Heh... its pinned... big_smile.png My luck..
Removed by Staff

#20 User is offline   Synergiance Icon

  • 403 - You dont have permission to view this member's title
  • Icon
  • Group: VIP Member
  • Posts: 835
  • Joined: 28-February 07
  • Gender:Male
  • Location:Newtown, CT
  • OS: Vista Home Premium, Win7 Ultimate 7232

Posted 01 December 2007 - 05:05 AM

it only looks complicated. it is only lots of pictures, that's all.
Posted Image
Posted ImagePosted Image

  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users