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

語助詞是玩噗用來表達心情的好設計,但它的顏色或許不符合我們的心情狀態,或是不適合搭配噗版樣式,這時可以用自訂CSS的方式來調整它。

之前有噗友詢問過語助詞的設計,但噗浪對於語助詞的部份有再小改版過,把原本放在分享裡面,
像是分享照片、影音等的功能拿出來,移至發噗框的下方了,所以之前語助詞的語法又需要更新囉~

因應噗友的詢問,將相關的語法項目整理列出,歡迎個人噗友修改自用,記得標注引用出處喔~

(完整版權說明請見部落格頁首公告區,需要詢問的話歡迎私噗給我 ^ ^ @66660000)

問/Q:

我要把語助詞原來的背景顏色換成框線和字的顏色,然後背景是白色的,字體和4個框線同顏色就好,
還想要在按發噗區左邊的語助詞時,顯示出來的框線顏色也和我設定的一樣,請問有辦法做到嗎?

答/A:

可以,語助詞相關的語法項目整理如下,並列出你需要的CSS寫法囉,請參考使用  ^ ^

 

/*----------------------------------語助詞----------------------------------*/

.qualifier, .m_qualifier, .r_qualifier,  /*所有*/
div.bigplurk .r_qualifier  /*單噗頁面上下則*/
{
    background:none !important;  /*將外觀的背景去除*/
    border:0 !important; /*去掉所有框線*/
    vertical-align:middle !important;
}

.qualifier {font-size:12px !important;}   /*浪上*/
.m_qualifier {font-size:15px !important;}   /*發噗區*/
.mini_form .m_qualifier {font-size:11px !important;}  /*浪上每則噗發噗區*/
#reply_box .m_qualifier {font-size:15px !important;}   /*單一噗浪發噗區*/
.r_qualifier {font-size:12px !important;}  /*單噗頁面字*/
.content .r_qualifier {font-size:15px !important;}  /*單噗主噗區*/


/*--------------------------------------------------------------語助詞各欄位*/

.qual_menu .q_freestyle,
.q_freestyle,
td .q_freestyle   /*自由發揮*/
{
    background:#FFF !important;
    color:#999 !important;
    border:1px solid #777 !important;
}
.qual_menu .q_loves,
.q_loves,
td .q_loves   /*愛*/
{
    background:#FFF !important;
    color:#B20C0C !important;
    border:1px solid #B20C0C !important;
}
.qual_menu .q_likes,
.q_likes,
td .q_likes   /*喜歡*/
{
    background:#FFF !important;
    color:#CB2728 !important;
    border:1px solid #CB2728 !important;
}
.qual_menu .q_shares,
.q_shares,
td .q_shares   /*分享*/
{
    background:#FFF !important;
    color:#A74949 !important;
    border:1px solid #A74949 !important;
}
.qual_menu .q_gives,
.q_gives,
td .q_gives    /*給*/
{
    background:#FFF !important;
    color:#620E0E !important;
    border:1px solid #620E0E !important;
}
.qual_menu .q_hates,
.q_hates,
td .q_hates    /*討厭*/
{
    background:#FFF !important;
    color:#111 !important;
    border:1px solid #111 !important;
}
.qual_menu .q_wants,
.q_wants,
td .q_wants    /*想要*/
{
    background:#FFF !important;
    color:#8DB241 !important;
    border:1px solid #8DB241 !important;
}
.qual_menu .q_wishes,
.q_wishes,
td .q_wishes   /*期待*/
{
    background:#FFF !important;
    color:#5BB017 !important;
    border:1px solid #5BB017 !important;
}
.qual_menu .q_needs,
.q_needs,
td .q_needs    /*需要*/
{
    background:#FFF !important;
    color:#7A9A37 !important;
    border:1px solid #7A9A37 !important;
}
.qual_menu .q_will,
.q_will,
td .q_will   /*打算*/
{
    background:#FFF !important;
    color:#B46DB9 !important;
    border:1px solid #B46DB9 !important;
}
.qual_menu .q_hopes,
.q_hopes,
td .q_hopes   /*希望*/
{
    background:#FFF !important;
    color:#e05be9 !important;
    border:1px solid #e05be9 !important;
}
.qual_menu .q_asks,
.q_asks,
td .q_asks   /*問*/
{
    background:#FFF !important;
    color:#8361bc !important;
    border:1px solid #8361bc !important;
}
.qual_menu .q_has,
.q_has,
td .q_has    /*已經*/
{
    background:#FFF !important;
    color:#777 !important;
    border:1px solid #777 !important;
}
.qual_menu .q_was,
.q_was,
td .q_was   /*曾經*/
{
    background:#FFF !important;
    color:#525252 !important;
    border:1px solid #525252 !important;
}
.qual_menu .q_wonders,
.q_wonders,
td .q_wonders   /*好奇*/
{
    background:#FFF !important;
    color:#2e4e9e !important;
    border:1px solid #2e4e9e !important;
}
.qual_menu .q_feels,
.q_feels,
td .q_feels   /*覺得*/
{
    background:#FFF !important;
    color:#2D83BE !important;
    border:1px solid #2D83BE !important;
}
.qual_menu .q_thinks,
.q_thinks,
td .q_thinks   /*想*/
{
    background:#FFF !important;
    color:#689CC1 !important;
    border:1px solid #689CC1 !important;
}
.qual_menu .q_says,
.q_says,
td .q_says   /*說*/
{
    background:#FFF !important;
    color:#E2560B !important;
    border:1px solid #E2560B !important;
}
.qual_menu .q_is,
.q_is,
td .q_is    /*正在*/
{
    background:#FFF !important;
    color:#E57C43 !important;
    border:1px solid #E57C43 !important;
}


/*-------------------------------------------------------發噗區語助詞表格欄位*/

.AmiMenu  /*外框底*/
{
    background:#FFF !important;
    border:none !important;
}

.qual_menu td  /*選單表格*/
{
    text-align:center !important;
    font-size:12px;
}

.qual_menu .on   /*滑鼠移至效果*/
{
    background:#333 !important;
    color:#FFF !important;
    border:1px solid #333 !important;


使用以上的語法後,語助詞的樣態:

語助詞項目

 

清爽的心情也不賴吧~XD

謝謝噗友的詢問,讓我又發現更多語助詞的細部設定和好玩之處~ ^ ^

噗的CSS世界永遠都有新發現啊~ :-D

創作者介紹
創作者 M6 的頭像
M6

金羽銀華

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


留言列表 (5)

發表留言
  • 想問!!
  • 請問要怎麼讓發噗或回應別人的噗時左邊不要出現暱稱,我想讓他一個字都沒有,只出現回應的文字??
    謝謝!!
  • .td_qual span a, /*噗上的暱稱*/
    .mini_form .qual_holder /*您的回應區的人名*/
    {
    height:0;
    width:0;
    padding:0;
    margin:0;
    overflow:hidden;
    font-size:0px;
    }

    M6 於 2011/01/04 18:20 回覆

  • 訪客
  • 請問~
    噗浪這些語助詞狀態,有辦法自行設定出特殊的用語嗎?
    比如說我想要自己弄一個"不爽"選項
    是有可能的嗎?

    噗浪css超新手
    問題若很弱智請見諒
  • 這部份是噗浪預設的,並沒辦法自訂喔,
    CSS只能改變外觀而已喔 ^ ^

    M6 於 2011/01/05 11:08 回覆

  • 想問!!
  • 我是一樓的那位提問者

    我用了你的CSS後
    發現沒有改變ㄟ??
    是我哪裡用錯了嗎??
    不好意思再次麻煩你
  • 使用後應該會像這樣:http://i.imgur.com/h3Gon.png
    沒有的話,可能是你語法中其它部份的設定有影響到,
    加上 "!important; " 試試看:
    .td_qual span a, /*噗上的暱稱*/
    .mini_form .qual_holder /*您的回應區的人名*/
    {
    height:0 !important;
    width:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden;
    font-size:0px !important;
    }

    如果還是不行,就要看看你整體的語法內容來找出原因囉 ^ ^"
    可以發私噗給我:http://www.plurk.com/66660000

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

  • 路人
  • 請問...
    上面的語法用上去之後,
    唯獨『說』的語助詞會有個框框耶~
    可以去掉框框嗎?
  • 在說的那一欄放上 border:0 !important; /*去掉所有框線*/ 這行語法試試看?

    M6 於 2011/05/22 20:51 回覆