All

เริ่มแกะโค้ด 2%

posted on 12 Oct 2007 00:49 by tootoon  in All

/*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;
font-weight:normal;
}

/* General */
body
{
background:#c7e1e9 url(http://tootoon.exteen.com/images/bg%BC%D52.gif) repeat-x top left; /*บีจี*/
color:#333;
font:12px Tahoma, "MS Sans Serif";
line-height:1.5em;
text-align:center;
}

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

a:hover, a:active
{
color:#28a9d9;
}

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

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

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

#header
{
background:url(http://g.exteen.com/t/apollo/header.png) top left no-repeat;
padding:32px 0px 0px 25px;
}

#header h1 a
{
color:#666;
font-size:24px;
}

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

#header h2
{
font-size:12px;
margin:5px 0px 5px 0px;
}

#coverimage
{
background:url(http://tootoon.exteen.com/images/Bar-trick.gif) no-repeat;/*เฮด*/
height:180px;
width:730px;
margin-bottom:5px;
}

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

#neck
{
background:url(http://g.exteen.com/t/apollo/belly.png) top left;

}

#neck .module
{
background:#F5F5F5;
display:inline;
float:left;
margin:0px 0px 0px 25px;
padding:2px 0px 5px 0px;
width:730px;
}

#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:0px 10px 0px 10px;
}

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

#belly
{
background:url(http://g.exteen.com/t/apollo/belly.png) repeat-y;
}

#content
{
display:inline;
float:left;
margin:10px 15px 0px 25px;
width:490px;
/*Fix too large image makes content drop problem in IE*/
overflow:visible !important;
overflow:hidden;
}

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

.entry .title
{
display:block;
float:left;
margin-bottom:10px;
width:100%;
}

.entry .title h2
{
border-bottom:1px solid #e4e4e4;
font-size:18px;
}

.entry .title h2 a
{
color:#949494;
}

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

.entry .title span
{
color:#3985a2;
font-size:10px;
}

.entry .post
{
float:left;
}

.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;
}

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

#sidebar, #sidebar2
{
background:#ecf4f7;
display:inline;
float:right;
margin:5px 25px 0px 0px;
width:225px;
}

#sidebar2
{
display:none;
}

#sidebar .module, #sidebar2 .module
{
margin:5px 5px 15px 5px;
}

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

#sidebar .module h2, #sidebar2 .module h2
{
text-indent:-9999px;
}

/* Sidebar Header image */
#sidebar #recommend h2, #sidebar2 #recommend h2
{background:url(http://g.exteen.com/t/apollo/hd_recommend.png) no-repeat;width:131px;height:19px;}
#sidebar #previous h2,#sidebar2 #previous h2
{background:url(http://g.exteen.com/t/apollo/hd_previous.png) no-repeat;width:104px;height:23px;}
#sidebar #commentalert h2,#sidebar2 #commentalert h2
{background:url(http://g.exteen.com/t/apollo/hd_comments.png) no-repeat;width:181px;height:19px;}
#sidebar #favourites h2,#sidebar2 #favourites h2
{background:url(http://g.exteen.com/t/apollo/hd_favourites.png) no-repeat;width:105px;height:19px;}
#sidebar #links h2,#sidebar2 #links h2
{background:url(http://g.exteen.com/t/apollo/hd_links.png) no-repeat;width:52px;height:19px;}
#sidebar #categories h2,#sidebar2 #categories h2
{background:url(http://g.exteen.com/t/apollo/hd_categories.png) no-repeat;width:112px;height:23px;}
#sidebar #archives h2,#sidebar2 #archives h2
{background:url(http://g.exteen.com/t/apollo/hd_archives.png) no-repeat;width:89px;height:19px;}
#sidebar #tags h2,#sidebar2 #tags h2
{background:url(http://g.exteen.com/t/apollo/hd_tags.png) no-repeat;width:49px;height:23px;}
#sidebar #pagemenu h2,#sidebar2 #pagemenu h2
{background:url(http://g.exteen.com/t/apollo/hd_pages.png) no-repeat;width:64px;height:23px;}

a.archive
{
background:url(http://g.exteen.com/t/apollo/icon_archive.gif) no-repeat;
width:12px;
height:12px;
padding-left:15px;
margin-left:4px;
}
/*======================================================================*/
/* Configure each module */

/* Profile */
#profile
{
width:95%;
height:64px;
}

#profile img
{
float:left;
margin-right:10px;
}

#profile span
{
display:block;
}

#profile .info
{
width:100% !important;
width:60%;
}

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

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

#commentform
{
width:100%;
background:#EEE;
float:left;
}

#commentform form
{
margin:5px;
}

#commentform h3
{
font-size:16px;
font-weight:bold;
}

#commentform .formrow
{
border-top:1px solid #DDD;
padding:2px;
}

#commentform label
{
float:left;
width:150px;
}

#commentform input.textbox
{
width:150px;
}

#commentform textarea
{
width:310px;
height:150px;
}

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

.comment
{
border-bottom:1px solid #DDD;
float:left;
margin:5px 0px 5px 0px;
padding-bottom:5px;
width:100%;
}

.comment .post
{
float:right;
width:330px;
}

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

.comment .info
{
float:left;
font-size:10px;
width:150px;
margin-right:10px;
}

.comment .info img
{
width:32px;
}

/*======================================================================*/
/* Leg Menu */
#leg
{
background:url(http://g.exteen.com/t/apollo/belly.png) top left;

}

#leg .module
{
background:#F5F5F5;
display:inline;
float:left;
margin:0px 0px 0px 25px;
padding:2px 0px 5px 0px;
width:730px;
}

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

#leg .module h2
{
font-size:12px;
font-weight:bold;
display:inline;
}

#leg .module li
{
border-right:1px solid #CCC;
display:inline;
padding:0px 10px 0px 10px;
}

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

#footer
{
background:url(http://g.exteen.com/t/apollo/footer.png) bottom left no-repeat;
height:60px;
}

#footer p
{
background:#EEE;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
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)
}

 

 

สีชมพูนั่นแหละคือเริ่มแกะแต่มาอัพตอนเที่ยงคืนไม่ไหวและนอนดีก่า พรุ่งนี้จะมาแกะใหม่

แกะ CSS ไปได้ 10% และ

posted on 12 Oct 2007 15:16 by tootoon  in All

มา้ลยมาดูกันว่าแกะไปได้ถึงไหน

เราใช้ธีม Apollo นะ

ไป.....

 

 

บรรทัดที่ 23

background:#c7e1e9 url( URL ของรูปที่จะใส่ ) repeat-x top left fixed ; รูป BG ถ้าไม่อยากให้เลื่อนเติม fixed ได้เลย

 

บรรทัดที่ 24

color:#0000; สีของตัวอักษรในเนื้อหา ผมปรับไว้สีดำ

 

บรรทัดที่ 55

background:url( URL ของรูปที่จะใส่) top left no-repeat; BG ของ เฮด ถ้าไม่ใส่ค่า หรือใส่แล้วผิด จะออกมาเป็นใสๆ

 

บรรทัดที่ 74

background:url( URL ของรูปที่จะใส่) no-repeat; เฮด

 

บรรทัดที่ 84

background:url( URL ของรูปที่จะใส่ ) top left; BG ของ Top Menu

 

บรรทัดที่ 117

background:url( URL ของรูปที่จะใส่ ) repeat-y; BG ของ เรื่องที่เขียน ถ้าไม่ใส่ค่า หรือใส่แล้วผิดจะเป็นใสๆ

 

บรรทัดที่ 131

float:left; เนื้อหาจะชิดซ้าย

 

บรรทัดที่ 224

background:url( URL ของรูปที่จะใส ) no-repeat; รูปหลังคำใน Categpries ถ้าไม่ใส่ จะเป็นใสๆ ซึ่งถ้าใส่แล้วต้องปรับค่า 2อันล่างด้วยนะครับ

 

บรรทัดที่ 225

width:12px; กว้าง(ปรับให้เท่ากับรูป)

 

บรรทัดที่ 226

height:12px; สูง(ปรับให้เท่ากับรูป)

 

**** รู้ว่าถ้าปรับสูงต้องปรับ บรรทัดที่ 227 กับ 228 ด้วย แต่ผมยังไม่ได้ทำเลยไม่รู้ขอโทษด้วย

 

บรรทัดที่ 236

height:120px; เอาไว้สำหรับแก้เวลาที่ใส่รูปแล้ว ขึ้นมาเบียด

 

บรรทัดที่ 365

background:url( URL ของรูปที่จะใส ) bottom left no-repeat; BG ของ Bottom Menu ถ้าไม่ใส่ จะเป็นใสๆ

 

 

 

แค่นี้แหละฮะที่แกะได้

ถ้าผิดพลาดไปก็ขออภัยด้วยแล้วกันนะค้าฟ

ขอบคุณความรู้บางอย่างจาก

http://gin-no-ishi.exteen.com/20071011/css-2-1