Logon Studio skinning "tutorial"
Friday, October 29, 2004 by Halluci | Discussion: Skinning
Here, I will share what I have learned from trial and error, what each bmp is for, and how to edit the uifile.txt manually. This is not so much a tutorial how to create a skin, as it is a tutorial how to bring your skin to the next level, beyond just a wallpaper background and a few other images. Hopefully this will be helpful for all of you out there who are trying to get a certain image to be transparent, etc in logonstudio, and if I am wrong in any aspect, or if anyone has anything to add, feel free to post here.
1. bmp images:
100: main background image
102: password pane
103: 'go' button normal
104: 'go' button pressed
105: password hint button normal
106: password hint button pressed
107: shut down button (one state only)
108: undock
109: scroll arrow down (the scrollbar images don't seem to skin, they are skinned with windowblinds, or windows native skin)
110: scroll arrow up
111: scroll button
112: user account background
113: user picture background unselected
114: default user pic?? (just leave it default)
119: user picture background selected
121: shut down button hot (doesnt seem to be skined)
122: undock button hot (doesnt seem to be skinned)
123: logo (displayed above the 'to begin click on user name' section)
124: vert spearator
125: top horz. separator
126: bottom horz. separator
127: alternate logo?
200: top pannel
201: bottom panel
preview.jpg: preview image
If you are creating a skin from scratch, you can start it off using the logon studio editor, but to fix up transparency issues, etc, you need to edit the UIFILE.txt. DO NOT TRY EDITING THE THEME.INI FILE, IT DOESNT DO ANYTHING! (well, a couple of strings, but not much)
here are a couple of the basic things you will see in uifile.txt (more to be added later)
background: argb(x,x,x,x)
defines a background color, argb- AlphaRedGreenBlue
background: gradient(argb(x,x,x,x), argb(x,x,x,x),y)
gradient, the two argb define begin and end color, y defines which direction the gradient is (im not sure how that last number works... usually its 0)
element denotes a section, button a button
You will see that there are several sections in the uifile.txt, each of has a name (i.e. toppanelss, etc) which are pretty much self-explanatory
background: rcbmp(xxx,x,#FF00FF,0,0,1,0)
first number is the name of the bmp file, second is the way it will be displayed (0 - tile, 1 - fixed size, 6-stretched) and the last few arguments I still havnt figured out (perhaps one of you mite kno?), although i suspect the last four have to do with width, and height of the image.
padding: rect(30rp, 25rp, 30rp, 25rp)
defines the margin on each side, top, bottom, left, right i believe
foreground: rgb(0,0,0)
fontsize: 14 pt
fontface: "tahoma"
cursor: hand
forground: in this case defines the color (rgb) of the text
fontsize: size of the font
fontface: name of the font used (be careful of what fonts you use, if you dont use one of xp's native fonts, it will not show up until after you have already logged on and the logged off)
cursor: tells which cursor to display when mouse is over the button
contentalign: wrapleft
alignment of text, a few which I have seen are wrapleft (right), topright(left), middlecenter, etc.
fontweight: bold
fontstyle: italic
-just a few other parameters when defining fonts
scrollbar [vertical]
{
layoutpos: nineright
background: rgb(48,70,179)
}
layoutpos: just defines how many user acounts before a scrollbar is used (i think)
borderthickness: rect(3,3,3,3)
-another margin-defining parameter i think padding is outside the image, borderthickness is within the image
animation: alpha | log | fast
alpha: 255
-defines a transparency animation (usually on mouse over of accounts), type | type | speed
alpha: xxx defines final alpha blend value
Thats all for now, I will add on more later, and once again, if anything here is wrong, feel free to correct me, and also feel free to add your own information
Reply #2 Friday, October 29, 2004 5:29 PM
Reply #3 Friday, October 29, 2004 7:09 PM
to "middlecenter", and play around with the margins to place it where you want.
I was also wrong in saying that the power off button only has one state. You need to create a new section for mousefocused and keyfocused which define the pressed image as the bmp, and this will be the bmp which displays after the button is pressed.
[Message Edited]
Reply #4 Sunday, September 18, 2005 4:11 AM
http://firstliight.wincustomize.com/Articles.aspx?AID=86851
You seem to know a lot about logon screens.
I hope you can help
Reply #5 Tuesday, June 30, 2009 12:19 PM
HELP HALLUCI
Hi, It seem that all you know a lot about logon themes.
I downloaded 'GRATE_VISTA_LIVE_by_RXHMR' logon theme (which is a RAR file) from http://rxhmr.deviantart.com/art/GRATE-VISTA-LIVE-125301120. You can also download
RAR file contained a text file(name: UIFile), .ini file(name: theme.ini), a Jpeg file (name;preview) and some bitmap files.
.- I tried to mix the resources in logonui.exe (in System32) with that contained in the Zip file I downloaded using reshacker utility and then tried to apply the modified logonui, but in vain. It was not applied correctly.
- I also tried it with TuneUp Utilities 2009. But it supports following formats for logon screen;
- TuneUp Logon Screens(*.tls)
- Stardoc Logon Studio fies(*.logonxp)
- LogonUI application(*.exe)
Sorry for my mearge knowedge.
Can anyone tell me how to use it, if any one knows.
My System
OS : XP SP2
Hardware : Fairly good. I don't think that it has any hardware problem.
Reply #6 Sunday, November 29, 2009 2:57 PM
ive got this beautifull logonscreen I made but my powerbutton is just blocking some beautifull art so i want to move it a little to the left but I've got no clue how to, PlZ someone help me with this problem.
This is my UIFILE.txt
<style resid=framess>
element
{
background: argb(0,0,0,0);
}
element [id=atom(contentcontainer)]
{
background: rcbmp(100,6,#FF00FF,sysmetric(0),sysmetric(1),0,0);
}
button
{
background: rcbmp(112,6,#FF00FF,0,0,1,0);
borderthickness: rect(8,8,0,8);
}
</style>
<style resid=toppanelss>
element
{
background: argb(0,0,128,0);
}
element [id=atom(toppanel)]
{
background: rcbmp(125,6,#FF00FF,0,0,1,0);
alpha: 255;
}
element [id=atom(divider)]
{
background: rcbmp(125,6,#FF00FF,0,0,1,0);
}
</style>
<style resid=splashss>
element
{
background: argb(0,0,0,0);
}
element [id=atom(splash)]
{
background: rcbmp(2005,7,#FF00FF,612rp,501rp,0,30);
}
</style>
<style resid=bottompanelss>
element
{
background: argb(0,0,0,0);
}
element [id=atom(bottompanel)]
{
background: argb(128,128,128,128);
fontface: rcstr(2);
}
element [id=atom(divider)]
{
background: rcbmp(126,6,#FF00FF,0,0,1,0);
}
element [id=atom(options)]
{
padding: rect(25rp, 0rp, 25rp, 70rp);
}
button
{
fontsize: 8 pt;
foreground: rgb(244,244,244);
cursor: hand;
fontweight: normal;
}
button [mousefocused]
{
foreground: rgb(244,244,244);
}
button [selected]
{
foreground: rgb(244,244,244);
}
element [id=atom(instruct)]
{
contentalign: wrapleft;
padding: rect(18rp,0,0,0);
fontsize: rcint(43) pt;
foreground: rgb(244,244,244);
}
element [id=atom(powerbutton)]
{
background: rcbmp(107,7,#FF00FF,30rp,30rp,0,0);
content: rcbmp(2004,3,#FF00FF,30rp,30rp,0,0);
contentalign: wrapleft;
}
element [id=atom(powerbutton)][mousefocused]
{
background: rcbmp(2002,7,#FF00FF,30rp,30rp,0,0);
content: rcbmp(2004,3,#FF00FF,30rp,30rp,0,0);
}
element [id=atom(undockbutton)]
{
content: rcbmp(108,3,#FF00FF,30rp,30rp,0,0);
}
element [id=atom(undockbutton)][keyfocused]
{
content: rcbmp(2003,3,#FF00FF,30rp,30rp,0,0);
}
</style>
<style resid=leftpanelss>
element
{
background: argb(0,0,0,0);
fontface: rcstr(1);
}
element [id=atom(product)]
{
animation: alpha | s | mediumslow;
}
element [id=atom(leftpanel)]
{
foreground: rgb(244,244,244);
}
element [id=atom(welcome)]
{
foreground: rgb(244,244,244);
fontstyle: italic;
fontsize: rcint(44) pt;
fontweight: normal;
padding: rect(0rp,0rp,22rp,0);
contentalign: topright;
}
element [id=atom(welcomeshadow)]
{
foreground: rgb(244,244,244);
fontstyle: italic;
fontsize: rcint(44) pt;
fontweight: normal;
padding: rect(2rp,3rp,20rp,0);
contentalign: topright;
}
element[id=atom(help)]
{
fontsize: rcint(45) pt;
padding: rect(81rp,81rp,0,0);
contentalign: wrapright;
}
</style>
<style resid=centerpanelss>
element
{
background: argb(0,0,0,0);
}
element [id=atom(centerpanel)]
{
background: rcbmp(124,6,#FF00FF,0,0,1,0);
}
element [id=atom(divider)]
{
background: rcbmp(124,6,#FF00FF,0,0,1,0);
}
scrollbar [vertical]
{
layoutpos: nineright;
background: rgb(244,244,244);
}
viewer
{
layoutpos: nineclient;
}
thumb
{
background: rcbmp(111,7,#FF00FF,0,0,1,0);
borderthickness: rect(3,3,3,3);
}
repeatbutton [id=atom(lineup)]
{
content: rcbmp(110,7,-1,sysmetric(20),sysmetric(20),0,0);
}
repeatbutton [id=atom(linedown)]
{
content: rcbmp(109,7,-1,sysmetric(20),sysmetric(20),0,0);
}
repeatbutton [id=atom(pageup)]
{
background: rcbmp(2007,6,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(pagedown)]
{
background: rcbmp(2008,6,#FF00FF,0,0,1,0);
}
</style>
<style resid=rightpanelss>
element
{
background: argb(0,0,0,0);
}
</style>
<style resid=hotaccountlistss>
element
{
background: argb(0,0,0,0);
fontface: rcstr(3);
}
selector
{
padding: rect(0,10rp,5rp,10rp);
}
logonaccount
{
cursor: hand;
background: argb(0,0,0,0);
foreground: rgb(244,244,244);
alpha: 255;
}
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(0,0,0,0);
fontsize: rcint(45) pt;
}
element [id=atom(userpane)][selected]
{
background: argb(0,128,128,128);
}
element [id=atom(pictureframe)]
{
background: rcbmp(113,7,#FF00FF,0,0,1,0);
borderthickness: rect(5,5,5,5);
margin: rect(0,0,7rp,0);
}
element [id=atom(pictureframe)] [mousefocused]
{
background: rcbmp(113,7,#FF00FF,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(113,7,#FF00FF,0,0,1,0);
borderthickness: rect(5,5,5,5);
margin: rect(0,0,7rp,0);
alpha: 255;
}
element [id=atom(username)]
{
foreground: rgb(244,244,244);
contentalign: endellipsis;
}
element [id=atom(username)] [mousefocused]
{
foreground: rgb(244,244,244);
contentalign: endellipsis;
}
element [id=atom(username)] [selected]
{
foreground: rgb(244,244,244);
contentalign: endellipsis;
}
button [class="status"]
{
background: argb(0,0,0,0);
foreground: rgb(112,112,112);
fontsize: rcint(46) pt;
contentalign: wrapleft;
}
button [class="status"][mousefocused]
{
foreground: rgb(244,244,244);
fontstyle: underline;
}
button [class="status"][keyfocused]
{
foreground: rgb(244,244,244);
fontstyle: underline;
}
button [class="status"][selected]
{
foreground: rgb(244,244,244);
fontsize: rcint(46) pt;
fontweight: normal;
}
</style>
<style resid=accountlistss>
element
{
background: argb(0,0,0,0);
fontface: rcstr(3);
}
selector
{
padding: rect(0,10rp,5rp,10rp);
}
logonaccount
{
cursor: hand;
foreground: rgb(250,250,250);
background: argb(0,0,0,0);
animation: alpha | log | fast;
alpha: 255;
}
logonaccount [logonstate=1]
{
animation: rectangle | s | mediumfast;
cursor: arrow;
}
element [id=atom(userpane)]
{
padding: rect(2rp,2rp,14rp,2rp);
borderthickness: rect(0,0,0,0);
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,#FF00FF,0,0,1,0);
borderthickness: rect(5,5,5,5);
margin: rect(0,0,7rp,0);
}
element [id=atom(username)]
{
foreground: rgb(244,244,244);
contentalign: endellipsis;
}
element [id=atom(username)][keyfocused]
{
foreground: rgb(244,244,244);
contentalign: endellipsis;
}
button [class="status"]
{
background: argb(0,0,0,0);
foreground: rgb(244,244,244);
fontface: rcstr(2);
fontsize: rcint(46) pt;
contentalign: wrapleft;
}
button [class="status"][mousefocused]
{
foreground: rgb(244,244,244);
}
button [class="status"][keyfocused]
{
foreground: rgb(244,244,244);
}
button [class="status"][selected]
{
foreground: rgb(244,244,244);
fontface: rcstr(2);
fontsize: rcint(46) pt;
fontweight: normal;
}
</style>
<style resid=passwordpaness>
element
{
background: argb(0,0,0,0);
}
element [id=atom(passwordpanelayer)]
{
padding: rect(71rp,30rp,0,0);
}
element [id=atom(instruct)]
{
fontface: rcstr(48);
fontsize: rcint(47) pt;
foreground: rgb(244,244,244);
padding: rect(57rp,0,0,3rp);
}
edit [id=atom(password)]
{
background: rcbmp(102,6,#FF00FF,0,0,1,0);
borderthickness: rect(5,5,5,5);
passwordcharacter: 9679;
fontface: "lucida sans unicode";
fontsize: 10pt;
}
button [id=atom(go)]
{
margin: rect(5rp,0,0,0);
background: rcbmp(103,7,#FF00FF,31rp,33rp,0,0);
content: rcbmp(112,6,#FF00FF,31rp,33rp,1,0);
padding: rect(0rp,1rp,0,1rp);
}
button [id=atom(go)][keyfocused]
{
background: rcbmp(104,7,#FF00FF,31rp,33rp,0,0);
content: rcbmp(112,6,#FF00FF,31rp,33rp,1,0);
}
button [id=atom(info)]
{
margin: rect(5rp,0,0,0);
background: rcbmp(105,7,#FF00FF,31rp,33rp,0,0);
content: rcbmp(112,6,#FF00FF,31rp,33rp,1,0);
}
button [id=atom(info)][keyfocused]
{
background: rcbmp(106,7,#FF00FF,31rp,33rp,0,0);
content: rcbmp(112,6,#FF00FF,31rp,33rp,1,0);
}
element [id=atom(keyboard)]
{
cursor: arrow;
margin: rect(5rp,0,0,0);
}
</style>
<style resid=scroller>
scrollbar
{
layoutpos: ninebottom;
}
scrollbar [vertical]
{
layoutpos: nineright;
}
viewer
{
layoutpos: nineclient;
}
thumb
{
background: rcbmp(111,7,#FF00FF,0,0,1,0);
content: dtb(handlemap(1), 9, 1);
contentalign: middlecenter;
}
thumb [mousefocused]
{
background: rcbmp(111,7,#FF00FF,0,0,1,0);
content: dtb(handlemap(1), 9, 2);
}
thumb [captured]
{
background: rcbmp(111,7,#FF00FF,0,0,1,0);
content: dtb(handlemap(1), 9, 3);
}
repeatbutton [id=atom(lineup)]
{
background: rcbmp(110,7,#FF00FF,0,0,1,0);
width: sysmetric(2);
height: sysmetric(20);
}
repeatbutton [id=atom(lineup)][mousefocused]
{
background: rcbmp(110,7,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(lineup)][pressed]
{
background: rcbmp(110,7,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(linedown)]
{
background: rcbmp(109,7,#FF00FF,0,0,1,0);
width: sysmetric(2);
height: sysmetric(20);
}
repeatbutton [id=atom(linedown)][mousefocused]
{
background: rcbmp(109,7,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(linedown)][pressed]
{
background: rcbmp(109,7,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(pageup)]
{
background: rcbmp(2007,6,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(pageup)][mousefocused]
{
background: rcbmp(2007,6,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(pageup)][pressed]
{
background: rcbmp(2007,6,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(pagedown)]
{
background: rcbmp(2008,6,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(pagedown)][mousefocused]
{
background: rcbmp(2008,6,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(pagedown)][pressed]
{
background: rcbmp(2008,6,#FF00FF,0,0,1,0);
}
</style>
<logonframe resid=main id=atom(frame) sheet=styleref(framess) layout=borderlayout()>
<element id=atom(contentcontainer) layout=verticalflowlayout(0,0,2,2) layoutpos=client >
<element id=atom(splash) sheet=styleref(splashss) layout=borderlayout() layoutpos=left height=501rp width=612rp>
<element sheet=styleref(toppanelss) id=atom(toppanel) height=150rp layoutpos=top/>
<element sheet=styleref(toppanelss) id=atom(toppanel) width=100rp layoutpos=left/>
<element sheet=styleref(toppanelss) id=atom(toppanel) width=100rp layoutpos=right/>
<element id=atom(centerpanel) sheet=styleref(centerpanelss) layout=borderlayout() layoutpos=client>
<scrollviewer id=atom(scroller) sheet=styleref(scroller) layoutpos=client xscrollable=false margin=rect(26rp,0rp,0rp,0rp)>
<selector id=atom(accountlist) sheet=styleref(accountlistss) layout=verticalflowlayout(0,3,3,2)/>
</scrollviewer>
</element>
<element id=atom(options) sheet=styleref(bottompanelss) height=176rp layout=verticalflowlayout(0,2,2,2) layoutpos=bottom>
<button id=atom(power) layout=verticalflowlayout(1,2,2,2) accessible=true accRole=43 accName=rcstr(11)>
<element id=atom(powerbutton)/>
<element contentalign=wrapleft id=atom(label)/>
</button>
<button id=atom(undock) layout=verticalflowlayout(1,2,2,2) margin=rect(0,2rp,0,0) accessible=true accRole=43 accName=rcstr(14)>
<element id=atom(undockbutton)/>
<element id=atom(label)/>
</button>
</element>
</element>
<element id=atom(leftpanel) sheet=styleref(leftpanelss) layout=filllayout() height=1rp>
<element id=atom(instruct) layoutpos=bottom content=rcstr(25) width=1rp/>
<element id=atom(logoarea) layout=verticalflowlayout(0,3,3,2)>
<element id=atom(product) contentalign=topright padding=rect(0rp,0rp,20rp,20rp) background=argb(0,90,126,220)/>
<element id=atom(help) contentalign=wrapright width=0rp padding=rect(0rp,0rp,0rp,0rp)/>
</element>
<element id=atom(msgarea) layout=verticalflowlayout(0,0,0,2) >
<element layout=filllayout() width=0>
<element id=atom(welcomeshadow) content=rcstr(7)/>
<element id=atom(welcome) content=rcstr(7)/>
</element>
</element>
</element>
</element>
</logonframe>
<logonaccount resid=accountitem id=atom(accountitem) layout=filllayout() accessible=true accRole=43>
<element id=atom(userpanelayer) layout=borderlayout() height=80rp>
<element id=atom(userpane) layout=borderlayout() layoutpos=top>
<element id=atom(pictureframe) layout=flowlayout(0,2,2) layoutpos=left width=58rp height=58rp>
<element id=atom(picture) />
</element>
<element id=atom(username) layoutpos=top/>
<button id=atom(status0) class="status" layoutpos=none/>
<button id=atom(status1) class="status" layoutpos=none/>
</element>
</element>
</logonaccount>
<element resid=passwordpanel id=atom(passwordpanelayer) sheet=styleref(passwordpaness) layoutpos=client layout=borderlayout() height=80rp>
<element layout=borderlayout() layoutpos=client>
<edit id=atom(password) layoutpos=left width=163rp/>
<button id=atom(go) layoutpos=left accessible=true accRole=43 accName= rcstr(100)/>
<button id=atom(info) layoutpos=left accessible=true accRole=43 accName= rcstr(13)/>
</element>
<element id=atom(instruct) layoutpos=bottom content=rcstr(6)/>
</element>
Reply #7 Friday, October 22, 2010 11:06 PM
I work with UIFIle.txt and my system is to find certain text words that get me to where I can
move some buttons....
I search for passwordc is passwordcharacter
edit [id=atom(password)]
{
background: rcbmp(102,6,#FF00FF,0,0,1,0);
borderthickness: rect(5,5,5,5);
passwordcharacter: 170;
fontface: "wingdings";
fontsize: 13pt;
the example I give here is better than just dots for the hidden password entry...
I type the word options for location of the power button location
of which any can be negative 35rp,34rp,-35rp,34rp
below is working example
element [id=atom(options)]
{
padding: rect(35rp,34rp,835rp,34rp);
}
button
and I use the search word power for the shape of buttons height and width
I copy and paste style sections from one UIFILE.txt that I like into another that is different and get a hybrid
so I get all the best features that I like all in one UIFile.txt
You can find my stuff ( Which Of course is the best ) Appz Collection TekWiz 2010
Just Google me... and you will find me... Oct 2010 is where I put my Theme stuff
Please login to comment and/or vote for this skin.
Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:
- Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
- Access to a great community, with a massive database of many, many areas of interest.
- Access to contests & subscription offers like exclusive emails.
- It's simple, and FREE!
Reply #1 Friday, October 29, 2004 5:25 PM