¤ FREE THEME: Coffee and Green

posted on 09 Mar 2011 23:10 by sypruskung in FreeTheme
Conditions
  • อนุญาติให้นำไปใช้ได้ แต่ห้ามใช้ในทางการค้า
  • ไม่นำไปแอบอ้างว่าเป็นผลงานของตนเอง
  • ถ้าเอาไปใช้แล้วใส่ที่มา ลิงค์กลับมาที่เอนทรีนี้หรือบล็อกนี้ จะเป็นพระคุณอย่างสูงค่ะ !
  • แต่ใครไม่ใช้แล้วจะคอมเม้นก็ได้นะ ดีใจเหมือนกัน XD
  • ถ้ามีปัญหาอะไร ems มาได้ จะพยายามเข้ามาตอบให้ค่ะ
  • ปรับแต่งแก้ไขได้ตามความเหมาะสมเลยนะคะ
  • รบกวนใครที่เอาไปใช้ทิ้งคอมเม้นไว้ด้วยนะ เผื่อมีการแก้บัคอะไรจะได้ ems ไปบอกค่ะ


PREVIEW

คลิกที่รูปเพื่อดูรูปใหญ่จ้า




โดยรวม



sidebar ชัดๆ ส่วนที่สีจางๆคือเวลาเอาเมาส์วางทับนะคะ



ช่อง comment



ส่วนแสดง comment



footer ส่วนที่สีเข้มกว่าคือเวลาเอาเมาส์วางทับนะคะ



ซ้าย:ปกติ,
กลาง:เมาส์วางทับแล้วจะโผล่ scrollbar ขึ้นมา,
ขวา:เลื่อนได้นะจ๊ะ



สามารถใส่ของต่างๆได้สามที่ คือที่บนสุดของเฮด ให้ใส่ที่ neck ที่ด้านข้างใส่ที่ sidebar2 และที่ข้างล่างสุด ท้ายบล็อกเลย ให้ใส่ที่ leg
ความกว้างของส่วน entry ใส่รูปได้กว้างสุดคือ 700px แต่จริงๆยัดรูปขนาดเท่าไหร่ลงไปก็ได้ เราเขียนให้มันย่อโดยอัตโนมัติอยู่แล้วถ้าขนาดเกิน เพราะเดี๋ยวบล็อกเบี้ยว
รูป ใส่กรอบให้อัตโนมัติค่ะ แต่ถ้าไม่ชอบเดี๋ยวด้านล่างจะบอกวิธีเอาออกให้อีกทีนึง





INSTALLATIONS

ขั้นแรก แก้ widget ให้เป็นอะไรหน้าตาแบบนี้ซะก่อน (คลิกที่รูปเพื่อดูรูปใหญ่)





โดยที่มีข้อบังคับว่า Profile จะต้องอยู่บนสุด เสมอ ไม่งั้นบล็อกจะไม่มีเส้นเชื่อมต่อมาจากชื่อเอนทรี



จากนั้นก็ให้เอาโค้ดนี้ไปใส่ใน Theme>CSS Editor


/*Normal Theme for the new exteen*/
/*Copyright by Etceto co,ltd. 2007*/

/*Coffee And Green Theme by http://sypruskung.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:#CBE86B;
color:#483F37;
font:12px Tahoma, "MS Sans Serif";
line-height:1.5em;
text-align:center;
}

a:link, a:visited{
color:#483F37;
text-decoration:none;
}

a:hover, a:active{
color:#0B0805;
}

#page{
margin:auto;
padding-top:0px;
text-align:left;
width:960px;
}

#header, #neck, #belly, #leg, #footer{
float:left;
width:960px;
}

/*======================================================================*/
/* Header */

#header{
background:#1C140D;
margin-top: 0px;
padding: 20px 0px 10px 0px;
height:386px;
}

#header h1{
text-align:center;
margin-top:340px;
margin-bottom:-85px;
}

#header h1 a{
color:white;
font-style:bold;
font:60px Georgia;
text-transform:uppercase;
}

#header h1 a:hover{
color:#D9D1CA;
}

#header h2{
color:white;
font:20px Palatino Linotype, Georgia;
text-transform:uppercase;
text-align:center;
width:100%;
margin-bottom:-270px;
}

#coverimage{
background:url() center no-repeat;
height:200px; /*suggested size*/
}

/*======================================================================*/
/* Neck Menu */

#neck{
margin-top:-375px;
}

#neck .module{
display:inline;
float:left;
width:960px;
text-align:center;
}

#neck .module ul{
display:inline;
margin:0px;
padding:0px;
}

#neck .module h2{
display:none;
}

#neck .module li{
font: 14px Georgia;
font-weight: normal;
text-transform:uppercase;
display:inline;
padding:0px 10px 0px 10px;
}

#neck .module li a{
color:#D9D1CA;
}

#neck .module li:hover a{
color:white;
}

#neck .module li:hover .archive{
background:white;
}

/*======================================================================*/
/* Content */

#belly{
margin:0px;
}

#content{
background:white;
margin-top:-10px;
display:inline;
float:left;
padding:0px 10px 0px 10px;
width:710px;
/*Fix too large image makes content drop problem in IE*/
overflow:visible !important;
overflow:hidden;
}

#content h2{
width:650px;
margin-top:60px;
text-align:left;
text-transform:uppercase;
font: 24px Georgia;
font-style:bold;
}

.entry{
float:left;
margin-bottom:15px;
}

.entry .title{
display:block;
background:#1C140D;
width:690px;
height:60px;
margin-top:60px;
margin-left:-10px;
margin-bottom:30px;
padding-left:40px;
text-align:left;
}

.entry .title h2{
font-weight:bold;
text-transform:capitalize;
text-align:right;
height:25px;
padding-top:10px;
}

.entry .title h2 a{
font: 30px Georgia;
color:white;
}

.entry .title h2 a:hover{
color:#CFCFCF;
}

.entry .title span{
font: 10px Palatino Linotype, Georgia;
text-transform:uppercase;
color:#F2E9E1;
}

.entry .post{
margin-bottom:10px;
width:710px;
min-height:1500px;
}

.entry .post p, div{
margin:0px 0px 10px 0px;
text-align:center;
}

.entry .post img{
border:1px solid #483F37;
padding:4px;
max-width:700px;}

.entry .info{
float:left;
margin-top:50px;
width:730px;
margin-left:-10px;
margin-bottom:10px;
padding-top:15px;
text-align:center;
background:#1C140D;
color:white;
}

.entry .info a{
color:white;
}

.entry .info a:hover{
color:#D9D1CA;
}

.entry .info .tag {
font-weight: normal;
letter-spacing: 0.3em;
font: 11px tahoma;
text-transform:lowercase;
}

.entry .info .coms {
float: right;
text-align:center;
display: block;
width:100%;
background: none;
font: 36px georgia;
text-transform: lowercase;
}

.entry .info .coms span{
display: block;
letter-spacing:3px;
font-size: 12px;
margin-top:-10px;
}

.nav{
background:#1C140D;
color:white;
float:left;
text-align: center;
width:730px;
letter-spacing: 3px;
font: 11px Palatino Linotype;
text-transform:lowercase;
padding-top: 15px;
padding-bottom: 15px;
margin: -25px 0px 0px -10px;
}

/*======================================================================*/
/* Sidebars */

#sidebar, #sidebar2{
background:#F2E9E1;
display:inline;
float:right;
margin-top:-10px;
width:230px;
padding-bottom:50px;
padding-top:50px;
}

#sidebar{
display:none;
}

#sidebar .module, #sidebar2 .module{
margin:10px 0px 0px 0px;
}

#sidebar .module a, #sidebar2 .module a{
color:#483F37;
}

#sidebar .module ul, #sidebar2 .module ul{
margin:5px 0px 0px 0px;
list-style: none;
}

#sidebar .module li, #sidebar2 .module li{
width:210px;
margin-left:-30px;
margin-bottom:2px;
}

#sidebar .module li:hover a, #sidebar2 .module li:hover a{
color:white;
}

#sidebar .module li:hover, #sidebar2 .module li:hover{
background:#D9D1CA;
}

#sidebar .module h2, #sidebar2 .module h2{
background:#1C140D;
padding:5px;
margin-top:30px;
color:white;
font-size:20px;
font-weight:normal;
font-family:georgia;
text-transform:uppercase;
}

a.archive{
background:#D9D1CA url() no-repeat;
padding-left:1px;
margin-left:0px;
}

/*======================================================================*/
/* Configure each module */

/* Profile */
#profile{
width:230px;
height:100%;
border-top:solid #1C140D 60px;
}

#profile img{
width:150px;
height:200px;
}

#profile span{
display:block;
}

#profile .info{
width:100% !important;
width:60%;
text-align:center;
}

/* Tags */
#tags li{
display:inline;
margin-right:5px;
}

/*======================================================================*/
/* Comment Form */

#commentform{
float:left;
font-size:12px;
margin-bottom: 60px;
color:#D9D1CA;
}

#commentform form{
margin:-25px 0px 0px -10px;
border-top:solid #1C140D 70px;
border-right:solid #1C140D 20px;
border-bottom:solid #1C140D 20px;
border-left:solid #1C140D 20px;
background:#291F16;
padding:10px;
width:670px;
}

#commentform h3{
height:24px;
font:25px Georgia;
color:white;
text-align:center;
border-bottom:2px solid white;
text-transform:uppercase;
margin:0px 0px 10px 0px;
padding: 10px 0px 0px 0px;
}

#commentform .formrow{
text-align:right;
padding:5px 5px 5px 5px;
margin-left:13%;
width:70%;
}

#commentform label{
float:left;
width:20%;
text-align:left;
}

#commentform input{
background:#1C140D;
border:none;
padding:3px 7px;
margin:0px 3px;
color:#D9D1CA;
}

#commentform a{
color:#D9D1CA;
}

#commentform textarea{
width:100%;
height:150px;
background:#1C140D;
border:none;
padding:10px;
margin:0px 0px 0px 0px;
color:white;
}

#cc{
font:12px tahoma;
color:#D9D1CA;
}

/*======================================================================*/
/* Comment (Showing Area) */

.comment{
float:left;
margin:-40px 0px 40px 70px;
padding-bottom:5px;
width:560px;
}

.comment .post{
float:right;
text-align:right;
width:450px;
border-bottom:#1C140D solid 3px;
padding:30px 80px 30px 30px;
background:#F2E9E1;
margin-bottom:-3px;
}

.comment .post p{
margin:0px 0px 10px 0px;
}

.comment .info{
float:right;
text-align:right;
font-size:10px;
background:#1C140D;
color:#F2E9E1;
padding-right:30px;
}

.comment .commentator{
color:#F2E9E1;}

.comment .info img{
display:none;
}

.comment .commentno{
float:right;
color:#1C140D;
margin:-21px -10px 0px 0px;
font-size:30px;
font-family:georgia;
}

/*======================================================================*/
/* Leg Menu */
#leg {
background:#1C140D;
text-align: left;
width:720px;
height:240px;
margin:-10px 0px 100px 0px;
padding:70px 0px 0px 10px;
}

#leg .module{
background:#291F16;
color:white;
display:block;
float:left;
width:210px;
height:210px;
margin:0px 10px 0px 0px;
padding:10px;
}

#leg ul{
list-style:none;
padding:20px 0px 0px 10px;
margin:-2px 0px 0px 0px;
border-top:solid white 2px;
overflow-x:hidden;
overflow-y:hidden;
height:145px;
width:200px;
}

#leg ul:hover{
overflow-y:auto
}

#leg li{
margin-bottom:3px;
width:190px;
}

#leg li:hover{
background:#1C140D;
}

#leg li a{
color:#D9D1CA;
}

#leg li:hover a{
color:white;
}

#leg h2{
padding:5px 5px 0px 5px;
margin-top:5px;
color:white;
font-size:20px;
font-weight:normal;
font-family:georgia;
text-transform:uppercase;
}

/*======================================================================*/
/* Footer */

#footer{
background:#1C140D;
text-transform:uppercase;
width:730px;
margin:-100px 0px 0px 0px;
padding-top:60px;
}

#footer p{
font:10px Georgia;
text-align:center;
margin:0px;
padding:15px;
}

#footer a{
color:black;
}

#footer a:hover{
color:#483F37;
}

/*======================================================================*/
/*list*/
#list{
margin:30px;
text-align:left;
padding:0px 20px 5px 20px;
background:#F2E9E1;
margin-bottom:30px;
margin-top:30px;
}

#list h2{
width:100%;
font-size:24px;
color:#1C140D;
text-align:center;
padding:5px;
margin-left:-5px;
}

#list ul{
margin-top:-11px;
padding:15px 0px 0px 20px;
border-top:solid #1C140D 2px;
}

#list li{
margin-right:5px;
}

/*======================================================================*/
.navbar{
float:left;
}

.commentmanage{
clear:both;
}

/*PNG support for IE*/
#header, #neck, #belly, #leg, #footer { behavior: url(http://www.exteen.com/global/iepngfix.htc) }
#sidebar .module h2, #sidebar2 .module h2{
behavior: url(http://www.exteen.com/global/iepngfix.htc)
}




CUSTOMIZE

หัวข้อนี้จะเป็นการเพื่มเติมนะคะ ใครจะแก้หรือไม่แก้ก็ได้ค่ะ

1.จัดการกับคอมเมนต์เกินห้าสิบให้เป็นระเบียบ

ก็ไม่มีอะไรยากค่ะ ให้หา

.navbar{
float:left;
}

แล้วเปลี่ยนเป็น

.navbar{
width:100%;
padding-bottom:50px;
font-family:georgia;
letter-spacing:3px;
text-transform:capitalize;
}

แค่นี้ก็เสร็จแล้วค่ะ


2.เพิ่มรูปคนคอมเมนต์

มีคนถามมาค่ะ ว่าอยากจะเอารูปคอมเมนต์ที่จขบ.ซ่อนไว้กลับมาต้องทำยังไง มันมีจุดที่จะต้องเปลี่ยนสองจุดค่ะ

จุดแรกให้หา

.comment .info img{
display:none;
}

แล้วเปลี่ยนเป็นอันนี้

.comment .info img{
margin:0px -30px -20px 0px;
}

และจุดที่สอง หาอันนี้

.comment .info{
float:right;
text-align:right;
font-size:10px;
background:#1C140D;
color:#F2E9E1;
padding-right:30px;
}

ให้เติมบรรทัดสีแดงเข้าไป

.comment .info{
float:right;
text-align:right;
font-size:10px;
background:#1C140D;
color:#F2E9E1;
padding-right:30px;
padding-bottom:2px;
}

แค่นี้ก็ได้แล้วล่ะค่ะ


3.รูปที่เฮดเดอร์บล็อก

รูปจะไปโผล่ตรงสีครีมๆค่ะ

วิธีใส่ ให้หา

#coverimage{
background:url(ตรงนี้ใส่ url รูป) center no-repeat;
height:200px; /*suggested size*/
}

รูปที่ใส่ควรมีความสูง 200px ไม่งั้นมันจะเกิดอาการเบี้ยวแปลกส่งผลกระทบไปถึงหัวบล็อกส่วนอื่นๆ แต่จริงๆจะลองแก้ดูเล่นๆก็ได้นะ :)


4.รูปโปรไฟล์มันทับกับลิงค์บนไซด์บาร์ ทำไงดี

แก้ได้โดยการปรับขนาดใน css ค่ะ โดยให้หา

#profile img{
width:ความกว้างของรูปเรา ของเดิมกำหนดมาที่ 150 ไม่ควรเกิน 230 เพราะจะล้น sidebarpx;
height:ความสูงของรูปเรา ของเดิมกำหนดมาที่ 200px;
}

แค่นี้ก็เสร็จแล้วค่ะ





INSPIRATIONS

http://jaelsoul.exteen.com/20090821/exteen-css-leg สำหรับไอเดีย leg menu แบบสามกล่อง
และก็ Palette สีสวยๆจาก COLOURlovers.com


w_o_r_d_l_e_s_s_.
Color by COLOURlovers

ชอบไม่ชอบยังไงบอกกันด้วยนะคะ เจอกันเอนทรีหน้าจ้า :)

Comment

Comment:

Tweet

ขออนุญาตใช้ Theme นะคะ XD ขอบคุณมากๆค่ะ

#106 By Bookvi_The_Exteen on 2015-07-31 05:42

Hot! Hot! ขอบคุฯมากเลย ขอยืมใช้นะ surprised smile

#105 By MapleTree on 2015-04-18 19:54

ธีมสวยมากเลยค่ะ ขอไปใช้บ้างนะคะ ขอบคุณค่า :)))

#104 By - on 2013-11-17 03:03

ขอบคุณค่า Hot! Hot! Hot! Hot!

#103 By AverZion on 2013-11-06 19:59

ขอบคุณมากค่ะ big smile

#102 By Kayaiaa ★` on 2013-09-29 11:54

ขอบคุณมากค่ะ

#101 By J u ★ k i A ` on 2013-09-27 18:07

ขอเอาไปใช้นะคะ >_<

แล้วก็ขอปรับแต่งสีหน่อยเด้อชอบมากเลย

#100 By kaeda on 2013-09-04 11:30

ขอจิ๊กธีมไปใช้นะคะ สวยงามสบายตามากๆเลย
Hot! Hot! Hot! Hot! Hot! Hot! Hot!

#99 By Dappled004 on 2013-05-29 14:12

ขอบคุณมากค่ะะ