關於調整在Pixnet CSS 的時候參考的一些資料

做一下筆記備忘

1.Pixnet CSS 架構部分

[BLOG]pixnet CSS架構圖 @ 紫色微笑。Smilejean

http://smilejean.pixnet.net/blog/post/12055116

 

[公告] 痞客模板 CSS 架構圖釋出 @ 痞客邦 PIXNET 站方部落格

http://admin.pixnet.net/blog/post/7478518

這兩個資料有pixnet css完整的架構圖與架構文字，方便修改時參考

[技術] 如何用CSS調整部落格文章的段落行距和字級 (痞客邦Pixnet）@天使的咖啡屋

http://dreamyeh.pixnet.net/blog/post/24046413

這篇是講文字段落調整的注意地方，蠻實用的。

 

2. CSS 及其他工具

CSS 線上編輯器 OnLine CSS Designer - CSS Style Editor

http://60.248.128.85/CSSedit/

這是線上可以編輯及預覽簡單css 文字效果的網頁，覺得蠻實用了
調整後有滿意的在貼到 pixnet的css編輯器裡面

 

Adobe Kuler

http://kuler.adobe.com/

這是一個很大的 配色分享網站，可以參考到很多其他網友提供的配色
對於像是自己這種對於顏色配色不懂的，可以在上面觀看、參考一些配合的資訊
強烈推薦，免費註冊會員後可以，看到各種配色的資訊，如RGB碼

 

0 to 255  (2011/07/05 新增)

http://0to255.com/

線上色盤，可以點一下顏色就複製顏色代碼非常方便

 

 

 

2010/6/13 CSS修改
.article-body {
color: #000;
margin-top:10px;
margin-left:20px;
margin-bottom:20px;
}

.refer {
margin-left:20px;
}

 

.article-body {
color: #000;
margin-top:5px;
margin-left:10px;
margin-right:0px;
margin-bottom:0px;
}

.refer {
margin-top:0px;
margin-left:10px;
}

 

 

 

修改 blog下方留言區文字方塊打字是白色的問題
謝謝網友 Augustine 提醒

2010/09/22 CSS修改
#comment-form input {
color:#fff;
border:none;
border-bottom:1px solid #ccc;
background:none;
width:99%;
}

 

#comment-form input {
color:#3d3d3d;
border:none;
border-bottom:1px solid #ccc;
background:none;
width:99%;
}

 

9/30 隱藏 PIXNET 新增加的工具吧

最後增加

#toolbar-box{display:none}　

資料來源：隱藏pixnet底下改版的快捷功能BAR

http://smallwu36.pixnet.net/blog/post/27105781

 

 

 

1.調整版面字體，讓Mac/Windows 看起來都一樣 字體也縮小一點

2.側邊分類欄的邊緣及高度調整

 

2011/07/05 CSS修改

html {
color:#000;
font-family:arial, Sans-Serif;
font-size:85%;
#background:url() center top;
}

.box-text {
line-height:2;
}

#spotlight,.article,#user-post {
margin-bottom:40px;
}

 

 

#view-mode,.box {
margin-bottom:10px;
}

html {
color:#000;
font-family:Arial,Trebuchet MS,Verdana;
font-size:80%;
#background:url() center top;
}

.box-text {
    margin:5px 0px 0px 5px;
    line-height:1.5;
}


#spotlight,.article,#user-post {
margin-bottom:10px;
}

 

#view-mode,.box {
margin-bottom:5px;
}

 

2015/03/01 CSS修改

增加 痞客邦新版快捷列之伸縮

參考資料來源 痞客邦新版快捷列之伸縮

#topbar:hover {
top: 0px;

}
#topbar {
top: -35px;
right:0px;
position: fixed;
width:100%;
display:block!important;
}
  增加CSS 痞客邦部落格閒置視窗美化
參考資料來源 CSS 痞客邦部落格閒置視窗美化

.modal-footer{display: none;}

.idle-adsense{display: none;}

.idle-related-posts{display: none;}

.modal-dialog{top: 50% !important; margin-top: -100px !important;}
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 hohobear 的頭像
    hohobear

    hohobear吃吃喝喝看世界

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

    E-mail轉寄