注：个性化来自个人，没有耐心看下去的朋友请去下载一些做好的界面
试想想把自己女友的照片/家人的照片/美丽的风景等等做成登入界面，该是多么的好
先介绍常修改部分:
1. 修改背景颜色如见argb(0,0,0,0)可改为argb(99,118,149)等等;
2. 修改图片参数如见rcbmp(128,7,#FF00FF,643rp,588rp,0,0)等等
1. 125 -> 图片编号
2. 6 -> 图片显示方式 -> 0(砖块排列),1(按你指定的长宽),6(扩展),7(32bit bmp图片)
3. #ff00ff -> 指定要透明的颜色
4. 0 -> 指定图片长度
5. 0 -> 指定图片宽度
6. 1 -> 0=使用指定长宽,1=使用图片长宽
7. 0 -> 0=不作变化,1=映射
脚本码中对于组件位置的指定和对齐,常用的就是中(client)上(top)下(bottom)左(left)右(right)上右(topright)下左(bottomleft)...,
还有下面的九宫格参数.大方向位置搞定后再辅以padding: rect(0rp,0rp,22rp,0)左,上,右,下,这类填空指令作偏移设定,取得想要的精确布局.位置九宫格代号参数脚本码中对于组件位置的指定和对齐,常用的就是中(client)上(top)下(bottom)左(left)右(right)上右(topright)下左(bottomleft)...,
还有下面的九宫格参数.大方向位置搞定后再辅以padding: rect(0rp,0rp,22rp,0)左,上,右,下,这类填空指令作偏移设定,取得想要的精确布局.位置九宫格代号参数
6 4 7
1 0 2
5 3 8
/*此为个人注释
Another quality logon screen by HanSon
This logon screen is ?2005 to HanSon and is strictly for personal use only
email: qq599095@hotmail.com
Oicq:599095
*/
<style resid=framess>/*定义中间画面*/
element
{
background: argb(0,0,0,0);/*登陆界面的背景颜色, 定义全画面背景为带透明通道的黑色rgb色块(此argb定义让覆盖在上面的图片可指定透明色) */
}
element [id=atom(contentcontainer)]
{
background: rcbmp(100,6,0,sysmetric(0),sysmetric(1),0,0);/*登陆界面背景图,更换背景图请在位图处导入自己所欢喜的*/
}
button
{
background: rcbmp(112,6,#FF00FF,0,0,1,0);/*112为SCROLL背景图#FF00FF为指定透明的颜色,0,0为图片象素如:1024*768,0直接使用图片大小 */
borderthickness: rect(8,8,0,8);/* 设定该按键底图加外框,左8上8右0下8(pix)*/
}
</style>
<style resid=toppanelss>/*定义上画面*/
element
{
background: argb(0,0,128,0);/* 定义上画面背景为带透明通道的黑色rgb色块*/
}
element [id=atom(toppanel)]
{
background: rcbmp(125,6,#FF00FF,0,0,1,0);/* 指定上画面为深蓝色rgb色块
*/
alpha: 255;
}
element [id=atom(divider)]
{
background: rcbmp(125,6,#FF00FF,0,0,1,0); /*指定上分隔线为编号125的bmp图片(少改)*/
}
</style>
<style resid=splashss>
element
{
background: argb(0,0,0,0);
}
element [id=atom(splash)]
{
background: rcbmp(128,7,#FF00FF,620rp,502rp,0,0);/*中央部分图片,务必使用32色图片(我觉得是)*/
}
</style>
<style resid=bottompanelss>/*定义下画面*/
element
{
background: argb(0,0,0,0); /*定义下画面背景为带透明通道的黑色rgb色块*/
}
element [id=atom(bottompanel)]
{
background: argb(128,128,128,128);
fontface: rcstr(2);/*读字符串2(设置为Arial字体)*/
}
element [id=atom(divider)]/*此开始*/ {
background: rcbmp(126,6,#FF00FF,0,0,1,0);
}/*至此修改无效果*/
element [id=atom(options)]
{
padding: rect(25rp, 20rp, 25rp, 20rp);/* 指定对下画面中的组件填入距离空间左25上20右25下20 */
}/*此功能作用的组件包恬power按键.unduck按键.instruct讯息 */
button
{
fontsize: 11 pt;/*字体大小*/ foreground: white;/*背景色*/ cursor: hand;/*鼠标手势*/ }
button [mousefocused]
{
fontstyle: underline; /*鼠标移到关机.退出按键时按键消息正文加下横线显示
*/
}
button [keyfocused]
{
fontstyle: underline;/*以键盘快捷移到关机.退出按键时按键消息正文加下横线显示*/
}
element [id=atom(instruct)]/*讯息文字,如SHUTDOWN 和PASSWORD这此的设置*/
{
contentalign: wrapleft;/*右下角的消息正文智能向左对齐 */
padding: rect(18rp,0,0,0);/* 该消息正文左方增加18pix的空间
*/
fontsize: rcint(43) pt;/* 指定上列按键上文字大小依String Table(字符串值)资源编号43设定显示*/
foreground: white;/* 指定消息正文为白色*/
element [id=atom(powerbutton)]
{
content: rcbmp(107,3,#FF00FF,31rp,31rp,0,0);/*默认的关机按钮关机图片*/
contentalign: middlecenter;/*位置*/
}
element [id=atom(powerbutton)][keyfocused]
{
content: rcbmp(121,3,#FF00FF,33rp,32rp,0,0);/*键盘选中的关机按钮显示图片*/
contentalign: middlecenter;/*关机图片位置*/
}
element [id=atom(undockbutton)]/*此开始*/ {
content: rcbmp(108,3,#FF00FF,35rp,35rp,0,0);
contentalign: middlecenter;
}
element [id=atom(undockbutton)][keyfocused]
{
content: rcbmp(122,3,#FF00FF,35rp,35rp,0,0);
contentalign: middlecenter;
}/*至此.修改无效*/
</style>
<style resid=leftpanelss>/*此开始为左画面*/
element
{
background: argb(0,0,0,0);
fontface: rcstr(1);/* 指定左画面使用的字体依字符串值资源编号1设定显示,此例为arial字体*/
}
element [id=atom(product)]
{
animation: alpha | s | mediumslow;/* 指定Logo图片以透明动画显示,速度为中慢
*/
}
element [id=atom(leftpanel)]
{
foreground: rgb(239,247,255);
}
element [id=atom(welcome)]
{
fontstyle: italic;/* 指定欢迎文字样式为斜体
*/
fontsize: rcint(44) pt;/* 增加指定文字样式为粗体
*/
fontweight: bold;
padding: rect(0rp,0rp,22rp,0);/* 向右增加22pix空间
*/
contentalign: topright;/* 指定文字置于右上(此例左画面指定位置为中间,因此实际为中间右上*/
}
element [id=atom(welcomeshadow)]
{
foreground: rgb(49,81,181);
fontstyle: italic;
fontsize: rcint(44) pt;
fontweight: bold;
padding: rect(2rp,3rp,20rp,0);/* 指定欢迎文字阴影增加空间为左2上3右20下0
*/
contentalign: topright;/* 显示出来的效果为向右2向下3偏移的阴影*/
}/*至此无需修改*/
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(115,146,231);/*至此,有待高手提点*/ }
viewer
{
layoutpos: nineclient;
}
thumb
{
background: rcbmp(111,6,#FF00FF,0,0,1,0);/*Scroll图片及参数*/
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);/*至此*/
}
repeatbutton [id=atom(pageup)]/*此开始,无需修改*/
{
background: rcbmp(130,6,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(pagedown)]
{
background: rcbmp(131,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(0,0,0);/*字体颜色*/
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)]
{
borderthickness: rect(5,5,5,5);
background: argb(0,0,0,0);
bordercolor: argb(0,255,255,255);
margin: rect(0,0,7rp,0);
animation: alpha | log | fast;
alpha: 96;
}
element [id=atom(pictureframe)] [mousefocused]
{
background: rcbmp(113,7,#FF00FF,128rp,128rp,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,128rp,128rp,1,0);
borderthickness: rect(5,5,5,5);
margin: rect(0,0,7rp,0);
alpha: 255;
}
element [id=atom(username)]
{
foreground: rgb(255,255,255);
contentalign: endellipsis;/* 设置账户名向左对齐,账户名后加空白直到最后,以让密码从下一行开始显示*/
}
button [class="status"]/*以下为使用者系统状态(例如:有几个程序正在运行)各项显示设置*/
{
background: argb(0,0,0,0);
foreground: rgb(255,255,255);
fontsize: rcint(46) pt;
contentalign: wrapleft;
}
button [class="status"][mousefocused]
{
foreground: rgb(0,0,0);
fontstyle: underline;
}
button [class="status"][keyfocused]
{
foreground: rgb(0,0,0);
fontstyle: underline;
}
button [class="status"][selected]
{
foreground: rgb(255,255,255);
fontsize: rcint(46) pt;
fontweight: bold;
}
</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(0,0,0);
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);/* 账户背景在鼠标选取时显示图片112
*/
}
element [id=atom(pictureframe)]/* 设置账户头像底图
*/
{
background: rcbmp(113,7,#FF00FF,128rp,128rp,1,0);
borderthickness: rect(5,5,5,5);
margin: rect(0,0,7rp,0);/* 设置账户头像底图右侧距离账户名及密码7pix
*/
}
element [id=atom(username)]
{
foreground: rgb(255,255,255);
contentalign: endellipsis;
}
button [class="status"]
{
background: argb(0,0,0,0);
foreground: rgb(255,255,255);
fontsize: rcint(46) pt;
contentalign: wrapleft;
}
button [class="status"][mousefocused]
{
fontstyle: underline;
}
button [class="status"][keyfocused]
{
fontstyle: underline;
}
button [class="status"][selected]
{
foreground: rgb(255,255,255);
fontsize: rcint(46) pt;
fontweight: bold;
}
</style><style resid=passwordpaness>/*定义密码域*/
element
{
background: argb(0,0,0,0);
}
element [id=atom(passwordpanelayer)]
{
padding: rect(71rp,30rp,0,0);/* 设置密码区左方71pix空白,避免和账户头像重迭
*/
}
element [id=atom(instruct)]/* 设置密码输入框上面的文字(此例为Type Your Password)
*/
{
fontface: rcstr(48);/*密码字体*/
fontsize: rcint(47) pt;
foreground: rgb(255,255,255);
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;/*密码默认显示为圆点 如改为passwordcharacter: 207; */
fontface: "segoe ui";/*改变字体可更换密码显示字符 如改为fontface: "webdings";*/
fontsize: 11pt;/*改变符号显示大小*/
}
button [id=atom(go)]/*默认确认按键图片*/ {
margin: rect(0,0,0,0);
content: rcbmp(103,3,#FF00FF,0rp,0rp,0,0);/*进入按搖参数*/
padding: rect(0,0,0,0);
}
button [id=atom(go)][keyfocused]/*选中的确认按键图片*/
{
content: rcbmp(104,3,#FF00FF,0rp,0rp,0,0);/*确认按键参数*/
}
button [id=atom(info)]/*默认提示按键参数*/
{
margin: rect(5rp,0,0,0);
content: rcbmp(105,3,#FF00FF,0rp,0rp,0,0);
}
button [id=atom(info)][keyfocused]/*选中的提示按键参数*/ {
content: rcbmp(106,3,#FF00FF,0rp,0rp,0,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,6,#FF00FF,0,0,1,0);
content: dtb(handlemap(1), 9, 1);
contentalign: middlecenter;
}
thumb [mousefocused]
{
background: rcbmp(111,6,#FF00FF,0,0,1,0);
content: dtb(handlemap(1), 9, 2);
}
thumb [captured]
{
background: rcbmp(111,6,#FF00FF,0,0,1,0);
content: dtb(handlemap(1), 9, 3);
}
repeatbutton [id=atom(lineup)]
{
background: rcbmp(110,6,#FF00FF,0,0,1,0);
width: sysmetric(2);
height: sysmetric(20);
}
repeatbutton [id=atom(lineup)][mousefocused]
{
background: rcbmp(110,6,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(lineup)][pressed]
{
background: rcbmp(110,6,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(linedown)]
{
background: rcbmp(109,6,#FF00FF,0,0,1,0);
width: sysmetric(2);
height: sysmetric(20);
}
repeatbutton [id=atom(linedown)][mousefocused]
{
background: rcbmp(109,6,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(linedown)][pressed]
{
background: rcbmp(109,6,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(pageup)]
{
background: rcbmp(130,6,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(pageup)][mousefocused]
{
background: rcbmp(130,6,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(pageup)][pressed]
{
background: rcbmp(130,6,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(pagedown)]
{
background: rcbmp(131,6,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(pagedown)][mousefocused]
{
background: rcbmp(131,6,#FF00FF,0,0,1,0);
}
repeatbutton [id=atom(pagedown)][pressed]
{
background: rcbmp(131,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,2,2,2) layoutpos=client >
<element id=atom(splash) sheet=styleref(splashss) layout=borderlayout() layoutpos=client height=502rp width=620rp>
<element sheet=styleref(toppanelss) id=atom(toppanel) height=142rp layoutpos=top/>
<element sheet=styleref(toppanelss) id=atom(toppanel) width=139rp layoutpos=left/>
<element sheet=styleref(toppanelss) id=atom(toppanel) width=139rp 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) layout=verticalflowlayout(0,2,2,2) layoutpos=bottom>
<button id=atom(power) layout=verticalflowlayout(0,2,2,2) layoutpos=bottom accessible=true accRole=43 accName=rcstr(11)>/*读字符串11,可以把英文改成中文*/
<element id=atom(powerbutton)/>
<element contentalign=middlecenter 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/>/*消息正文,置于右方,由右算起325pix开始显示*/
<element id=atom(logoarea) layout=verticalflowlayout(0,3,3,2)>/* logo组件垂直排列(指下面的product.help) */
<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)/>/* 登入出讯息由中间算起x开始显示,并加右方x的空间距离 0为不显示*/
</element>
<element id=atom(msgarea) layout=verticalflowlayout(0,0,0,2) >/*欢迎讯息组件(包括Welcome及阴影)以填充模式(填Welcome文字)垂直排列 */
<element layout=filllayout() width=0>/*填充宽度0为不显示*/
<element id=atom(welcomeshadow) content=rcstr(7)/>/* 填充文字阴影依字符串值7内容显示(此例为Welcome)
*/
<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=100rp layoutpos=top>/*用户图片及用户名占用的高度100及底图位置*/
<element id=atom(userpane) layout=borderlayout() layoutpos=top>
<element id=atom(pictureframe0) layout=verticalflowlayout(0,2,2) layoutpos=bottom>/* 在坐标轴x、y位置，单位为像素（pixel）* /
<element id=atom(pictureframe) layout=flowlayout(0,2,2) layoutpos=top width=64rp height=64rp>/*用户图片大小*/
<element id=atom(picture) />
</element>
<element id=atom(username) layoutpos=bottom/>/*用户名显示位置*/
<button id=atom(status0) class="status" layoutpos=none/>/*使用者系统状态显示位置不作设定(依组件定义运行) */
<button id=atom(status1) class="status" layoutpos=none/>
</element>
</element>
</element>
</logonaccount>
<element resid=passwordpanel id=atom(passwordpanelayer) sheet=styleref(passwordpaness) layoutpos=client layout=borderlayout() height=160rp>/*密码图片及提示输入密码的字符串占用的高度*/
<element layout=borderlayout() layoutpos=bottom>
<edit id=atom(password) layoutpos=left width=195rp/>/*密码框大小*/
<element id=atom(keyboard) layoutpos=none/>
<button id=atom(go) layoutpos=left accessible=true accRole=43 accName= rcstr(100)/>/* 进入按键设置为可执行,按下时显示字符串值100
*/
<button id=atom(info) layoutpos=left accessible=true accRole=43 accName= rcstr(13)/>/* 密码提示键设置为可执行,按下时显示字符串值13*/
</element>
<element id=atom(instruct) layoutpos=bottom content=rcstr(6)/>
</element>/*密码框上方文字依字符串值6显示*/
为方便初学者学习，特别贴了一个实例
步骤1。先准备被修改文件logonui.exe 附件1
步骤2。打开－＞导入常更换位 图100、102、103、104、105、106、107、108、109、110、121、128－＞方法如图３
步骤3。修改脚本 调整位置 图片大小等等……
为了赶上最近透明主题的潮流，特别再贴一个实例２
步骤1。先准备被修改文件logonui.exe 附件１（logonui.rar）
步骤2。打开－＞导入常更换位图100、102做好透明工作、103、104、105、106、107、108、109、110、121、128只做一张BMP加透明通道。给大家上传一个附件２ 一二八.rar ( 1.24k )
（位图100用PS制作一张看上去基本完成的背景图，如下用PS做，基本图层玻璃效果，图层卡通图，图层密码框+阴影效果，或者加入新玩意等等如Microsofe Windows xp图层，最后一步把所有图层合并为以下背景图。 |
发表于 2007-1-6 15:08:29
