金羽銀華

噗浪預設的功能視窗與說明小視窗，有時和噗版整體的背景色顯得不太協調，這時就需要用自訂CSS來改變一下視窗的外觀樣式～

/*------功能視窗樣式------*/

[ 0 原本的功能視窗 ]

[ 1 改變標題與內框的顏色 ]

語法：

/*標題列*/
.GB_Window .header td.caption,
.GB_Window .close
{
    color:#ddd; /*字顏色*/
    background:#333 !important; /*背景色*/
}

/*內框線*/
.GB_Window .header
{
    border:1px solid #333 !important;
}
.GB_Window .content
{
    border-color:#333 !important;
}

[ 2 進一步改變外框的顏色 ]

語法：

/*外框*/
.GB_Window
{
    background:rgba(0,0,0,0.3) !important;
    border:1px solid #333;
}

[ 3 更換標題列的關閉圖示 ]

語法：

/*更換標題列箭頭*/
.GB_Window .close span
{
    background:url(放圖片網址，適合尺寸14px*14px) no-repeat 0 0;
    border:none!important;
    width:18px;
    margin-right:4px;
}

上傳到噗浪的圖片，點開後的大圖視窗，也可以一併更改它的樣式：

/*------彈出視窗樣式------*/

[ 0 原本彈出視窗的樣式 ]

[ 1 更改外框 ]

語法：

/*彈出視窗*/
.GB_Gallery .iframe_holder
{
    background:rgba(0,0,0,0.3) !important;
    border:1px solid #333 !important;
}

[ 2 更換關閉圖示 ]

語法：

/*更換關閉圖示*/
img[src="http://www.plurk.com/static/greybox/w_close1.gif"]  /*隱藏原本圖示*/

{filter:alpha(opacity=0); opacity:0; zoom:1;}

.GB_Gallery .content
{
    background:url(放圖片網址，適合尺寸14px*14px) right 5px no-repeat !important;
}

而點開浪上的頭貼，會出現的說明小視窗，也可以改變它預設的樣子：

/*------浪上噗友小視窗樣式------*/

[ 0 原本的浪上噗友小視窗 ]

(1) 點開自己的頭貼：

(2) 點開噗友的頭貼：

噗友的頭貼會多出 傳送私人訊息、加入黑名單與舉報濫用等功能列，其中，醒目紅色底的舉報濫用可以換成其他顏色：

[ 1 舉報濫用列 ]

語法：

.AmiMenu.info_menu .block   /*舉報濫用*/
{
    background:#333 !important;
    border-color:#333 !important;
    color:#ddd !important;  
}

需要的話，也可以將整體視窗顏色改成和噗背景更合搭的顏色：

[ 2 整體視窗 ]

語法：

.AmiMenu.info_menu,
.AmiMenu.info_menu .separator
{
    background:#000 !important;
    border-color:#000 !important;
    color:#ccc !important;   
}

.AmiMenu td
{
    color:#ccc !important;
}

[ 3 滑鼠移至效果 ]

語法：

.AmiMenu.info_menu td.on,
.AmiMenu.info_menu .user_info.on
{
    background:#666 !important;
    color:#222 !important;
}

[ 4 更換上下箭頭圖示 ]

語法：

.cmp_tooltips-down /*向下箭頭*/
{
    background: url(放圖片網址，適合尺寸20px*17px);
}
.cmp_tooltips-up  /*向上箭頭*/
{
    background: url(放圖片網址，適合尺寸20px*17px);
}

當滑鼠移至主控台資訊區時，會出現的輔助說明小視窗，也可以自訂樣式：

/*------輔助說明小視窗樣式------*/

[ 0 原本的輔助說明小視窗 ]

[ 1 改變背景與框線色 ]

語法：

.tooltip_cnt
{
    background:#333 !important;
    color:#ddd !important;
}

[ 2 隱藏背景箭頭圖片 ]

語法：

.AmiTT_main {background:none !important; border:0 !important;}

試試看，讓整體視窗的呈現都和你的噗版配色合搭吧～