[ plurk css ] 新的表情符號選單 @ 金羽銀華

今天噗浪多了一些新功能，CSS的部份，原本的表情選單項目已經不適用，現在改成這樣囉～

新的表情符號選單

比原本的噗浪預設樣式更為清爽簡潔，但，如果我們想更自訂它的風格，或是修正原先套用版型時這部份的CSS，就需要瞭解新的自訂div項目了。

/*======================== 表情選單 ========================*/

#emoticon_selecter #emoticons_tabs, /*選項標籤列*/
#emoticon_selecter #emoticons_tabs li
{
   background:none !important;
   border:0 !important;
   font-size:12px !important;
}

#emoticon_selecter .upper_arrow   /*向上箭頭符號*/
{
   background-image:none !important; /*拿掉背景圖*/
}

#emoticons_tabs ul li a {color:#aaa !important;font-weight:normal !important;} /*連結*/
#emoticons_tabs ul li.current a {color:#333 !important;} /*正選標籤的連結*/

#emoticon_selecter a:hover, /*滑鼠移至效果*/
#emoticons_tabs ul li a:hover
{
   color:#111 !important;
}

使用以上範例中的語法，可以呈現更為俐落的風格：

更改css.png

搭配自己的噗版樣式試著修改看看吧～讓每次選表情時心情更愉悅～

另外，今天噗浪終於推出了「備份功能」，就在個人檔案 -> 編輯裡面：

噗浪有備份功能囉～ .png

有需要的朋友可以試試看囉～ ^ ^

補充：

有噗友提到在統計項目中也有出現"備份訊息"的連結，感覺很突兀，希望隱藏它，詢問是否有解決的語法？

/*隱藏統計項目中的備份訊息連結*/
#plurks_count a { display : none; }

同樣有此困擾的朋友，也可以使用看看。 [ 後來噗浪已拿掉這個連結 ]

2011-07-29 更新：

噗浪又改了表情選單的預設值，導致有使用外掛表情的功能版面會跑掉～ = ="

決定等噗改好它預設的CSS後，穩定後，再來處理～ XD

2011-07-30 更新：

加上這段語法可以讓版面恢復正常：

#emoticon_selecter #emoticons_tabs ul /*顯示所有選單*/
{
overflow:visible !important;
}

2011-07-31 補充：

目前噗浪第二版的預設值（換成藍綠色系連結），有安裝瀏覽器附加元件表情外掛的話會亂掉，像這樣：

原本預設2.png

選項表單的部份似乎預設只能出現一行...超過的話就會與下面的表情圖重疊到...

然後下方的表情圖區塊也會有超出部份的情況......

所以，又重新研究了一下噗浪改了哪些地方，補上較完整的修改語法，請參考：

/*======================== 表情選單 ========================*/

#emoticon_selecter   /*選單背景*/
{
   border-color:#ccc !important;
}
#emoticon_selecter #emoticons_tabs ul /*顯示所有選單*/
{
   overflow:visible !important;
}
#emoticons_show /*圖片背景*/
{
   padding:4px;
   padding-top:10px!important;
   border-top:1px dotted #ddd !important;
   width:422px !important; /*讓下方圖片欄位對齊*/
}
#emoticon_selecter img, #emoticon_selecter a:hover img {border:0 !important;}
#emoticon_selecter #emoticons_tabs {padding:6px 0px 0 !important; }
#emoticon_selecter #emoticons_tabs
{
   background:none !important;
   border-color:#fff !important;
}
#emoticon_selecter #emoticons_tabs li /*連結背景*/
{
   background:#ddd !important;
   border-color:#ccc !important;
   font-size:90% !important;
}
#emoticon_selecter #emoticons_tabs li.current /*正選連結背景*/
{
   background:#ccc !important;
}
#emoticons_tabs ul li a   /*連結*/
{
   color:#a2a2a2 !important; /*預設值是8099ad*/
   font-weight:normal !important;
}
#emoticons_tabs ul li.current a /*正選連結*/
{
   color:#313233 !important;   /*預設值是133d5f*/
}