บ้านนายลิงแว่น[THEME] Pack 2 (Orange+Ribbon)
posted on 31 Jan 2012 18:28 by limitblog in Theme directory Idea
วันนี้ได้เอาธีมมาแจกครับ.. วันนี้ ลงธีม 2 ธีมใน entry เดียวเลยครับมาดูกันเลย
ตัวแรก Orange ธีมตัวนี้ได้ทำไว้นานแล้วครับแต่ไม่มีเวลาได้เอามาโพสไว้ เป็นธีมแนว 3 แถวรองรับ ie นิดนึงแนวสบายๆ
/*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;
}
DIV
{
word-break: break-all;
word-wrap: break-word;
}
/*General*/
HTML
{
background-image: url(http://uc.exteenblog.com/full-wilde/images/theme/orange/htmlbg.jpg);
}
BODY
{
color: #333;
font: 12px Cambria;
line-height: 1.5em;
text-align: center;
}
A:link, A:visited
{
color: #F3721C;
text-decoration: none;
}
A:hover, A:active
{
color: #A64200;
}
#page
{
margin: auto;
text-align: left;
}
#header, #neck, #leg, #footer
{
float: left;
width: 620px;
}
/*======================================================================
Header*/
#header
{
background: url(http://uc.exteenblog.com/full-wilde/images/theme/orange/wrapbg.jpg);
text-align: center;
position: relative;
width: 930px;
height: 320px;
}
#header H1 A
{
color: #F71;
font-size: 35px;
font-family: Impact;
position: absolute;
z-index: 1;
margin: 200px 0 0 -240px;
line-height: 1;
}
#header H1 A:hover
{
color: #999;
}
#header H2
{
display: none;
}
#coverimage
{
background: url(http://uc.exteenblog.com/full-wilde/images/theme/orange/headerbg.png);
height: 205px;
width: 620px;
position: absolute;
left: 170px;
top: 116px;
-moz-border-radius: 40px 0 0;
-webkit-border-top-left-radius: 40px;
}
/*======================================================================
Neck Menu*/
#neck
{
background: #FFF;
display: none;
}
#neck .module
{
background: #D7D7D7;
display: inline;
float: left;
margin: 0px 0px 0px 25px;
padding: 2px 0px 5px;
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;
}
/*======================================================================
Content*/
#belly
{
width: 950px;
float: left;
}
#content
{
display: inline;
float: left;
margin: 0;
width: 600px;
overflow: visible !important;
overflow: hidden;
background-image: url(http://uc.exteenblog.com/full-wilde/images/theme/orange/pagebg.gif);
padding: 10px;
}
.entry
{
float: left;
margin-bottom: 15px;
width: 590px;
}
.entry .title
{
display: block;
margin-bottom: 10px;
width: 620px;
text-align: center;
}
.entry .title H2
{
font-size: 18pt;
font-family: Constantia;
text-align: center;
}
.entry .title H2 A
{
color: #323232;
font-variant: small-caps;
}
.entry .title H2 A:hover
{
color: #F71;
}
.entry .title SPAN
{
color: #666;
font-size: 10px;
}
.entry .post
{
width: 600px;
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
{
display: inline;
float: left;
margin: 5px 0px 0px;
width: 170px;
}
#sidebar2
{
float: right;
width: 160px;
background-image: url(http://uc.exteenblog.com/full-wilde/images/theme/orange/sidebar.gif);
margin-top: -204px;
position: relative;
}
#sidebar .module, #sidebar2 .module
{
margin: 5px 5px 15px;
}
#sidebar .module UL
{
margin: 5px 0px 0px 5px;
padding: 0;
list-style: none;
text-align: right;
}
#sidebar .module UL LI
{
text-align: right;
background: url(http://uc.exteenblog.com/full-wilde/images/theme/orange/sidebarli.png) no-repeat right;
padding: 0 10px 0 0;
}
#sidebar2 .module UL
{
margin: 5px 0px 0px 5px;
padding: 0;
}
#sidebar2 .module UL LI
{
margin: 1px 0px 0px;
list-style: inside url(http://uc.exteenblog.com/full-wilde/images/theme/orange/ulli.png);
}
#sidebar .module H2
{
font-size: 20px;
text-align: right;
padding: 0 10px 0 0;
}
#sidebar .module A
{
text-align: right;
color: #E98C00;
}
#sidebar .module A:hover
{
color: #A74300;
}
#sidebar2 .module H2
{
font-size: 20px;
text-align: center;
padding: 0 10px 0 0;
color: #FFFFFF;
}
#sidebar2 .module A
{
text-align: center;
padding: 0 10px 0 0;
color: #4F4F4F;
}
#sidebar2 .module A:hover
{
color: #FFFFFF;
}
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*/
INPUT
{
}
.tag
{
display: inline;
position: relative;
margin: 35px 0 0;
}
/*======================================================================
Comment Form*/
#commentform
{
width: 100%;
float: left;
}
#commentform FORM
{
margin: 5px;
}
#commentform H3
{
font-size: 22px;
font-weight: bold;
}
#commentform .formrow
{
padding: 2px;
}
#commentform LABEL
{
float: left;
width: 77px;
}
#commentform INPUT.textbox
{
width: 150px;
}
#commentform TEXTAREA
{
width: 580px;
height: 150px;
}
INPUT
{
background-color: #F3721C;
border: 1px dotted #FE9A57;
color: #FFFFFF;
}
INPUT:hover
{
background-color: #FEC49E;
border: 1px dotted #5F2701;
color: #050000;
}
/*======================================================================
Comment (Showing Area)*/
.comment
{
float: left;
margin: 5px 0px;
width: 590px;
background-color: #FECC6B;
padding: 5px;
}
.comment .post
{
float: right;
width: 490px;
background-color: #FFFFFF;
padding: 5px;
font: 1em Consolas;
}
.comment .post P
{
margin-bottom: 10px;
}
.comment .info
{
float: left;
font-size: 10px;
width: 75px;
margin-right: 10px;
}
.comment .info IMG
{
width: 32px;
}
.info .coms
{
height: auto;
font: normal bolder 11pt sans-serif;
position: absolute;
margin: 20px 0 0 -350px;
}
.comment .info P
{
font: 1em Calibri;
width: 75px;
}
/*======================================================================
Leg Menu*/
#leg
{
display: none;
}
#leg .module
{
background: #D7D7D7;
display: inline;
float: left;
margin: 0px 0px 0px 25px;
padding: 2px 0px 5px;
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;
}
/*======================================================================
Footer*/
#footer
{
background: url(http://uc.exteenblog.com/full-wilde/images/theme/orange/footerbg.jpg);
height: 100px;
margin: 0px 0 0 170px;
}
#footer P
{
font-size: 18px;
text-align: center;
margin: 40px 25px 0px;
padding: 5px;
color: #FFFFFF;
}
/*======================================================================*/
.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);
}
/*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;
}
p{text-shadow:1px 1px 1px #000;}
/* General */
body {
background:#aaa;
color:#333;
font:12px Tahoma, "MS Sans Serif";
line-height:1.5em;
text-align:center;
}
a:link, a:visited{
color:#900;
text-decoration:none;
text-shadow:0 1px 1px black;
}
a:hover, a:active{
color:red;
}
#page{
margin:auto;
padding-top:15px;
text-align:left;
width:790px;
}
#header, #neck, #belly, #leg, #footer{
float:left;
width:790px;
}
/*======================================================================*/
/* Header */
#header{
padding:20px 0px 0px 0px;
position:relative;
}
#header h1 a{
color:#666;
font-size:48px;
line-height:48px;
margin:0px 0px 0px 8px;
}
#header h1 a:hover{
color:#999;
}
#header h2{
font-size:12px;
margin:5px 0px 5px 10px;
color:#666;
text-shadow:0px 1px 1px #fff;
}
#coverimage{
height:20px;
width:730px;
margin-left:25px !important;
margin-left:0px; /*Fix IE Bug*/
}
/*======================================================================*/
/* Neck Menu */
#neck{
}
#neck .module{
display:inline;
float:left;
margin:0px 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{
display:inline;
padding:0px 10px 0px 10px;
}
/*======================================================================*/
/* Content */
#belly{
}
#content{
display:inline;
float:left;
margin:10px 15px 0px 25px;
width:500px !important;
/*Fix too large image makes content drop problem in IE*/
overflow:visible !important;
overflow:hidden;
}
.entry{
float:left;
margin-bottom:15px;
border-bottom:1px dotted #888;
}
.entry .title{
display:block;
float:left;
margin-bottom:10px;
width:106% !important;
}
.entry .title:before{
left:0px !important;
top:58px !important;
}
.entry .title:after {
right:0px !important;
top:58px !important;
}
.entry .title h2{
font-size:22px;
height:20px;
}
.entry .title h2 a{
color:#fff;
}
.entry .title h2 a:hover{
color:red;
text-shadow:0px 1px 2px black;
}
.entry .title span{
color:#300000;
font-size:10px;
}
.entry .post{
float:left;
}
.entry .post p{
margin-bottom:10px;
font-size:12px;
text-shadow:0 1px 1px #000;
}
.entry .post img{
width:450px !important;
background:#777;
padding:5px;
border:solid 1px #ccc;
box-shadow:0 0 3px .5px #111;
}
.entry .info{
float:left;
width:100%;
}
.entry .info .tag{
float:left;
font-size:10px;
width:350px;
}
.entry .info .coms{
float:right;
}
/*======================================================================*/
/* Sidebars */
#sidebar2 {display:none}
#sidebar{
width:250px;
float:right;
}
#sidebar .module,#content,.comment{
width:220px;
padding:10px 5px 5px 5px;
margin:10px;
position:relative;
z-index:1;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-webkit-box-shadow:0 0 3px rgba(0,0,0,0.55);
-moz-box-shadow:0 0 3px rgba(0,0,0,0.55);
box-shadow:0 0 3px rgba(0,0,0,0.55);
background:#424242;
background:-webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
background:-moz-linear-gradient(top,#6a6a6a,#424242);
color: #fff;
font-size: 90%;
}
#sidebar .module ul{
list-style:none;
padding:0;
}
#sidebar .module h2,.entry .title{
position:relative;
width:251px;
color:#fff;
padding:10px 0;
margin:0 -15px;
left:0;
z-index:100;
-webkit-box-shadow:0 0 3px rgba(0,0,0,0.55);
-moz-box-shadow:0 0 3px rgba(0,0,0,0.55);
box-shadow:0 0 3px rgba(0,0,0,0.55);
background:#3198dd;
background:-webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
background:-moz-linear-gradient(top,#b00000,#600000);
font-size:200%;
text-align:center;
text-shadow:red 0 -1px 1px;
font-weight:bold;
}
/* left shadow */
#sidebar .module:before,.entry .title:before {
content:"\00a0";
display:block;
position:absolute;
top:48px;
left:-10px;
width:0;
height:0;
border-width:10px 0 10px 10px;
border-style:solid;
border-color:#400000 transparent transparent;
z-index:0;
}
/* right shadow */
#sidebar .module:after,.entry .title:after {
content:"\00a0";
display:block;
position:absolute;
top:48px;
right:-10px;
width:0;
height:0;
border-width:10px 10px 10px 0;
border-style:solid;
border-color:#400000 transparent transparent;
z-index:0;
}
#sidebar .module a{
font-size:1.2em;
color:#fff;
margin:15px 5px 10px 10px;
text-shadow:1px 1px 1px #000;
}
#sidebar .module a:hover{
text-shadow:0px 1px 1px #fff;
color:#000;
}
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:100%;
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:98%;
height:150px;
background:#666;
border:none;
border-radius:2px;
padding:5px;
text-shadow:1px 1px 1px #999;
font-size:14px;
}
/*======================================================================*/
/* Comment (Showing Area) */
.comment{
border:1px dotted #999;
float:left;
margin:5px 0px 5px 0px;
padding:5px!important;
padding-bottom:5px;
width:98%;
}
.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:#FFF;
}
#leg .module{
background:#d7d7d7;
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:11px;
text-align:center;
margin:5px 25px 0px 25px;
padding:5px;
text-shadow:0px 1px 1px #fff;
}
/*======================================================================*/
.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)
}
ท่านสามารถกดที่ link เพื่อดูตัวอย่างธีมLOOK DEMO !!
ตัวที่สอง Ribbon ธีมตัวนี้ใช้ css3 ทั้งธีมส่วนตัวริบบิ้นใช้เทคนิค border:transparent และ Gradient และไม่สามรถตอบได้ว่าใช้กับ ie ในรุ่นใดบ้างยังไงถ้าไม่ชอบ css3 ผ่านไปเลยครับตัวนนี้ท่านสามารถกดที่ link เพื่อดูตัวอย่างธีมLOOK DEMO !!
ที่หายไปสักผมได้ทำบล๊อก full-wilde ให้มันกลายเป็น blog demo theme ครับเอาไว้ดูตัวอย่างเวลาแจกธีมไปให้เห็นภาพกันไปเลย ยังไงติดตามกันต่อไปนะครับ (ดูในส่วนของ LAB) ปล. ตอนนี้อากาศเอาแน่เอานอนไม่ได้ แถวบ้านฝนก็เพิ่งหยุดตกไปตะกี้เอง ยังไงดูแลสุขภาพกันบ้างนะครับ ;pTags: css, demo, free, theme4 Comments
เก่งครับ สงสัยอาชีพทำเว็บไซต์แน่ๆเลย
#1 By [Somoza] on 2012-01-31 19:27