Chú thích : à thì skin này cũng lâu rồi giữa năm 2014 , thấy share trang index rồi lấy về edit. mình có share trên mạng thấy mn lấy về sài thì mình cũng mừng lắm skin tuy không đẹp mình chế lại từ skin gốc và thêm máy cái như hiệu ứng này nọ của forum trà sữa hồi trước mình có làm vs anhdausai nên còn giữ lại skin chuẩn hoàn toàn 100 % :3 .. à mà vào tiêu đề nào
Demo gốc :
![[Đóng góp] SHARE SKIN BULE DẠNG WAP IoS42PR](https://i.imgur.com/IoS42PR.png)
Demon Forum : Click
Css :
Demo gốc :
Demon Forum : Click
Css :
- Spoiler:
- Code:
/*Srollbar*/
::-webkit-scrollbar { width: 8px; height: 3px;}
::-webkit-scrollbar-button { width: 0px; height: 0px; }
::-webkit-scrollbar-track { background-color: #00AEFF;}
::-webkit-scrollbar-track-piece { background-color: #FFFFFF;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #00AEFF;}
::-webkit-scrollbar-corner { background-color: #999;}
::-webkit-resizer { background-color: #666;}
#smallrum{padding: 0.8em 1em; margin: 3px 1px;
color: #FFFFFF; width: 375px;}
#smallrum a img{vertical-align: middle; padding-right: 2px;}
#smallrum a.gensmall {
display: inline-block;
text-align: left;
width: 160px;}
47%{opacity:1}50%{opacity:0}97%{opacity:0}100%{opacity:1}@font-face{font-family:icomoon;font-style:normal;font-weight:400;src:url(https://googledrive.com/host/0B2iMjo97NLgXLUt3T0RtaWVRWVE/fonts/icomoon.eot?#iefix) format(embedded-opentype), url(https://googledrive.com/host/0B2iMjo97NLgXLUt3T0RtaWVRWVE/fonts/icomoon.woff) format(woff), url(https://googledrive.com/host/0B2iMjo97NLgXLUt3T0RtaWVRWVE/fonts/icomoon.ttf) format(truetype), url(https://googledrive.com/host/0B2iMjo97NLgXLUt3T0RtaWVRWVE/fonts/icomoon.svg#icomoon) format("svg")}@font-face{font-family:icomoon;font-style:normal;font-weight:400;src:url(/h12-svg.svg#icomoon) format("svg")}.pun a:link{font-family:Arial, Helvetica, verdana, sans-serif;font-size:10pt;text-decoration:none}.pun{min-width:100px;padding:0;width:100%}.clearfix{clear:both}
.po-rel{position:relative!important}
a{text-decoration:none!important}[type*="button"],[type*="reset"],
[type*="submit"]{-moz-transition:all .1s ease;-webkit-transition:all
.1s ease;background:#fff!important;border:3px solid #0099ff!important;border-radius:1px!important;box-shadow:0 0 1px rgba(0,0,0,0.5);color:#0099ff!important;cursor:pointer;font-weight:700!important;padding:1.5px 12px}
.pun .main-content .natata{-moz-transition:all 1s ease;-webkit-transition:all 1s ease;background:#2e2e2e;border-radius:2px;content:"";height:3px;left:0;position:absolute;top:0;width:0}.pun .main-content:hover .natata{background:#0099ff;width:100%}
.pun .main-content .netete{-moz-transition:all 1s ease;-webkit-transition:all 1s ease;background:#2e2e2e;border-radius:2px;bottom:0;content:"";height:3px;position:absolute;right:0;width:0}
.pun .main-content:hover .netete{background:#0099ff;width:100%}
.fixedhead{background:#0099ff;height:94px;left:0;position:absolute;top:0;width:100%;z-index:-1}
.pun .main-content .nototo{-moz-transition:all 1s ease;-webkit-transition:all 1s ease;background:#2e2e2e;border-radius:2px;bottom:0;content:"";height:0;left:0;position:absolute;width:3px}.pun .main-content:hover .nototo{background:#0099ff;height:100%}
.pun .main-content .nututu{-moz-transition:all 1s ease;-webkit-transition:all 1s ease;background:#2e2e2e;border-radius:2px;content:"";height:0;position:absolute;right:0;top:0;width:3px}.pun .main-content:hover .nututu{background:#0099ff;height:100%}
/* User action */
#pun-visit ul,.main-box ul{position:relative;width:16px;height:16px;background:url(http://i56.servimg.com/u/f56/18/59/49/93/align_10.png) no-repeat center transparent;z-index:20}
#pun-visit ul:hover{margin-top:-.7em;margin-right:-1.1em}
.main-box ul:hover{margin-top:-.65em;margin-left:-1.05em}
#pun-visit li,.main-box li{display:none;width:230px;background:#FFF;border-color:transparent #888 #999;border-style:solid;border-width:0 2px;margin:0}
#pun-visit li:first-child,.main-box li:first-child{border-top:2px solid #999}
#pun-visit li:last-child,.main-box li:last-child{border-bottom:2px solid #999}
.main-box li{margin-left:0;float:left;text-align:left;width:170px}
#pun-visit ul:hover li,.main-box ul:hover li{display:block}
#pun-visit li:hover,.main-box li:hover{background:#F2F2F2}
#plus_menu{left:auto!important;right:60px!important;top:-8px;border:2px solid #999;width:260px!important;background:#FFF}
#plus_menu .title-overview{display:none}
#plus_menu .left-overview{padding:0}
#pun-visit ul a,.main-box ul a{display:block;height:30px;line-height:30px;padding:0 10px}
#pun-visit ul a:hover,.main-box ul a:hover{background:#f2f2f2}
.dashed{border-top:1px dashed silver;margin:5px 0}
#pun-visit br{display:none}
/*Css*/
.msg a:after{content:"[Link]";font-size:12px} .msg a:link{font-size:0;display:inline-block}
.keytags{text-align: center;font-size: 10px;}
.main .main-foot,.main .main-head{background-color:#239adc;color:#fff;font-weight:700;padding:.7em 1.3em;}
.pun .main-content{background-color:#fff;border:1px solid #239adc;margin-bottom:10px;}
.pun table.table tr:hover td,#pun-info dd:hover{background-color:#F5F5F5!important;}
.pun table.table td{background-color:#fbfbfb;line-height:130%;border-color:#239adc;border-style:solid none none solid;border-width:1px;padding:.6em 0 .7em;}
.plusbox{color:#888;font-size:12px;padding-right:10px;}
#smallrum{color:#FFF;width:360px;margin:3px 1px;padding:.8em 1em;}
#smallrum a.gensmall{display:inline-block;text-align:left;width:160px;}
#main-content > div:nth-child(21) > form > div.main-content.frm > fieldset.frm-set.multi > dl:nth-child(1) > dd > select:nth-child(4) {margin-top: 10px;}
a[href^="/admin/"]{color:#fff!important;background:#000;padding:5px;position:fixed;right:10px;bottom:10px;border-radius:3px;z-index:50;}
.pun input {border: 1px solid #DDD}
textarea:focus,button:focus,input:focus,.pun select:focus{border:1px solid #00BBFF!important;outline:none}
a{text-decoration:none}
a:link,a:active,a:visited {
text-decoration: none;}
a:hover{
text-decoration: none !important;}
blink b{animation:blink .1s infinite;-moz-animation:blink .5s infinite;-webkit-animation:blink .5s infinite}
@-webkit-keyframes blink{0%{opacity:1}100%{opacity:.1}}@-moz-keyframes blink{0%{opacity:1}100%{opacity:.1}}@-ms-keyframes blink{0%{opacity:1}100%{opacity:.1}}@keyframes blink{0%{opacity:1}100%{opacity:.1}}
.pun{
min-width:948px;width:948px;
background: rgb(252, 252, 255) url('http://i48.servimg.com/u/f48/16/58/89/73/alt210.gif');
padding:10px;}
body {
margin: 0 auto;
padding: 0px 0px 0px 0px;
font-family: 'Open Sans', sans-serif;
color: #312C21;
overflow-x: hidden;
font-size: 13px;
background:#F0F0F0;
}
a{text-decoration:none}
#wrapper{
max-width:1000px;
width:100%;
margin:auto;
}
#header{
max-width: 100%;
position: relative;
margin: auto;
overflow: hidden;
background: #00B6E3;
}
.header-wrap {max-width: 930px;margin:auto;position:relative;}
h1#blog-title {
text-align: left;
margin-top: 20px;
font-weight: 200;
font-size: 40pt;
color: #fff;
line-height: 45px;
}
h1#blog-title a {padding:5px;color:#fff;}
h1#blog-title a:link,h1#blog-title a:visited {
color: #fff;
}
h2#blog-desc {
padding: 5px;
text-align: left;
font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 200;
font-size: 15pt;
letter-spacing: 0.01em;
color: #fff;
margin-bottom: 20px;
}
.title h2{
text-decoration: none;
padding: 10px;
margin-bottom: 15px;
text-align: left;
margin: auto;
font-weight: bold;
font-size: 20pt;
color: #fff;
}
.title h2 a:link, .title h2 a:visited{
color:#000;text-decoration: none;
}
.timemeta {float: left;
margin-left: 10px;
padding-right: 10px;
border-right: 1px solid #FFFFFF;
color: #FFFFFF;
text-transform: uppercase;
font-size: 8pt;}
.author1 {float: left;
margin-left: 10px;
padding-right: 10px;
border-right: 1px solid #FFFFFF;
color: #FFFFFF;
text-transform: uppercase;
font-size: 8pt;}
.postmeta, .postinfo{
background:#F5ECC1;
padding:3px 10px;
border:1px solid #DFD5A7;
font-size:10px;
text-transform:uppercase;
}
#menujohanes{
width:100%;
font-size: 10pt;
margin: auto;
background: #007396;
height: 50px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-transform: uppercase;
position: relative;}
#menujohanes ul{
list-style-type: none;
z-index: 9;
max-width: 930px;
margin: auto;}
#menujohanes ul li{
float: left;
position: relative;
padding: 12px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;}
#menujohanes ul li:hover a.menu{color:#fff;}
#menujohanes ul li:hover{
background:#00FFD5;}
#menujohanes ul li a:hover {
color:#fff;}
#menujohanes ul li a{
color: #fafafa;
padding: 0 10px;
line-height:25px;
font-weight:bold;
font-size: 10pt;
display:block;
text-decoration:none;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;}
#menujohanes ul li ul li{float: none;position: relative;}
#menujohanes ul li ul{
position: absolute;
top:49px;
left:0;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
display:none;
background: #5d5d5d;}
#menujohanes:hover ul li ul {width:150px;}
#menujohanes ul li:hover > ul{-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;display:block; }
#menujohanes ul li ul li a{line-height:25px;}
#menujohanes ul li ul li ul{
position: absolute;
top:0; left:150px;
width:150px;
background: #00FFD5;}
#menujohanes ul li.selected a{font-size: 10pt;font-weight:bold;}
#menujohanes ul li.selected{color: #fff;background: #474747;font-weight:bold;}
.pinterestjo:hover, .twitterjo:hover, .facebookjo:hover, .googlejo:hover {background-color:#65C7CA;}
.pinterestjo, .twitterjo, .facebookjo, .googlejo {
font-size: 13px;
color: #222;
width: 100%;
z-index: 9;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
height: 45px;}
.twitterjo{
background: #00B6E3 url("http://4.bp.blogspot.com/-8BAKelUOAUY/UTyKNEclkHI/AAAAAAAAF3w/JWk7Bt7gJ6s/s1600/white_twitter_bird.png")no-repeat center center;}
.facebookjo {
background: #00B6E3 url("http://3.bp.blogspot.com/-vG6u1PK9oY0/UTyKNIjeVvI/AAAAAAAAF3o/Vr5nEq6jrAw/s1600/white_facebook.png")no-repeat center center;}
.googlejo{
background: #00B6E3 url("http://2.bp.blogspot.com/-VgoImgPXil8/UbNUTrYoCqI/AAAAAAAAGUw/hCImmM-IYZw/s1600/footer-icon-google.png")no-repeat center center;}
.pinterestjo{
background: #00B6E3 url("http://2.bp.blogspot.com/-9piAQfPmxa8/UZ-rdm96t7I/AAAAAAAAGKw/BZQeZleoZhI/s1600/white_pinterest.png")no-repeat center center;}
.jorib {
width: 45px;
height: 109px;
position: fixed;
top: 173px;
right: 0px;
z-index: 9;
}
/* footer styles*/
.entry-content{position:relative;}
.entry-content img {
max-width: 600px;
border: 1px solid #DDD;
box-shadow: 0px 1px 3px -1px #BEBEBE;
}
.entry-content img:hover {
max-width: 610px;
border-color: #aaa;}
.pun-crumbs {
background: -webkit-linear-gradient(#ECECEC,#DBDBDB);
background: -moz-linear-gradient(#ECECEC,#DBDBDB);
background-image: -ms-linear-gradient(top, #ECECEC, #DBDBDB);
background-image: -o-linear-gradient(top, #ECECEC, #DBDBDB);
background-image: linear-gradient(top, #ECECEC, #DBDBDB);
box-shadow: 0 1px 2px 0 #E4E4E4,inset 0 1px 0 0 white;
margin: 3px 0;
border: 1px solid #CCC6C6;
padding: 5px 16px;
position: relative;
height: 21px;
outline-style: none;
overflow: hidden;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.pun-crumbs .crumbs a {
background: -webkit-linear-gradient(#ECECEC,#DBDBDB);
background: -moz-linear-gradient(#ECECEC,#DBDBDB);
background: -ms-linear-gradient(top, #ECECEC, #DBDBDB);
background: -o-linear-gradient(top, #ECECEC, #DBDBDB);
background: linear-gradient(top, #ECECEC, #DBDBDB);
font-size: 11px;
padding: 8px 4px;
border-right: 1px solid #CCC;
border-left: 1px solid #F1F1F1;
margin-left: -16px;
}
#pun-about {
background: rgb(248, 248, 248);
color: transparent; border-top: 1px solid #D1D1D1;
padding: 0 5px; height: 45px; line-height: 45px;
text-align: left;
}
#pun-about ul li a {
font-size: 11px; color: #999; display: block; float: left; height: 45px; line-height: 45px; padding: 0 10px; border-right: 1px solid #ddd;
font-weight: normal;
}
#pun-about ul li a:hover {
background: #fff; color: #666;
}
ul#pun-legend {
text-align: left;
line-height: 37px;
height: 37px;
margin: 0;
color: rgb(68, 68, 68); font-family: Arial, sans-serif; font-size: 11px;
}
ul#pun-legend img {
top: 9px;
position: relative;
margin-left: 10px;
}
#pun-foot #copyright {
padding: 0 15px; border-radius: 0 0 5px 5px; font-size: 11px; height: 45px;
line-height: 45px; color: #999;
}
#pun-foot #copyright a {
font-weight: bold;
}
#pun-foot #back-top {
float: right; padding: 0 10px; height: 45px; line-height: 45px; display: block; border-left: 1px solid #ddd; margin-left: 10px; border-right: 1px solid #ddd;
}
#pun-foot .mybb-link.right {
margin-right: 10px; border-right: 1px solid #ddd; padding-right: 10px;font-size:10px;
}
#pun-foot .icon-upload.icon-large {
background: url("http://i.imgur.com/noa2Awt.png") no-repeat center center;
width: 25px;
height: 24px;
display: block;
margin-top: 10px;
}
#pun-foot .icon-upload.icon-large:hover {
background: url("http://i.imgur.com/1JvGS3S.png") no-repeat center center;
}
#pun-foot #copyright .audentio-link.right {
line-height: 15px;
margin-top: 8px;
}
#pun-foot .center.admin {
position: absolute;
top: 17px;
right: 10px;
}
#pun-foot .center.admin a {
font: bold 10px arial;
}
