版權所有+保留所有權利_+_+_
© 2010-2015 Created by 如我協力創意工作室 Be Myself Inc.
**版權說明**
-- 我們提供與設計的噗版CSS內容僅供個人自用,請勿改製再分享或用於商業用途 --
((請勿將全部或部份內容直接取用當作自己的設計))
-- 除了個人噗版自用外(修改請註明原CSS碼出處),其它使用方式均未授權,還請務必注意,勿侵權喔~--

原本的分享與表情圖示區,多出了「每日一照」的功能選項後,需要做修正的地方如下:

每日一照  

多出的選項導致原本的表情選單跑位,需要調整 .icons_holder 段落中的數值,將原本的 18px 改成 48px。

改位置  

改好位置後,表情選單就能正常顯示。

如果你用不到「每日一照」這個功能,也可以直接把它隱藏起來。語法:

/*隱藏每日一照*/
.cmp_webcamp_off, .cmp_webcamp_on { display : none !important; }
 
這樣原本的表情選單就會恢復原樣。如下:
隱藏每日一照  
 
或是可以換成一致的圖示,讓選單列呈現一致:
更改每日一照  
 
使用語法:
.cmp_webcamp_off, .cmp_webcamp_on
{
background: url(這邊放圖片網址) no-repeat scroll top left;
width: 16px; height: 16px;
}
然後改 .icons_holder 段落中的數值,將原本的 18px 改成 40px。
 
相關的高度與寬度數值,需要依據所使用的圖片大小作調整。
 
 
如果所使用的噗版較早期出品,可能噗浪預設的表情符號笑臉會跑出來,記得更新這段隱藏語法:
img[src="http://assets.plurk.com/static/icons/emoticon_mini_off.png"],
img[src="http://assets.plurk.com/static/icons/emoticon_mini_on.png"],
img[src="http://assets.plurk.com/static/icons/emoticon_off.png"],
img[src="http://assets.plurk.com/static/icons/emoticon_on.png"]
{
filter: alpha(opacity=0); opacity: 0; zoom:1;
}
 
附上整段更正後最新的分享與表情選項列的語法:
/*分享與表情選項圖片*/
.cmp_media_off, .cmp_media_on
{
background: url(放分享資訊圖示網址) no-repeat scroll top left;
width: 12px; height: 16px;
}
.cmp_media_mini_off, .cmp_media_mini_on
{
background: url(放分享資訊圖示網址) no-repeat scroll top left;
width: 12px; height: 16px;
}
.cmp_webcamp_off, .cmp_webcamp_on
{
background: url(放每日一照圖示網址) no-repeat scroll top left;
width: 16px; height: 16px;
}
img[src="http://assets.plurk.com/static/icons/emoticon_mini_off.png"],
img[src="http://assets.plurk.com/static/icons/emoticon_mini_on.png"],
img[src="http://assets.plurk.com/static/icons/emoticon_off.png"],
img[src="http://assets.plurk.com/static/icons/emoticon_on.png"]
{
filter: alpha(opacity=0); opacity: 0; zoom:1;
}
.emoticon_selecter_img_on, .emoticon_selecter_img_off { width: 16px; height: 16px; }
.icons_holder
{
background: url(放表情選單圖示網址) no-repeat 40px 4px;
}
.mini_form .icons_holder
{
background: url(放表情選單圖示網址) no-repeat 18px 4px;
}
.cmp_sync_off, .cmp_sync_on
{
background: url(放同步更新圖示網址) no-repeat scroll top left;
width: 16px; height: 16px;
margin-top: 4px !important;
}
.cmp_privacy_off, .cmp_privacy_on
{
background: url(放私訊隱私圖示網址) no-repeat scroll top left;
width: 12px; height: 16px;
}

也可以直接使用我們提供的圖片:
/*分享與表情選項圖片*/
.cmp_media_off, .cmp_media_on
{
background: url(http://i614.photobucket.com/albums/tt230/m66660000/_ic/cyan/iphone_12x16.png) no-repeat scroll top left;
width: 12px; height: 16px;
}
.cmp_media_mini_off, .cmp_media_mini_on
{
background: url(http://i614.photobucket.com/albums/tt230/m66660000/_ic/cyan/iphone_12x16.png) no-repeat scroll top left;
width: 12px; height: 16px;
}
.cmp_webcamp_off, .cmp_webcamp_on
{
background: url(http://i614.photobucket.com/albums/tt230/m66660000/_ic/cyan/dial_16x16.png) no-repeat scroll top left;
width: 16px; height: 16px;
}
img[src="http://assets.plurk.com/static/icons/emoticon_mini_off.png"],
img[src="http://assets.plurk.com/static/icons/emoticon_mini_on.png"],
img[src="http://assets.plurk.com/static/icons/emoticon_off.png"],
img[src="http://assets.plurk.com/static/icons/emoticon_on.png"]
{
filter: alpha(opacity=0); opacity: 0; zoom:1;
}
.emoticon_selecter_img_on, .emoticon_selecter_img_off { width: 16px; height: 16px; }
.icons_holder
{
background: url(http://i614.photobucket.com/albums/tt230/m66660000/_ic/cyan/chat_alt_stroke_16x16.png) no-repeat 40px 4px;
}
.mini_form .icons_holder
{
background: url(http://i614.photobucket.com/albums/tt230/m66660000/_ic/cyan/chat_alt_stroke_16x16.png) no-repeat 18px 4px;
}
.cmp_sync_off, .cmp_sync_on
{
background: url(http://i614.photobucket.com/albums/tt230/m66660000/_ic/cyan/spin_alt_16x16.png) no-repeat scroll top left;
width: 16px; height: 16px;
margin-top: 4px !important;
}
.cmp_privacy_off, .cmp_privacy_on
{
background: url(http://i614.photobucket.com/albums/tt230/m66660000/_ic/cyan/lock_stroke_12x16.png) no-repeat scroll top left;
width: 12px; height: 16px;
}

將整段語法取代原先語法,或直接貼在所有語法的最後即可。
 
 
20140704更新_選項位置變更
關於噗浪調整選項位置,導致圖示語法重疊與跑位問題,請將 .icons_holder {} 項目中的px數值設為0,並刪去 .mini_form .icons_holder {...} 整行語法即可。
 
,
創作者介紹
M6

金羽銀華

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


留言列表 (10)

發表留言
  • 一 永夜
  • 請問一下,我的表情分享區變成了這樣子
    http://images.plurk.com/3b0c9vB5HYpzokjAPpzdtk.jpg
    因為有兩個疊在一起所以我套用了最後一則語法
    但是還是跟圖上顯示的一樣QQ
    該怎麼解決才好呢?麻煩了謝謝您
  • 可能有其他部分語法衝突到,刪掉原先css中關於分享與表情圖示區的該段語法,再貼上新的語法試試?
    如果還有問題,可以到我的噗浪發私噗給我,我再幫你看看語法內容喔。
    我的噗浪:http://www.plurk.com/66660000

    M6 於 2014/06/25 07:58 回覆

  • septthirty
  • 你好,我想請問一下,
    頭貼可以做修改嗎?因為我有嘗試修改css中頭貼的語法過,但是根本沒有變化,
    甚至把那段語法刪掉,頭貼也還是沒有變化。。

    請問該如何做呢?不好意思麻煩你了><
  • 是指哪裡的頭貼呢?主控台還是浪上的噗?希望有怎樣的變化?

    M6 於 2014/06/26 07:47 回覆

  • 路姆噗姆姆☆
  • 你好,看了你很多關於噗浪自定CSS的教學受了很多幫助!!!!!
    然後也使用了你提供的東西(?)
    可是我還是不會如何把以下圖片圈圈中的那條排成直線QQQ!!!!
    http://i.imgur.com/YgPQj9v.jpg
    我研究了一個下午還是沒辦法排直 不知道為什麼

    請問該新增些什麼或更改些什麼嗎? 麻煩你了QQ!!!!
  • 如果原本套用的噗版語法中有 /*分享功能*/(#main_poster .icons_holder...) 那整段也需要移除,就不會出現符號重複並排或跑位的現象。

    M6 於 2014/07/17 22:02 回覆

  • * 深藍'雨 *
  • 你好
    我想請問一下
    我的表情分享區一樣有圖案重疊的問題
    刪除原本的語法在貼上新的語法之後情況一樣沒有解決
    請問我該如何修改語法呢?
    麻煩你了謝謝
    http://imgur.com/C1Etflp
  • .icons_holder {} 項目中的px數值設為0了嗎?

    M6 於 2014/08/09 14:47 回覆

  • * 深藍'雨 *
  • 改完之後順利解決了
    真的非常謝謝你 ^ _ ^
  • 小林喵
  • 我之前有更新隱藏的語法
    但是今天不知道什麼時候發現噗浪預設的表情符號笑臉又跑出來了>_<
  • 嗯,謝謝通報,更新語法:
    img.emoticon_selecter_img_on, img.emoticon_selecter_img_off
    {
    filter: alpha(opacity=0) !important; opacity: 0 !important; zoom:1;
    }

    M6 於 2014/08/15 16:50 回覆

  • 小林喵
  • 改了之後順利解決~非常感謝>//<
  • :D

    M6 於 2014/08/15 19:18 回覆

  • 羽毛的羽
  • 不好意思,想請問一下><
    請問有辦法將控制台上大頭貼外的框線隱藏起來的語法嗎?
  • 語法:
    #plurk-dashboard .dash-segment #dash-profile img.profile-pic { border: 0 !important; }

    M6 於 2014/11/17 21:27 回覆

  • 杏糖
  • 不好意思打擾了。
    因為我的自介很多,想加長自介的長度,想請問要貼什麼語法?
  • 悄悄話