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

3還留有加入按鈕.png

原本的按鈕五顏六色十分繽紛,如果要搭配噗版色系的話,勢必需要調整它們的配色,以下一一列出各個按鈕的語法項目:

/*----------------加入朋友粉絲與傳送私訊按鈕----------------*/

.friend_man.private_plurk   /*傳送私人訊息*/
{
    background:# !important;
    border:1px solid #!important;
    color:# !important;
}
.friend_man.add_friend   /*加入朋友*/
{
    background:# !important;
    border:1px solid #!important;
   color:# !important;
}
.friend_man.remove   /*取消朋友*/
{
    background:# !important;
    border:1px solid #!important;
   color:# !important;
}
.friend_man.pending   /*取消追蹤*/
{
    background:# !important;
    border:1px solid #!important;
   color:# !important;
}
.friend_man.add_follow   /*追蹤粉絲*/
{
    background:# !important;
    border:1px solid #!important;
   color:# !important;
}
.friend_man.block  /*封鎖-加入黑名單*/
{
    background:# !important;
    border:1px solid #!important;
   color:# !important;
}

填入想要使用的顏色代碼就可以了。 色碼查詢網站

如果要用同種顏色設定,如都設成白色,則可以寫在一起:

/*所有按鈕寫一起*/
.friend_man.add_follow,
.friend_man.remove,
.friend_man.add_friend,
.friend_man.pending,
.friend_man.private_plurk,
.friend_man.block
{
    background:#FFF !important; 
  /*背景色*/
    border:1px solid #FFF !important;    /*框線*/
    color:#666666 !important;   /*文字顏色*/
}

要注意的是,按鈕的連結顏色,有可能會因為設定了頁面整體連結或是主控台連結的緣故而失效,這時候可以用另一種寫法,確保它順利呈現:

/*整體按鈕設定*/
a.friend_man
{
    background:#FFF !important;
    border:1px solid #FFF !important;
    color:#666 !important;
    text-decoration:none !important;
    -moz-border-radius:4px;  /*圓角*/
    -khtml-border-radius:4px;
    -webkit-border-top-left-radius:4px;
    -webkit-border-top-right-radius:4px;
    -webkit-border-bottom-right-radius:4px;
    -webkit-border-bottom-left-radius:4px;
}

整體按鈕設定.png

 

按鈕的變化除了換顏色與加上圓角外,你也可以將不希望出現的按鈕隱藏起來,如:

.friend_man.add_friend   /*隱藏加入朋友按鈕*/
{
    filter:alpha(opacity=0) !important;
    -moz-opacity:0 !important;
    opacity:0 !important;
    overflow:hidden;
    zoom:1;
}

 

或是將所有按鈕都隱藏:

/*隱藏所有按鈕*/
a.friend_man
{
    filter:alpha(opacity=0) !important;
    -moz-opacity:0 !important;
    opacity:0 !important;
    height:0 !important;
    width:0 !important;
    padding:0 !important;
    margin:0 !important;
    font-size:0px !important;
    text-indent:-9999px;
    overflow:hidden;
    zoom:1;
}

隱藏按鈕.png

 

想要一併隱藏朋友粉絲區其它圖示與圖片的話,可以參考之前的 這篇文章

 

創作者介紹
M6

金羽銀華

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


留言列表 (10)

發表留言
  • 訪客
  • 想要問問有沒有可以把個人資料跟統計資料也一起隱藏起來的CSS碼,
    找很久都找不到,
    自己研究也研究不出個結果T︿T←傻子
    謝謝了
  • 就是主控台個人資料、統計、朋友、粉絲都要全區隱藏的意思嗎?
    那直接把主控台隱藏吧~
    語法:

    /*---------------------------------------------------------隱藏主控台全區*/

    div#plurk-dashboard
    {
    filter:alpha(opacity=0) !important;
    -moz-opacity:0 !important;
    opacity:0 !important;
    height:0 !important;
    width:0 !important;
    padding:0 !important;
    margin:0 !important;
    font-size:0px !important;
    text-indent:-9999px;
    overflow:hidden;
    zoom:1;
    }

    M6 於 2011/02/13 19:51 回覆

  • 悄悄話
  • 訪客
  • 請問好友&粉絲圖示的那個滑動效果以及怎麼調整好友&粉絲頭貼大小??
  • 滑動效果是指?
    頭貼指定大小(圖片寬高)的語法:
    .user_link, .user_link img
    {
    width: px !important;
    height: px !important;
    }

    M6 於 2011/09/25 23:28 回覆

  • 訪客
  • 就是滑鼠移過去文字上就會顯示頭貼:")
  • 是指高度變化的css3效果嗎?
    語法:
    /*朋友粉絲區高度變化*/
    #dash-friends, #dash-fans
    {
    max-height:30px !important; /*最大高度*/
    overflow:hidden !important;
    -moz-transition:max-height 1.4s ease-out;
    -webkit-transition:max-height 1.4s ease-out;
    -o-transition:max-height 1.4s ease-out;
    }
    #dash-friends:hover, #dash-fans:hover /*滑鼠移至效果*/
    {
    max-height:500px !important;
    -moz-transition:max-height 1s ease-in;
    -webkit-transition:max-height 1s ease-in;
    -o-transition:max-height 1s ease-in;
    }

    數值可以自行調整 :)

    M6 於 2011/09/28 15:45 回覆

  • 敏 詹
  • 請問如果我想隱藏粉絲區,以及追蹤噗浪的按鈕的話要怎麼辦呢?
  • 文章裡都有提及ㄛ
    追蹤粉絲的按鈕項目是 .friend_man.add_follow /*追蹤粉絲*/
    把隱藏語法那段的項目 .friend_man.add_friend /*隱藏加入朋友按鈕*/ 換成追蹤粉絲的就好囉
    { } 內語法則是一樣的

    最後一句中有說 "想要一併隱藏朋友粉絲區其它圖示與圖片的話,可以參考之前的 這篇文章~"
    請點連結參考該篇文章囉

    M6 於 2012/02/01 15:44 回覆

  • 敏 詹
  • 謝謝,問題已解決
    非常感謝您:-)
  • 許喵!
  • 請問有隱藏粉絲區粉絲人數的語法嗎?
    只要隱藏人數就好
    感謝。
  • 項目是 .show_all_friends ,將隱藏語法套用在這項目即可。

    M6 於 2012/12/23 18:54 回覆

  • 許喵!
  • 還是有點不懂,請問...
    是將文章中的這一串
    {
    filter:alpha(opacity=0) !important;
    -moz-opacity:0 !important;
    opacity:0 !important;
    overflow:hidden;
    zoom:1;
    }
    加入.show_all_friends項下嗎?
  • 嗯。
    .show_all_friends
    {
    filter:alpha(opacity=0) !important;
    -moz-opacity:0 !important;
    opacity:0 !important;
    overflow:hidden;
    zoom:1;
    }
    試試看吧。

    M6 於 2012/12/24 22:25 回覆

  • 許喵!
  • 問題已解決><!!!
    謝謝!!
  • ^^

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

  • 幻境
  • 請問有只隱藏主控台(包含頭照等)只顯示「加友與加粉按鍵」的語法嗎?
找更多相關文章與討論