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

目前日期文章:201105 (13)

瀏覽方式: 標題列表 簡短摘要

除了上一篇全頁面背景圖的運用外,試著將圖片放到時間軸、主控台,調整背景與文字顏色等色系,並進一步改善浪上的噗的呈顯方式,改一點小細節,就能有完全不一樣的噗浪風景~

2013_基本款背景型2

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

文章標籤

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

多方嘗試各種噗版的可能後,總有一段時間,會回歸使用最原始的版型,噗浪的預設值。然後,又想著哪裡可以再修正,或是更簡潔地置換想看的背景圖的方式。

2013基本款

2013_基本款,就此誕生。

拿掉了背景、底色、框線,隱藏了不必要的選項,設定好基本的文字大小與色系,這套『基本款』的語法,可以依照個人不同的需求再增減項目,項目清單請參考「噗浪css架構對照表」這篇文章。

語法內容如下,請參考:

文章標籤

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

為了方便自己選用與組合噗版的各個CSS項目,所以整理了一份對照表,羅列了大部份使用過的項目清單,也放上來提供大家參考~

/*------------------------------------------------------------------------
噗浪語法 Plurk CSS: 噗浪CSS架構對照表
列表整理 List order by: Be Myself Inc. M6
-- 此噗版CSS僅供個人練習參考用,請勿改製再分享或用於商業用途 --
-- Copyright: 版權所有 保留一切權利  All Rights Reserved --
------------------------------------------------------------------------*/


/*-----#前置設定-----*/

img   /*所有圖片*/
a:focus, :focus, a, a:link, a:visited, a:active  /*連結文字*/
a:hover
select  /*下拉選單*/
select:focus
input    /*輸入欄位*/
input:focus


/*-----語言字型-----*/

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


/*-----Google瀏覽器捲軸-----*/

::-webkit-scrollbar
::-webkit-scrollbar-thumb
::-webkit-scrollbar-thumb:hover


/*-----畫面背景-----*/

body, html
#page_title  /*標題*/
#top_login    /*頁首登入列*/
#top_bar /*頁首左邊*/
#top_bar a   /*頁首左邊連結*/
#top_bar .content a#edit_link   /*編輯*/
#alert_beacon  /*通知*/
.unread #alert_beacon    /*未讀通知*/
#top_bar .item img  /*頁首左邊小圖*/
/* USE_DARK_ICONS */ /*頁首左方小圖使用深色*/
#top_login a /*頁首右邊文字*/
a#login_link   /*登入登出*/
#languge_selector  /*切換語言*/
#languge_selector form select  /*尚未展開時的下拉表格欄位*/
#languge_selector form select option  /*展開後的表格*/
div#footer  /*頁尾*/
div#footer p    /*頁尾段落*/
#footer a  /*頁尾連結*/

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

為了呈現底圖適合的風景,除了放到時間軸並調整佈局,或是用語法改變背景圖大小外,

若希望畫面佈景的整張背景圖呈現,沒有外露的底色,也不被時間軸所框限住呢?

調整畫面佈景與主控台高度示範  

可以的。只要將背景圖網址的語法放到畫面佈景(body, html)的項目中,並且固定住主控台的高度,

這樣,就不會因為個人資訊太多而讓背景圖高度不足涵蓋整體畫面了~

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

在選用背景圖的時候,常常會發現,圖片的寬度或是高度不夠,會顯露出底色,這時,除了調整背景圖大小的方式(可參見 這篇文章),還有一種做法,就是改變噗浪預設的佈局,將時間軸的背景高度調成適合底圖呈現的樣態。

調整時間軸佈局   

時間軸原本預設的高度是386px,將他拉高至600px,並調整底線與日期線的相對應高度,以符合底圖想要呈現的高度大小。

語法:

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

換來換去,還是覺得簡潔清爽的版面,會讓自己不容易用膩啊~ (茶)

 

所以,就趁空將之前噗友反應過的,希望將 二月二 這個白淨噗版作成部落格樣式的願望,付諸實現~

D+二月二.png  

新的 D+二月二 痞客邦部落格樣式就這樣出爐啦~

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

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

[ plurk css ] 單則訊息連結頁

[ plurk css ] 功能視窗的小變化

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

_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;
}

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

浪上的噗,是主要玩噗閱讀噗的所在,也是整體噗版設計的重點。

_10_浪上的噗

/*======================== 浪上的噗 ========================*/

#timeline_holder div.plurk  /*淡入效果*/
{
    -webkit-transition:top 0.5s ease, -webkit-transform 0.5s ease;
    -webkit-transform-origin:0 0;
    -moz-transition:top 0.5s ease, -moz-transform 0.5s ease;
    -moz-transform-origin:0 0;
}

/*浪上的噗往下移*/
.plurk {margin-top:12px;}

/*浪上噗的最小高度*/
.plurk .truncated {min-height:22px;}

/*讓超過時間軸的噗內容出現*/
#timeline_cnt {overflow: visible;}

/*表格寬度*/
.list table {width:100% !important;}

/*列表延伸動態*/
.list
{
    -webkit-transition:height 0.5s ease;
    -moz-transition:height 0.5s ease;
}

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

主控台資訊區塊的細部設定,包括自介、統計、朋友、粉絲等。

_09_資訊區塊

/*======================== 資訊區塊 ========================*/

#dash-profile, #dash-stats, #dash-friends , #dash-fans    /*置中對齊*/
{
    text-align:center;
}

#dash-stats h2, #dash-friends h2, #dash-fans h2   /*標題*/
{
    background:none !important;
    border:0 !important;
    color:# !important;
}

/*列出所有朋友粉絲連結*/
.show_all_friends a
{
    font-size:11px !important;
    color:# !important;
    text-decoration:none !important;
    letter-spacing:px;
}
.show_all_friends a:hover
{
    color:# !important;
    background:# !important;
    text-decoration:none !important;
}

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

再來是發噗區的設定。包括「私人訊息、語系及選項」選單,以及"plurk"與"搜尋"頁籤及內容的設計。

_07_私人選項

/*======================== 私人選項 ========================*/

#more_options_link  /*打開前*/
{
    background:transparent url(http://) left top no-repeat !important;
    padding-left:15px !important;
    border:0 !important;
    color:#aaa !important;
    font-size:12px !important;
}
#more_options td,
#more_options .caption,
#more_options_holder
{
    background:none !important;
    border:0 !important;
    color:#eee !important;
    font-size:12px !important;
    letter-spacing:;
    text-decoration:none !important;
}
#more_options_holder   /*打開後*/
{
    background:#444 !important;
    border:1px solod #222 !important;
}

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

在前一篇噗版的主要背景與頁首頁尾設定後,細部調整時間軸(河道)相關的設計變化:

_04_時間顯示

/*======================== 時間顯示 ========================*/

.bottom_start, .bottom_end  /*隱藏底線時間*/
{
    font-size:0px;
    height:0;
    width:0;
    overflow:hidden;
    filter:alpha(opacity=0); opacity:0; zoom:1;
}
.day_start .bottom_start, .day_start .div_start  /*顯示日期*/
{
    background:#09628a !important;
    color:#edffff !important;
    font-size:11px !important;
    padding:0 22px;
    margin-top:2px;
    width:auto;
    height:auto;
    filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;
}

#timeline_bg .day_bg .div_inner
{
    width:24px !important;
    height:1px !important;
}

/*每則噗的對應時間*/
#time_show
{
    background:# !important;
    border:0 !important;
    height:px;
    margin-top:px;
    padding:px;
    -moz-border-radius:5px 5px 0px 0px;
    -khtml-border-radius:5px 5px 0px 0px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
}
#time_show span
{
    color:#;
    font-size:12px !important;
}


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

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

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

分12段落.png  

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

 

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

噗浪預設的功能視窗與說明小視窗,有時和噗版整體的背景色顯得不太協調,這時就需要用自訂CSS來改變一下視窗的外觀樣式~

/*------功能視窗樣式------*/

[ 0 原本的功能視窗 ]

功能視窗  

[ 1 改變標題與內框的顏色 ]

內框與標題.png  

語法:

/*標題列*/
.GB_Window .header td.caption,
.GB_Window .close
{
    color:#ddd; /*字顏色*/
    background:#333 !important; /*背景色*/
}

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

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

找更多相關文章與討論