orange melody ♪

RULES

• ช่วยลงคอมเม้นท์ไว้ด้วย หากจะเอา css นี้ไปใช้ หรือถึงไม่ได้เอาไปใช้ก็ยังเม้นได้นะ
• เรื่องเครดิต เราไม่บังคับว่าต้องลง
• แต่ถ้าลงไว้ด้วย ก็จะเหมือนเป็นกำลังใจให้ทำเพิ่มและเอามาแจก (ฮา)
• สามารถแก้ไขโค้ดได้ (แล้วแต่สมควร)

PREVIEWS

preview หน้าด้านบน (ส่วน header + neck + หัว entry)

ส่วนคอมเม้นต์ //รอบนี้ขอใช้กั้ม (ฮา)

 
ส่วน sidebar //แถบสีเขียวๆ คือเวลาเอาลูกศรทับ

ส่วน leg + footer //แถบสีเหลืองที่เข้มกว่าส่วนอื่น คือเวลาเอาลูกศรทับ
(ถ้าอยากได้โค้ดสำหรับส่วนนี้ ให้ copy อันที่มี #leg นำหน้างับ)

วิธีวาง widgets (กดดูขนาดเต็มได้)

• ในส่วน bottom menu นั้น เรามี Previous, Archives และ Catogories ถ้าอยากให้มันออกมาสวยๆ ควรจะตั้งให้โชว์จำนวนเดียวกัน -- สมมุติเรามี 5 catogories ก็ให้เลือกจำนวนเอนทรี่ย้อนหลังที่จะโชว์กับจำนวน archives เลขเดียวกัน นั่นก็คือ 5 (กดที่รูปดินสอ)
• แนะนำว่าให้ย้าย widget จาก sidebar#1 ไปยัง sidebar#2
• จำนวน widget ใน bottom เมนู ไม่ควรเกิน 3
• ไม่จำเป็นต้องจัดให้เหมือนกับในรูป ลองทดลองดูว่าแบบไหนถูกใจกว่ากัน

CODE

• ไปที่ Theme > CSS Editor
• กด ctrl + C ตัวโค้ดและ Paste โค้ดลงไปเลย ( กด ctrl + V )

• 																								/*Normal Theme for the new exteen*/
  	/*Copyright by Etceto co,ltd. 2007*/
  	/*Theme layout modified by jensaru -- http://jaelsoul.exteen.com*/
  	/*======================================================================*/
  	/* 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:#BCE937 url(http://jaelsoul.exteen.com/images/theme/diag.gif) repeat top left;
  	background-attachment:fixed;
  	color:#777;
  	font:11px Tahoma, "MS Sans Serif";
  	line-height:1.5em;
  	text-align:center;
  	}
  	a:link, a:visited{
  	color:#9CCB19;
  	text-decoration:none;
  	}
  	a:hover, a:active{
  	color:#FCB514;
  	}
  	#page{
  	margin:auto;
  	padding-top:15px;
  	text-align:left;
  	width:760px;
  	}
  	#header, #neck, #belly, #leg, #footer{
  	float:left;
  	width:760px;
  	}
  	blockquote {
  	border-left: 3px solid #94DF1B;
  	padding: 10px; width: 75%;
  	background: none;
  	margin-left: 25px;
  	margin-bottom: 15px;
  	background:#FFF;
  	color: #8B864E;
  	}
  	.entry img:hover {
  	filter: alpha(opacity=95);
  	-moz-opacity: .95;
  	opacity: .95;
  	}
  	/*======================================================================*/
  	/* Header */
  	#header{
  	background:none url() no-repeat;
  	position:relative;
  	top:40px;
  	text-align:left;
  	}
  	#header h1 a{
  	font-size:30px;
  	font-family:'trebuchet ms', Georgia;
  	color:#FFFF00;
  	}
  	#header h1 a:hover{
  	color:#AAA;
  	}
  	#header h2{
  	display: none;
  	font-size:12px;
  	font-family:Tahoma;
  	margin-top:10px;
  	color:#777;
  	}
  	#coverimage{
  	background:url() no-repeat;
  	height:15px;
  	width:760px;
  	margin-left:0px !important;
  	margin-left:0px; /*Fix IE Bug*/
  	margin-top: 15px;
  	}
  	/*======================================================================*/
  	/* Neck Menu */
  	#neck{
  	background: none url() no-repeat;
  	text-align: left;
  	font-family: 'Verdana';
  	scrollbar-face-color: #FFF68F; 
  	scrollbar-shadow-color: #FFF68F;  
  	scrollbar-highlight-color: #FFF68F; 
  	scrollbar-3dlight-color:#FFF68F; 
  	scrollbar-darkshadow-color: #FFF68F; 
  	scrollbar-track-color:#FFF68F; 
  	scrollbar-arrow-color:#999;
  	padding-top:15px
  	}
  	#neck .module{
  	background:#FFF68F;
  	display:inline;
  	float:left;
  	margin:10px 0px 20px 15px;
  	width:215px;
  	height: 120px;
  	overflow: auto;
  	padding: 8px;
  	}
  	#neck .module ul{
  	display:inline;
  	list-style: none;
  	margin:0px;
  	padding:0px;
  	font:11px 'Tahoma';
  	}
  	#neck .module h2{
  	font-size:17px;
  	font-weight:normal;
  	text-transform:lowercase;
  	font-family:'trebuchet ms';
  	text-align:right;
  	color:#FFCC11;
  	}
  	#neck .module li {
  	/*display:inline;*/
  	border-bottom: 0px dotted #DF9237;
  	padding:2px 2px 2px 2px;
  	}
  	#neck .module li a{
  	padding-left:2px;
  	font-size:10px;
  	color:#FFC125;
  	}
  	#neck .module li a:hover{
  	color:#FFA500;
  	font-weight:bold;
  	}
  	#neck .module li:hover{
  	background-color:#FBEC5D;
  	}
  	/*======================================================================*/
  	/* Content */
  	#belly{
  	background:#F9F9F9;
  	}
  	#content{
  	display:inline;
  	float:right;
  	/*margin: top right bottom left*/
  	margin:20px 25px 35px 10px;
  	width:500px;
  	/*Fix too large image makes content drop problem in IE*/
  	overflow:visible !important;
  	overflow:hidden;
  	}
  	.entry{
  	float:left;
  	margin:10px 0px 10px 0px;
  	padding-bottom:15px;
  	border-bottom:1px solid #DDD;
  	color:#4F4F2F;
  	font: 13px 'Tahoma';
  	line-height:1.7em;
  	width:500px;
  	}
  	.entry .title{
  	display:block;
  	float:left;
  	margin-top:10px;
  	margin-bottom: 20px;
  	width:100%;
  	text-align:right;
  	}
  	.entry .title h2{
  	font-size:16px;
  	font-family: Trebuchet MS;
  	text-transform: lowercase;
  	}
  	.entry .title h2 a{
  	color:#9CCB19;
  	}
  	.entry .title h2 a:hover{
  	color:#EF9700;
  	}
  	.entry .title span{
  	color:#A2BC13;
  	font-size:10px;
  	font-family: Verdana;
  	}
  	.entry .post{
  	/*float:left;*/
  	margin-top:15px;
  	}
  	.entry .post p{
  	margin-bottom:10px;
  	}
  	.entry .info{
  	float:left;
  	width:100%;
  	}
  	.entry .info .tag{
  	float:left;
  	font-size:10px;
  	width:550px;
  	font-family:verdana;
  	margin-top: 15px;
  	}
  	.entry .info .coms a{
  	float:right;
  	font:13px 'Trebuchet MS';
  	text-transform: uppercase;
  	font-weight:bold;
  	}
  	/*======================================================================*/
  	/* Sidebars */
  	#sidebar, #sidebar2{
  	background:none;
  	display:inline;
  	float:left;
  	margin:0px;
  	padding:10px 15px 15px 15px;
  	width:185px;
  	}
  	#sidebar{
  	display:none;
  	}
  	#sidebar .module, #sidebar2 .module{
  	/*margin: top right bottom left*/
  	margin:15px 0px 10px 5px;
  	}
  	#sidebar .module ul, #sidebar2 .module ul{
  	border: 0px dotted #D8D890;
  	border-bottom-width:0px;
  	margin:0px;
  	padding:0px;
  	list-style: none;
  	font: 11px 'Verdana';
  	line-height:1.5em;
  	}
  	#sidebar .module li , #sidebar2 .module li {
  	padding-left:5px;
  	text-align: left;
  	}
  	#sidebar .module ul a, #sidebar2 .module ul a{
  	color:#9CCB19;
  	}
  	#sidebar .module ul a:hover, #sidebar2 .module ul a:hover{
  	color:#615E3F;
  	}
  	#sidebar .module li:hover, #sidebar2 .module li:hover{
  	background-color:#CDFA23;
  	}
  	#sidebar .module h2, #sidebar2 .module h2{
  	font-size:20px;
  	font-family:'Georgia';
  	font-weight:normal;
  	color:#FFC125;
  	text-transform: uppercase;
  	margin-bottom:5px;
  	text-align:center;
  	}
  	#sidebar .module img, #sidebar2 .module img {
  	vertical-align: middle;
  	}
  	#twitter_update_list li {
  	border-bottom:1px solid #DDD;
  	}
  	a.archive{
  	background:url(http://jaelsoul.exteen.com/images/theme/folder_02.gif) no-repeat;
  	width:11px;
  	height:11px;
  	padding-left:0px;
  	overflow:hidden;
  	margin-left:0px;
  	}
  	/*======================================================================*/
  	/* Configure each module */
  	/* Profile */
  	#profile{
  	width:90%;
  	height:125px;
  	text-align:center;
  	}
  	#profile img{
  	max-width:180px;
  	max-height:100px
  	}
  	#profile span{
  	display:inline;
  	font-size: 11px;
  	text-align: center;
  	font-family: Verdana;
  	}
  	#profile .info{
  	width:100% !important;
  	font-size: 9px;
  	font-family: Verdana;
  	}
  	/* Tags */
  	#tags li{
  	display:inline;
  	margin-right:5px;
  	}
  	/*======================================================================*/
  	/* Comment Form */
  	#commentform{
  	width:100%;
  	background:none;
  	float:left;
  	padding: 10px
  	}
  	#commentform form{
  	margin-top:15px;
  	}
  	#commentform h3{
  	font-size:24px;
  	font-family:'Georgia';
  	text-align:right;
  	text-transform:capital;
  	font-weight:normal;
  	color:#FFC125;
  	}
  	#commentform .formrow{
  	border-top:0px solid #DDD;
  	padding:5px;
  	font: 10px 'Verdana';
  	}
  	#commentform label{
  	float:left;
  	width:55px;
  	font: 9px 'Verdana';
  	padding-right:10px;
  	}
  	#commentform input{
  	border: 1px solid #aaa;
  	font: 10px 'Verdana';
  	color:#aaa;
  	background:none;
  	}
  	#commentform textarea{
  	width:375px;
  	height:100px;
  	font: 13px 'Tahoma';
  	border: 1px solid #aaa;
  	color:#8B8878;
  	padding:4px;
  	margin:3px 0px 3px 0px;
  	background:#FFF;
  	}
  	/*======================================================================*/
  	/* Comment (Showing Area) */
  	.comment{
  	border-bottom:0px dotted #DDD;
  	float:left;
  	margin:35px 0px 0px 10px;
  	padding-bottom:5px;
  	width:94%;
  	}
  	.comment .post{
  	float:left;
  	width:95%;
  	padding: 10px;
  	font-size:13px;
  	border-bottom: 3px solid #FFC469;
  	color:#454545;
  	background:#FCFFF0;
  	}
  	.comment .post p{
  	margin-bottom:10px;
  	}
  	.comment .info{
  	text-align: left;
  	font-size:11px;
  	width:100%;
  	margin-left:0px;
  	color: #FFA824;
  	font-weight: normal;
  	}
  	.comment .info img{
  	width:32px;
  	float:left;
  	margin: 5px 10px 0px 10px;
  	}
  	.comment .info a.commentno{
  	font-size:24px;
  	float:right;
  	color:#FFA824;
  	font-family: Georgia;
  	}
  	/*======================================================================*/
  	/* Leg Menu */
  	#leg{
  	background:#FBEC5D;
  	text-align: left;
  	font-family: 'Verdana';
  	}
  	#leg .module{
  	background:none;
  	display:block;
  	float:left;
  	margin:10px 0px 0px 15px;
  	padding:2px 0px 5px 20px;
  	width: 205px;
  	}
  	#leg .module ul{
  	display:inline;
  	list-style: none;
  	margin:0px;
  	padding:0px;
  	font:11px 'Verdana';
  	}
  	#leg .module h2{
  	font-size:17px;
  	font-weight:normal;
  	text-transform:lowercase;
  	font-family:'trebuchet ms';
  	text-align:right;
  	color:#FFCC11;
  	}
  	#leg .module li {
  	/*display:inline;*/
  	border-bottom: 1px dotted #FCD116;
  	padding:3px 4px 3px 5px;
  	}
  	#leg .module li a{
  	padding:2px 10px 2px 5px;
  	font-size:10px;
  	color:#EEAD0E;
  	}
  	#leg .module li a:hover{
  	padding:2px 10px 2px 5px;
  	color:#999;
  	}
  	#leg .module li:hover{
  	background-color:#FFE04F;
  	border-color:#FFE04F;
  	}
  	/*======================================================================*/
  	/* Footer */
  	#footer{
  	background:#FBEC5D;
  	height:50px;
  	}
  	#footer p{
  	background:#FBEC5D;
  	border-top:0px dotted #CCC;
  	font-size:10px;
  	font-family:Verdana,sans-serif;
  	text-align:center;
  	margin:25px 0px 0px 0px;
  	padding:0px;
  	}
  	/*======================================================================*/
  	.navbar{
  	float:right;
  	}
  	.nav {
  	font-size:15px;
  	font-family:Georgia;
  	}
  	.nav a {
  	color:#999;
  	}
  	.nav a:hover {
  	color:#FFF;
  	background-color: #CCC;
  	}
  	.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) }
  	/* Twitter widgets */
  	#twitter_update_list li span {
  	display: block;
  	margin-bottom:3px;
  	}
  	#twitter_update_list li {
  	margin-top:5px;
  	border-bottom-width:2px;
  	}
  	

NOTES

• ถ้าอยากจะโชว์ Blog Description ข้างใต้ Blog Title ให้หา #header h2 แล้วลบบรรทัด display:none;
• สำหรับ profile widget เราเซ็ตให้รูปมีความกว้างได้ไม่เกิน 180px และความสูงไม่เกิน 100px หากไม่ชอบค่าพวกนี้ก็สามารถไปแก้ได้ หรือจะลบออกก็ได้เช่นกัน
      #profile img{
          max-width:180px; <-- ค่าความกว้าง
          max-height:100px <-- ค่าความสูง
      }
• ถ้าอยากใส่ภาพเฮดเดอร์ ให้หา
      #coverimage{
          background:url(ใส่ url ภาพตรงนี้) no-repeat;
          height:15px; <-- เปลี่ยนเป็น (ค่าความสูงของภาพ + 15)
          width:760px; <-- เปลี่ยนเป็นค่าความกว้างของภาพ
          margin-left:0px !important; <-- สามารถเปลี่ยนเพื่อจัดภาพให้อยู่ตรงกลางได้
          margin-left:0px; /*Fix IE Bug*/
          margin-top: 15px; <-- ระยะห่างจากชื่อบล็อกกับรูปภาพ
     }
• ส่วน Twitter widgets นั้น ทิ้งไว้เผื่อมีคนใช้ widgets แบบตัวอักษรของ Twitter
  
• ถ้ามีคำถาม/ปัญหาเกี่ยวกับตัว CSS ก็สามารถถามผ่าน EMS เน้อ
• ขอบคุณสำหรับ มากๆ เลยค่ะ

ตอบคอมเม้นท์

ขอยืมไปใช้นะคะ น่ารักมากๆ ขอบคุณค่ะ
จะว่าหรือเปล่าเอ่ย ถ้าขอแก้นิดหน่อย บางทีอาจจะแค่ใส่รูปข้างบนด้วยอ่ะคะ
ขอบคุณนะคะ

#42 By [ S h e c k ] on 2009-08-12 15:33

  ^ สามารถปรับเปลี่ยนแล้วแต่สมควรค่ะ 

โอ้ น่ารักแฮะ
ขอบคุณสำหรับธีมมากๆเลยงับ ขออนุญาติจิ๊กไปใช้นะคับ
ขอบคุณมากๆงับ

เอ่อ... อยากถามว่า เวลาจะแจกโค้ดแล้วจะทำยังไงให้มันเป็น
กรอบแบบนั้นอ่ะงับ

#52 By Pii3z™ on 2009-08-12 19:33

  ^ เราใช้

				
	<pre>
	ตัวโค้ด
	</pre>