|
主旨: 使用 Tweak UI PowerToy 模組 自訂MSN Spaces介面
- 以前只能使用固定幾個主題來美化你的MSN Spaces,變化有限,現在多了Tweak UI PowerToy就能簡單的自定你想要的背景顏色、背景圖位置、字體顏色、模組背景、模組外框囉 :)
- 背景圖片、模組標題 目前還不能設定,有點可惜... :(
Step by Step 教學:
- 先登入到編輯模式(編輯您的分享空間)裡,
在網址列的網誌後方加上&powertoy=tweakomatic,按下Enter重新讀取網頁
 PS.不是網誌編輯模式
- 網頁重新讀取完畢之後,按[自訂]→[模組]→[建立PowerToy: Tweak UI]→[按儲存],新增模組完畢..^^

- 接下來你就能看到Tweak UI 模組,此模組在一般使用著瀏覽模式不會顯示出來;設定完畢之後不要忘記儲存囉....^^

-
要怎麼設定?

上圖是詳細的相關位置說明圖,有關顏色的空格要輸入16位元碼,可以使用.線上配色工具收集裡面的任一種選色器把色碼輸入就行了.
背景顏色:以分內部和外部,輸入色碼就行了
背景圖片:依top (上)、btm(下)、left(左)、right(右) 、cntr(中) 方向有9種位置可以選擇;重複方式有repeat(重複)、no-repeat(不重複)、repeat-x(只重複水平方向)、repeat-y(只重複垂直方向)可以選擇;Display選擇hidden則可以把背景圖隱藏.
字體顏色:分為一般文字和連結文字,輸入色碼就行了
模組背景:可以設定背景顏色,當然網誌背景也會使用此設定值;透明度是讓各模組加上透明濾鏡,透明度越大則越不透明,像最大值100就是不透明的意思.
模組外框:可已設定外框寬度(單位:px)、外框樣式(很多種)、和外框顏色(輸入色碼就行了)
外框樣式種類:
- 一般常用線條 : solid(實線) dotted(點) dashed(虛線) double(雙線)
- 立體效果線條 groove(立體內凸框) ridge(立體浮凸框) inset(凹框) win-inset(凹框2) outset(凸框)
- 如何回覆原來主題設定?
Ans:請把有空格的設定值留白並把有向下選單的選default,最後按Save儲存就能變原來主題的介面.
①DIV:未设置宽度、高度、溢出;溢出默认为可见,宽度和高度自动调整 |
|
这是测试文字
这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 |
这是测试文字
这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 |
这是测试文字
这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 |
②DIV:设置宽度、高度,未设置溢出;溢出默认为可见,高度设置无效并自动调整 |
③DIV:设置宽度、高度,溢出为滚动;始终显示滚动条 |
④DIV:设置宽度、高度,溢出为自动;根据内容多少决定是否显示滚动条 |
|
这是测试文字
这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 |
这是测试文字
这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 | |
这是测试文字
这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 | |
⑤DIV:设置宽度、高度,溢出为自动,假透明滚动条样式1;根据内容多少决定是否显示滚动条,利用颜色实现假透明效果1,适用于文字 |
⑥Table/DIV:设置宽度、高度,溢出为自动,背景图片、假透明滚动条样式1;根据内容多少决定是否显示滚动条,利用颜色实现假透明效果1,不适用于背景图片 |
⑦Table/DIV:设置宽度、高度,溢出为自动,背景图片、真透明滚动条样式1;根据内容多少决定是否显示滚动条,利用滤镜实现真透明效果1,适用于文字和背景图片 |
|
这是测试文字
这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 |
这是测试文字
这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 | |
这是测试文字
这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 | |
⑧DIV:设置宽度、高度,溢出为自动,假透明滚动条样式2;根据内容多少决定是否显示滚动条,利用颜色实现假透明效果2,适用于文字 |
⑨Table/DIV:设置宽度、高度,溢出为自动,背景图片、假透明滚动条样式2;根据内容多少决定是否显示滚动条,利用颜色实现假透明效果2,不适用于背景图片 |
⑩Table/DIV:设置宽度、高度,溢出为自动,背景图片、真透明滚动条样式2;根据内容多少决定是否显示滚动条,利用滤镜实现真透明效果2,适用于文字和背景图片 |
|
这是测试文字
这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 |
这是测试文字
这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 |
这是测试文字
这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 | |
⑾DIV:增加“word-break:keep-all;”属性,即可实现横向滚动条。 |
⑿DIV/DIV:嵌入另外一个DIV,并且对他们设置“DIRECTION”属性,即可实现左侧滚动条。 |
⒀Table/DIV/DIV:左侧真透明滚动条和背景图片的综合运用。 |
【HTML代码】
① <DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; BORDER-LEFT: 1px solid; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid"> <P>这是测试文字</P> <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
② <DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px"> <P>这是测试文字</P> <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
③ <DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: scroll; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px"> <P>这是测试文字</P> <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
④ <DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px"> <P>这是测试文字</P> <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
⑤ <DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #216dad; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #216dad; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px"> <P>这是测试文字</P> <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
⑥ <TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw border=0> <TBODY> <TR> <TD> <DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #216dad; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #216dad; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px"> <P>这是测试文字</P> <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>
⑦ <TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw border=0> <TBODY> <TR> <TD> <DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; FILTER: chroma(COLOR=#ffffff); SCROLLBAR-HIGHLIGHT-COLOR: #216dad; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #216dad; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px"> <P>这是测试文字</P> <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>
⑧ <DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px"> <P>这是测试文字</P> <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
⑨ <TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw border=0> <TBODY> <TR> <TD> <DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px"> <P>这是测试文字</P> <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>
⑩ <TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw border=0> <TBODY> <TR> <TD> <DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; FILTER: chroma(COLOR=#ffffff); SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px"> <P>这是测试文字</P> <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>
⑾ <DIV style="word-break:keep-all;BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px"> <P>这是测试文字</P> <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
⑿ <DIV style="DIRECTION: rtl;BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px"> <DIV style="DIRECTION: ltr;"> <P>这是测试文字</P> <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></DIV>
⒀ <TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw border=0> <TBODY> <TR> <TD> <DIV style="DIRECTION: rtl;BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; FILTER: chroma(COLOR=#ffffff); SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px"> <DIV style="DIRECTION: ltr"><P>这是测试文字</P> <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></DIV></TD></TR></TBODY></TABLE>
【说明】
v 必须在html编辑状态下编辑代码。
v 简单的文本框是通过DIV实现的,包含背景图片的文本框是通过将DIV嵌入到Table中实现的。
v 主要通过对DIV的Style属性来控制样式,主要设置如下:
overflow(溢出控制):visible(默认,可见)、auto(自动)、scroll(显示滚动条);
width(宽度):数值;
height(高度):数值;
color(字体颜色):色彩代码;
font-size(字体大小):数值;
line-height(行高):数值;
border(边框):宽度、类型和颜色,类型主要支持以下几种:none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset;
font-weight(字体粗细):normal、bold、bolder、lighter;
font-family(字体类型):Arial、Tahoma、Verdana、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆;
background(背景颜色):色彩代码;
scrollbar-base-color,scrollbar-face-color,scrollbar-track-color,scrollbar-darkshadow-color,scrollbar-highlight-color,scrollbar-shadow-color,scrollbar-3dlight-color,scrollbar-arrow-color(滚动条各部分的颜色):色彩代码;
filter:chroma(COLOR=转换成透明的颜色)(chroma过滤器):色彩代码,该颜色将转换成透明效果;
word-break(断字):normal(默认,正常断字)、keep-all(严格不断字)、break-all(严格断字);
direction(文字方向):ltr(默认,从左向右)、rtl(从右向左)。
v 辅助工具
在线滚动条配色器:通过本工具可以方便地在线设置滚动条样式。地址1 地址2
颜色采集器:通过本工具可以方便地获取屏幕显示的任何颜色。下载颜色采集器1.05
|