About CSS
posted on 01 Apr 2009 20:55 by eebabo in HowtoLesson
เผยแพร่ได้แต่ต้องให้เครดิตที่มาด้วยนะคะ ขอบคุณค่ะ
เราจะมาดูกันว่า CSS Editor ใน theme ของ exteen นั้นมีอะไรบ้าง ..
ก่อนอื่น CSS ของ theme ที่เราจะเอามาเป็นตัวอย่างก้อคือ My Dark Apollo อันนี้นะ
มาดูซิว่าแต่ละส่วนคืออะไรมั่ง
/* General */ คือส่วนทั่วไป(ที่มักแสดงผลทั้งหน้า)
/* Header */ คือส่วนของเฮด (รวมทังรูปภาพเฮด พื้นหลัง และตัวอักษร)
/* Neck Menu */ คือส่วนของเถบเมนู (ที่จะมีคำว่า Home อ่ะ)
/* Content */ คือส่วนที่แสดงผลเวลาอัพบลอค ก้อคือส่วนเนื้อหานั่นแหละ
/* Sidebars */ คือส่วนด้านข้าง ที่มีพวก past categories ฯลฯ ไรพวกนั้น
/* Sidebar Header image */ คือส่วนรูปภาพของพวก past categories recommend ฯลฯ
/* Configure each module */ จะประกอบด้วย ..
/* Profile */ คือส่วนที่เป็นรูป avator ของเรานั่นแหละจ้ะ
/* Tags */ คือส่วน Tags ซึ่งไม่มีไรมาก
/* Comment Form */ คือส่วนของฟอร์มที่กรอกคอมเม้นท์
/* Comment (Showing Area) */ คือส่วนที่โชว์คอมเม้นท์ที่คนอื่นมาเม้นให้เรา
/* Leg Menu */ ชื่อก้อบอกละนะ ก้อคือส่วนขาบลอค (ที่ยังไม่ถึงเท้านั่นเอง)
/* Footer */ คือส่วนที่แสดงพวก power by exteen blog ไรพวกนั้นแหละ
/*PNG support for IE*/ ส่วนนี้ไม่มีไรหรอก ไมต้องไปแก้ไรนะจ้ะ
ลองมาดูว่าเราสามารถแก้ CSS ตรงส่วนไหนได้บ้าง (เอาแบบพื้นฐานละกัน)
/*Normal Theme for the new exteen*/
/*Copyright by Etceto co,ltd. 2007*/
/*===================================
===================================*/
/* Simple Reset - Not Editable*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{ margin: 0;padding: 0;border: 0;outline: 0;}
/* General */
body {
background:#โค้ดสีพื้นหลังของบลอค url(urlรูปภาพพื้นหลัง) repeat-x top left;
color:#โค้ดสีตัวอักษรที่แสดงทั้งหน้า;
font:ขนาดตัวอักษรที่แสดงทั้งหน้า(11จะเท่าบลอคเรา,12จะใหญ่กว่า)px Tahoma, "MS Sans Serif";
line-height:1.5em;text-align:center;}
a:link, a:visited{color:#โค้ดสีของลิ้งค์ทั้งหมดเมื่อเคยไปมาแล้ว;text-decoration:none;
}
a:hover, a:active{color:#โค้ดสีของลิ้งค์ทั้งหมดเมื่อไม่มีการนำเม้าส์ไปวาง;
}
#page{
margin:auto;padding-top:15px;text-align:left;width:780px;
}
#header, #neck, #belly, #leg, #footer{ float:left; width:780px;
}
/*====================================
==================================*/
/* Header */
#header{background:url (urlส่วนพื้นหลังเฮด(คลิกที่นี่เพื่อดูตัวอย่างนะจะได้เข้าใจ))
top left no-repeat;padding:32px 0px 0px 25px;
}
#header h1 a{color:#โค้ดสีตัวอักษรด้านบนเฮดบรรทัดแรก;
font-size:ขนาดตัวอักษร(ที่กำหนดมาคือ24แต่เปลี่ยนได้)px;
}
#header h1 a:hover{color:#โค้ดสีตัวอักษรบนเฮดบรรทัดแรกเมื่อนำเม้าส์ไปวาง;
}
#header h2{font-size:ขนาดตัวอักษรบรรทัดถัดต่อมาpx;
margin:5px 0px 5px 0px;
}
#coverimage{
background:url(urlรูปภาพเฮด(คลิกที่นี่เพื่อดูตัวอย่างนะจะได้เข้าใจ)) no-repeat;
height:ความสูง(ที่กำหนดคือ180)px;
width:ความกว้าง(ที่กำหนดคือ730)px;margin-bottom:5px;
}
/*==================================
====================================*/
/* Neck Menu */
#neck{
background:url(urlพื้นหลังเนื้อหาในหน้าบลอค(คลิกที่นี่เพื่อดูตัวอย่างนะจะได้เข้าใจ)) top left;
}
#neck .module{
background:#โค้ดสีพื้นหลังส่วนที่เป็นเมนูของpage(ตัวอย่างเช่นที่มี Home,About me..);
display:inline;float:left;margin:0px 0px 0px 25px;padding:2px 0px 5px 0px;
width:730px;
}
#neck .module ul{ display:inline;margin:0px;padding:0px;
}
#neck .module h2{display:none;
}
#neck .module li{border-right:1px solid #CCC;
display:inline;padding:0px 10px 0px 10px;
}
/*==================================
====================================*/
/* Content */
#belly{
background:url(urlพื้นหลังเนื้อหาในหน้าบลอค(คลิกที่นี่เพื่อดูตัวอย่างนะจะได้เข้าใจ)) repeat-y;
}
#content{display:inline;float:left;margin:10px 15px 0px 25px;width:490px;
/*Fix too large image makes content drop problem in IE*/
overflow:visible !important; overflow:hidden;
}
.entry{ float:left; margin-bottom:15px;}
.entry .title{display:block; float:left;margin-bottom:10px; width:100%;
}
.entry .title h2{
border-bottom:ขนาดเส้นใต้ชื่อหัวข้อที่อัพเดทpx รูปแบบเส้น (solidเส้นตรง,dashedเส้นประ)
#โค้ดสีของเส้น;font-size:ขนาดตัวอักษรหัวข้อที่อัพเดท(ที่กำหนดคือ16)px;
}
.entry .title h2 a{ color:#โค้ดสีลิ้งค์ใต้หัวข้อที่อัพเดท;
}
.entry .title h2 a:hover{color:#โค้ดสีของลิ้งค์ตัวอักษรใต้หัวข้อที่อัพเดทเมื่อนำเม้าส์ไปวาง;
}
.entry .title span{
color:#โค้ดสีตัวอักษรใต้หัวข้อที่อัพเดทนั่นคือส่วนที่บอกว่าโพสโดยใครนั่นเอง;
font-size:ขนาดตัวอักษรpx;
}
.entry .post{
float:จริงๆแล้วมีคำว่า left แต่เราแนะนำให้ลบออกไปดีกว่านะ;
}
.entry .post p{margin-bottom:10px;
}
.entry .info{ float:left;width:100%;
}
.entry .info .tag{float:left;font-size:ขนาดตัวอักษรตรงtag px;
width:350px;}
.entry .info .coms{float:right;}
/*==================================
====================================*/
/* Sidebars */
#sidebar, #sidebar2{
background:#โค้ดสีพื้นหลังเมนูที่อยู่ข้างๆ ที่เป็นแถบยาวๆอ่ะ;
display:inline;float:right;margin:5px 25px 0px 0px;width:225px;
}
#sidebar2{display:none;}
#sidebar .module, #sidebar2 .module{
margin:5px 5px 15px 5px;}
#sidebar .module ul, #sidebar2 .module ul{
margin:5px 0px 0px 5px;padding:0;list-style: none;
}
#sidebar .module h2, #sidebar2 .module h2{
text-indent:-9999px;}
/* Sidebar Header image */
#sidebar #recommend h2, #sidebar2 #recommend h2
{background:url(urlหัวข้อrecommend) no-repeat;
width: ความกว้าง px;height: ความสูง px;}
#sidebar #previous h2,#sidebar2 #previous h2
{background:url(url หัวข้อ previous) no-repeat;
width: ความกว้าง px;height: ความสูง px;}
#sidebar #commentalert h2,#sidebar2 #commentalert h2
{background:url(url หัวข้อ lastest comment) no-repeat;
width: ความกว้าง px;height: ความสูง px;}
#sidebar #favourites h2,#sidebar2 #favourites h2
{background:url(url หัวข้อ favorites) no-repeat;
width: ความกว้าง px;height: ความสูง px;}
#sidebar #links h2,#sidebar2 #links h2
{background:url(url หัวข้อ link) no-repeat;
width: ความกว้าง px;height: ความสูง px;}
#sidebar #categories h2,#sidebar2 #categories h2
{background:url(url หัวข้อ categories) no-repeat;
width: ความกว้าง px;height: ความสูง px;}
#sidebar #archives h2,#sidebar2 #archives h2
{background:url(url หัวข้อ archives) no-repeat;
width: ความกว้าง px;height: ความสูง px;}
#sidebar #tags h2,#sidebar2 #tags h2
{background:url(url หัวข้อ Tags) no-repeat;width: ความกว้าง px;
height: ความสูง px;}#sidebar #pagemenu h2,#sidebar2 #pagemenu h2
{background:url(url หัวข้อ pages) no-repeat;width: ความกว้าง px;height: ความสูง px;}
a.archive{
background:url(urlไอคอนที่ปรากฎหลังหัวข้อใน categories และหน้า archives) no-repeat;
width: ความกว้าง px;height: ความสูง px;padding-left:15px;margin-left:4px;
}
/*====================================
==================================*/
/* Configure each module */
/* Profile */
#profile{width:95%;
height:ถ้าไม่อยากให้ view my pofile ขึ้นมาซ้อนรูป avator
ให้ปรับให้มากๆเช่น รูป avator ใหญ่ก้ออาจเปลี่ยนเป็น 200 px;}
#profile img{float:left;
margin-right:ที่กำหนดคือ 10 แต่ถ้าอยากให้อยู่ตรงกลางก้อลองสุ่มตัวเลขเอาpx;
}
#profile span{display:block;}
#profile .info{width:100% !important;width:60%;}
/* Tags */
#tags li{display:inline;margin-right:5px;}
/*================================
======================================*/
/* Comment Form */
#commentform{width:100%;
background:#โค้ดสีพื้นหลังฟอร์มกรอกคอมเม้น;float:left;
}
#commentform form{margin:5px;}
#commentform h3{
font-size:ขนาดตัวอักษรตรงคำว่า comment (ที่กำหนดคือ 16) px;
font-weight:bold;
}
#commentform .formrow{
border-top:ขนาดเส้นในฟอร็มกรอกคอมเม้นท์px รูปแบบเส้น (solid หรือ dashed )
#โค้ดสีของเส้น;
padding:2px;
}
#commentform label{float:left;width:150px;,
#commentform input.textbox{width:150px;
}
#commentform textarea{width:310px;height:150px;
}
/*================================
======================================*/
/* Comment (Showing Area) */
.comment{
border-bottom:ขนาดเส้นคั่นคอมเม้นท์ px รูปแบบเส้น (solidหรือdashed) #โค้ดสีของเส้น ;
float:left;margin:5px 0px 5px 0px;padding-bottom:5px;width:100%;}
.comment .post{float:right;width:330px;,
.comment .post p{margin-bottom:10px;}
.comment .info{float:left;font-size:ขนาดตัวอักษรคอมเม้นท์px;
width:150px;margin-right:10px;
}
.comment .info img{width:32px;
}
/*=================================
=====================================*/
/* Leg Menu */
#leg{
background:url(url พื้นหลังเนื้อหา(คลิกที่นี่เพื่อดูตัวอย่างนะจะได้เข้าใจ)) top left;
}
#leg .module{
background:#โค้ดสีพื้นหลังส่วนท้าย (ที่เขียนว่า power by exteen blog..) ;
display:inline;float:left;margin:0px 0px 0px 25px;
padding:2px 0px 5px 0px;width:730px;
}
#leg .module ul{display:inline;margin:0px;padding:0px;
}
#leg .module h2{font-size: ขนาดตัวอักษรตรง power by exteen blog.. px;
font-weight: ถ้าไม่อยากให่เป็นตัวหนาก้อลบคำว่า bold ออกไป ;
display:inline;
}
#leg .module li{border-right:1px solid #CCC;display:inline;
padding:0px 10px 0px 10px;
}
/*================================
======================================*/
/* Footer */
#footer{
background:url(url พื้นหลังส่วนท้าย (คลิกที่นี่เพื่อดูตัวอย่างนะจะได้เข้าใจ))
bottom left no-repeat;height:60px;
}
#footer p{background:#โค้ดสีพื้นหลังส่วนท้าย ;
border-top: ขนาดเส้น (ที่กำหนดคือ 1) px รูปแบบเส้น (solidหรือdashed)
#โค้ดสีของเส้น ;
border-bottom:ขนาดเส้น (ที่กำหนดคือ 1) px รูปแบบเส้น (solidหรือdashed)
#โค้ดสีของเส้น ;
font-size:ขนาดตัวอักษรส่วนนี้ px;text-align:center;
margin:5px 25px 0px 25px;padding:5px;
}
/*===============================
=======================================*/
.navbar{float:left;
}
.commentmanage{clear:both;
}
/*PNG support for IE*/
#header, #neck, #belly, #leg, #footer {behavior: url(/global/iepngfix.htc) }
#sidebar .module h2, #sidebar2 .module h2{behavior: url(global/iepngfix.htc)
}
*** พวกขนาด ความกว้างของบลอคเราไม่ค่อยถนัดเท่าไหร่นะ
เพราะรู้สึกว่าแก้แล้วมันจะพัง ยังไงถ้าอยากปรับบลอคให้กว้างกว่านี้
ลองไปเรียนรู้ด้วยตัวเองละกันเนอะ : )