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

在上篇 版面基礎的演練 過後,熟悉了基本佈景項目,我們可以試著進一步調整文字的字型與顏色,

讓每天閱讀的噗浪更耐看些

為了能夠熟悉背景的應用,這次,讓我們換一張背景圖,放在時間軸,從版面的佈局,再練習一遍~

- - 範例二 - -

範例二.png

 

-- 原本的預設佈景 --

原本的預設佈景.png

 

-- 範例二的語法練習 --  (也是一樣,請一段一段嘗試,看清楚各部份的變化 ^^)

/*
    噗版名稱:範例二
    編寫者:66660000
    背景圖來源:photo by Be Myself Inc. M0
    原始碼出處:Be Myself Inc. M6
*/

/*------------------------------------------------------*/

/*
    畫面佈景:全頁面背景  黑底色
*/

body, html
{
    background:#000;
}

/*
    時間軸主題:河道上的背景圖
*/

#timeline_holder
{
    background:#000 url(http://farm6.static.flickr.com/5283/5204194142_568b454e42_o.jpg) repeat-x;  /*圖片水平重複*/
    border-top:0px solid #ccc !important;
    border-bottom:0px solid #ccc !important;
}

/*
    隱藏 噗浪生物
*/

#dynamic_logo ,#logo img {filter:alpha(opacity=0); opacity: 0;zoom:1;}
img#creature {filter:alpha(opacity=0); opacity: 0;zoom:1;}

/*
    時間顯示
*/

#timeline_bg .day_bg .div_inner,   /*底*/
#bottom_line
{
    filter:alpha(opacity=33) !important;opacity:0.33 !important;zoom:1;    /*透明度*/
}

.day_start .bottom_start, .day_start .div_start,   /*字*/
#timeline_bg .bottom_start , .bottom_end,
#time_show span
{
    color:#fff !important;
    font-size: 10px !important;
}

#time_show    /*每則噗對應的時間 獨立底色*/
{
    background:#000 !important;
    border:0 !important;
}



/*
    主控台主題  去掉背景
*/

div#dashboard_holder   /*發噗區+資訊區*/
{
    background:none;
}

div#plurk-dashboard   /*資訊區全區底圖*/
{
    background:none;
    border:0 !important;
}

#pane_plurk,   /*Plurk-搜尋區塊*/
#pane_search
{
    background:#808080;   /*底色 淺灰*/
    border:0 !important;
}

#toggle_tab li.tt_selected  /*正選*/
{
    background:#808080 !important;     /*底色 淺灰*/
    border:0 !important;
    color:#444 !important;
}

/*
    輸入欄位
*/

textarea#input_big_private,  /*發送私密噗視窗*/
textarea#input_big_private.content,  
textarea#input_big,
textarea#input_permalink,
textarea#input_big.content
{
        height:60px;      /*加高高度設60*/
        filter:alpha(opacity=70) !important;opacity:0.7 !important;zoom:1;    /*透明度*/
}

 

在這個版型中,輸入區給予灰底色:

輸入區底色.png

 

因為時間軸設了透明度,把「每則噗對應的時間」獨立拉出來寫語法,給予黑底色,讓字更能夠清楚辨識:

每則噗的時間.png

 

然後可以得出

- - 範例二 - - 的樣貌

範例二.png

 

噗浪預設的連結顏色不一,可以發現浪上的噗是藍色,頁首頁尾、以及主控台資訊也都是不同顏色,

我們可以藉由調整文字的基本設定,來指定使用喜歡的字型、字的大小以及統一的連結顏色:

- - 範例二 - - 調整文字設定後

加文字設定.png

 

請在原先的語法後,加上下面的CSS內容:

/*
    文字設定
*/

a,a:link,a:visited, a:active    /*連結文字*/
{
    color:#aaa !important;     /*字顏色*/
    text-decoration:none !important;   /*不加底線*/
    outline:0 !important;   /*消除連結虛線框*/
}

a:hover   /*滑鼠移至效果*/
{
    color:#888 !important;     /*字顏色*/
    text-decoration:underline;    /*加底線*/
}

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-size:12px;      /*字大小*/
    font-weight: regular;
    text-transform:normal;
    letter-spacing:0.02em;   /*字元間距*/
    font-family:"Helvetica Neue", Helvetica, Meiryo, Arial; /*字型*/
}

 

試著改變其中的值,像是字型" "中可以換成中文的「微軟正黑體」或是「新細明體」,

並且更換看看字的大小和顏色等設定,來找出最適合自己的文字樣式吧

 

創作者介紹
M6

金羽銀華

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


留言列表 (17)

發表留言
  • 犽
  • 你好 我使用的版型是MUJI X'mas的版型
    但是我覺得留言上的字的顏色有點淺...看得有點吃力>"<
    請問怎麼修改CSS才能將字的顏色變的比較深一點呢?
    感恩QQ
  • 在 浪上的噗 那段
    .td_cnt .text_holder /*噗文字內容*/
    {
    color:#555 !important;
    }

    改#555 為#000 就可以囉

    M6 於 2010/12/27 16:47 回覆

  • 阿K
  • 您好~我用的樣式也是您做的面板^^

    就是我有把字體改成英文字體的Comic Sans MS

    然後噗很多字體都有成功變化 只有回應噗裡打英文沒有變成Comic Sans MS這種字體QAQ

    怎麼會這樣?這是語法

    body.language-large-font, /*語言字型*/body.language-large-font { font-family:"Comic Sans MS"; font-size:12px; }
    .language-large-font #top_login,
    .language-large-font #footer,
    .language-large-font .small,
    .language-large-font .tooltip_cnt,
    .language-large-font .direct-l
    {
    font-size:12px;
    letter-spacing:0.1em; /*字元間距*/
    font-family: "Comic Sans MS";
    }


    然後再問一個問題!請問怎麼改游標呢??

    我有游標ani檔的游標網址 不知語法怎麼寫呢?

    謝謝您!!!
  • 請看看你套用的版型"浪上的噗"相關語法中,有沒有另外設定字型,有的話也要一起改喔!

    游標的語法是
    * {cursor:url(http://) !important;}

    http://的地方放入圖片網址應該就可以了~

    M6 於 2010/12/27 19:19 回覆

  • 訪客
  • 謝謝你喔~
    字的顏色變深變得更好讀了^^
  • ^ _ ^

    M6 於 2010/12/27 19:14 回覆

  • 阿K
  • 那個...在GOOGLE游標無法顯示 在IE8可以

    但是在IE8您的樣式卻跑框了QAQQQQ

    怎麼辦?

    這是我的噗QAQhttp://www.plurk.com/k_ivan

    謝謝您!!
  • 跑框是指?
    可以的話,請截圖給我,讓我看看能不能解決。
    因為我使用火狐,不用ie已經很久了~ 所以,我的樣式火狐最適 XD

    M6 於 2010/12/27 22:41 回覆

  • 阿K
  • 那個...游標在IE8可顯示 在火狐沒法耶QAQ
  • 嗯,游標另外連結圖片好像只有ie可用...

    M6 於 2010/12/28 18:28 回覆

  • 阿K
  • 你好~字體好像還是沒有變耶.....這是語法Q A Q

    /*-------------------------------浪上的噗-------------------------------*/

    .plurk_cnt
    {
    font-size:12px;
    line-height:1.5;
    body.language-large-font { font-family:"Comic Sans MS"; font-size:12px; }
    }
  • 語法錯囉,應該是這樣:
    .plurk_cnt
    {
    font-size:12px;
    line-height:1.5;
    font-family:"Comic Sans MS";
    }

    M6 於 2010/12/28 20:17 回覆

  • 阿K
  • 您好~我現在用您最新噗會掉下來那個樣式

    個人標題是白底白字看不到QQQ

    怎麼改標題的字看得更清楚呢? 謝謝您!
  • 個人標題?是指個人暱稱嗎?
    背景色在 /*讓噗列表換行*/ 那段,
    .list .plurk_cnt .td_qual
    {
    background:#F6F6F6 !important;
    }
    可以刪去那行,或是改個人暱稱文字顏色,在:

    /*噗上的人名*/
    .td_qual span a,
    .td_qual span a:hover
    {
    color:#111 !important; /*加上這行文字顏色設定*/
    }

    嗯...因為標題本身已是設定灰黑色,如果變成白色,應該是預設的三個主題選項影響的緣故,
    請在文字顏色CSS後面加上" !important; " 試試看:
    #page_title /*標題*/
    {
    color:#333 !important;
    }

    M6 於 2011/02/03 11:51 回覆

  • 訪客
  • 對應時間字色要怎麼改??另外所有訊息那個按鈕的底色&字色要怎麼改??
  • 字色的語法是 color:#fff !important; 項目是 #time_show span,
    在文章內有寫到囉

    所有訊息那列的相關標籤項目,可以在這篇文章找到:
    http://m66660000.pixnet.net/blog/post/34881317

    M6 於 2011/09/15 21:03 回覆

  • 烯
  • 摁!!我想請問一下
    要怎麼才能更改未讀訊息和讀後的顏色?
    還有主控台的字能改顏色嗎?
    能教教我嘛? ..
  • 字的顏色語法是: color:# !important;
    找到該部份的項目,放入語法並填上要使用的顏色色碼即可
    浪上噗的未讀訊息項目是:.new .response_count { }
    讀後(已讀)訊息則是:.response_count { }
    主控台的項目文章中有列了,是 div#plurk-dashboard { }

    要查詢噗浪中的各項目名稱,可以參考這篇文:
    http://m66660000.pixnet.net/blog/post/34881317

    M6 於 2011/09/29 21:35 回覆

  • 小烯
  • Sorry~~原諒我的愚昧 ...
    是這樣的 ..我還有個問題 ...
    我圈起來的部份是我不會改的 ...
    http://www.wretch.cc/album/show.php?i=sky1342&b=32764&f=1617905010&p=2

    Sorry~請原諒我的愚笨 ...
  • /*噗上的人名*/
    .td_qual span a,
    .td_qual span a:hover
    {
    color:# !important;
    }

    放入顏色代碼即可。

    M6 於 2011/09/30 19:46 回覆

  • 小烯
  • 謝謝你的解答
    只是不知道位什麼還是改不過去呢 ...
  • 可能的原因是:
    1. 語法中其他部份有影響到(如:整體連結的設定值,影響到暱稱連結)
    2. 瀏覽器判讀方式無法正確解讀
    所以沒顯現。

    要檢查一下語法內容才知道囉

    M6 於 2011/10/01 09:44 回覆

  • 訪客
  • 這是我的語法 ...因為我不知道要不要排版 ...所以很亂 ...拜託妳幫我看一下!!謝謝><

    body, html
    {
    background:url(http://www.crescent.com.tw/wallpaper/1024/dw-R240.jpg) left top no-repeat;
    background-attachment:fixed;
    }

    #timeline_holder {
    background: none;
    }
    .plurkaction, #toggle_tab li.tt_selected, #plurk-dashboard {
    background:transparent;
    border:0;
    }
    #page_title{color:#0F3CF0; font-size:20px;}
    .td_qual span a,
    .td_qual span a:hover
    {
    color:#FFFF78 !important;
    }

    .new .response_count {color:#0F78F0 !important;
    }
    .response_count {color:#1EF000 !important; }
    #main_poster .qual_holder {color:#FF0000 !important;}
    #timeline_holder div.plurk .td_qual span a {color:#FF0000 !important; }
  • 請問要看?是哪部份有問題呢?
    如果是上一位關於暱稱顏色的問題,
    語法中有兩個部份有影響到,
    一個是
    .td_qual span a,
    .td_qual span a:hover
    {
    color:#FFFF78 !important;
    }
    另一個是
    #timeline_holder div.plurk .td_qual span a {color:#FF0000 !important; }

    所以看是要用哪個顏色? #FFFF78 還是 #FF0000?
    放在後面的語法設定會覆蓋掉原本前面的,所以呈現出來的應會是#FF0000喔

    M6 於 2011/10/01 14:36 回覆

  • 訪客
  • 所以是放一個還是放兩個?因為我所以想的是 ..
    浪上噗的暱稱要有改變顏色
  • 顏色沒變嗎?那應該是瀏覽器不支援上述的語法呈現,
    再試試這個項目:
    .name { color:#FFFF78 !important; }

    如果還是不行,那就沒辦法了,只有換能支援較多css呈現的瀏覽器了,火狐或Google都ok

    M6 於 2011/10/02 10:19 回覆

  • 阿偉
  • 不好意思,請問"回覆區內"暱稱的字體大小要如何更改呢? 感謝
    我用了字體加大的語法之後回覆區的暱稱沒有變大欸

    還有要如何更改噗浪版面最頂端的那個名稱的顏色呢? 謝謝
  • /*回覆區的人名*/
    .list .td_qual span a
    {
    font-size:12px !important;
    }

    /*標題名稱*/
    div#page_title
    {
    color:# !important;
    }

    數值可自行調整

    M6 於 2011/10/14 11:53 回覆

  • 阿偉
  • 你好,請問要如何把圖片中的那個點點點去掉或是變成透明的呢? 謝謝
    還有不知道點點點後面的回覆數能不能單獨變更大小呢? 謝謝
    圖片網址 http://www.flickr.com/photos/coolickr/6242475162/
  • /*隱藏點點點*/
    .dots .inner
    {
    display : none ;
    height:0 !important;
    width:0 !important;
    overflow:hidden;_overflow:none;
    filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;
    }

    /*回應數*/
    .response_count
    {
    font-size:13px !important;
    }

    可以自行調整數值

    M6 於 2011/10/14 11:51 回覆

  • 悄悄話
找更多相關文章與討論