the panel's style and contents username and status normal color

username and status hover color

username clicked background > bitmap 112

username > password

logging off / turning off computer ,etc


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)
<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); /* the background */
}
element [id=atom(toppanel)] /* top panel */
{
background: rgb(153,81,0);
}
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);
fontface: rcstr(2);
}
element [id=atom(divider)]
{
background: rcbmp(126,6,#FF00FF,0,0,1,0);/* bottompanel divider */
}
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 = 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 */
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
{
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 panels's layout

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

<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's 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>





note: some of the strings are in winlogon.exe.
logonui.exe ui file - des.virtualplastic.net