ตกแต่ง CSS ทางเลือก สำหรับขึ้นบ้านใหม่ G2K
สวัสดีครับทุกท่าน
หลายๆ ท่าน อาจจะกำลังสนุกกับการตกแต่งบล็อกและการคลำหาเมนู ทางออกจากบ้านและหาทางกลับบ้านตัวเองกันอย่างเมามันส์ ผมเลยขอเอาวิธีการตกแต่ง 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 เป้าหมายที่ทางทีมงานต้องการอยู่ในแนวไหนนะครับ ไว้ค่อยๆติดตามข้อมูลจากทีมงานกันต่อไปนะครับ
ขอให้สนุกในการปรับตัวสำหรับบ้านใหม่ที่สนุกและตื่นเต้นต้อนรับวันเด็กนะครับ
ขอบคุณครับผม
เม้งครับ
ความเห็น (25)
ขอบคุณเม้งมากครับ
-----------
เปลี่ยนแปลง
ปรับตัว
เริ่มใหม่
เดินไป
----------
มีสุข
สมดุล
สวัสดีครับเอกจตุพร วิศิษฏ์โชติอังกูร
- เปลี่ยนแปลงไปในทางที่ดี ต่อให้ยุ่งยากอย่างไร ก็เ็ต็มที่ครับผมถึงไหนถึงกันครับ ไ่ม่ยากเกินกว่าความตั้งใจ และใฝ่รู้ครับ
- ค่อยๆ ศึกษาไปครับ เดี๋ยวก็เจอ เดี๋ยวก็เข้าใจนะครับ
- เป็นกำลังใจให้ทั้ง ผู้ใช้และผู้สร้างและผู้สนับสนุน ครับ
ขอยืมมาใช้ก่อนนะคะ
Coppy ไปวางทั้ง Set เลยค่ะ
แต่หัวที่แสดงความคิดเห็นเป็นรูปคุณเม้ง
พี่คิดว่าจะทำให้คนงง
พี่จะแก้ยังไงน้า
ขอบคุณค่ะ
แก้ได้แล้วค่ะ พี่ต้องการขยายเฉพาะหัวให้กว้างขึ้น
ขอบคุณค่ะ
สวัสดีครับพี่อุบล
สบายดีนะครับ ตามนี้เลยนะครับ
G2K ขึ้นบ้านใหม่ และสิ่งที่ยังอาลัยในบ้านเก่า...
จะมีอยู่สามส่วนครับ คือ แบบแค่ให้กว้างขึ้น กว้างขึ้นและใส่ภาพหัวบล็อกด้วย และแบบที่สามคือตามบทความนี้ครับ
จริงๆ ยังมีส่วนอื่นๆ อีกครับ ผมเองไม่ได้แกะว่ามีกี่ส่วนและใน Template จริง มีชื่ออะไรกันบ้างครับ
สำหรับภาพก็เปลี่ยนตาม URL ในส่วนของ title นั้นได้เลยนะครับ
ขอบคุณมากๆ นะครับ
น้องเม้งคะ
พี่อยากทำตัวหนังสือใหญ่หน่อย ทำยังไง
สายตาแย่ค่ะ อ่านยาก
สวัสดีครับพี่อุบล จ๋วงพานิช
- ตัวหนังสือในบล็อกของพี่ หรือว่าในทุกๆ บทความครับ
- หากเป็นตัวอักษรในบล็อกของพี่ รบกวนฝากลิงก์ไว้ที่นี่ด้วยนะครับ จะเข้าไปดูให้ครับ
- สำหรับหากอยากให้ทุกๆ บทความมีขนาดตัวอักษรใหญ่ พี่กดตัวอักษร A ที่มุมบนขวาของทุกๆ หน้าได้เลยครับ ตัวใหญ่กว่าคือขยาย ตัวเล็กกว่าคือลดขนาดครับ
- หรือจะกดปุ่ม Ctrl + เพื่อขยาย หรือ Ctrl - เพื่อลดขนาดครับ (กด Ctrl ค้างแล้วตามด้วย ปุ่ม บวก หรือ ลบ ตามต้องการนะครับ)
- แวะมาเที่ยวบ้านใหม่ค่ะน้องเม้ง
- อิอิ...ยังคลำทางกลับบ้านตัวเองอยู่เหมือนกัน
- ขอบคุณที่แนะนำนะคะ
สวัสดีครับพี่นารี
สบายดีนะครับ อิๆๆ เดี๋ยวสักพักคลำๆ ไปก็รู้ครับ พี่ทำได้สบายๆ เชื่อมือครับผม ขอให้สุขสดใสในวันหยุดครับ
สวัสดีครับพี่หนิง
สบายดีนะครับผม ตอนนี้นั่งอยู่หน้าจอครับ หากไม่นั่งและเปิดก็จะไม่ไวครับผม อิๆๆๆ ทางอิสานเป็นไงมั่งครับ อากาศหนาวไหมครับ ดีใจไหมครับ ที่อิสานจะมีหิมะตก (ข่าวว่าตระหนกกับคำทำนายกันยกใหญ่ครับ)
ขอให้สุขสดใสในวันหยุดครับ
กดตัว A แล้วดีขึ้นค่ะ ตัวโตขึ้น อ่านได้แล้ว
ขอบคุณค่ะ
ทดสอบตัวเอียง
ทดสอบตัวหนา
พี่กำลังแต่งองค์ทรงเครื่องอยู่ค่ะ
พี่ก็เป็นคนไม่ชอบเครื่องเยอะ แต่ทำไมหาขนาดพอดีๆยากจังเลยค่ะ
สวัสดีครับพี่หนิง
พี่ลองปรับความกว้างให้เป็น 800px และความสูงเป็น 300 px ดูครับผม หรือไ่ม่ก็ย่อให้ภาพเท่ากับที่ต้องการครับผม แล้วปรับดูนะครับ ขอให้หนุกๆ ครับ
น้องจ๋า
พี่หนิงอยากได้อักษรสีชมพู นี้ระหัสไรจ้ะ
สวัสดีครับพี่หนิง
รหัสสีของแสงในคอมพิวเตอร์มีสามแม่แสงครับ คือ แดง เขียว น้ำเงิน
ผมจะแทนค่า R, G, B นะครับ
เวลาส่งรหัสค่าสีเข้าไป จะส่งในรูปแบบ #RGB เข้าไปครับ
เช่น #FF0000 แทนสีแดง ซึ่งรูปแบบมันก็คือ #RRGGBB นั่นเองครับ
ผมเขียนเป็นเลขฐานสิบหกจำนวน หกหลักนะครับ จริง คือสามชุดนั่นเองครับ
โดยที่ RR แทนสีแดง มีค่าจาก 00, 01, 02, ..., FE, FF
และสี GG แทนสีเขียว และ BB แทนสีน้ำเงิน เช่นเดียวกันครับ
จะให้แสงสีไหนผสมกับสีไหนก็แทนค่ากันได้เลยครับ
เลขฐานสิบหกนี่คือ 0,1,2,3,.....8,9,A,B,C,D,E,F มีสิบหกตัวครับ
พี่ก็ผสมได้ตามชอบใจครับ ไม่ผสมก็คือมีค่าเป็น 00
เช่นผมจะผสมเป็นสีชมพู เกิดจากแสงสีแดงและน้ำเงินผสมกัน
ผมก็เอา #FF00FF มาผสมกันในชุดแรก กับชุดที่สามครับ
ลองผสมดูนะครับ
นั่นคือ สีแดง เขียว และน้ำเงิน จะมีค่าสีที่เป็นไปได้คือ
16x16 = 2 ยกกำลัง 8 นั่นเองครับ แล้วหากเราเอามาผสมกันให้หมดทั้งสามสีก็จะได้ความเป็นไปได้ของสีคือ 2 ยกกำลัง 24 ค่านั้นเองครับ
สีในที่นี่ หมายถึงสีของแสงนะครับ
ขอให้สนุกนะครับ
คงจะรู้กันแล้ว ทีมงานของเวลาปรับแต่งจนระบบนิ่งอีกอาทิตย์หนึ่งครับ
สำหรับการปรับแต่ง CSS ในบันทึก น่าจะตัด http://gotoknow.org ออกทุกที่ครับ -- เหลือแค่ url("/file/...") เอาให้ชัวร์ว่้าใช้ HTTP 1.1 keepalive/pipelining ได้ (เผื่อว่า browser ลืมคิดไป) อาจจะทำให้เร็วขึ้นอีกนิด
สวัสดีครับพี่Conductor
ขอบคุณมากครับผม สำหรับข้อมูลครับผม
- ขอบคุณที่ให้ความรู้
- รอบ้านเรียบร้อยดีแล้ว...จะขอเข้าห้องแต่งตัว...
สวัสดีครับคุณ ครูหล้า
ด้วยความยินดีครับผม ไว้ให้ระบบเสถียรก่อนนะครับ แล้วค่อยเล่นกันใหม่ครับผม
ขอยืมไปใช้บ้างนะคะ
สวัสดีครับ
ยินดีนะครับ ทดลองดูนะครัีบ ขอให้สนุกนะครับ
สนุกในการทำงานครัีบ
ขอบคุณมากครับ ผมมือใหม่ จะลองนำไปพัฒนาดูนะครับ
สวัสดีครัีบคุณ Pompier
ด้วยความยินดีนะครัีบ หรือจะตกแต่งจาก template ที่มีให้ก็ได้นะครับ
ขอให้สนุกนะครัีบผม