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

    又到了整理噗版CSS總表的時間。

現在我設計噗版,是以分段的方式來進行,各個段落的變化與整合配搭,可以產生許多不同的變化:

分12段落.png  

列出各段基本項目與常用樣式,一方面是留下記錄,一方面也希望有助噗友自己創作噗版結構時參考。

 

_00_表頭表尾+

這部份是放設計出處與版權聲明用的。請大家要養成好習慣,有引用來源的話要標明出處喔。

/*------------------------------------------------------------------------
噗浪版型 Plurk CSS:
設計出處 Design by: Be Myself Inc. M6
背景圖源 Background image from: ()
安裝網址 Install: ()
更多佈景 More Themes: (http://www.flickr.com/groups/plurkcss)
-- 我們設計的噗版CSS僅供個人自用,請勿改製再分享或用於商業用途 --
-- Copyright: 版權所有 保留一切權利  All Rights Reserved --
------------------------------------------------------------------------*/



/*------------------------------------------------------------------------
Date: 2011-mm-dd
Design by: Be Myself Inc. M6
-- 我們設計的噗版CSS僅供個人自用,請勿改製再分享或用於商業用途 --
-- Copyright: 版權所有 保留一切權利  All Rights Reserved --
------------------------------------------------------------------------*/

我常用的背景圖桌布來源:

桌布來源:san-x.co.jp/charapri/top.html  (san-x)

桌布來源:jalan.net/jalan/doc/nyalan/summer2007/wallpaper/index.html (jalan.net)

桌布來源:wallpapers-room.com/newest (wallpapers-room)

桌布來源:socwall.com (socwall.com)

桌布來源:customize.org (customize.org)

桌布來源:deviantart.com (deviantart)

 

_01_前置CSS

將每個版型都會用到,並會影響整體樣式的設計放到最前面。

/*------------------------------- #前置CSS -------------------------------*/

/*消除圖片外框*/
img {border:none !important;}

/*連結文字*/
a:focus, :focus, a, a:link, a:visited, a:active {outline:0 !important;}  /*去除連結虛線外框*/
a, a:link, a:visited, a:active
{
    color:# !important;
    text-decoration:none !important;
    text-transform:normal;
    -moz-outline-style:none;
    outline:0 !important;
}
a:hover
{
    color:# !important;
    text-decoration:none !important;
    position:relative;
    top:1px;
    left:1px;
}

/*主控台文字*/
p#about_me, #dash-profile, p#relationship_container,
#dash-stats, #dash-stats table td,
#dash-friends, #dash-fans
{
    color:# !important;
    line-height:em;
}

/*語言字型*/
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:"微軟正黑體", "Helvetica Neue", Arial, Verdana;
    font-weight:normal;
    text-transform:normal;
}


/*--------------------------------------------------------------輸入與選單*/

textarea,
textarea#input_big_private,
textarea#input_big_private.content,  
textarea#input_big,
textarea#input_permalink,
textarea#input_big.content,
input#current_query,  /*搜尋輸入*/
select, select:focus,  /*下拉選單*/
input#share_link,  /*分享搜尋結果*/
input#loc_field,   /*搜尋其它噗浪會員*/
.auto_ta  /*輸入區表格*/
{
    color:#555 !important;
    background:rgba(255,255,255,0.5) !important;
    border:1px solid #aaa !important;
    padding:4px 5px;
    -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;
}

/*使用中狀態*/
textarea:focus,
textarea#input_big_private:focus,
textarea#input_big:focus,
textarea#input_permalink:focus,
input#current_query:focus,
input:focus,
select:focus
{
    color:#111 !important;
    background:rgba(255,255,255,0.9) !important;
    border:1px solid #39c !important;
    -moz-box-shadow:0px 0px 5px #39c; /*外框陰影*/
    -webkit-box-shadow:0px 0px 5px #39c;
    box-shadow:0px 0px 5px #39c;
}


/*--------------------------------------------------------------捲軸語法*/

/*Google瀏覽器適用*/
::-webkit-scrollbar {background:#f4f4f4;}
::-webkit-scrollbar-thumb {background:#eee;}
::-webkit-scrollbar-thumb:hover {background:#ddd;}
::-webkit-scrollbar,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover
{
    -moz-border-radius:10px;
    -khtml-border-radius:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    -webkit-border-bottom-left-radius:10px;
    -moz-box-shadow:0px 0px 5px #fff;
    -webkit-box-shadow:0px 0px 5px #fff;
    box-shadow:0px 0px 5px #fff;
}


/* * {cursor:crosshair !important;}*/ /*十字游標語法*/

/* USE_DARK_ICONS */ /*頁首左方小圖使用深色*/

 

_02_背景設定

全頁面的圖,或是時間軸的圖,以及主控台各區背景的呈現,一次搞定。

/*======================== 背景設定 ========================*/

/*畫面背景*/
body, html
{
    background:url(http://) center top no-repeat;
    background-color:#111;
    background-attachment:;   /*浮水印固定背景fixed*/
    background-position :% %;   /*x軸% y軸%的地方固定*/
    -o-background-size:1440px 1080px;     /*調整大小比例*/
    -webkit-background-size:1440px 1080px;  
    -moz-background-size:1440px 1080px;  
    color:#333;
}
html {margin-top:-1px;overflow-x:hidden;}

/*時間軸背景*/
#timeline_holder
{
    background:url(http://) left top no-repeat;
    background-color:#111;
    border:0 !important;
}

/*時間軸與主控台背景*/
#timeline_holder,
#timeline_bg .day_bg .div_inner,
#bottom_line,
.plurkaction,
#toggle_tab li.tt_selected,
div#plurk-dashboard
{
    background:none;
    border:0 !important;
}
div#plurk-dashboard
{
    background:none !important;
    border:0 !important;
    height:100px !important;
    overflow:hidden;
    margin-top:0px !important;
}

/*噗浪生物*/
#dynamic_logo, #logo img, img#creature
{filter:alpha(opacity=0); opacity:0; zoom:1;}

/*隱藏特定時間軸主題的時間直線*/
.block_bg .div_one_line,
.small_timeline .block_bg .div_one_line
{
    filter:alpha(opacity=0) !important;
    -moz-opacity:0 !important;
    opacity:0 !important;
    height:0 !important;
    width:0 !important;
    overflow:hidden;
    zoom:1;
}

/*資訊區各區背景*/
div.dash-segment .segment-content
{
    background:#;
    border:1px solid # !important;
    margin:px;
    padding:px;
    min-height:px;
    -moz-border-radius:10px;
    -khtml-border-radius:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    -webkit-border-bottom-left-radius:10px;
}

/*自介統計朋友粉絲各區背景*/
#dash-profile
{
    margin-top:5px;
}
p#about_me, #dash-profile
{
    background:#;
    border:1px solid # !important;
    padding:px;
}
#dash-stats
{
    background:#;
    border:1px solid # !important;
    padding:px;
}
#dash-friends
{
    background:#;
    border:1px solid # !important;
    padding:px;
}
#dash-fans
{
    background:#;
    border:1px solid # !important;
    padding:px;
}


_03_頁首頁尾

/*======================== 頁首頁尾 ========================*/

/*登入列*/
#top_login
{
    background:# !important;
    margin:0;
    margin-bottom:px;
    padding-top:px;
    padding-right:px;
    height:px;
    filter:alpha(opacity=50) !important;opacity:0.5 !important;zoom:1;
    border-bottom:1px solid #111;
    -moz-box-shadow: 0 8px 10px rgba(0,0,0,0.5);  /*CSS3陰影*/
    -webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.5);
    -o-box-shadow: 0 8px 10px rgba(0,0,0,0.5);
    -ms-box-shadow: 0 8px 10px rgba(0,0,0,0.5);
    box-shadow: 0 8px 10px rgba(0,0,0,0.5);
}

/*隱藏頁首小圖並縮短間距*/
#top_bar .item img
{
    width:0 !important;
    margin:0 !important;
    filter:alpha(opacity=0); opacity:0; zoom:1;
}

/*去除小圖底線*/
#top_bar .on img {border:none;}

/*標題*/
#page_title
{
    color:# !important;
    font-size:px;
    text-shadow:0px 0px 5px #; /*陰影*/
}  

#top_login a,  /*頁首右邊文字*/
#top_bar, #top_bar a,   /*頁首左邊文字*/
#top_bar .content a#edit_link,   /*編輯文字*/
#alert_beacon,  /*通知數字*/
.unread #alert_beacon,    /*通知數字:未讀*/
#languge_selector,  /*切換語言*/
#footer, #footer a  /*頁尾文字*/
{
    background:none !important;
    border:0 !important;
    font-size:px !important;
    color:# !important;
    font-weight: !important;
    text-transform:normal !important;
    text-decoration:none !important;
    letter-spacing:px;
}

#top_login a:hover,
#top_bar a:hover,
#top_bar .content a:hover#edit_link,
#footer a:hover
{
    background:# !important;
    color:# !important;
    top:0px;
    left:0px;
}

/*通知數字*/
#alert_beacon {margin:0 3px;}
.unread #alert_beacon  /*通知數字:未讀*/
{
    background:none !important;
    color:#919ca9 !important;
}

/*編輯與登入登出*/
#top_bar .content a#edit_link, a#login_link  
{
    font-size:px !important;
    padding:px;
    margin:0px 3px;
}

#top_bar .content a:hover#edit_link,
a:hover#login_link
{
    background:# !important;
    color:# !important;
    font-size:px !important;
    padding:px;
    margin:0px 3px;
}

/*頁尾與語言選單*/
div#footer
{
    text-align:center;
    padding:12px;
    margin:0 auto !important;
    width:610px;
    background:# !important;
    color:# !important;
    font-size:11px !important;
    -moz-border-radius:12px 12px 0px 0px;
    -khtml-border-radius:12px 12px 0px 0px;
    -webkit-border-top-left-radius:12px;
    -webkit-border-top-right-radius:12px;
    -webkit-border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
}

#languge_selector
{
    position:relative;
    margin:0px 45px 0px 0px;
    font-size:11px !important;
}


/*尚未展開時的下拉表格欄位*/
#languge_selector form select
{
    background:#;  
    border:1px solid # !important;
    font-size:11px !important;
    color:# !important;
}

/*展開後的表格*/
#languge_selector form select option
{
    background:#;  
    border:1px solid # !important;
    color:# !important;
}

/*---隱藏顯示---*/

#top_login, #top_bar, #footer,
div.dash-segment
{filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;}

#top_login:hover, #top_bar:hover, #footer:hover,
div.dash-segment:hover
{filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;}

 

基本的背景、連結顏色與頁首頁尾樣式,各個項目依照不同需求選用搭配,即可呈現噗版初步的樣貌~(待續)

創作者介紹
M6

金羽銀華

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


留言列表 (7)

發表留言
  • 白白你狐說
  • 請問...
    頁首的「尋找/邀請朋友」有沒有語法可以把她單獨變透明OAO?
    謝謝^^
  • 這個項目沒有單獨列出名稱,但另外兩個“我的帳號”跟“登出”有,所以要隱藏“尋找/邀請朋友”的寫法是:
    #top_login a /*頁首右方選單隱藏*/
    {
    filter:alpha(opacity=0); opacity:0; zoom:1;
    }
    a#login_link, a#account /*顯現我的帳號與登出*/
    {
    filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;
    }

    M6 於 2011/09/09 16:28 回覆

  • 白白你狐說
  • 成功改好了~謝謝你^^
  • ^x^

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

  • 伊耶
  • 請問一下....我撲浪部之用了哪個與法導自變成全黑....
  • M6 於 2011/11/04 10:18 回覆

  • 伊耶
  • http://www.plurk.com/ElmairyLeaf5128 就像這樣.....還有下面資訊區的地方禿然變好矮= .=

  • 現在看是正常的?已經改好了嗎? :)

    M6 於 2011/11/04 10:19 回覆

  • 伊耶
  • 謝謝經解決了(抱歉:))) http://www.plurk.com/gyps5128 ←請問他的噗往下面讀時感覺會重上面跑下來請問他怎抹用的(麻煩你了*
  • 指的是淡入效果?語法:
    #timeline_holder div.plurk
    {
    -moz-transition:top 0.5s ease, -moz-transform 0.5s ease;
    -moz-transform-origin:0 0;
    -webkit-transition:top 0.5s ease, -webkit-transform 0.5s ease;
    -webkit-transform-origin:0 0;
    }

    M6 於 2011/11/07 13:04 回覆

  • 。雪花。
  • http://i.imgur.com/SoNTJ.png

    您好:
    我想請問如何將河道上的噗時間顯示有背景底色呢?
    (↑↑如上圖所示底色是淺灰色那樣)
    因為時間顯示的字體是黑色,
    如果碰上同樣是黑色的背景,
    就無法看出發噗時間了…
    謝謝:)
  • 加上背景色的語法:
    #time_show
    {
    background:#dbdbdb !important;
    }

    M6 於 2011/11/07 22:16 回覆

找更多相關文章與討論