[แจก] Blue-Green Theme

posted on 23 Jul 2008 02:19 by jaelsoul

※ โปรดอ่าน RULES ก่อนนำไปใช้

RULES

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

PREVIEWS

( คลิกที่รูปเพื่อดูขนาดเต็ม -- เปิดในหน้าต่างใหม่ )

BASIC

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

CODE ＊ ตอนนี้มีสองทางเลือก: ก้อปโค้ดเลย หรือ เซฟโค้ดไปก็ได้ ＊

วิธีที่ ๑ (เหมาะสำหรับคนที่จะเซฟเก็บไปแก้ไข)
- click to get <- คลิกขวาและเซฟไฟล์ไป
- เปิดไฟล์ใน Notepad ( หรือโปรแกรมอะไรก็แล้วแต่ )

วิธีที่ ๒ (เหมาะสำหรับคนที่จะดูตอนนี้เลย หรือ เอาไปแปะเลย)

			/*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:#183048 url() repeat top left;
	background-attachment:fixed;
	color:#60A860;
	font:11px Tahoma, "MS Sans Serif";
	line-height:1.5em;
	text-align:center;
	}
	a:link, a:visited{
	color:#489060;
	text-decoration:none;
	}
	a:hover, a:active{
	color:#F0F078;
	}
	#page{
	margin:auto;
	padding-top:15px;
	text-align:left;
	width:760px;
	}
	#header, #neck, #belly, #leg, #footer{
	float:left;
	width:760px;
	}
	/*======================================================================*/
	/* Header */
	#header{
	background:#184848 url() no-repeat;
	padding:50px 0px 0px 0px;
	text-align:center;
	margin-top:-15px;
	}
	#header h1 a{
	font-size:48px;
	font-family:'Arial Black';
	}
	#header h1 a:hover{
	color:#A5A5A5;
	}
	#header h2{
	display:none; /*ถ้าต้องการโชว์ tagline ก็ลบบรรทัดนี้*/
	font-size:11px;
	font-family:verdana;
	margin-top:20px;
	font-weight:normal;
	color:#888;
	}
	#coverimage{
	background:url() no-repeat;
	height:40px;
	width:760px;
	margin-top:20px;
	}
	/*======================================================================*/
	/* Neck Menu */
	#neck{
	background:#184848;
	text-align: left;
	font-family: 'Verdana';
	}
	#neck .module{
	background:none;
	display:block;
	float:left;
	margin:10px 0px 0px 25px;
	padding:2px 0px 5px 20px;
	width:185px;
	}
	#neck .module ul{
	display:inline;
	list-style: none;
	margin:0px;
	padding:0px;
	font:11px 'Verdana';
	}
	#neck .module h2{
	font-size:10px;
	font-weight:normal;
	text-transform:uppercase;
	}
	#neck .module li {
	/*display:inline;*/
	border-bottom: 1px dotted #489060;
	padding:3px 4px 3px 5px;
	}
	#neck .module li a{
	padding:2px 10px 2px 5px;
	font-size:10px;
	}
	#neck .module li a:hover{
	padding:2px 10px 2px 5px;
	color:#FF9819;
	}
	#neck .module ul a:hover{
	color:#78D890;
	}
	#neck .module li:hover{
	background-color:#186030;
	}
	/*======================================================================*/
	/* Content */
	#belly{
	background:#186048;
	}
	#content{
	display:inline;
	float:right;
	/*margin: top right bottom left*/
	margin:20px 25px 35px 10px;
	width:490px;
	/*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 dashed #489060;
	color:#90C090; /*C0D8A8;*/
	font: 12px 'Tahoma';
	line-height:1.7em;
	width:490px;
	}
	.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: Georgia;
	/*text-transform: uppercase;*/
	}
	.entry .title h2 a{
	color:#A8D890;
	}
	.entry .title h2 a:hover{
	color:#90C090;
	}
	.entry .title span{
	color:#90C090;
	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 'Arial';
	text-transform: uppercase;
	font-weight:bold;
	}
	/*======================================================================*/
	/* Sidebars */
	#sidebar, #sidebar2{
	background:none;
	display:inline;
	float:left;
	margin:0px;
	padding:10px 15px 15px 15px;
	width:190px;
	}
	#sidebar{
	display:none;
	}
	#sidebar .module, #sidebar2 .module{
	/*margin: top right bottom left*/
	margin:5px 5px 15px 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 {
	border-bottom: 0px dotted #489060;
	padding:3px 4px 3px 5px;
	}
	#sidebar .module ul, #sidebar2 .module ul a:hover{
	color:#78D890;
	}
	#sidebar .module li:hover, #sidebar2 .module li:hover{
	background-color:#186030;
	}
	#sidebar .module h2, #sidebar2 .module h2{
	font-size:11px;
	font-family:'Verdana';
	font-weight:normal;
	letter-spacing: 10px;
	color:#D8D890;
	text-transform: uppercase;
	}
	#sidebar .module img, #sidebar2 .module img {
	vertical-align: middle;
	}
	a.archive{
	background:url(http://g.exteen.com/t/simple/icon_archive.gif) no-repeat;
	width:12px;
	height:12px;
	padding-left:15px;
	overflow:hidden;
	margin-left:4px;
	}
	/*======================================================================*/
	/* 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:#186048;
	float:left;
	}
	#commentform form{
	margin-top:15px;
	}
	#commentform h3{
	font-size:14px;
	font-family:Tahoma;
	font-weight:bold;
	text-align:center;
	letter-spacing: 5px;
	text-transform:uppercase;
	}
	#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 #60A860;
	font: 10px 'Verdana';
	color:#60A860;
	background:#186048;
	}
	#commentform textarea{
	width:310px;
	height:100px;
	font: 12px 'Tahoma';
	border: 1px solid #60A860;
	color:#888;
	padding:4px;
	margin:3px 0px 3px 0px;
	background:#183048;
	}
	/*======================================================================*/
	/* 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: 15px;
	font-size:12px;
	border: 1px solid #489060;
	}
	.comment .post p{
	margin-bottom:10px;
	}
	.comment .info{
	/*float:right;*/
	text-align: left;
	font-size:10px;
	width:100%;
	margin-left:0px;
	color: #489060;
	font-weight: normal;
	}
	.comment .info img{
	width:32px;
	display: none;
	}
	/*======================================================================*/
	/* Leg Menu */
	#leg{
	background:#184848;
	text-align: left;
	font-family: 'Verdana';
	}
	#leg .module{
	background:none;
	display:block;
	float:left;
	margin:10px 0px 0px 25px;
	padding:2px 0px 5px 20px;
	width:180px;
	}
	#leg .module ul{
	display:inline;
	list-style: none;
	margin:0px;
	padding:0px;
	font:11px 'Verdana';
	}
	#leg .module h2{
	font-size:10px;
	font-weight:normal;
	text-transform:uppercase;
	}
	#leg .module li {
	/*display:inline;*/
	border-bottom: 1px dotted #489060;
	padding:3px 4px 3px 5px;
	}
	#leg .module li a{
	padding-left:5px;
	font-size:10px;
	}
	#leg .module li a:hover{
	color:#FF9819;
	}
	#leg .module ul a:hover{
	color:#78D890;
	}
	#leg .module li:hover{
	background-color:#186030;
	}
	/*======================================================================*/
	/* Footer */
	#footer{
	background:#184848;
	height:50px;
	}
	#footer p{
	background:#184848;
	border-top:0px dotted #CCC;
	font-size:10px;
	font-family:Verdana,sans-serif;
	text-align:center;
	margin:15px 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) }

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

NOTES

ถ้าอยากจะโชว์ Blog Description ข้างใต้ Blog Title ให้หา #header h2 แล้วลบบรรทัด display:none;
ถ้าเอา Profile widget ไว้ในเมนูบน ควรจะใช้รูป profile ทีมีความกว้างไม่เกิน 180px
ถ้ามีคำถาม/ปัญหาเกี่ยวกับตัว CSS ก็สามารถถามผ่าน EMS เน้อ
หวังว่าธีมนี้จะมีประโยชน์แก่หลายๆ คนนะ