版權所有+保留所有權利_+_+_
© 2010-2018 Created by 如我協力創意工作室 Be Myself Inc.
**版權說明**
-- 我們提供與設計的噗版CSS內容僅供個人自用,請勿改製再分享或用於商業用途 --
((請勿將全部或部份內容直接取用當作自己的設計))
-- 除了個人噗版自用外(修改請註明原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*/
}

 

使用後會像這樣:

淺色表格版.png  

可以自行調整表格與連結的顏色代碼 ^ ^

文章標籤
創作者介紹
創作者 M6 的頭像
M6

金羽銀華

M6 發表在 痞客邦 留言(18) 人氣()


留言列表 (18)

發表留言
  • 星流
  • 您好!

    關於新的表情符號,我用了firefox瀏覽器中的一個附加元件[Greasemonkey],使得表情符號會多出很多種,以前使用您製作的面板表情符號都會乖乖變成排列好的模樣,但改版後雖然也變成奇怪的樣子,但是我把上面的css貼上,卻出現了更奇怪的樣子……

    以下為截圖網址
    http://i808.photobucket.com/albums/zz5/v880221/8.png

    請告訴我該如何修改可以嗎?新的css樣式表實在看不太懂不知道該如何改起呢……
  • 這是因為噗浪預設的項目及數值已經變更了,
    所以請先完全清除原本/*表情選單*/這段自訂語法,
    再使用上面的語法來作修改嘗試喔~

    M6 於 2011/07/27 17:33 回覆

  • 星流
  • 那個不好意思我又來了……

    剛剛照您的說法刪除了原本的自定語法,現在變成這個樣子了……
    http://i808.photobucket.com/albums/zz5/v880221/9.png

    表情符號跑出來了……請問這樣該如何修改呢QAQ

    自己不知道該從何修改起只好又來問了不好意思……


    另外噗浪突然變得有點怪怪的……我記得在還沒重新整理之前沒有這東西的……
    http://i808.photobucket.com/albums/zz5/v880221/10.png
    這兩條捲軸不是在網頁上,而且拉的時候河道以及控制台都會移動,但背景卻不會動,還有就是,滑鼠移到浪上的噗的瞬間,畫面的背景圖會突然下降,這樣有點造成困擾了……是不是噗浪又改版了還是我的電腦出問題?
  • 咦,怎會造成整個版面亂掉?
    剛剛看其他噗友的噗,似乎是因為噗浪新推出的改暱稱顏色的功能,套用的話會動到整體預設的CSS,所以跟原本自訂佈景的CSS衝突到......
    不過我並未使用該功能,而表情選單也是正常的,所以不確定是否真是這個原因。

    另外,暱稱顏色的改變如果要讓它顯示出來的話,要將噗版CSS中強制設定的顏色語法拿掉才行,請移除這段:

    /*-----噗上的人名-----*/

    .td_qual span a,
    .td_qual span a:hover {}


    以及修改或移除這部份的設定:

    /*-----原噗者的回應-----*/

    .list .highlight_owner .td_qual a /*暱稱*/
    {
    color:# !important;
    text-decoration:none;
    }

    M6 於 2011/07/27 19:25 回覆

  • 星流
  • 您好

    我聽說暱稱改變顏色的功能已經取消了,而且那個時候我河道上的暱稱並沒有出現顏色變化。我已經照您說的修改人名以及原噗者的回應的css,但是我多出來的捲軸以及背景會跳還有表情符號表仍未改變,而且河道上的暱稱還變成了很詭異的顏色……

    可以請問這些又該如何修改呢……?

    附上我自己的噗浪 http://www.plurk.com/v880221

    謝謝!
  • 功能雖然取消了,但原本造成的改變仍是在,所以請再重新套用一次原噗版試試看?
    記得先把目前的CSS備份下來喔!

    M6 於 2011/07/27 20:11 回覆

  • 星流
  • 您好

    原本想說等晚一點等噗浪穩定一點後再測試看看,結果已經換回原本的面板的css了,只有修改表情符號,但全部都沒有變回來還是維持奇怪的樣子……
    1.多出捲軸
    2.表情符號突出
    3.碰河道的噗時背景會跳
    整理下來還是這三個問題……請問我還需要修改上面說的人名以及回應那些設定嗎?又或者該如何做其他修改呢?

    謝謝
  • 我剛也去套用了原噗版,
    看來應該是噗浪今天改動了原本的CSS預設值,
    所以這類版面位置會跑掉,
    需要花點時間研究噗浪改了哪些地方,
    等明天有空時我會來研究看看~
    找出解答後會再回覆~

    [ 2011/7/28 ] 更新:
    加上這段語法試試看~
    body
    {
    background:none !important;
    width:100% !important;
    height:800px !important;
    overflow-x:hidden !important;
    }

    捲軸應該就會消失了。
    版面也會恢復正常。



    M6 於 2011/07/28 13:45 回覆

  • 星流
  • 非常謝謝您,版面問題已經解決了,可是表情符號還是一樣會突出來……用了上面的語法加上Greasemonkey還是像我第一個貼的圖片一樣旁邊會突出來,請問該如何解決呢?
  • 加上這個試試?
    #emoticons_show
    {
    width:422px !important;
    }

    M6 於 2011/07/28 15:58 回覆

  • 星流
  • 已經全部解決了!大大謝謝!!^^
  • YA!
    也謝謝你提出疑問,讓我找出解決方案囉~ ^ ^ 這樣以後的版面就會避免掉這些錯誤了~
    謝啦~

    M6 於 2011/07/28 23:43 回覆

  • 星流
  • 大大您好我又來了……好像噗浪又改版了……
    我今天打開來看發現表情符號它變成這樣……
    http://i808.photobucket.com/albums/zz5/v880221/11.png

    這……噗浪到底最近要改多久而且聽說暱稱又變成彩色的了,是因為這個原因才讓表情符號變成這樣的嗎?附帶一提版面沒有亂掉

    大大不好意思又要麻煩您了……
  • ... 我也發現了... 而且,就算用噗浪原本預設的,不自訂語法,表情那區有加外掛的話版面還是會跑掉......
    可能噗浪本身也還在調整嘗試吧... = ="
    只好等等再看了~ ^ ^

    等這部份官方的css穩定下來 XD


    [ 2011-07-30 ] 更新:
    我去看了目前預設的CSS內容... 似乎官方沒發現到這個問題...不知何時才會修正...
    所以自己研究了一下~ 加上下面這行語法應該就會恢復正常了~

    #emoticon_selecter #emoticons_tabs ul
    {
    overflow:visible !important;
    }

    試試看 ^ ^

    M6 於 2011/07/30 09:51 回覆

  • 默默
  • 不好意思,想請問一下..我按照這篇的語法po在CSS裡面...
    可是常用表情/更多表情/Karma100後面的背景仍然是有顯示的...
    不知道該怎麼改掉耶><...

    #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:#eeeeee !important;font-weight:normal !important;} /*連結*/
    #emoticons_tabs ul li.current a {color:#000000 !important;} /*正選標籤的連結*/

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

    我後來是改成這樣...可是不知道為什麼字後面的背景沒有消除...
  • 加上這個試試:
    #emoticon_selecter /*選單背景*/
    {
    background:none !important;
    border:0 !important;
    }

    M6 於 2011/08/01 22:12 回覆

  • 默默
  • 我加了
    #emoticon_selecter /*選單背景*/
    {
    background:none !important;
    border:0 !important;
    }
    之後..變成表情圖案的那邊的背景變成透明了@@...
  • #emoticons_show /*圖片背景*/
    {
    background:#fff !important;
    }

    加上這個。

    M6 於 2011/08/03 20:03 回覆

  • 默默
  • 不知道為什麼..完全沒有變色耶>x<...改成透明也沒有變透明..
  • 可能是語法中有其它部份重複影響到?
    方便的話可以截圖給我,或是提供你的噗浪網址,看看有哪裡需要修正喔~

    M6 於 2011/08/05 07:59 回覆

  • 陳喬子
  • 您好。
    我想請問說,因為有些樣板的表情圖片滑鼠移過去換旋轉變大
    要怎麼把那個設定用掉呢?
    因為每次滑鼠移到表情圖上面我畫面會跳動QQ
  • 刪除
    /*讓表情圖示轉圈圈*/
    一段即可

    M6 於 2012/01/18 20:21 回覆

  • 卡卡
  • 推一下 不錯的文章 最近剛好想修一下我的佈景
  • luzunya
  • 您好,我有在我的噗浪加入了自訂表情的外掛(能新增很多表情符號的),安裝了之後噗浪上沒有被我加入自訂符號的表情圖案都會有虛線的框框。
    另外不管噗浪的表情符號(沒有新增在我的圖庫的)還是還是我自己圖庫的表情符號,只要滑鼠移過去就會有橘色框框(如附圖→http://images.plurk.com/699c06910fb9a67250c0a6b01a86e531.jpg

    請問有什麼方法可以把虛線跟橘色框框改掉呢>"<
  • 這是安裝外掛後出現的嗎?如果是,那應該是外掛程式中的css指定,請洽詢外掛程式的設計者喔。

    M6 於 2012/08/25 18:21 回覆

  • 神井氷
  • 你好~不好意思想請問一下
    我最近換了新版面,但連續使用表情符號的時候中間變得會多出空白間隔(像這樣→http://i.imgur.com/sJn3w.png)
    請問該修改哪邊語法把他取消掉呢?
  • 要看語法內容才比較清楚喔 ^ ^

    M6 於 2012/12/02 14:08 回覆

  • 神井氷
  • 我的語法→ http://paste.plurk.com/show/1403710/
    也是從您這邊抓的有做一點小修改
    麻煩您幫忙看一下了,謝謝喔QQ!!!!
  • 把這語法刪去試試?
    #emoticon_selecter img { padding:1px; }

    M6 於 2012/12/02 23:02 回覆

  • 神井氷
  • 整段刪掉還是一樣有空格耶@@
  • 那應該是字距的影響,把 河道上的噗 段落中
    .plurk_cnt 跟 .plurk_box .plurk_cnt 兩個項目裡的 letter-spacing:.1em;
    這行刪去試試看?

    M6 於 2012/12/03 09:11 回覆

  • 神井氷
  • 刪掉之後已經解決了! 非常感謝>D<!!!!!
  • ^W^

    M6 於 2012/12/08 09:46 回覆

  • 悄悄話