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

在發噗區下方的圖示改變了,功能也有調整,原本在發噗按鈕旁的表情符號也移到了這:

分享與表情新按鈕.png

從左至右分別是:分享資訊(圖片、連結、影片、視訊),選擇表情符號,同步更新(fb、twitter、新浪微博),私人訊息及隱私選項。

 

浪上的噗打開回應列表下方的發噗區,則只會有分享資訊與選擇表情等兩個選項:

分享與表情新按鈕-mini.png

 

噗浪這次改款,發噗區預設的圖示尺寸用26x26似乎大了些...... 而且五顏六色的圖樣,也跟目前套用的噗版不合,所以,就用css來更換它吧!

使用16x16黑白系列的圖示:

分享與表情新按鈕-更換後.png

打開噗後回應區也換上:

分享與表情新按鈕-更換後mini.png  

 

css語法:

/*更換分享與表情選項圖片*/
.cmp_media_off, .cmp_media_on,  /*分享*/
.cmp_media_mini_off, .cmp_media_mini_on  /*浪上回應區分享小圖*/
{
    background:url(http://i614.photobucket.com/albums/tt230/m66660000/_minicons/picture.png) no-repeat scroll top left;
    width: 16px; height: 16px;
}
.cmp_emoticon_off, .cmp_emoticon_on,  /*表情*/
.cmp_emoticon_mini_off, .cmp_emoticon_mini_on  /*浪上回應區表情小圖*/
{
    background:url(http://i614.photobucket.com/albums/tt230/m66660000/_minicons/smiley.png) no-repeat scroll top left;
    width: 16px; height: 16px;
    margin-top: 4px !important;
}
這部份請替換成下方/*換表情圖示*/ 的語法內容
.cmp_sync_off, .cmp_sync_on   /*同步*/
{
    background:url(http://i614.photobucket.com/albums/tt230/m66660000/_minicons/sharethis.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/_minicons/shopping-bag.png) no-repeat scroll top left;
    width: 16px; height: 16px;
}

 

2011-11-18 完整新語法:(因應噗友需求,如果不知道如何改,請直接使用這整段新語法ㄛ)

/*分享與表情選項圖片*/
.cmp_media_off, .cmp_media_on,
.cmp_media_mini_off, .cmp_media_mini_on
{
    background:url(http://i614.photobucket.com/albums/tt230/m66660000/_minicons/picture.png) no-repeat scroll top left;
    width: 16px; height: 16px;
}
img[src="http://static.plurk.com/static/icons/emoticon_off.png"],
img[src="http://static.plurk.com/static/icons/emoticon_on.png"],
img[src="http://static.plurk.com/static/icons/emoticon_mini_off.png"],
img[src="http://static.plurk.com/static/icons/emoticon_mini_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/_minicons/smiley.png) no-repeat 20px 4px !important;
}
.cmp_sync_off, .cmp_sync_on
{
    background:url(http://i614.photobucket.com/albums/tt230/m66660000/_minicons/sharethis.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/_minicons/shopping-bag.png) no-repeat scroll top left;
    width: 16px; height: 16px;
}

 

各行語法中的圖片網址可以更換成自己想要使用的其他圖片連結,有需要的話,請記得依照所選的圖片改尺寸寬(width)與高(height)與背景圖位置等數值~ : )

 

對了,原本套用的噗版中若有更換表情符號相關的語法(.smily_holder {} 項目那段)因為改版位置調整所以已經失效了,請把它移除,才不會出現重複符號造成困擾喔~

有任何問題歡迎留言或是發私噗給我

http://www.plurk.com/66660000

 

 

補充說明:

  • 有噗友問如何調整透明度,可以用下方語法一次調整所有圖示的透明度:
    /*圖示透明度*/
    .icons_holder, .mini_form .icons_holder
    {
        filter:alpha(opacity=30) !important; opacity:0.3 !important; zoom:1;    
    }
    .icons_holder:hover, .mini_form .icons_holder:hover  /*滑鼠移至時恢復正常*/
    {
        filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;    
    }
  • 如果原本套用的噗版語法中有 /*分享功能*/(#main_poster .icons_holder...) 那整段也需要移除,
    就不會出現符號重複並排或跑位的現象。

 

2011-11-17 **由於噗浪重新編寫了表情按鈕該部份的css,所以請更新該部份圖示的替換方案:

/*換表情圖示*/
img[src="http://static.plurk.com/static/icons/emoticon_off.png"],
img[src="http://static.plurk.com/static/icons/emoticon_on.png"],
img[src="http://static.plurk.com/static/icons/emoticon_mini_off.png"],
img[src="http://static.plurk.com/static/icons/emoticon_mini_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/_minicons/smiley.png) no-repeat 20px 4px !important;
}

 

只有表情按鈕有變...用上方原本提供的語法會變成這樣:

表情變更.png

表情變更-小.png 

將表情圖示該部份語法替換後則復原:

表情復原.png

表情復原-小.png

 

2011-11-24 剛剛噗浪短暫的當機維修過後,表情圖示的css又變回原本的設定項目

.cmp_emoticon_off, .cmp_emoticon_on,
.cmp_emoticon_mini_off, .cmp_emoticon_mini_on

所以... 有需要的話,請重新把刪除線那段貼上,或是直接使用以下兩種版本都有的語法:

/*分享與表情選項圖片*/
.cmp_media_off, .cmp_media_on,
.cmp_media_mini_off, .cmp_media_mini_on
{
    background:url(http://i614.photobucket.com/albums/tt230/m66660000/_minicons/picture.png) no-repeat scroll top left;
    width: 16px; height: 16px;
}
img[src="http://static.plurk.com/static/icons/emoticon_off.png"],
img[src="http://static.plurk.com/static/icons/emoticon_on.png"],
img[src="http://static.plurk.com/static/icons/emoticon_mini_off.png"],
img[src="http://static.plurk.com/static/icons/emoticon_mini_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/_minicons/smiley.png) no-repeat 20px 4px !important;
}
.cmp_emoticon_off, .cmp_emoticon_on,  /*表情*/
.cmp_emoticon_mini_off, .cmp_emoticon_mini_on  /*浪上回應區表情小圖*/
{
    background:url(http://i614.photobucket.com/albums/tt230/m66660000/_minicons/smiley.png) no-repeat scroll top left;
    width: 16px; height: 16px;
    margin-top: 4px !important;
}
.cmp_sync_off, .cmp_sync_on
{
    background:url(http://i614.photobucket.com/albums/tt230/m66660000/_minicons/sharethis.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/_minicons/shopping-bag.png) no-repeat scroll top left;
    width: 16px; height: 16px;
}

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

金羽銀華

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


留言列表 (43)

發表留言
  • 張忞潔
  • 可是我的怎麼是直的TTTT
  • 應該是原本語法中有改動 /*分享功能*/ 位置的緣故,
    刪掉原先語法該部份即可。

    M6 於 2011/11/17 07:58 回覆

  • 小明
  • 請問可以把發噗區的按鈕和浪上的噗的按鈕整個移動到右側嗎? 謝謝
  • 用調整左邊界的方式試試看,語法:
    /*調整圖示位置*/
    #main_poster .icons_holder /*發噗區*/
    {
    margin-left: 640px;
    }
    .mini_form .icons_holder /*回應區*/
    {
    margin-left: 220px;
    }

    數值可能需要因應不同的版型發噗區的寬度而調整。

    M6 於 2011/11/17 07:59 回覆

  • 訪客
  • 昨天改完還好好的今天看時表情那邊卻變回原樣QQ明明沒有去動語法的
    http://i.imgur.com/by2LD.png

    請問為甚麼會這樣呢?
  • 因為噗浪重新編寫了表情按鈕該部份的css,新的替換語法已更新在文章中,請參考~

    M6 於 2011/11/17 20:23 回覆

  • 鈣鈣
  • 我也是><今天突然又變回原本的樣子了....是因為今天有小維修的關係嗎?
  • 對...噗浪又改了該部份的語法了... 新的替換語法已更新在文章中喔~

    M6 於 2011/11/17 20:24 回覆

  • 言
  • 我的也是今天發現變成三樓那張圖的樣子!除了表情那個其他都沒事....
  • 嗯,新的替換語法已更新在文章中~

    M6 於 2011/11/17 20:24 回覆

  • 天
  • 我也是Q_Q!!
    今天又變回醜醜的笑臉了!!
  • 請參考新的替換語法ㄛ~

    M6 於 2011/11/17 20:24 回覆

  • 璽佑
  • 非常謝謝你的分享,真的幫了很大的忙>"<
  • : D

    M6 於 2011/11/17 21:18 回覆

  • 訪客
  • 改過語法了,可是小圖的部分變成空白...Q_Q
  • 有使用自訂圖片嗎?
    請因應所使用的圖片調整語法中的寬高跟背景圖指定位置喔~
    有問題的話可以私噗給我,我再幫你看看 :)

    M6 於 2011/11/17 21:17 回覆

  • zephyr0315
  • 謝謝辛苦了!:)
    改好後很漂亮~
  • : )

    M6 於 2011/11/17 21:58 回覆

  • 有因就有果
  • 謝分享,改過真的好看很多:)
  • :D

    M6 於 2011/11/18 09:31 回覆

  • 貓維
  • 我不會改耶TAT 我可以把整個宇發貼上來請大大幫我改嗎QAQ...
  • 貓維
  • 弄好了耶>< 謝謝!!
  • ^ W ^

    M6 於 2011/11/18 21:45 回覆

  • SuMi
  • 謝謝,幫了很大的忙:)
  • :D

    M6 於 2011/11/21 08:50 回覆

  • fhghg2001
  • 我想請問一下,如果是自定的表情符號突然就不見該怎麼辦?他一直說個人資料%數沒到90,可是我之前就有而且是突然消失的,就算我換了大頭貼多增加資料%數也都沒有增加或減少耶好奇怪>"<
  • 嗯,我前陣子也是這樣,搞不清楚噗浪的計算方式在做什麼...
    後來多選了兩三個"興趣",資料數就加到超過90%了~ 試試看吧~
    再不行就要跟噗浪官方反應一下了~ : )

    M6 於 2011/11/21 12:04 回覆

  • 戀雨
  • 你好那我想請問一下有同系列的圖可以讓我更換粗體斜體底線的圖嗎^^??
    改好了但變成舊的這三個圖示太突出了YAY
    我爬文好像又沒看到所以留言請問一下^^"
    謝謝你!!
  • 粗體斜體底線的圖?
    這應該是外掛功能,請洽詢該程式的作者ㄛ : )

    M6 於 2011/11/21 22:39 回覆

  • 戀雨
  • 啊啊 我瞭解了 是噗通的功能XDD
    真不好意思謝謝你^^
  • ^ ^

    M6 於 2011/11/24 09:33 回覆

  • 阿零
  • 噗浪維修後原表情圖示(小黃臉)又出現了。
    如下圖所示:
    http://i.imgur.com/Qj2Go.png

    請問有替換的語法嗎?

  • 已經有在文章中說明囉...
    請見 2011-11-24 更新的那段

    M6 於 2011/11/24 22:05 回覆

  • 鈣
  • 昨天維修後又變成小小的黃臉了><也想請問有替代的語法嗎?
  • 有將語法更新在文章中了...
    請見 2011-11-24 那段說明

    M6 於 2011/11/25 12:36 回覆

  • .
  • 維修之後我的表情選單點不出來耶QQ
    請問這是怎麼了?
  • 似乎是因為表情外掛程式的關係,
    這噗有噗友討論到: http://www.plurk.com/p/et434w

    M6 於 2011/11/25 19:32 回覆

  • 蔚藍兒
  • 不好意思,我使用了11/24更新的那段語法,還是沒有辦法讓表情符號框跳出來(用的是google瀏覽器)
    是因為瀏覽器的問題嗎?謝謝解答T口T
  • 文章中提供的css語法是更換圖示外觀用的喔,
    無法打開表情功能視窗的問題,好像是因為瀏覽器所安裝的表情外掛程式的緣故,
    可參見此噗中噗友的討論: http://www.plurk.com/p/et434w

    M6 於 2011/11/25 20:19 回覆

  • 月
  • 不好意思,我把語法換成11月24日的版本後,表情圖跳到下面去了,請問是為什麼呢?
    謝謝語法><
  • 可能是語法中有指定位置的關係,要看看其他部份的css內容比較清楚原因,需要的話,可以發私噗給我,我再幫你看看語法內容:
    http://www.plurk.com/66660000

    M6 於 2011/11/27 10:42 回覆

  • sung
  • 請問那些小圖示有辦法自己放大嗎? 太小我容易按錯(欸
  • 這些替換用圖示的原始圖片尺寸就是16x16大小ㄛ,
    有需要的話請自行找較大的圖示來替換,
    然後更新語法中的連結網址以及寬高、背景圖位置等即可。

    M6 於 2011/11/29 19:13 回覆

  • blackdream
  • 想請問一下那可以取消透明度嗎?
    就是比較喜歡顯示下面粉絲.個人資料.KARMA這種
    有語法可以讓他顯是或者是刪掉哪段語法嗎?
  • 看看語法中是否有 主控台透明度 相關的段落
    刪去就會恢復顯示囉

    M6 於 2011/11/29 19:14 回覆

  • NOBUKO
  • 你好我想請問一下...
    我換了面板之後 結果新圖示變成上下並排而不是一整橫排
    而且會跟底下的個人檔案重疊在一起
    想請問一下有沒有解決辦法...
    我用了上面的語法都還是上下並排

    這邊是圖解
    http://tinyurl.com/7na5e5g

    先謝謝了....
  • 把語法中 /*微笑表情*/ 跟 /*分享功能*/ 兩段刪除試試看?

    M6 於 2011/12/15 18:51 回覆

  • NOBUKO
  • 可以了~~ 謝謝你:)
  • :)

    M6 於 2011/12/16 23:17 回覆

  • cammy653
  • 你好~我想請問一下噗浪的字型可以改嗎? 想改成娃娃體可以嗎?
  • 可以,加上這段語法:
    /*語言字型*/
    body.language-large-font,
    .language-large-font #top_login,
    .language-large-font #footer,
    .language-large-font .small,
    .language-large-font .tooltip_cnt,
    .language-large-font .direct-l
    {
    font-family: "娃娃體" !important;
    -webkit-text-size-adjust:none; /*Google瀏覽器字型預設取消*/
    }

    M6 於 2011/12/17 15:07 回覆

  • cammy653
  • 你好~字型換成功了! 再請問字的大小也可以改嗎?
  • 字的大小是 font-size: 13px !important; 數值可以自行調整,
    看要改哪部份的字大小就調整該部份的 font-size: ; 就可以了。

    M6 於 2011/12/17 16:09 回覆

  • cammy653
  • 你好~我想更改回應區別人回覆的字的大小,可是我怎麼改它都沒有變,我是改這裡的 /*下方回應區*/ 請問是哪裡錯了嗎?我應該在哪裡更改呢?
  • 在 .list .plurk_cnt { } 裡改

    M6 於 2011/12/17 18:58 回覆

  • cammy653
  • 哇!成功了!
    非常謝謝你T^T
  • Jessie Chen
  • 使用的是LULINHA版面 因為有些按鈕隱藏了 所以剛換成其他版面...結果再換回來時 工具列變成直排 於是將上面的語法換上後會變成這樣:
    http://i.imgur.com/l6W34.jpg
    請問有無解決方法呢? 先感謝回答
  • 將/*微笑表情*/ 以及/*分享功能*/ 刪除試試看

    M6 於 2012/01/05 19:01 回覆

  • 暮陽
  • 您好,日前套用基本款背景型去修改,但試了兩天,還是有些效果無法解決,不知是否跟該款語法中拿掉顏色框線等原始設定相衝?抱歉直接附圖詢問^^"

    http://ppt.cc/cob_
    1.編輯個人檔案的「編輯」出現灰底,可以消除嗎?
    2.噗文展開後的灰底區可以改顏色嗎?
    3.縮小表情跟分享選單後,第一個圖示歪了,這可以解決嗎?
    4.私密選項的輸入區出現白色的底,不曉得是為什麼^^"(已經搜尋過語法內所有白色色碼)
    5.捲軸的底色可以更換嗎?
  • 1. #top_bar #edit_link, #top_bar #edit_link:hover { background: none !important; }
    2. .plurk_box .caption { background: # !important; }
    3. 應該是貼上的語法有錯漏,導致第一個圖示未替換成功,要檢查語法內容才得知如何修正。
    4. .wickEnabled, .wickEnabled:focus { background: none !important; }
    5. 在 /*捲軸語法*/ 那段改 background: 的色碼即可。

    M6 於 2012/05/09 21:34 回覆

  • 暮陽
  • 您好,抱歉真的是問題多多...
    想請問基本款背景型中,是否有語法會跟「滑鼠移到噗文處變色」、「未讀噗文的顯示底色」等功能相衝?因為我前一版使用正常,這次修改不知道為什麼總是失敗,是否需要拿掉哪段語法呢?
    另外,萬分感謝您前兩次的回覆,成功解決了那些問題!
  • 要看語法內容檢查是否有相衝或是錯漏才能得知了。

    M6 於 2012/05/09 21:36 回覆

  • 奈倉甘樂
  • 您好ˇ
    上次真的很感激您
    原來是我自己測試的時候數值更動太少所以看不出來(倒
    這次冒昧想再請教您...
    之前為了更換分享/表情按鈕
    我都是複製您這篇最新的語法
    但不知怎地這次"浪上回應區"卻始終無法出現表情圖片
    (發噗區無問題)
    如圖:http://images.plurk.com/9f431a2f01137cef000ae321782c1836.jpg
    雖然滑鼠滑過還是可以點擊使用...
    但總覺得怪怪的XD"

    不好意思再度麻煩您了
    謝謝您>"<
  • 這個問題要看浪上回應區相關部份的語法內容來作檢查才能得知原因喔

    M6 於 2012/05/11 16:47 回覆

  • OTZ FATECON
  • 成功了,感謝您
  • ^ ^

    M6 於 2012/10/01 09:44 回覆

  • Kerr
  • 你好// 我貼了以後原本的笑臉跟新的笑臉一直重疊在一起,
    裡面好像也沒有

    .smily_holder {} 這段 QAQ

    http://www.plurk.com/Users/getCustomCss?user_id=9200199&updates=20

    另外,昨天晚上有問到說看不見私噗給特定朋友那個
    那裡貼上捲軸於法之後也沒有辦法出現選擇耶

    現在連自定表情都沒有辦法看到全部QAQ

    還有就是 要 自訂背景的話下面語法那裡也只能跑出一半
    跳出來的框框又不能移動,現在都只能選擇另外開啟視窗
    但是偏偏要看 關注對象 的清單時,最下面關注的對象也全都被檔到((不能拖曳啊

    想請問是哪裡的語法錯了...
    明明已經貼上捲軸語法了 =A="



    感謝///
  • 由於噗浪改過圖片網址,所以,請把原本段落中關於圖片網址的這一小段用下面語法取代掉:
    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;
    }

    捲軸語法是要讓捲軸出現,不是你目前貼的改變捲軸顏色外觀的那段喔,
    上則回應中有寫,是 html {overflow-y: auto !important;} ,
    目前語法中有這句 body {overflow:hidden !important;} hidden就是指不出現捲軸,
    所以刪去這句,或是加上 html 那句試試?

    然後,建議檢查並整理一下語法內容,許多段落可能是複製貼上的關係,有些不全疏漏或是錯誤的語法,
    可能會讓瀏覽器無法正確讀取語法,多對照看看並瞭解語法實際的寫法作用與含義喔。

    M6 於 2012/10/14 22:44 回覆

  • Kerr
  • 你好/// <-問題很多抱歉 QAQ

    所有訊息 我發表的訊息 那行

    能不能不要有底色(目前是深灰)

    看了其他篇以後把首頁個人檔案那裡的底色給去掉了
    可是一直改不掉 所有訊息 那裡的
    想換顏色....= x ="


    .
  • #filter_tab a.off_tab, #filter_tab a.off_tab:hover, #filter_tab a.filter_selected, #filter_tab a.filter_selected:hover { background: none !important; border: 0 !important; }

    M6 於 2012/10/14 22:32 回覆

  • Kerr
  • 一連三問連我都覺得自己好煩 (掩

    想請問 我在看圖片 跟 影片 的時候 旁邊會有廣告...

    http://images.plurk.com/5uljH9bKTn9HVEL4kbQeTi.jpg

    右下角落那裡

    請問那個有辦法去掉嗎0.0



    感謝 QAQ

  • /*去廣告*/
    #cbox_ads { display : none !important; }

    M6 於 2012/10/14 22:27 回覆

  • Kerr
  • 真的非常感謝 > <
    顯示不出來的部分都出現了 QAQ
  • ^ ^

    M6 於 2012/10/15 09:04 回覆

  • 久
  • 您好~
    剛剛發現消失許久的黃色笑臉圖案又出現了
    有把語法砍掉再重貼還是沒辦法解決
    不曉得是不是噗浪官方有換圖片網址了?
  • 嗯,請參考此噗:
    http://www.plurk.com/p/jhwses

    M6 於 2013/12/11 12:38 回覆