為點部落空間加入個人的CSS

2008-04-23

3596
0
other
2012-07-02

為點部落空間加入個人的CSS

自從加入點部落之後，開始對經營個人部落格有了興趣，順便也磨練磨練自己的文筆。

既然是個人部落格，當然就想要跟別人不一樣，那最基本的就是版型了。

從後台就去可以選取的版型雖然有數十種，好看的都被人選走了，剩下的都不能讓我滿意，不過還好點部落可以讓人自訂CSS，那乾脆自己設計一下。

不過，像我這種視覺殘障，常常弄出很誇張的搭配出來，還是先上open design挑一個自己喜歡的版型，再利用IE的Internet Explorer Developer Toolbar或是firefox的firebug來即時瀏覽編輯後的樣子。

這樣就完成了我的第一個點部落的個人版型。

我選用的是orange的版型，CSS如下

body
{
    background-color:#404040;
    color:black;
}

#header, #sidebar, div.footer
{
    border: solid 10px #ffffff;
    background-color:#b8e33c;
}

#header
{
    background: #B8E33C url(RIMG0015.JPG) no-repeat left top;
    height:350px;
}

#header h2
{
    font-size: small;
}

#blogPosts
{
    border: solid 10px #ffffff;
    background-color:#ffffff;
}

#sidebar
{
    MARGIN: 0px 10px 10px 0px;
}

#sidebar ul
{
    margin:0px 0px 5px 5px;
}

#sidebar ul li
{
    border-bottom: 1px dotted #B8C539;
}

#sidebar .contentbox
{
    border: solid 0px #ffffff;
    width:100%;
}

#sidebar h2, #sidebar h3
{
    COLOR: #7d4400;
    text-align:left;
    margin:0px 0px 5px 5px;
    font-weight:normal;
}

#content
{
    width:820px;
}

#blogPosts
{
    width:606px;
    padding:0px;

}

#blogPosts div.contentbox, #blogPosts div.bookmarks
{
    width:100%;
    margin-right: 20px;

    background-color:#b8e33c;
    border: solid 0px #ffffff;
}

#blogPosts div.content
{
    padding-left:5px;
    padding-bottom:5px;
}

div.contentbox h2
{
    background-color:#b8e33c;
    border: 0px;
}

#search input.searchButton
{
    background-color: #cccccc;
    width:auto !important;
    width: 40px !important;
    width: 25px;
    font-weight: bold;
}

#search input.searchterm
{
    color: #999;
    width:110px;
}

.dropshadow
{
    padding:0px;
    width:100%;
    margin:0px;
}

a
{
    color: #FFFFFF;
}

a:hover
{
    color: #FFFFFF;
}

.footer
{
    width:800px;
    height:20px;
}

見笑了，謝謝觀賞。

---------------

這是簽名檔，I love Dotblogs

回首頁