i have created some tutorials and collected some others here to help editing the look of certain part of the windows. the ones with external links of course are not my work.

logon screen, logonui: logonui.exe
html desktop (Html, scripts)
hex-editor help

external tutorials:
common task panel, shellstyle: shellstyle.dll (coolxp.de.vu)
boot screen: ntoskrnl.exe (virtualplastic.net)
reshacker tutorial (askvg.com)

logonui.exe > uifile 1000
the old version with pictures is here.

values:
background = color name or rgb background color > i.e: White or rgb(255,255,255)
foreground = the text color name or rgb color > i.e: White or rgb(255,255,255)
fontface: rcstr(2) = font family defined in string table 1 #2nd line
fontsize: rcint(43) pt = font size in points defined in string table 3 #43rd line
padding, margin = rect(Left, top, right, bottom) pixels
contentalign = wrapleft, wrapright, middlecenter, topright, bottomright, topleft, bottomleft, focusrect, middleleft, middleright, endellipsis
fontstyle = italic, for normal text you can delete this line
fontweight = bold, normal
layoutpos = nineright, nineleft, ninebottom, nineclient, bottom, top, left, right, client, none
cursor = hand, default, help...
borderthickness = rect(Left, top, right, bottom) pixels
bordercolor = rgb(rrr,ggg,bbb), rgb color values
width, height = 80rp (80 pixels)
content = rcstr() or rcbmp() can be string resouece or bitmap resource
rcstr(6) = means string table 1 #6th line (I.e; Type your password)

rcbmp(112,6,#FF00FF,0,0,1,0): rcbmp(a,b,c,d,e,f,g)
a = bitmap resource 112
b = stretching (1=normal, 3=tile, 6=stretch, 7=32 bit bitmap)
c = transparent color of bitmap not drawn (#rrggbb, rgb hex value)
d = width of bitmap (used when f=0)
e = height of bitmap (used when f=0)
f = sizing (0 = use dimensions defined in d and e or 1 = use bitmap dimensions)
g = mirror (0 = normal and 1 = mirror)

the panel's style and contents:

<style resid=framess>
element
{
background: rgb(100,191,0);
}
element [id=atom(contentcontainer)] /* the middle big container */
{
background: rgb(90,126,220);
}
button
{
background: rcbmp(112,6,#FF00FF,0,0,1,0); /* the top-left image */
borderthickness: rect(8,8,0,8);
}
</style>

<style resid=toppanelss>
element
{
background: rgb(171,44,0);
}
element [id=atom(toppanel)] /* top panel */
{
background: rgb(153,81,0); /* the background of the top panel */
}
element [id=atom(divider)]
{
background: rcbmp(125,6,#FF00FF,0,0,1,0); /* toppanel divider */
}
</style>

<style resid=bottompanelss>
element
{
background: rgb(0,202,12); /* bottom panel */
}
element [id=atom(bottompanel)]
{
background: gradient(argb(0,57,52,173), argb(0,0,48,156), 0); /* bottom panel gradient background */
fontface: rcstr(2);
}
element [id=atom(divider)]
{
background: rcbmp(126,6,#FF00FF,0,0,1,0); /* bottompanel divider background */
}
element [id=atom(options)]
{
padding: rect(25rp, 20rp, 25rp, 20rp); /* turn off computer button's padding */
}
button
{
fontsize: rcint(42) pt;
foreground: white;
cursor: hand;
}
button [mousefocused]
{
fontstyle: underline;
}
button [keyfocused]
{
fontstyle: underline;
}
element [id=atom(instruct)] /* bottom panel text = "After you log on, you can add or change user accounts just go to control panel and click user accounts" */
{
contentalign: wrapleft;
padding: rect(18rp,0,0,0);
fontsize: rcint(43) pt;
foreground: white;
}
</style>

<style resid=leftpanelss>
element
{
background: rgb(109,123,0); /* left panel */
fontface: rcstr(1);
}
element [id=atom(product)]
{
animation: alpha | s | mediumslow;
}
element [id=atom(leftpanel)]
{
foreground: rgb(239,247,255);
}
element [id=atom(welcome)] /* welcome text */
{
fontstyle: italic;
fontsize: rcint(44) pt;
fontweight: bold;
padding: rect(0rp,0rp,22rp,0);
contentalign: topright;
}
element [id=atom(welcomeshadow)] /* welcome text shadow */
{
foreground: rgb(49,81,181);
fontstyle: italic;
fontsize: rcint(44) pt;
fontweight: bold;
padding: rect(2rp,3rp,20rp,0);
contentalign: topright;
}
element[id=atom(help)] /* to begin click your username */
{
fontsize: rcint(45) pt;
padding: rect(81rp,81rp,0,0);
contentalign: wrapright;
}
</style>

<style resid=rightpanelss>
element
{
background: rgb(49,253,200); /* right panel */
}
element [id=atom(divider)]
{
background: rcbmp(124,6,#FF00FF,0,0,1,0); /* left and right panel's divider */
}
scrollbar [vertical]
{
layoutpos: nineright;
background: rgb(6,190,118);
}
viewer
{
layoutpos: nineclient;
}
thumb
{
background: rcbmp(111,6,#FF00FF,0,0,1,0);
borderthickness: rect(3,3,3,3);
}
repeatbutton [id=atom(lineup)]
{
content: rcbmp(110,3,-1,sysmetric(20),sysmetric(20),0,0);
}
repeatbutton [id=atom(linedown)]
{
content: rcbmp(109,3,-1,sysmetric(20),sysmetric(20),0,0);
}
</style>

elements within the panels:

<style resid=hotaccountlistss> /* user name + account */
element
{
background: rgb(237,128,0);
fontface: rcstr(3);
}
selector
{
padding: rect(0rp,26rp,5rp,26rp);
}
logonaccount
{
cursor: hand;
foreground: rgb(239,247,255);
background: rgb(103,110,242);
animation: alpha | log | fast;
alpha:96;
}
logonaccount [logonstate=1]
{
animation: rectangle | s | mediumfast;
cursor: arrow;
alpha:255;
}
logonaccount [mousewithin]
{
cursor: hand; alpha:255;
}
logonaccount [selected]
{
cursor: hand; alpha:255;
}
element [id=atom(userpane)]
{
padding: rect(2rp,2rp,14rp,2rp);
borderthickness: rect(5,5,0,5);
bordercolor: rgb(90,126,220); /* userpane border hot */
fontsize: rcint(45) pt;
}
element [id=atom(userpane)][selected]
{
background: rcbmp(112,6,#FF00FF,0,0,1,0);
} logonaccount [selected]
{
alpha: 255;
}
element [id=atom(pictureframe)]
{
background: rcbmp(113,7,255,0,0,1,0);
borderthickness: rect(5,5,5,5);
margin: rect(0,0, 7rp,0);
}
element [id=atom(pictureframe)] [mousefocused]
{
background: rcbmp(119,7,255,0,0,1,0);
borderthickness: rect(5,5,5,5);
margin: rect(0,0,7rp,0);
alpha: 255;
}
element [id=atom(pictureframe)] [selected]
{
background: rcbmp(119,7,255,0,0,1,0);
borderthickness: rect(5,5,5,5);
margin: rect(0,0,7rp,0);
alpha: 255;
}
element [id=atom(username)]
{
foreground: rgb(239,247,255);
contentalign: endellipsis;
}
button [class="status"] /* the status text under username */
{
background: rgb(183,168,227);
foreground: rgb(0,48,156);
fontsize: rcint(46) pt;
fontweight: bold;
}
button [class="status"][mousefocused]
{
fontstyle: underline;
}
button [class="status"][keyfocused]
{
fontstyle: underline;
}
button [class="status"][selected]
{
foreground: rgb(239,247,255);
fontsize: rcint(46) pt;
fontweight: bold;
}
</style>

<style resid=accountlistss>
element
{
background: rgb(244,248,65); /* account list bg */
fontface: rcstr(3);
}
selector
{
padding: rect(0rp,26rp,5rp,26rp);
}
logonaccount
{
cursor: hand;
animation: alpha | log | fast;
background: rgb(207,98,137);
}
logonaccount [logonstate=1]
{
animation: rectangle | s | mediumfast;
cursor: arrow;
}
element [id=atom(userpane)] /* userpane border normal */
{
padding: rect(2rp,2rp,14rp,2rp);
borderthickness: rect(5,5,0,5);
bordercolor: rgb(90,126,220);
fontsize: rcint(45) pt;
}
element [id=atom(userpane)][selected]
{
background: rcbmp(112,6,#FF00FF,0,0,1,0);
}
element [id=atom(pictureframe)]
{
background: rcbmp(113,7,255,0,0,1,0);
borderthickness: rect(5,5,5,5);
margin: rect(0,0,7rp,0);
}
element [id=atom(username)]
{
foreground: rgb(239,247,255);
contentalign: endellipsis;
}
button [class="status"] /* the login status text */
{
background: rgb(108,127,0);
foreground: rgb(0,48,156);
fontsize: rcint(46) pt;
fontweight: bold;
contentalign: wrapleft;
}
button [class="status"][mousefocused]
{
fontstyle: underline;
}
button [class="status"][keyfocused]
{
fontstyle: underline;
}
button [class="status"][selected]
{
foreground: rgb(239,247,255);
fontsize: rcint(46) pt;
fontweight: bold;
}
</style>

<style resid=passwordpaness> /* password panel */
element
{
background: rgb(3,91,53); /* password panel */
}
element [id=atom(passwordpanelayer)]
{
padding: rect(71rp,0,0,0);
}
element [id=atom(instruct)] /* password panel's type your password text */
{
fontface: rcstr(48);
fontsize: rcint(47) pt;
foreground: white;
padding: rect(3rp,0,0,3rp);
}
edit [id=atom(password)] /* the password input */
{
background: rcbmp(102,6,#FF00FF,0,0,1,0);
borderthickness: rect(3,3,5,5);
passwordcharacter: 9679;
fontface: "arial";
fontsize: 16pt;
}
button [id=atom(go)] /* the go button */
{
margin: rect(5rp,0,0,0);
content: rcbmp(103,3,-1,26rp,26rp,0,0);
padding: rect(0rp,1rp,0,1rp);
}
button [id=atom(go)][keyfocused]
{
content: rcbmp(104,3,-1,26rp,26rp,0,0); /* go button focused */
}
button [id=atom(info)] /* the info button next to go button */
{
margin: rect(5rp,0,0,0);
content: rcbmp(105,3,-1,28rp,28rp,0,0);
}
button [id=atom(info)][keyfocused] /* info button focused */
{
content: rcbmp(106,3,-1,28rp,28rp,0,0);
}
element [id=atom(keyboard)] /* the language sign: EN */
{
cursor: arrow;
margin: rect(5rp,0,0,0);
}
</style>

<style resid=scroller> /* scrollbar. leave it as it is! */
scrollbar
{
layoutpos: ninebottom;
}
scrollbar [vertical]
{
layoutpos: nineright;
}
viewer
{
layoutpos: nineclient;
}
thumb
{
background: dtb(handlemap(1), 3, 1);
content: dtb(handlemap(1), 9, 1);
contentalign: middlecenter;
}
thumb [mousefocused]
{
background: dtb(handlemap(1), 3, 2);
content: dtb(handlemap(1), 9, 2);
}
thumb [captured]
{
background: dtb(handlemap(1), 3, 3);
content: dtb(handlemap(1), 9, 3);
}
repeatbutton [id=atom(lineup)]
{
background: dtb(handlemap(1), 1, 1);
width: sysmetric(2);
height: sysmetric(20);
}
repeatbutton [id=atom(lineup)][mousefocused]
{
background: dtb(handlemap(1), 1, 2);
}
repeatbutton [id=atom(lineup)][pressed]
{
background: dtb(handlemap(1), 1, 3);
}
repeatbutton [id=atom(linedown)]
{
background: dtb(handlemap(1), 1, 5);
width: sysmetric(2);
height: sysmetric(20);
}
repeatbutton [id=atom(linedown)][mousefocused]
{
background: dtb(handlemap(1), 1, 6);
}
repeatbutton [id=atom(linedown)][pressed]
{
background: dtb(handlemap(1), 1, 7);
}
repeatbutton [id=atom(pageup)]
{
background: dtb(handlemap(1), 7, 1);
}
repeatbutton [id=atom(pageup)][mousefocused]
{
background: dtb(handlemap(1), 7, 2);
}
repeatbutton [id=atom(pageup)][pressed]
{
background: dtb(handlemap(1), 7, 3);
}
repeatbutton [id=atom(pagedown)]
{
background: dtb(handlemap(1), 6, 1);
}
repeatbutton [id=atom(pagedown)][mousefocused]
{
background: dtb(handlemap(1), 6, 2);
}
repeatbutton [id=atom(pagedown)][pressed]
{
background: dtb(handlemap(1), 6, 3);
}
</style>

the layout:

<logonframe resid=main id=atom(frame) sheet=styleref(framess) layout=borderlayout()> /* the whole logonui screen */

<element id=atom(toppanel) sheet=styleref(toppanelss) layout=borderlayout() layoutpos=top height=80rp> /* top panel */
<element id=atom(divider) layoutpos=bottom height=2rp/> /* top divider line */
</element>

<element id=atom(bottompanel) sheet=styleref(bottompanelss) layout=borderlayout() layoutpos=bottom> /* bottom panel */
<element id=atom(divider) layoutpos=top height=2rp/> /* bottom divider line */
<element id=atom(options) layout=borderlayout() layoutpos=client> /* options?, turn off computer elements */
<element layout=borderlayout() layoutpos=left> /* element layout for buttons */
<button id=atom(power) layout=borderlayout() layoutpos=top accessible=true accRole=43 accName=rcstr(11)> /* clickable element in the bottom panel */
<element layoutpos=left content=rcbmp(107,3,-1,26rp,26rp,0,0) /> /* the turn off computer button */
<element id=atom(label) layoutpos=client margin=rect(2rp,0,0,0)/> /* the turn off computer text */
</button>

<button id=atom(undock) layout=borderlayout() layoutpos=top margin=rect(0,2rp,0,0) accessible=true accRole=43 accName=rcstr(14)> /* clickable element in the bottom panel */

<element layoutpos=left content=rcbmp(108,3,-1,26rp,26rp,0,0)/> /* undock button */
<element id=atom(label) layoutpos=client margin=rect(2rp,0,0,0)/> /* undock text */
</button>
</element>
<element id=atom(instruct) layoutpos=right content=rcstr(25) background=rgb(58, 110, 165) width=325rp/> /* bottom panel's "After you logon" text panel */
</element>
</element>

<element id=atom(contentcontainer) layout=flowlayout(1,3,2,3) layoutpos=client content=rcbmp(100,0,0,219rp,207rp,1,0)> /* the middle big container */
<element id=atom(leftpanel) sheet=styleref(leftpanelss) layout=filllayout() layoutpos=left> /* left panel */
<element id=atom(logoarea) layout=verticalflowlayout(0,3,3,2)> /* windows logo area in left panel */
<element id=atom(product) contentalign=middlecenter padding=rect(0rp,0rp,20rp,20rp) content=rcbmp(123,3,-1,137,86,0,0) background=rgb(252,194,180)/> /*windows logo, bitmap 123 + logoff text , saving your settings text, etc..*/
<element id=atom(help) contentalign=wrapright width=384rp padding=rect(0rp,0rp,40rp,0rp)/> /* to begin, click your user name text? */
</element>
<element id=atom(msgarea) layout=verticalflowlayout(0,0,0,2) > /* welcome text element */
<element layout=filllayout() width=384rp> /* layout + width */
<element id=atom(welcomeshadow) content=rcstr(7)/> /* shadow of welcome text 1/7 */
<element id=atom(welcome) content=rcstr(7)/> /* welcome text located in string table 1/7 */
</element>
</element>
</element>

<element id=atom(rightpanel) sheet=styleref(rightpanelss) layout=borderlayout() layoutpos=left width=384rp> /* right panel */
<element id=atom(divider) layoutpos=left width=1rp/> /* left and right panel divider */
<scrollviewer id=atom(scroller) sheet=styleref(scroller) layoutpos=client xscrollable=false margin=rect(26rp,0rp,0rp,0rp)> /* extra space for scroller if needed */
<selector id=atom() sheet=styleref(accountlistss) layout=verticalflowlayout(0,3,3,2)/> /* the account list subpanel */
</scrollviewer>
</element>
</element>
</logonframe>

<logonaccount resid=accountitem id=atom(accountitem) layout=filllayout() accessible=true accRole=43> /* accounts panel */
<element id=atom(userpanelayer) layout=borderlayout() height=80rp> /* userpanel height . user pic and username*/
<element id=atom(userpane) layout=borderlayout() layoutpos=top>
<element id=atom(pictureframe) layout=flowlayout(0,2,2) layoutpos=left width=58rp height=58rp> /* user picture frame, bitmap 113 */
<element id=atom(picture) /> /* user picture */
</element>
<element id=atom(username) layoutpos=top/> /* user name */
<button id=atom(status0) class="status" layoutpos=none/> /* the status 1 under username */
<button id=atom(status1) class="status" layoutpos=none/> /* the status 2 under username */
</element>
</element>
</logonaccount>

<element resid=passwordpanel id=atom(passwordpanelayer) sheet=styleref(passwordpaness) layout=borderlayout() height=80rp> /* password panel */
<element layout=borderlayout() layoutpos=bottom> /* password panel layout */
<edit id=atom(password) layoutpos=left width=163rp/> /* passw input width */
<element id=atom(keyboard) layoutpos=left/> /* the keyboard language icon */
<button id=atom(go) layoutpos=left accessible=true accRole=43 accName= rcstr(100)/> /* go button next to the password input */
<button id=atom(info) layoutpos=left accessible=true accRole=43 accName= rcstr(13)/> /* the info button next to the go button */
</element>
<element id=atom(instruct) layoutpos=bottom content=rcstr(6)/> /* the Type your password text in string table 1/6 */
</element>

this is a very simple example of how to execute programs and open folders on our desktop that uses html as background. you can select all this example and copy into a txt file then save it as whatever.htm. or download it from here.

after that set this file as your background. just like if it were a background picture. > display properties > desktop > browse.

after setting the file as background, there will be an activex warning message. to turn this warning dialog off, download this reg file, and merge it to the registry.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>html desk</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<!-- Sample 1: shellexecute script with vbscript -->

<script language="VBScript" type="text/VBScript">
Set WshShell = CreateObject("WScript.Shell")

function launch_pf()
WshShell.Run "shell:ProgramFiles" ' you can use shell:paths here or full path. i.e.; "shell:RecycleBinFolder" will open the recycle bin. or "c:/folder/executable.exe" will open your program.
end function

function launch_mc()
WshShell.Run "shell:DriveFolder" ' you can use shell:paths here or full path. i.e.; "shell:RecycleBinFolder" will open the recycle bin. or "c:/folder/executable.exe" will open your program.
end function

</script>

<!-- Sample 2: shell execute script with javascript -->

<script language="Javascript" type="text/Javascript">
var launcher = new ActiveXObject("Shell.Application");

function launch_this()
{
launcher.ShellExecute("calc.exe"); // you can use shell:paths here or full path. i.e.; "shell:RecycleBinFolder" will open the recycle bin. or "c:/folder/executable.exe" will open your program.
}
</script>

<!-- Sample 3: shell execute script with simplified javascript -->

<script language="Javascript" type="text/Javascript">
function run(what)
{
var wss=new ActiveXObject("Shell.Application");
wss.ShellExecute(what)
}
</script>

</head>

<body>

<!-- here are the opening / executing links without any scripts. if you use this method you don't need the scripts above! then why to have the scripts? because if you want to do something more like an application you will need that. i.e; scheduler. or if you want to use doubleclicks to open / execute something. because with this it works like if it were a web page with single clicks -->
<a href="shell:desktop" target="_self">Open desktop folder</a> - normal shell link<br>
<a href="c:\windows\system32\calc.exe">Execute calculator</a> - normal file link<br><br>

<!-- Using sample 1 and 2: here are the opening / executing links with vbscript and javascrip. the "target="_self" is important for the script to work properly. -->
<a href="#" onclick="launch_mc()" target="_self">open my computer</a> - shell link with script <br>
<a href="#" ondblclick="launch_pf()" target="_self">open program files</a> - shell link with script / doubleclick / sample 1<br>
<a href="#" onclick="launch_this()" target="_self">execute calculator</a> - sample 2<br>

<!-- Using sample 3 script -->
<a href="#" onclick="run('calc.exe')" target="_self">execute calculator</a> - sample 3 / file<br>
<a href="#" onclick="run('c:\windows\system32\calc.exe')" target="_self">execute calculator</a> - sample 3 / file<br>
<a href="#" onclick="run('c:\windows')" target="_self">open windows folder</a> - sample 3 / folder<br>

</body>
</html>

now then, it is really up to you what do you want to achieve. i mean you can use real icons (*.ico), any images, flash content, moving stuffs etc... here are some tips and script sampels you could use:

simple shell:paths
shell:Common Administrative Tools
shell:Administrative Tools
shell:SystemX86
shell:My Pictures
shell:Profile
shell:CommonProgramFiles
shell:ProgramFiles
shell:System
shell:Windows
shell:History
shell:Cookies
shell:Local AppData
shell:AppData
shell:Common Documents
shell:Common Templates
shell:Common AppData
shell:Common Favorites
shell:Common Desktop
shell:Common Menu
shell:Common Programs
shell:Common Startup
shell:Templates
shell:PrintHood
shell:NetHood
shell:Favorites
shell:Personal
shell:SendTo
shell:Recent
shell:Menu
shell:Programs
shell:Startup
shell:Desktop
shell:Fonts
shell:ConnectionsFolder
shell:RecycleBinFolder
shell:PrintersFolder
shell:ControlPanelFolder
shell:InternetFolder
shell:DriveFolder
shell:NetworkFolder
shell:DesktopFolder

drive informations
screenshot: drive informations
this little script displays simple drive informations like; drive name, drive letter, free space, total space, and a simple used/freespace percentage bar. you have to configure the drive letters in the script first. default refresh interval is 60 sec.
download drive info script

file and folder listing
screenshot: file, folder listing script
does nothing else but listing files and folders of a desired directory. in this case, it is the 'c:\'.
download Sample hTA

system informations
screenshot: various sys informations
displaying video info, and some system informations. vbscript, html / hta. you can rename it to html and put it as desktop background.
download sample hTA

notes, messages on desktop
3 versions of "Messages on desktop" script. all the texts saved into cookies. deleteable, editable messages on your desktop.
download script

hex-editing is easy. i mean it is very easy if you know what to change. basically it is no more than locating the correct value(s) / number(s) and changing them. but here is a little help for just in case. in this example i show you how to change the defrag-bar colors in xp.

here are the default hex color values we need to change:
DC0000 (red): at offset A4C6
0000DC (blue): at offset A4EA
00DC00 (green): at offset A4D2
FFFFFF (white): at offset A50E

load dfrgui.dll into the hexeditor (i.e; cygnus hexeditor or any other hex-editor) then in the edit menu locate the "Go to" or "Go to offset" command. in order to change the red color type A4C6 into this "Go to" dialog and hit enter. (In this dialog use hexadecimal values instead of decimal) now you can see DC0000. it is the red color in hexadecimal code.



use your image editor or a color picker to find out your desired color's hex code and change this red color (DC0000) to your color. i.e; this color code is: 7d9d7d. you are done with the first color. now do the same with the next 3 colors, then save the file and replace with the original. done.