(นึกสนุก)exteen theme not for sale

posted on 20 Oct 2008 21:09 by ilumin in useful

ไม่ขายแต่แจกฟรี

#2 By Catkun on 2008-10-20 18:12
Theme แนว Wordpress เลย ขอก๊อบไปใช้บ้างดิ

ก็เลยอยากจะแบ่งให้เพื่อนๆชาว exteen ไปใช้บ้าง
ส่วนผมก็จะพยายามผลิตออกมาให้ได้เดือนละ 1 ธีม
(ความจริงอยากจะสอนแต่ขี้เกียจ)

สำหรับธีมนี้จะมีคุณสมบัติ(ดี/เลว)ดังนี้ คือ

ตรง footer จะใส่ widget ได้แค่ 4 อัน และแต่ละอันจะต้องมีความยาวจำกัดแค่ 200 px ใส่เกินจะดันให้ widget ตัวอื่นตกไปอยู่ด้านล่าง ไม่งามๆ
จะมี widget category อันเดียวเท่านั้นที่จะมี link สวยงามกว่าอันอื่นๆ
ตรงส่วน info (ที่มี tag และ comment) จะไม่แสดง tag ของ entry นั้นๆ
ตรงส่วน info เช่นกัน ผมใช้รูป png24 มันจะมีปัญหาใน ie (จะมีสีเทามาแทนส่วนที่โปร่งใส)
sidebar_2 ใช้ไม่ได้นะจ๊ะถ้าใส่ widget ไปก็จะไม่เห็นอะไร(displa: none เอาไว้)
sidebar_1 มีขนาด 200 px เท่านั้น กว้างกว่านี้ไม่งามๆ
link บางตัวดูใน FF3 จะเป็นขอบโค้งมน แต่ถ้าดูใน ie มันจะเป็นสี่เหี่ยมธรรมดา (เลิกใช้เถิดจะเกิดผล)
ธีมตัวนี้สนับสนุน FF อย่างเดียว

/*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-image: url(http://ilumin.exteen.com/images/body.bg.gif);
   background-position: top;
   background-repeat: repeat-x;
   background-color: #F0F0F0;
   font-family: Geneva, Arial, Helvetica, sans-serif;
   font-size: 12px;
}

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

a:hover, a:active{
   color: #3bdfe2;
   text-decoration: underline;
}

#page{
   background-image: url(http://ilumin.exteen.com/images/body.footer.gif);
   background-position: bottom;
   background-repeat: repeat-x;
}

#header, #neck, #belly, #leg, #footer{
   width: 806px;
   margin: 10px auto;
}

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

#header{
}

#header h1 a{
   font-size: 48px;
   font-weight: normal;
   font-style: italic;
   font-family: "Times New Roman", Times, serif;
}

#header h1 a:hover{
   color: #000000;
   text-decoration: none;
}

#header h2{
   font-size: 14px;
   font-weight: normal;
   font-style: italic;
   color: #666666;
}

#coverimage{
}

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

#neck{
margin-bottom: 0;
}

#neck .module{
}

#neck .module ul{
   list-style: none;
   padding: 0;
   margin: 0;
}

#neck .module h2{
   display: none;
}

#neck .module li{
   display: inline;
}
#neck .module li a {
   display: inline-block;
   padding: 5px 10px;
   background-color: #FFF;
   color: #000;
}
#neck .module li a:hover {
   background-color: #46aeb1;
   text-decoration: none;
   color: #FFF;
}

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

#belly{
   background-color: #FFF;
   background-image: url(http://ilumin.exteen.com/images/content.footer.gif);
   background-position: bottom;
   background-repeat: no-repeat;

padding-bottom: 26px;
   margin-top: 1px;
}

#content{
}

.entry{
   padding: 10px;
   margin-right: 199px;
   border-right: solid 1px #F1F3F5;

   position: relative;
}

.entry .title{
   padding-bottom: 5px;
   margin-bottom: 10px;
   border-bottom: solid 1px #CCC;
}

.entry .title h2{
}

.entry .title h2 a{
   font-weight: normal;
   font-size: 24px;
}

.entry .title h2 a:hover{
   text-decoration: none;
}

.entry .title span{
   font-size: 9px;
   color: #666666;
}
.entry .title span a {
   display: inline-block;
   padding: 1px 5px;
   background-color: #CCC;
   -moz-border-radius: 2px;
}
.entry .title span a:hover {
   background-color: #666666;
   color: #FFF;
   text-decoration: none;
}

.entry .post{
}

.entry .post p{
   padding-left: 10px;
   margin: 5px 0;
}
.entry .post strong {
   font-weight: bold;
}
.entry .post em {
   font-style: italic;
}
.entry .post blockquote {
   padding: 5px;
   background-color: #EFEFEF;
   color: #666666;
   margin: 5px 10px;
   -moz-border-radius: 5px;
}

.entry .info{
   position: absolute;
   top: 0;
   right: 10px;
   -right: 210px;
}

.entry .info .tag{
   display: none;
}

.entry .info .coms{
}
.entry .info .coms a {
   display: block;
   width: 68px;
   height: 60px;
   background-image: url(http://ilumin.exteen.com/images/comment.png);
   background-position: left bottom;

   font-size: 18px;
   font-weight: bold;
   text-align: center;
   padding-top: 20px;
   color: #FFF;
}
.entry .info .coms a:hover {
   text-decoration: none;
   background-position: right bottom;
}
.entry .info .coms a span {
   display: none;
}

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

#sidebar{
   float: right;
   width: 200px;
}

#sidebar2{
   clear: both;
}

#sidebar .module, #sidebar2 .module{
}

#sidebar .module ul, #sidebar2 .module ul{
}

#sidebar .module h2, #sidebar2 .module h2{
}

/* Sidebar Header image */
#sidebar #recommend h2, #sidebar2 #recommend h2{
}
#sidebar #previous h2,#sidebar2 #previous h2{
}
#sidebar #commentalert h2,#sidebar2 #commentalert h2{
}
#sidebar #favourites h2,#sidebar2 #favourites h2{
}
#sidebar #links h2,#sidebar2 #links h2{
}
#sidebar #categories h2,#sidebar2 #categories h2{
}
#sidebar #archives h2,#sidebar2 #archives h2{
}
#sidebar #tags h2,#sidebar2 #tags h2{
}
#sidebar #pagemenu h2,#sidebar2 #pagemenu h2{
}

a.archive{
}
/*======================================================================*/
/* Configure each module */

/* Profile */
#profile{
}

#profile img{
}

#profile span{
}

#profile .info{
}

/* Tags */
#tags li{
}

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

#commentform{
   width: 600px;
   background-color: #EFEFEF;
   -moz-border-radius: 5px;
   margin: 10px auto;
   padding: 10px;
}

#commentform form{
}

#commentform h3{
   float: left;
   width: 100px;
   text-align: right;
   padding-right: 10px;
   margin-right: 10px;
   height: 195px;
   border-right: solid 1px #CCC;
}

#commentform .formrow{
   margin-bottom: 5px;
}

#commentform label{
}

#commentform input.textbox{
}

#commentform textarea{
   border:1px solid #BBBBBB;
   height:80px;
   width:420px;
   margin-right: 10px;
   float: left;
}
#commentform img {
   float: left;
}

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

.comment{
   clear: both;
   margin: 0 auto;
   width: 620px;
}

.comment .post,
.comment .info {
   margin-bottom: 10px;
}

.comment .post{
   background-color:#F1F3F5;
   float:right;
   padding:10px;
   width: 480px;
   -moz-border-radius: 5px;
}

.comment .post p{
}

.comment .info{
   float: left;
   width: 120px;
}

.comment .info p {
   font-size: 10px;
}
.comment .info p a {
}

.comment .info img{
}

/*======================================================================*/
/* Leg Menu */
#leg{
   bottom: 0;
   height: 210px;
}

#leg .module{
   float: right;
   width: 200px;
   margin-top: 5px;
}

#leg .module ul{
   list-style: none;
   padding: 0; margin: 0;
}

#leg .module li{
   padding-left: 20px;
   background-image: url(http://ilumin.exteen.com/images/bullet.gif);
   background-repeat: no-repeat;
   background-position: left center;
}
#leg .module li a {
   color: #99FFCC;
}

#leg .module h2{
   font-weight: normal;
   color: #FFF;
   margin-bottom: 5px
}

#profile {
   text-align: center;
}
#profile p {
   margin: 10px;
   background-color: #FFF;
   padding: 5px;
   -moz-border-radius: 5px;
}

#categories {
}
#leg #categories li {
   display: inline;
   padding: 0;
   background-image: none;
}
#leg #categories li a {
   display: inline-block;
   background-color: #2b3846;
   padding: 2px 5px;
   -moz-border-radius: 2px;
   color: #41a9ac;
   margin-bottom: 3px;
}
#leg #categories li a:hover {
   background-color: #41a9ac;
   color: #000;
   text-decoration: none;
}
#leg #categories li a.archive {
   display: none;
}

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

#footer{
   clear: both;
   margin: 0;
   padding: 5px;
   text-align: right;
}
#footer * {
   font-size: 10px;
   color: #FFF;
}

#footer p{
   display:block;
}

/*======================================================================*/
.navbar{
}

.commentmanage{
   clear: both;
   padding: 0 0 10px 0;
}
.commentmanage a {
   display: inline-block;
   padding: 1px 5px;
   background-color: #EFEFEF;
   color: #000;
   -moz-border-radius: 2px;
   font-size: 10px;
}
.commentmanage a:hover {
   background-color: #333333;
   color: #FFF;
   text-decoration: none;
}

/*PNG support for IE*/
#header, #neck, #belly, #leg, #footer,.entry .info .coms a { behavior: url(/global/iepngfix.htc) }
#sidebar .module h2, #sidebar2 .module h2{
   behavior: url(/global/iepngfix.htc)
}

.nav,
.nav * {
   font-size: 10px;
}
.nav {
   padding-right: 10px;
   margin-left: 10px;
   color: #CCCCCC;
   text-align: right;
   background-image: url(http://ilumin.exteen.com/images/nav.gif);
   background-repeat: repeat-x;
}
.nav a {
   display: inline-block;
   padding: 1px 5px;
   background-color: #CCC;
   -moz-border-radius: 2px;
}
.nav a:hover {
   background-color: #006666;
   color: #FFFFFF;
   text-decoration:none;
}

#header h1{
}

#content h2 {
   display:none;
}
#content .entry h2 {
   display:block;
}

ปล.

1. ดีใจและยินดีมากคับคุณ Catkun ขอบคุณครับที่ช่วยจุดประกาย เหอๆๆ
2. ตอนเอา css code มาลงเพิ่งสังเกตุเห็น pngfixเลยแก้ไปแล้ว (แต่ยังไม่ได้ทดสอบเข้าใจว่ามันน่าจะแก้ได้นะ -3-)