สวัสดีครับทุกท่าน

        หลายๆ ท่าน อาจจะกำลังสนุกกับการตกแต่งบล็อกและการคลำหาเมนู ทางออกจากบ้านและหาทางกลับบ้านตัวเองกันอย่างเมามันส์ ผมเลยขอเอาวิธีการตกแต่ง CSS มาให้คร่าวๆ ครับ  เผื่อสำหรับบางคนต้องการจะขยายให้กว้างเต็มจอครับ ผมเองก็กำลังคลำอยู่เหมือนกันครับ เลยได้ CSS มั่วมาได้แค่นี้นะครับ  ปราศจากคำอธิบายครับ

  • บทความเก่า ตามได้จากบทความนี้นะครับ  http://gotoknow.org/blog/mrschuai/103148


    div#page-site {
        width: 100%;
    }
    div#page-owner {
        width: 97%;
        padding: 3px 4px;
        color: #0000FF;
        background: #338833;
        background-image: url("/file/mrschuai/woodbg.jpg");
        background-repeat:repeat;
        background-position:right top;
        position: relative;
        clear: both;
        z-index: 970;
    }
    div#sidebar2 {
        background-image: url("/file/mrschuai/woodbg.jpg");
        background-repeat:repeat;
        background-position:right top;
    }
    div#sidebar2 div.sidebar-left {width: 29%;}
    div#sidebar2 div.sidebar-left-compact {width: 27%;}
    div#sidebar2 div.sidebar-right {width: 70%;}
    div#title{
        padding: 20px 8px 35px;  
        font-size: xx-large;
        color:#0000FF;
        background:#000000; 
        background-image:url("/file/mrschuai/homeheader2sm.jpg");     
        background-repeat:no-repeat;
        background-position:center top;
        height:180px;
    }
    div#title span {display:none;}

    div#page {
            background: #00CCEE;
            border: solid 1px #00057C;
            border-bottom: solid 2px #00057C;
            width: 99%;
            background-image: url("/file/mrschuai/woodbg.jpg");
            background-repeat:repeat;
            background-position:right top;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
    }
    form{
        border: medium double #5EA2FF;
        background-image:url("/file/mrschuai/greenbg6.jpg");
        background-repeat:repeat;
    }

    div.comment_item {
        border: dashed 2px #00CCEE;
        background-image:url("/file/mrschuai/woodbg.jpg");
        background-repeat:repeat
    }

    div#ribbon {
        padding: 2px 2px;
        color: #0000FF;
        background: #338833;
        background-image: url("/file/mrschuai/woodbg.jpg");
        background-repeat:repeat;
        background-position:right top;
        position: relative;
        clear: both;
        z-index: 970;
    }
    div#feed {
        font-size: 0.8em;
        clear: both;
        background: #338833;
        background-image: url("/file/mrschuai/greenbg6.jpg");
        background-repeat:repeat;
        background-position:right top;
        border-bottom: 4px solid #F9F2EC;
        padding: 2px 4px;
        position: relative;
        z-index: 970;
    }
    div#footer{
        font-size: 0.8em;
        clear: both;
        background: #338833;
        background-image: url("/file/mrschuai/greenbg6.jpg");
        background-repeat:repeat;
        background-position:left top;
        border-bottom: 4px solid #F9F2EC;
        padding: 2px 4px;
        position: relative;
        z-index: 970;
    }
  • ลองดูนะครับผม จะปรับแต่งตรงไหนก็ตามสบายนะครับผม
  • ไ้ว้ค่อยมาใส่เพิ่มเติมให้ระบบเสถียรก่อนนะครับ เพราะตอนนี้ผมยังไม่แน่ใจว่า Template เป้าหมายที่ทางทีมงานต้องการอยู่ในแนวไหนนะครับ ไว้ค่อยๆติดตามข้อมูลจากทีมงานกันต่อไปนะครับ

ขอให้สนุกในการปรับตัวสำหรับบ้านใหม่ที่สนุกและตื่นเต้นต้อนรับวันเด็กนะครับ

ขอบคุณครับผม

เม้งครับ