[ plurk css ] 十二段落的配搭變化_11_12 @ 金羽銀華

單則訊息頁與功能視窗，之前有發文說明過：

在這篇則列出常用的設計項目。

_11_單則訊息頁

/*======================== 單則訊息 ========================*/

div.bigplurk
.user-nick,    /*暱稱*/
.user-nick:hover
{
   font-size:18px !important;
   font-weight:500 !important;
   letter-spacing:em;
   top:0px;
   left:0px;
}

div.bigplurk h1.content .plurk_content   /*文字設定*/
{
   font-size:18px !important;
   line-height:24px !important;
   letter-spacing:em;
   color:#111 !important;
}

div.contentwrapper h1.content    /*內容區*/
{
   border:1px solid # !important;
   border-bottom:0 !important;
   filter:alpha(opacity=100) !important;opacity:1 !important; zoom:1;
   -moz-border-radius:3px 3px 0px 0px;
   -khtml-border-radius:3px 3px 0px 0px;
   -webkit-border-top-left-radius:3px;
   -webkit-border-top-right-radius:3px;
   -webkit-border-bottom-right-radius:0px;
   -webkit-border-bottom-left-radius:0px;
}

div.time    /*時間區*/
{
   border:1px solid # !important;
   border-top:0 !important;
   filter:alpha(opacity=100) !important;opacity:1 !important; zoom:1;
   -moz-border-radius:0px 0px 3px 3px;
   -khtml-border-radius:0px 0px 3px 3px;
   -webkit-border-top-left-radius:0px;
   -webkit-border-top-right-radius:0px;
   -webkit-border-bottom-right-radius:3px;
   -webkit-border-bottom-left-radius:3px;
}

/*--------------------------------------------------------------噗主代表圖*/

img.bubble_edge /*箭頭*/
{filter:alpha(opacity=0) !important;opacity:0 !important; zoom:1;}

div.user img /*圖片*/
{
   padding:0px;
   background:none !important;
   border:1px solid # !important;
}

/*--------------------------------------------------------------上一則下一則*/

#prev_plurk, #next_plurk,
#prev_plurk:hover, #next_plurk:hover
{
   background:#fff !important;
   border:1px solid # !important;
   line-height:22px !important;
   -moz-border-radius:3px;
   -khtml-border-radius:3px;
   -webkit-border-top-left-radius:3px;
   -webkit-border-top-right-radius:3px;
   -webkit-border-bottom-right-radius:3px;
   -webkit-border-bottom-left-radius:3px;
}

/*透明度變化*/
#prev_plurk, #next_plurk
{filter:alpha(opacity=80) !important;opacity:0.8 !important; zoom:1;}
#prev_plurk:hover , #next_plurk:hover
{filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;}

/*--------------------------------------------------------------回應列表*/

#plurk_responses
{
   background:none !important;
   padding-top:10px;
}
#plurk_responses ul.responses
{
   border:1px solid # !important;
   background:# !important;
   -moz-border-radius:5px;
   -khtml-border-radius:5px;
   -webkit-border-top-left-radius:5px;
   -webkit-border-top-right-radius:5px;
   -webkit-border-bottom-right-radius:5px;
   -webkit-border-bottom-left-radius:5px;
   -moz-box-shadow:0 0px 5px rgba(0,0,0,0.3); /*陰影*/
   -webkit-box-shadow:0 0px 5px rgba(0,0,0,0.3);
   -o-box-shadow:0 0px 5px rgba(0,0,0,0.3);
   -ms-box-shadow:0 0px 5px rgba(0,0,0,0.3);
   box-shadow:0 0px 5x rgba(0,0,0,0.3);
}
#plurk_responses h2 {font-size:14px; color:# !important;} /*標題*/
div #plurk_responses h2 a /*回應連結*/
{
   font-size:14px;
   background:none !important;
   color:# !important;
}
div #plurk_responses h2 a:hover,
#plurk_responses div.feed-link a:hover
{
   color:# !important;
   top:0px;
   left:0px;
}
#plurk_responses div.feed-link a
{
   background:none !important;
   font-size:12px;
}
.cmp_fb {filter:alpha(opacity=0) !important;opacity:0 !important; zoom:1;}
.share_facebook
{
   margin:0 !important;
   padding:0 !important;
}
div.feed-link a.share_email
{
   margin:0 !important;
   margin-left:18px !important;
   padding:0 !important;
   background:url(http://statics.plurk.com/0f96836f1e721c1afc87d393b0df09a6.png) no-repeat 0 1px !important;
}
#plurk_responses ul.responses li /*每則回應*/
{
   background:#fff !important;
   border-color:#ccc !important;
   line-height:22px !important;
   filter:alpha(opacity=100) !important;opacity:1 !important; zoom:1;
}

ul.responses .message /*文字設定*/
{
   color:#111 !important;
   line-height:22px !important;
}

img.avatar /*噗友代表圖*/
{
   border:1px solid # !important;
   background:none !important;
}

/*------------------------------------------------------------訊息內連結樣式*/

#plurk_responses ul.responses .message a
{
   color:#026BA6 !important;
}
#plurk_responses ul.responses .message a:hover
{
   color:#026BA6 !important;
   text-decoration:underline !important;
}

/*------------------------------------------------------------回應時間*/

ul.responses li:hover span.time
{
   color:#888 !important;
   font-size:11px !important;
   text-transform:normal;
}
ul.responses .highlight_owner .time /*原噗者回應時間*/
{
   border-bottom:1px solid #ddd !important;
   background:none !important;
}

/*------------------------------------------------------------下方回應區*/

#reply_box,
#reply_box_holder
{
   background:none !important;
   border:0 !important;
}

/*使用者名稱*/
#reply_box_holder .qual_holder {color:#ddd !important; font-size:20px !important; }

/*輸入內容*/
#reply_box #input_big {font-size:20px; color:# !important;}

/*------------------------------------------------------------登入或註冊以回應*/

div #not_logged_in h2, div #not_logged_in h2 a
{
   background:none !important;
   font-size:14px;
   text-decoration:none !important;
   color:# !important;
}
div #not_logged_in h2 a:hover
{
   top:0px;
   left:0px;
   color:# !important;
}

_12_功能視窗與其他

/*======================== 功能視窗 ========================*/

/*---------------------------------------------------------浪上噗友小視窗*/

.AmiMenu.info_menu .block   /*舉報濫用*/
{
   background:# !important;
   border-color:# !important;
   color:# !important;
}
.AmiMenu.info_menu
{
   border: !important;
   -moz-border-radius:3px;
   -khtml-border-radius:3px;
   -webkit-border-top-left-radius:3px;
   -webkit-border-top-right-radius:3px;
   -webkit-border-bottom-right-radius:3px;
   -webkit-border-bottom-left-radius:3px;
   line-height: !important;
   letter-spacing:px;
   padding:3px;
}

.AmiMenu.info_menu, /*更換整體顏色*/
.AmiMenu.info_menu .separator
{
   background:# !important;
   border-color:# !important;
   color:#ddd !important;
}
.AmiMenu td
{
   color:#ddd !important;
}
.AmiMenu.info_menu td.on,
.AmiMenu.info_menu .user_info.on
{
   background:#111 !important;
   color:#444 !important;
}
.AmiMenu.info_menu .user_info.on b
{
   color:#eee;
   font-weight:bold;
}
.AmiMenu.info_menu .user_info img   /*噗友圖片*/
{
   border:0px solid #ddd !important;
}

/*-----------------------------------------------------------說明小視窗*/

.tooltip_cnt
{
   padding:3px;
   -webkit-box-shadow:0 2px 5px rgba(0,0,0,0.3);
   -webkit-transition:-webkit-box-shadow 0.2s ease, background 0.5s ease;
   -moz-box-shadow:0 2px 5px rgba(0,0,0,0.3);
   -moz-transition:-moz-box-shadow 0.2s ease, background 0.5s ease;
   -moz-border-radius:3px;
   -khtml-border-radius:3px;
   -webkit-border-top-left-radius:3px;
   -webkit-border-top-right-radius:3px;
   -webkit-border-bottom-right-radius:3px;
   -webkit-border-bottom-left-radius:3px;
}
.tooltip_cnt img {margin:3px;} /*噗友代表圖*/

.AmiTT_main {background:none !important; border:0 !important;} /*背景箭頭*/

/*---------------------------------------------------------下拉視窗箭頭*/

.cmp_tooltips-down
{
background: url(http://);
}
.cmp_tooltips-up
{
background: url(http://);
}

/*--------------------------------------------------------------功能視窗*/

/*標題列*/
.GB_Window .header td.caption,
.GB_Window .close
{
   color:#;
    background:# !important;
}

/*內框*/
.GB_Window .header
{
   border:1px solid # !important;
}
.GB_Window .content
{
   border-color:# !important;
}

/*外框*/
.GB_Window
{
   background:# !important;
   border:1px solid #;
   -webkit-box-shadow:0.2px 2px 5px rgba(0,0,0,0.3); /*陰影*/
   -webkit-transition:-webkit-box-shadow 0.5s ease, background 0.5s ease;
   -moz-box-shadow:0.2px 2px 5px rgba(0,0,0,0.3);
   -moz-transition:-moz-box-shadow 0.5s ease, background 0.5s ease;
   -moz-border-radius:3px;
   -khtml-border-radius:3px;
   -webkit-border-top-left-radius:3px;
   -webkit-border-top-right-radius:3px;
   -webkit-border-bottom-right-radius:3px;
   -webkit-border-bottom-left-radius:3px;
}

/*更換標題列箭頭*/
.GB_Window .close span
{
   background:url(http://) no-repeat 0 0;
   border:none!important;
   width:18px;
   margin-right:4px;
   color:#111;
}

/*彈出視窗*/
.GB_Gallery .iframe_holder
{
   background:#!important;
   border:1px solid #;
   -webkit-box-shadow:0.2px 2px 5px rgba(0,0,0,0.3); /*陰影*/
   -webkit-transition:-webkit-box-shadow 0.5s ease, background 0.5s ease;
   -moz-box-shadow:0.2px 2px 5px rgba(0,0,0,0.3);
   -moz-transition:-moz-box-shadow 0.5s ease, background 0.5s ease;
   -moz-border-radius:3px;
   -khtml-border-radius:3px;
   -webkit-border-top-left-radius:3px;
   -webkit-border-top-right-radius:3px;
   -webkit-border-bottom-right-radius:3px;
   -webkit-border-bottom-left-radius:3px;
}

/*更換關閉圖示*/
img[src="http://www.plurk.com/static/greybox/w_close1.gif"]
{filter:alpha(opacity=0); opacity:0; zoom:1;}
.GB_Gallery .content
{
   background:url(http://) right 5px no-repeat !important;
}

/*--------------------------------------------------------------註冊/登入*/

#top_login a#sign_up,
#validate_email,
#sign_up_small,
#registerToday,
.plurk_box .login_to_see a,
.red_link
{
   background:none !important;
   color:#fff !important;
   border:0 !important;
   font-size:12px !important;
   text-decoration:none !important;
}
#top_login a#sign_up
{
   font-size:0px !important;
}
.plurk_box .login_to_see
{
   background:# !important;
   border-color:# !important;
   filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;
   font-weight:normal !important;
}

呼～每隔一段時間都要做的功課，終於做了整理～噗浪總是不斷地在修改一些小地方的預設值啊～

最後，每個噗版我都會加上隱藏廣告的設計，如果希望顯示廣告，可以把該段刪除就會顯現囉～

/*------------隱藏單則訊息廣告區、外掛連結視窗------------*/

#top_login a#sign_up,
#getting_started,
div .adsense
{
   height:0 !important;
   width:0 !important;
   overflow:hidden;
   padding:0 !important;
   margin:0 !important;
   filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;
}

經過段落式的分析，處理起噗版設計更加地得心應手了～