บ้านนายลิงแว่น[THEME] Embroidery
posted on 01 Feb 2012 13:01 by limitblog in Theme directory Idea
วันนี้อากาศชวนหลบงานยิ่งเลยนั่งทำธีม(อีกละ)..โดยทำจากเทคนิคเดิมที่เคยไว้ใน entry
[CSS] ทำกล่องเนื้อหาแบบเย็บผ้าแต่ทำแล้วมันดูจืดๆก็เลยลองยัดdrop drugหรืออะไรสักอย่างนี่แหละครับเห็นมันลากๆแยกเป็นชิ้นเป็นส่วนได้โอ่ๆเจ๋งดีเลยเอามาแปะๆใส่ๆ เจ๋งดีรกดีชอบเลยเอามาใส่ดู ลองดูหน้าตาธีมก่อนครับ
/*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:#ccc url(http://uc.exteenblog.com/full-wilde/images/bg/wall.png) repeat top left;
color:#333;
font:12px Tahoma, "MS Sans Serif";
line-height:1.5em;
text-align:center;
}
a:link, a:visited{
color:#666;
text-decoration:none;
}
a:hover, a:active{
color:#333;
}
#page{
margin:auto;
padding-top:15px;
text-align:left;
width:780px;
}
#header, #neck, #belly, #leg, #footer{
float:left;
width:780px;
}
/*======================================================================*/
/* Header */
#header{
padding:20px 0px 0px 0px;
text-align:center;
position:relative;
}
#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{
height:30px;
margin-left:25px !important;
margin-left:0px; /*Fix IE Bug*/
}
/*======================================================================*/
/* Neck Menu */
#neck{
}
#neck .module{
top:-7px;
position:relative;
display:inline;
float:left;
margin:-10px 0px 0px 0px;
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 0px;
margin:-10px 0px 0px 0px;
}
#neck .module li a{
padding:7px !important;
}
#neck .module li a:hover{
top:-2px;
}
/*======================================================================*/
/* Content */
#belly{
}
#content{
display:inline;
float:left;
margin:5px 0 0 0 ;
width:517px;
/*Fix too large image makes content drop problem in IE*/
overflow:visible !important;
overflow:hidden;
}
.entry{
float:left;
margin-bottom:15px;
border-bottom:1px solid #CCC;
}
.entry .title{
display:block;
float:left;
margin-bottom:10px;
width:95.5%;
text-align:center;
}
.entry .title h2{
font-size:20px;
line-height:20px;
}
.entry .title h2 a{
color:#949494;
}
.entry .title h2 a:hover{
color:#CCC;
}
.entry .title span{
color:#666;
font-size:10px;
}
.entry .post{
float:left;
}
.entry .post p{
margin-bottom:10px;
}
.entry .post img{
width:93%;
background:#eee;
padding:4px;
border:dashed 1px #bbb;
border-radius:3px;
box-shadow:0 0 0 4px #eee,0 0 7px 1px #000;
}
.entry .info{
float:left;
width:100%;
}
.entry .info .tag{
float:left;
font-size:10px;
width:350px;
}
.entry .info .coms{
float:right;
padding:2px 7px 5px 7px !important;
}
/*======================================================================*/
/* Sidebars */
#sidebar, #sidebar2{
display:inline;
float:right;
margin:5px 25px 0px 0px;
width:225px;
}
#sidebar2{
display:none;
}
#sidebar .module, #sidebar2 .module,.entry,#neck .module li a,.entry .info .coms, #commentform,.comment{
-webkit-box-shadow:#9A9A9A 0 1px 0;
background-clip:initial;
background-color:#EEEEEE;
background-image: -moz-linear-gradient(bottom, rgb(238,238,238) 34%, rgb(255,255,255) 67%);
background-image: -webkit-linear-gradient(bottom, rgb(238,238,238) 34%, rgb(255,255,255) 67%);
border:solid 1px #DDDDDD;
box-shadow:#9A9A9A 0 2px 0, #333 0 0 3px;
margin-bottom:13px;
padding:10px;
position:relative;
text-shadow:#FFFFFF 0 1px 0;
z-index:0;
border-radius:5px;
}
#sidebar .module::before,.entry::before,#neck .module li a::before,.entry .info .coms::before,#commentform::before,.comment::before{
-webkit-box-shadow:#FFFFFF 0 0 0 1px;
border:dashed 1px #ccc;
bottom:3px;
box-shadow:#FFFFFF 0 0 0 1px;
content:'';
left:3px;
position:absolute;
right:3px;
top:3px;
z-index:-1;
border-radius:2px;
}
#sidebar .module ul, #sidebar2 .module ul{
margin:5px 0px 0px 5px;
padding:0;
list-style: none;
}
#sidebar .module h2, #sidebar2 .module h2{
border-bottom:1px solid #CCC;
font-size:18px;
}
#sidebar .module h2, #sidebar2 .module h2,.entry .title {
-webkit-box-shadow:#9A9A9A 0 1px 0;
background-clip:initial;
background-color:#EEEEEE;
background-image: -moz-linear-gradient(bottom, #eee 34%,#efefef 67%);
background-image: -webkit-linear-gradient(bottom, #eee 34%,#efefef 67%);
border:solid 1px #DDDDDD;
box-shadow:#9A9A9A 0 1px 0;
margin-bottom:13px;
padding:10px;
position:relative;
text-shadow:#FFFFFF 0 1px 0;
z-index:0;
border-radius:5px;
}
#sidebar .module h2::before, #sidebar2 .module h2::before,.entry .title ::before{
-webkit-box-shadow:#FFFFFF 0 0 0 1px;
border:dashed 1px #ccc;
bottom:3px;
box-shadow:#FFFFFF 0 0 0 1px;
content:'';
left:3px;
position:absolute;
right:3px;
top:3px;
z-index:-1;
border-radius:2px;
}
a.archive{
background:url(http://g.exteen.com/t/simple/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:96% !important;
float:left;
}
#commentform form{
margin:5px;
}
#commentform h3{
font-size:16px;
font-weight:bold;
}
#commentform .formrow{
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:96%;
}
.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{
}
#leg .module{
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{
height:60px;
}
#footer p{
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)
}
และเอา code ล่างยัดลง custom code ผมยัดไว้ที่ leg
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
$( init );
function init() {
$('#header h1 a,#header h2,#sidebar .module,#neck .module li a,.entry,#commentform').draggable();
$('.entry .title,.entry .post p,.entry .post img,.entry .info .tag,.entry .info .coms,.btn,.comment,#footer p').draggable();
$('#sidebar .module h2, #sidebar2 .module h2,#sidebar .module a').draggable();
}
</script>
ปล. ตอนนี้อากาศเอาแน่เอานอนไม่ได้ แถวบ้านฝนก็เพิ่งหยุดตกไปตะกี้เอง ยังไงดูแลสุขภาพกันบ้างนะครับ ;p
ท่านสามารถกดที่ link เพื่อดูตัวอย่างธีมLOOK DEMO !!
ถ้าอยากให้มันย้ายตรงไหนก็ใส่เพิ่มลงไปเลยนะครับปล. ตอนนี้อากาศเอาแน่เอานอนไม่ได้ แถวบ้านฝนก็เพิ่งหยุดตกไปตะกี้เอง ยังไงดูแลสุขภาพกันบ้างนะครับ ;p
สุดยอดไปเลยครับ ชอบจริงๆบล็อกนี้
#1 By บุรุษนิรนาม on 2012-02-01 13:17