**版權說明**
我們提供與設計的噗版CSS內容僅供個人自用, 歡迎個人噗友學習改成最適合自己的樣式(請註明原CSS出處), 請勿改製再分享或使用於商業性質等其他用途, 請勿將全部或部份內容直接取用當作自己的設計, 除了個人噗版自用外,其它使用方式均未授權, 還請務必注意,勿侵權喔∼ 
在玩浪的過程中, 因為使用上的習慣,加上特殊設定的需要,所以通常套用了版型,一定有一些需要動手改的部分, 像是字體加大、改變字型、輸入文字的欄位加高、或是每一則回應列表的區域拉長,以及便於閱讀的設定等等。
索性整理了一份常用的CSS,最基本一定要換用的選項,然後進一步,將所有會用到的噗浪CSS項目整理一份出來,這樣,隻要有常備的「噗浪CSS集成」概略,就能方便查詢並上手自由運用了∼
--------------------------------------------------------------------- { 我的常用CSS列表 } --------------------------------------------------------------------- NO1. /*搜尋面闆背景透明*/ .plurkaction {clear:both;padding:8px;}.plurkaction,#toggle_tab li.tt_selected,#more_options_link{ border: 0px solid #FFF; background: transparent; }
因為搜尋功能面闆是噗浪後來新增的功能,所以在套用一些之前的版型的時候,常常會發現中間有一塊不協調的區域。這時,隻要在自訂外觀中加入上面那段CSS,就能讓整體背景一緻了。
NO2. /*噗文輸入區加高*/ textarea#input_big.content { height:100px; }
加上這一小段,就能讓中央輸入文字發噗的區域加高,使在輸入文字的過程中能夠一次看見全文。
NO3. /*個人照片縮小與回復大小*/ #profile_pic{border:0 ; width: 80px;} #profile_pic:hover {width:auto}
希望個人的代表圖不用那麼大,看起來很突兀,那就使用這段程式碼,讓它變小,而滑鼠移過去想看仔細時再恢復噗浪的原始設定值大小。
NO4. /*噗:未打開前*/ .plurk_cnt { background: #fefefe; /*背景*/ border: 1px solid #000000; /*框線*/ font-size: 13px; /*字級數*/ letter-spacing: .1em /*字距*/ font-family: century gothic ; /*字型*/ line-height: 15px; /*行距*/ }
通常噗浪上的訊息列字的級數都很小,所以為了方便閱讀起來舒服些,就讓它放大一些、個人化、貼心一點吧!
NO5. /*噗:打開後回應列表*/ #input_small { height:50px; /*回應輸入區塊加高*/ } .plurk_box .list { height: 300px; /*列表區塊加高*/ } .info_box { -moz-border-radius: 0px 0px 8px 8px; /*下方圓角設定*/ border-right: 1px solid #79683e; }
對一則訊息有興趣,點進去看,往往有很多筆回應資料,但閱讀的區域就這麼小∼要一直捲動頁面很累人∼那就加高列表區塊吧!
想要輸入回應的文字,這個區域也是可以大些的,就使用回應輸入區塊加高的設定。
習慣看MAC使用界面的人,像我,不太喜歡四四方方的訊息方塊,又不希望全部圓角化顯得太可愛,那就讓列表的最下方有圓角的弧度,像MAC選單一樣,有些變化也不賴(隻適用於FireFox火狐瀏覽器)。
一般的版型,經過了上面五個步驟,對我來說就適用很多。當然,想要進階控制每一個頁面選項的CSS呈現,讓它完全特製化,就需要進一步研究每一個區塊的設定∼
--------------------------------------------------------------------- { 噗浪CSS集成---不定期整理更新中 } ---------------------------------------------------------------------
/* USE_DARK_ICONS */ /* 頁首編輯區小圖用深色 */
/* ------------------------------------PART(一)------------------------------------ */ /* ------------------------------------畫面佈景------------------------------------ */
body, html { background: url(); /*背景圖網址*/ background-repeat: no-repeat; /*背景圖不重複*/ background: #000106; /*背景色*/ font-family: ; /*頁面字型*/ font-size:; /*字級數大小*/ }
/* 標題 */ #page_title { color: #; }
/* ------------------------------------PART(二)------------------------------------ */ /* ------------------------------------時間軸主題------------------------------------ */ #timeline_holder { background: transparent; /*背景:透明*/ border: none; /*框線去除*/ }
/* 隱藏噗浪LOGO */ #dynamic_logo ,#logo img { filter:alpha(opacity=0) ; -moz-opacity:0; opacity: 0; }
/* 每日分隔軸 */ .div_inner,.day_bg .div_inner { border: 0; /*框線*/ opacity: 0.2; /*背景:透明度*/ width: 0px; /*線條粗細*/ font-size:10px; /*字級數大小*/ }
.day_start, .day { font-weight: normal; color: #FEA6CC !important; }
.day_start .bottom_start, .day_start .div_start { margin-top: -1px; margin-left: 1px; color: # !important; text-align: left; }
/* 底線 */ #bottom_line { font-size: 11px; color: #; background: none; /*背景去除*/ border: 0; /*框線*/ border-top:1px solid #; border-bottom:1px solid #;/*線條樣式*/ }
.bottom_start , .bottom_end { color:#; font-weight:bold; font-size:11px ; }
.bottom_line_bg { background: transparent; font-size: 11px; color:#; border: 1px solid #; }
.time { margin:0 ; padding:0 ; font-size:17px; color: #; }
/* 每日分隔線和底線背景透明 */ #bottom_line, .day_bg .div_inner, #time_show { background: transparent; }
/* ------------每一則訊息: 未打開前------------ */ .plurk_cnt { background: #; /*背景色*/ border: 1px solid #; /*框線*/ padding: 1px; /*間距*/ letter-spacing: .1em /*字距*/ font-family: century gothic ; /*字型*/ line-height: 15px; /*行距*/ -moz-border-radius: 8px; /*圓角*/ filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; /*透明度*/ }
a.name /*名稱*/ { color: #; font-weight: bold; font-family: Century Gothic; }
.text_holder { color: #; font-family: Century Gothic; font-size: 12px; }
.p_img /*圖片*/ { border: 1px solid #; /*框線*/ }
/* ------------每一則訊息的透明度變化------------ */ .plurk_cnt { opacity: 0.7; /*滑鼠移過去前*/ } .plurk_cnt:hover { opacity: 0.9; /*滑鼠移過去後*/ } td_cnt { opacity: 0; } .text-holder { opacity: 0; }
/* ------------每一則訊息的連結樣式------------ */ .plurk a.ex_link { color:#; font-weight: bold; text-decoration:normal; }
.plurk a.ex_link:hover { color: #; font-weight: bold; border-bottom: 0px solid #; text-decoration:normal; }
a:link { color: #; text-transform: normal; }
a:visited, a:active { color: #; text-transform: normal; }
a:hover { border:0; color: #; text-transform: normal; }
/* ------------每一則訊息: 打開後------------*/ .plurk_box .plurk_cnt { background: # !important; border-bottom: 1px solid #; color: # !important; border-top: 0px solid #; padding-top: 3px; padding-bottom: 3px; }
.plurk_box .list { background: # repeat scroll top left; border-color: #; border-radius: 8px; border-width: 0px; color: # !important; }
.list /*列表圓角*/ { -moz-border-radius: 0px 0px 6px 6px; -khtml-border-radius: 0px 0px 6px 6px; -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; }
#input_small { height: 100px; /*回應區加高*/ color: # !important; border: 1px solid #; background: #; !important; }
textarea#input_small /*回應區*/ { background: # !important; border: 1px solid #; color: # !important; }
.plurk_box .list /*訊息區列表*/ { height: 300px; /*加高*/ }
.info_box /*回應欄位*/ { -moz-border-radius: 0px 0px 8px 8px; /*左右下方圓角*/ border-right: 1px solid #; /*右框線*/ color: # !important; background: #e0e9ee; border:0; font-size: 11px; }
/* 最近的回應 */ .plurk_box .caption { border:0; font-size: 11px; color: #; background: #; }
.plurk_box { -moz-border-radius: 6px; -khtml-border-radius:6px; -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; }
.plurk_box .mini_form { background: #; color: #000000 !important; border-right: 1px solid #; border-left:0; border-bottom:0; border-top:0; }
.mini_form .char_updater { color: # !important; background: #; }
/* 刪除儲存編輯等文字 */ .manager .action { color:#; margin-left:5px; } .manager a:hover { text-decoration: none!important; } .manager .cancel { color:#; margin-right:5px; } .manager .delete { color:#; margin-right:5px; } .unmute { color:#!important; }
/* 訊息區使用者回覆暱稱變色 */ .list .highlight_owner .td_qual a { color:# !important ; }
/* 訊息區使用者回覆文字變色 */ .list .highlight_owner .text_holder { color:# !important ; font-weight: bold; /*粗體*/ }
/* 讓訊息列表換行和加底色 */ .list .plurk_cnt .td_qual { position: absolute; width: auto; overflow: visible; } .list .plurk_cnt .td_cnt .text_holder { margin-top: 1.5em; padding: 0.4em; width: auto !important; background: #; /*底色*/ margin-left: 0.5em; }
.list .plurk_cnt { line-height: 120%; /*加大列表的行距*/ } .list .plurk_cnt tr { border-bottom: 1px solid #; /*加底線*/ } .list .plurk_cnt .td_cnt { font-size: 120%; /*加大字體20%*/ } .plurk_cnt tr:hover { background-color: #; /* 遊標移過去加底色 */ }
/* ------------回覆數字------------ */ .dots .inner /*中間的...*/ { border:1px solid #; border-left: 0; background-color: #; } .response_count /*回覆數字*/ { background-color:#; padding: 1px 5px; -moz-border-radius: 3px; border-bottom:1px solid #; border-right:1px solid #; } .new .response_count /*新回覆數字*/ { background-color:#; color:#fff !important }
/* ------------更新通知------------ */ #updater { background-color:# ; border:1px solid # ; top:409px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; padding:5px 10px; border-top:0 }
#alert_beacon { color:#; /*Alerts通知*/ margin:0 2px; }
#updater #noti_np #noti_np_text { color:#; }
#updater #noti_np a { color:#; }
#updater #noti_re #noti_re_view #noti_re_text { color:#; } #updater #noti_re #noti_re_view a { color:#; }
/* ------------每一則噗對應的時間顯示------------ */ #time_show { background:url() left top no-repeat; /*背景圖*/ background-position:-10px 0px; /*位置*/ text-align:right; width:50px; height:50px; position:absolute; }
/* 日升月移圖 */ .evening,.night,.day,.morning { color:# !important background:url(http://statics.plurk.com/ada9286581b4d3b04769f31c32957edf.png) no-repeat 0 0; _background:url(http://statics.plurk.com/9a0d3f41579deec72d78e94e6a96e0f8.gif) no-repeat 0 0; }
.evening,.night { color:# !important background-position:-65px 0; }
/* ------------所有plurk , 我的plurk , 私密plurk------------ */ #filter_tab { -moz-border-radius:8px 8px 8px 8px; -webkit-border-radius: 8px; border: 0 !important; margin-top: 1px; }
#filter_tab .off_tab { background: #; color: #; border:1px solid # !important; border-top:0 !important; padding:3px 5px !important }
#filter_tab a.off_tab { color:#; border:0 !important; background:none ; background-color:#; -moz-border-radius-bottomleft:3px ; -moz-border-radius-bottomright:3px ; }
#filter_tab a.off_tab:hover { color:#; filter:alpha(opacity=90) ; -moz-opacity:0.9; opacity: 0.9; border:0 !important; }
#filter_tab a.filter_selected { color:#; background-color:#; border:0 !important ; -moz-border-radius-bottomright:3px; -moz-border-radius-bottomleft:3px; padding:5px 10px !important; letter-spacing: 1px; }
#filter_tab a.filter_selected:hover { filter:alpha(opacity=90) ; -moz-opacity:0.9; opacity: 0.9; }
/* ------------------------------------PART(三)------------------------------------ */ /* ------------------------------------主控台主題------------------------------------ */
/* 搜尋面闆背景透明 */ .plurkaction { clear:both; padding:8px; } .plurkaction,#toggle_tab li.tt_selected,#more_options_link { border: 0px solid #; background: transparent; -moz-border-radius:8px; /*圓角*/ }
/* 發噗區背景 */ #plurk_form { margin-top: 40px; padding: 10px; background: #07222c; border:0px solid #fff; color: #cacecd; } #pane_plurk { border: 0px solid #918e79; background: #07222c; color: #cacecd !important; } #toggle_tab li { background: #07222c; color: #cacecd !important; }
/* ------------噗輸入區------------ */ textarea#input_big, textarea#input_permalink { background: url(http://圖片網址); /*背景圖*/ background: #000106; /*背景色*/ background: transparent; /*背景透明*/ border: 1px solid #ffffff; /*框線*/ color: #000000 !important; /*輸入文字顏色*/ } textarea#input_big.content { height:100px; /*輸入欄位加高*/ } textarea#input_big {/*width:450px*/} /*寬度固定*/
/* 更換發噗按鈕 */ img[src="http://static.plurk.com/button/plurk.png"] /*原按鈕透明*/ { filter:alpha(opacity=0); -moz-opacity:.0; opacity:.0; }
.submit_img /*替換按鈕圖片網址*/ { background: transparent url(http://圖片網址) no-repeat scroll top left; height: 38px; padding-left: 82px; width: 0px; overflow: hidden; margin-top: -40px; }
/* 尚餘字數 */ .char_updater { color:#; }
.char_updater.highlight_light { color: #; background: transparent !important; }
.char_highlight { background: transparent !important; border-radius: 2px; padding-left: 2px; color: # !important; }
/* 私密、語系和選項 */ #more_options { background: transparent; border: none; color: #; } #more_options a#more_options_link { background: #; border: none; -moz-border-radius: 10px; } #more_options #plurk_to { background: transparent; border: none; color: #; } #more_options #more_options_holder { border: none; background: transparent; }
/* ------------控制面闆------------ */ #plurk-dashboard { background:none; /*背景*/ margin:0 ; padding:0; border:0 ; color:#; font-size: 11px; /*字級數大小*/ line-height: 120%; /*行距*/ filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; -moz-border-radius: 10px; /*圓角*/ }
#plurk-dashboard a { color: #; text-decoration: underline; border:0; }
#plurk-dashboard a:hover { color: #; text-decoration: none; border:0; }
.segment-content { border:1px solid #; margin-right: 3px; -moz-border-radius:8px; height:300px; }
#plurk-dashboard h2 /*面闆標題*/ { color: #; font-family:century gothic; font-size: 20px; border-bottom: 0px solid #; }
#dash-stats h2, #dash-friends h2, #dash-fans h2 /*各區標題*/ { color: #; font-size:20px; line-height:125%; text-align:left; border:0; font-weight: none; }
/* 控制面闆區的透明度變化 */ #plurk_form , .dash-segment /*滑鼠移過去前*/ { filter:alpha(opacity=20) ; -moz-opacity:0.2; opacity: 0.2; } #plurk_form:hover , .dash-segment:hover /*滑鼠移過去後*/ { filter:alpha(opacity=75) ; -moz-opacity:1; opacity: 1; }
/* ------------個人自介------------ */ #profile_pic { border: 0; width: 120px; /*個人照片縮小*/ } #profile_pic:hover { width:auto; /*滑鼠移過去回復原圖片大小*/ }
#dash-profile /*自介區*/ { background: #; border:0; padding: 10px; color: #; line-height: 16px; }
#full_name /*姓名*/ { color: #000; font-size:17px; }
#span_years , #m_or_f /*年齡性別*/ { font-size: 11px; color: #; }
#location /*地點*/ { color: #; }
p#relationship_container /*關係*/ { background: #; color: #; border:0; padding: 10px; }
p#about_me /*關於我*/ { background: # ; border:0px solid # ; color: # ; margin:2px; padding: 10px; text-align:left; }
/* ------------統計項目------------ */ #karma { color: # ; /*卡馬:顏色*/ }
.karma_hover { color: # ; } .karma_arrow { filter:alpha(opacity=0); -moz-opacity:.0; opacity:.0; }
.cmp_karma_up { background:transparent url(/static/icons/icons_png.png) 0 -28px no-repeat; width:8px; height:10px; margin-top: 10px; }
#dash-stats /*項目*/ { background: # ; border:0px solid #; color: #; padding-top: 5px; padding-bottom: 38px; text-align: center; }
#dash-stats table td { color: #; /*數值*/ }
/* ------------朋友區------------ */ #dash-friends { color: #; background: #; border: none; width: 210px; height: 306px; filter: alpha(opacity=70); opacity: 0.7; -moz-opacity: 0.7; line-height: 18px; padding: 2px; }
#dash-friends a { color: #; }
#dash-friends h2 { text-align: left; font-size: 20px; font-weight: bold; color: #; background: none; border-bottom: 3px solid #; }
/* 粉絲區 */ #dash-fans { color: #; background: #; border: none; width: 210px; height: 306px; filter: alpha(opacity=70); opacity: 0.7; -moz-opacity: 0.7; line-height: 18px; padding: 2px; }
#dash-fans a { color: #; }
#dash-fans h2 { text-align: left; font-size: 20px; font-weight: bold; color: #; background: none; border-bottom: 3px solid #; }
/* 朋友粉絲圖 */ .friend_holder { margin-bottom: 4px; } .friend_holder table { margin-left: auto; margin-right: auto; } .friend_holder .user_link { height:25px!important; width:25px!important; } .friend_holder img { width:25px; height:25px; }
/* 朋友粉絲圖片設透明度 */ #dash-friends-pics .user_link, #dash-fans-pics .user_link { filter: alpha(opacity=70); opacity: 0.7; -moz-opacity: 0.7; } #dash-friends-pics img, #dash-fans-pics img { filter: alpha(opacity=70); opacity: 0.7; -moz-opacity: 0.7; }
/* 朋友粉絲區域設透明度 */ #dash-friends, #dash-fans { opacity: 0.1; filter: alpha(opacity=10); }
/* 追蹤朋友粉絲按鈕 */ .friend_man.add_follow, .friend_man.remove, .friend_man.add_friend, .friend_man.pending { -moz-border-radius: 6px 6px 6px 6px; -khtml-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; /*圓角設定*/ background: #000; color: #fff !important; }
/* 封鎖使用者按鈕 */ .friend_man.block { background: #000000 repeat scroll top left; /*背景色*/ border-color: #000000 #000000 #000000 #000000; /*框線色*/ -moz-border-radius: 4px 4px 4px 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border-width: 1px 2px 2px 1px; /*圓角設定*/ }
/* 分享plurk按鈕 */ #sharePlurk { width: 203px; } #sharePlurk div { width: 180px; } #sharePlurk_url{ width: 100px; }
/* ?勵小圖示 */ .award_bar { height: 50px; }
/* ------------------------------------PART(四)------------------------------------ */ /* ------------------------------------頁首頁尾------------------------------------ */
#top_login /*登入*/ { height: 20px; }
#top_login a { border:0; font-weight: bold; text-decoration: normal; color: #; }
#top_login a:hover { border:0; text-decoration: normal; color: #; }
#top_bar #edit_link /*編輯*/ { background-color:#FFFFFF; color:#000000; -moz-border-radius:2px; padding:0 5px; }
#top_bar #edit_link:hover, #reply h2 { color: #FFFFFF; font-weight:bold; /*粗體*/ }
#reply #reply_box { background: #FFFFFF; }
#reply h2 { background: #FFFFFF; }
#reply #reply_box_holder { background: #FFFFFF; }
/* 頁首左上方 */ #top_bar a { color: #FFFFFF; font-weight: regular; text-transform: normal; border:0; }
#top_bar a:hover { color: #; background: transparent; font-wright: regular; text-transform: normal; border:0; }
#top_bar .content a:hover { color:#; text-transform: normal; }
#top_bar .content a#edit_link { background:transparent; padding-bottom:1px; color:#FFFFFF; text-transform: normal; }
#top_bar .content a:hover#edit_link { color:#FFFFFF; text-transform: normal; }
/* 頁尾 */ #footer { color: #FFFFFF; } #footer a { color: #FFFFFF; border-bottom:1px solid #FFFFFF; /*底線*/ font-weight: bold; /*粗體*/ }
#footer a:hover { color: #FFFFFF; border:0; text-decoration: underline; /*底線*/ font-weight: bold; /*粗體*/ }
/* ------------------------------------PART(五)------------------------------------ */ /* ------------------------------------小視窗與工具------------------------------------ */
/* 影音分享圖片 */ .youtube img,.pictureservices img { border: none; /*去除框線*/ opacity:.6; filter: alpha(opacity=60); /*透明度*/ } .youtube:hover img,.pictureservices:hover img { border:none; /*去除框線*/ opacity:1; filter: alpha(opacity=100); /*滑鼠移過去恢復*/ }
/* 工具視窗 */ .tooltip_cnt { background: #; border:1px solid #; color: #; padding:5px; margin-top:1px; font-size:11px; }
.AmiTT_main b { color: #; font-weight:bold; }
.AmiTT_main { color: #; line-height:1.2; border-top: 1px solid #; position:absolute; text-align:left; width:209px; z-index:2000; }
/* 下拉選單箭頭符號 */ .cmp_tooltips-down { height: 17px; background: transparent url() no-repeat scroll left top; }
.cmp_tooltips-up { height: 17px; background: transparent url() no-repeat scroll left top; }
/* 使用者小視窗*/ .AmiMenu.info_menu { background: #; border:1px solid #; color: #cacecd; }
.AmiMenu.info_menu .block { background:#; }
.AmiMenu.info_menu td.on, .AmiMenu.info_menu .user_info.on { background: #; }
.AmiMenu.info_menu .separator { background: #; }
.AmiMenu.info_menu .user_info.on b { color: #; font-weight: bold; }
/* 語助詞:黑色系 */
.q_freestyle { background: #000000; border-right: 1px solid #1E1D1F; border-top: 1px solid #0E0D0F; border-bottom: 1px solid #1E1D1F; border-left: 1px solid #0E0D0F; color: #fff !important;
}.q_loves { border-top: 1px solid #BF1717; border-left: 1px solid #BF1717;
border-right: 1px solid #8F0808; border-bottom: 1px solid #8F0808; color: #ffffff; background: #B20C0C; } .q_likes { border-top: 1px solid #BF2F32; border-left: 1px solid #BF2F32; border-right: 1px solid #AF0A0D; border-bottom: 1px solid #AF0A0D; color: #ffffff; background: #CB2728; } .q_shares { border-top: 1px solid #BF5F5F; border-left: 1px solid #BF5F5F; border-right: 1px solid #9F3B3B; border-bottom: 1px solid #9F3B3B; color: #ffffff; background: #A74949; } .q_gives { border-top: 1px solid #5F0C0C; border-left: 1px solid #5F0C0C; border-right: 1px solid #3F0000; border-bottom: 1px solid #3F0000; color: #ffffff; background: #620E0E; }
.q_hates { border-top: 1px solid #3F3F3F; border-left: 1px solid #3F3F3F; border-right: 1px solid #000000; border-bottom: 1px solid #000000; color: #ffffff; background: #111111; } .q_wants { border-top: 1px solid #A1BF5F; border-left: 1px solid #A1BF5F; border-right: 1px solid #809F3B; border-bottom: 1px solid #809F3B; color: #ffffff; background: #8DB241; }
.q_wishes{ border-top: 1px solid #67AF2B; border-left: 1px solid #67AF2B; border-right: 1px solid #4A8F11; border-bottom: 1px solid #4A8F11; color: #ffffff; background: #5BB017; }
.q_needs { border-top: 1px solid #A1BF5F; border-left: 1px solid #A1BF5F; border-right: 1px solid #839F45; border-bottom: 1px solid #839F45; color: #ffffff; background: #7A9A37; }
.q_will { border-top: 1px solid #BF839C; border-left: 1px solid #BF839C; border-right: 1px solid #9F5976; border-bottom: 1px solid #9F5976; color: #ffffff; background: #B46D89; }
.q_hopes { border-top: 1px solid #F67FFF; border-left: 1px solid #F67FFF; border-right: 1px solid #C540CF; border-bottom: 1px solid #C540CF; color: #ffffff; background: #E05BE9; }
.q_asks { border-top: 1px solid #AA8BDF; border-left: 1px solid #AA8BDF; border-right: 1px solid #825FBF; border-bottom: 1px solid #825FBF; color: #ffffff; background: #8361BC; }
.q_has { border-top: 1px solid #8F8F8F; border-left: 1px solid #8F8F8F; border-right: 1px solid #4F4F4F; border-bottom: 1px solid #4F4F4F; color: #ffffff; background: #777777; }
.q_was { border-top: 1px solid #7F7F7F; border-left: 1px solid #7F7F7F; border-right: 1px solid #3F3F3F; border-bottom: 1px solid #3F3F3F; color: #ffffff; background: #525252; }
.q_wonders { border-top: 1px solid #5373BF; border-left: 1px solid #5373BF; border-right: 1px solid #31519F; border-bottom: 1px solid #31519F; color: #ffffff; background: #2E4E9E; }
.q_feels { border-top: 1px solid #53A7DF; border-left: 1px solid #53A7DF; border-right: 1px solid #2380BF; border-bottom: 1px solid #2380BF; color: #ffffff; background: #2D83BE; }
.q_thinks { border-top: 1px solid #99C3DF; border-left: 1px solid #99C3DF; border-right: 1px solid #5F98BF; border-bottom: 1px solid #5F98BF; color: #ffffff; background: #689CC1; }
.q_says { background: #000; border-right: 1px solid #1E1D1F; border-top: 1px solid #0E0D0F; border-bottom: 1px solid #1E1D1F; border-left: 1px solid #0E0D0F; color: #fff !important; }
.q_is { border-top: 1px solid #DF8453; border-left: 1px solid #DF8453; border-right: 1px solid #CF6A33; border-bottom: 1px solid #CF6A33; color: #ffffff; background: #E57C43; }
.qual_menu .q_shares{ color: #ffffff !important; border-top: 1px solid #3F2F2B !important; border-left: 1px solid #3F2F2B; border-right: 1px solid #0F0B09; border-bottom: 1px solid #0F0B09 !important;}
.share_menu{ border-top: 1px solid #3F2F2B !important; border-left: 1px solid #3F2F2B !important; border-right: 1px solid #0F0B09 !important; border-bottom: 1px solid #0F0B09 !important;
color: #ffffff !important;
font-size:16px;}
.mini_menu .share_menu{ border-top: 1px solid #3F2F2B; border-left: 1px solid #3F2F2B; border-right: 1px solid #0F0B09; border-bottom: 1px solid #0F0B09; color: #ffffff !important; font-size:12px;}
.share_menu .on{ border-top: 1px solid #3F2F2B; border-left: 1px solid #3F2F2B; border-right: 1px solid #0F0B09; border-bottom: 1px solid #0F0B09; background-color:#8d0000; color:#FFF !important;}
.q_video,.q_link{ border-left:1px solid #ffffff !important;}
--------------------------------------------------------------------- { End } ---------------------------------------------------------------------
**版權說明**
我們提供與設計的噗版CSS內容僅供個人自用, 歡迎個人噗友學習改成最適合自己的樣式(請註明原CSS出處), 請勿改製再分享或使用於商業性質等其他用途, 請勿將全部或部份內容直接取用當作自己的設計, 除了個人噗版自用外,其它使用方式均未授權, 還請務必注意,勿侵權喔∼ 
概略整理出如上的列表, 取用需要的部分(通常換背景、換主要與次要顏色就很夠用囉∼), 就可以簡單組合成適用自己的專屬浪型∼
持續研究噗浪CSS中∼
我的噗浪:http://www.plurk.com/66660000/invite
|