[แจก] Purple Theme for exteen
posted on 02 May 2009 01:23 by jaelsoul in ARTWORKRULES
- ช่วยลงคอมเม้นท์ไว้ด้วย หากจะเอา css นี้ไปใช้ (หรือถึงไม่ได้เอาไปใช้ก็ยังเม้นได้นะ
) - เรื่องเครดิต เราไม่บังคับว่าต้องลง
- แต่ถ้าลงไว้ด้วย ก็จะเหมือนเป็นกำลังใจให้ทำเพิ่มและเอามาแจก (ฮา)
- สามารถแก้ไขโค้ดได้ (แล้วแต่สมควร)

PREVIEWS
ส่วน header กับ neck (กดรูปเพื่อดูขนาดเต็ม)
note ถ้าดูใน IE มันจะไม่เส้นเทาๆ ยาวๆ แบบในรูปนะ
แนะนำว่าไม่ควรใช้ชื่อบล็อกยาวๆ ไม่อย่างงั้นก็ต้องปรับขนาดตัวอักษรดู
ส่วนคอมเม้นต์

// เอาคอมเม้นต์ของน้องไหมมาโชว์ ฮ่าๆๆ
หัวข้อของเอนทรี่อยู่ด้านขวามือ
ส่วน sidebar
แถบสีม่วงๆ คือเวลาเอาลูกศรทับ
ส่วน leg + footer

note เวลา hover ตัวอักษรจะเป็นสีเทา
วิธีวาง widgets (กดดูขนาดเต็มได้)

- ในส่วน bottom menu นั้น เรามี Previous, Archives และ Catogories ถ้าอยากให้มันออกมาสวยๆ ควรจะตั้งให้โชว์จำนวนเดียวกัน -- สมมุติเรามี 5 catogories ก็ให้เลือกจำนวนเอนทรี่ย้อนหลังที่จะโชว์กับจำนวน archives เลขเดียวกัน นั่นก็คือ 5 (กดที่รูปดินสอ)
- ไม่ได้ทดสอบว่าถ้าใส่หลายๆ อย่างตรง top menu แล้วหน้าตาจะเป็นยังไง แนะนำว่าแค่ใส่ page ก็พอ ^^"
- แนะนำว่าให้ย้าย 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*/
/*======================================================================*/
/* 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:#38223A url(บีจีพื้นหลัง) repeat top left fixed;
color:#333;
font:12px Tahoma, "MS Sans Serif";
line-height:1.5em;
text-align:center;
}
a:link, a:visited{
color:#613380;
text-decoration:none;
}
a:hover, a:active{
color:#E4590B;
}
#page{
margin:auto;
padding-top:0px;
text-align:left;
width:780px;
}
#header, #neck, #belly, #leg, #footer{
float:left;
width:780px;
}
.entry img {
max-width: 490px;
}
/*======================================================================*/
/* Header */
#header{
background:#fff url() top left no-repeat;
padding:30px 0px 20px 0px;
text-align:right;
}
#header h1 a{
color:#613380;
font-size:36px;
font-family:'Trebuchet MS', Georgia;
margin-right:30px;
}
#header h1 a:hover{
color:#999;
}
#header h2{
display: none;
font-size:11px;
font-family:verdana;
margin-top:20px;
font-weight:normal;
color:#888;
}
#coverimage{
background:none url() no-repeat;
height:20px;
width:720px;
margin-bottom:5px;
}
/*======================================================================*/
/* Neck Menu */
#neck{
background:none url() top left;
}
#neck .module{
background:none;
display:inline;
float:left;
margin:-40px 0px 5px 0px;
width:780px;
font-size:12px;
}
#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:60px 10px 0px 10px;
font-family:Trebuchet MS;
background-color:#FFF;
}
#neck .module li:hover{
background:#EEE5FF;
border-right:3px solid #A77BA7;
}
/*======================================================================*/
/* Content */
#belly{
background:#FFF url() repeat-y;
}
#content{
display:inline;
float:right;
/*margin: top right bottom left*/
margin:0px 25px 35px 10px;
width:510px;
/*Fix too large image makes content drop problem in IE*/
overflow:visible !important;
overflow:hidden;
}
.entry{
float: left;
margin:3px 0px 10px 0px;
padding-bottom:15px;
border-bottom:1px dotted #aaa;
font: 13px 'Tahoma';
line-height:1.7em;
width:490px;
}
.entry .title{
display:block;
float:right;
margin-top:10px;
margin-bottom: 20px;
width:100%;
text-align:right;
}
.entry .title h2{
font-size:16px;
font-family: Georgia, Tahoma, serif;
text-transform: lowercase;
}
.entry .title h2 a{
color:#949494;
}
.entry .title h2 a:hover{
color:#613380;
}
.entry .title span{
color:#808080;
font-size:10px;
font-family: Verdana;
line-height:10px;
}
.entry .post{
margin-top:75px;
}
.entry .post p{
margin-bottom:10px;
}
.entry .info{
float:left;
width:100%;
}
.entry .info .tag{
float:left;
font-size:10px;
width:350px;
}
.entry .info .coms{
float:right;
}
.entry .info .coms a{
float:right;
font:13px 'Georgia';
font-weight:bold;
}
.entry .info .coms a:hover{
color:#FF9819;
}
/*======================================================================*/
/* Sidebars */
#sidebar, #sidebar2{
background:none;
display:inline;
float:left;
margin:0px;
padding:10px 15px 15px 15px;
width:190px;
border-right: 1px dashed #DDD;
}
#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 {
padding:3px 4px 3px 5px;
text-align: left;
border:1px solid #FFF;
}
#sidebar .module ul a, #sidebar2 .module ul a{
}
#sidebar .module ul a:hover, #sidebar2 .module ul a:hover{
color:#884488;
}
#sidebar .module li:hover, #sidebar2 .module li:hover{
background-color:#CC99B3;
border: 1px solid #884488;
}
#sidebar .module h2, #sidebar2 .module h2{
font-size:11px;
font-family:'Verdana';
font-weight:normal;
letter-spacing: 2px;
color:#999;
text-transform: uppercase;
margin-bottom:5px;
}
#sidebar .module img, #sidebar2 .module img {
vertical-align: middle;
}
/* Sidebar Header image
#sidebar #recommend h2, #sidebar2 #recommend h2{background:url(http://g.exteen.com/t/darkapollo/hd_recommend.png) no-repeat;width:131px;height:19px;}
#sidebar #previous h2,#sidebar2 #previous h2{background:url(http://g.exteen.com/t/darkapollo/hd_previous.png) no-repeat;width:104px;height:23px;}
#sidebar #commentalert h2,#sidebar2 #commentalert h2{background:url(http://g.exteen.com/t/darkapollo/hd_comments.png) no-repeat;width:181px;height:19px;}
#sidebar #favourites h2,#sidebar2 #favourites h2{background:url(http://g.exteen.com/t/darkapollo/hd_favourites.png) no-repeat;width:105px;height:19px;}
#sidebar #links h2,#sidebar2 #links h2{background:url(http://g.exteen.com/t/darkapollo/hd_links.png) no-repeat;width:52px;height:19px;}
#sidebar #categories h2,#sidebar2 #categories h2{background:url(http://g.exteen.com/t/darkapollo/hd_categories.png) no-repeat;width:112px;height:23px;}
#sidebar #archives h2,#sidebar2 #archives h2{background:url(http://g.exteen.com/t/darkapollo/hd_archives.png) no-repeat;width:89px;height:19px;}
#sidebar #tags h2,#sidebar2 #tags h2{background:url(http://g.exteen.com/t/darkapollo/hd_tags.png) no-repeat;width:49px;height:23px;}
#sidebar #pagemenu h2,#sidebar2 #pagemenu h2{background:url(http://g.exteen.com/t/darkapollo/hd_pages.png) no-repeat;width:64px;height:23px;}*/
a.archive{
background:url(http://jaelsoul.exteen.com/images/theme/folder_02.gif) no-repeat;
width:16px;
height:12px;
padding-left:15px;
overflow:hidden;
margin-left:4px;
}
/*======================================================================*/
/* Configure each module */
/* Profile */
#profile{
width:95%;
height:124px;
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;
}
#commentform form{
margin-top:15px;
}
#commentform h3{
font-size:24px;
font-family:'trebuchet ms';
text-align:right;
letter-spacing: 0px;
text-transform:capital;
font-weight:normal;
}
#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:#555;
background:none;
}
#commentform textarea{
width:370px;
height:100px;
font: 13px 'Tahoma';
border: 1px solid #aaa;
color:#555;
padding:4px;
margin:3px 5px 3px 3px;
background:#F0F0F0;
float: left;
}
/*======================================================================*/
/* Comment (Showing Area) */
.comment{
float:left;
margin:35px 0px 0px 10px;
padding-bottom:5px;
width:94%;
}
.comment .post{
float:left;
width:95%;
padding: 15px;
font-size:13px;
border: 0px solid #DE943A;
color:#343434;
background:#F0F0F0;
}
.comment .post p{
margin-bottom:10px;
}
.comment .info{
text-align: left;
font-size:11px;
width:100%;
margin-left:0px;
color: #888;
font-weight: normal;
}
.comment .info img{
width:32px;
float:left;
margin: 5px 10px 0px 10px;
}
.comment .info a.commentno{
font-size:20px;
float:right;
color:#EFC400;
}
/*======================================================================*/
/* Leg Menu */
#leg{
background:#856D8A;
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:200px;
}
#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:#9f9f9f;
}
#leg .module li {
border-bottom: 1px dotted #613380;
padding:3px 4px 3px 5px;
}
#leg .module li a{
padding:2px 10px 2px 5px;
font-size:11px;
color:#552B55;//663366;
}
#leg .module li a:hover{
padding:2px 10px 2px 5px;
color:#999;
}
#leg .module li:hover{
background-color:none;
border-color:none;
}
/*======================================================================*/
/* Footer */
#footer{
background:#856D8A url() bottom left no-repeat;
height:60px;
}
#footer p{
background:#856D8A;
border-top:1px solid #856D8A;
border-bottom:1px solid #856D8A;
font-size:10px;
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)
}
NOTES
- ถ้าอยากจะโชว์ Blog Description ข้างใต้ Blog Title ให้หา #header h2 แล้วลบบรรทัด display:none;
- สำหรับ profile widget เราเซ็ตให้รูปมีความกว้างได้ไม่เกิน 180px และความสูงไม่เกิน 100px หากไม่ชอบค่าพวกนี้ก็สามารถไปแก้ได้ หรือจะลบออกก็ได้เช่นกัน
#profile img{
max-width:180px; <-- ค่าความกว้าง
max-height:100px <-- ค่าความสูง
} - ถ้ามีคำถาม/ปัญหาเกี่ยวกับตัว CSS ก็สามารถถามผ่าน EMS เน้อ
- อัพรูปพื้นหลังใส่โฮสตัวเอง แล้วเปลี่ยนตรง "บีจีพื้นหลัง" (ตรงส่วน body) เป็น url ของภาพ
รูปภาพ -->
- ถ้าสังเกต จะเห็นว่าตรงส่วนตัวเลขคอมเม้นต์ไม่มีคำว่า "Comments" พ่วงท้าย
(สำหรับโค้ดเก่าน่ะ ตอนนี้เอาออกไปแล้ว) ถ้าใครอยากให้โชว์แต่ตัวเลขก็แปะใต้ส่วน entry
.entry .info .coms span {
display:none;
}
หรือจะลบเจ้านี่ออกก็ได้ สำหรับคนที่เอาโค้ดก่อนวันที่ 26 พ.ค.
LAST UPDATED: May 26th, 2009.
ขอบคุณนะคะ





แต่เอาไปใช้ไม่ได้ฮะ
เพิ่งจะทำโค้ดใหม่เมื่อเย็น หลังจากโค้ดหายไปสามอาทิตย์
เริ่มทุกอย่างใหม่
ทำไมไม่เจอบล็อกนี้ก่อนแก้โค้ดนะ ชิ!!
#1 By Mayoiitingweii on 2009-05-02 02:51