[Skin] Concise (Invision) - by hand

[nightWalker]

THÔNG TIN SKIN
*Demo: http://viettruyen.forumvi.com hoặc http://www.a14toiyeu.net/forum
*Phiên bản: Invision
*Nguyên bản: Skin Concise (http://www.ipbforumskins.com/premade/concise/index.php)
*Mô phỏng lại: handsomevip007 - A14 Tôi yêu

*Vui lòng không sao chép bài viết này đi nơi khác*
*Trả lời bài viết để xem đầy đủ hướng dẫn này*

*HƯỚNG DẪN

-B1: Chọn Skin Invision mặc định | ACP Display Quản lý giao diện Choose a theme Chọn Invision
-B2: Chèn vào CSS | ACP Display Colors CSS

Code:

#submenu a,.box-content>a br,.author a,.author>img,.postdetails h3,.postprofile-details.postdetails a br a,#userlinks,.row1 span a br br,.ipbtable thead,.ipbtable.index-box thead{
display:none!important
}
span[style="color:#F00000"] strong::before{content:"♥—"}
span[style="color:#008F2D"] strong::before{content:"ஐ—"}
span[style="color:#FF5100"] strong::before{content:"★—"}
span[style="color:#C700C0"] strong::before{content:"ღ—"}
/*span[style="color:#C700C0"] strong::before{content:url('http://r26.imgfast.net/users/3115/25/32/47/smiles/931817.jpg');margin-right:2px;}*/
span[style="color:#0000E6"] strong::before{content:"☺—"}
span[style="color:#7A7A7A"] strong::before{content:"Φ—"}
span[style="color:#00CCFF"] strong::before{content:" ۰۪۪۫۫●۪۫۰—"}
#submenu a[href*="/login"],#submenu a[href*="/privmsg"],#submenu a[href*="/register"]{
display:inline!important
}
#submenu {
width:433px;
height:14px;
right:0;
margin-left:547px;
border:1px solid #DDD;
}
#submenu ul li a:hover {
background-color: white!important;
border-bottom: 2px solid #3677E0;
box-shadow: 0 0 3px #CCC;
padding-top: 10px;
}
a{
color:#3677E0
}
a:hover{
opacity:.8
}
a:link,a:active,a:visited{
text-decoration:none!important
}
#left{
clear:none!important;
width:100%!important;
float:none!important;
max-height:0;
}
#left a[href*="/t"] {
width: 450px;
float: left;
margin-right: 164px;
height: 14px;
overflow: hidden;
}
#left a[href*="/u"] {
width: 160px;
position:initial;
margin-left: -164px;
background: white;
}
#container {
width:896px!important;
margin-left:84px;
background:white;
box-shadow:rgba(0,0,0,0.06) 0px 1px 6px;
border:1px solid #DDD;
}
div.maintitle {
background: transparent!important;
color: #110!important;
padding: 12px!important;
border-bottom: 1px solid #CCC;
}
div.maintitle .contract,div.maintitle .expand{
height:22px!important;
width:32px!important;
opacity:0;
}
div.maintitle .contract{
background:url(http://i45.servimg.com/u/f45/16/55/88/76/cat_mi10.png) no-repeat!important;
}
div.maintitle .expand{
background:url(http://i45.servimg.com/u/f45/16/55/88/76/cat_ma10.png) no-repeat!important;
}
div.maintitle:hover .contract,div.maintitle:hover .expand{opacity:1}
.row1.centered {
margin-top: 25px;
}
.row2.centered, .row1.centered {
float: right;
background: transparent;
text-align: right;
height:8px;
width: 90px;
border: 0!important;
font-size:11px;
color:#8B8B8B;
}
.ipbtable.index-box tr td {
background:#FFF
}
.ipbtable.index-box tbody tr:hover td{
background:#FCFCFC
}
.row2.icon{
width:60%;
height:52px;
}
.row2.icon td td .row1{
width:40%;
border-left:1px solid #F3F3F3;
padding-top: 32px;
}
.row2.icon td td .row1,.row2.icon{
border-bottom:1px solid #F3F3F3!important
}
.row2.icon .row1.centered::after{
content:" chủ đề"
}
.row2.icon td .row2.centered::after{
content:" bài gửi";
}
.row1 span a br br strong::before{
content:" bởi "
}
body{
background:#EEE url("http://i43.servimg.com/u/f43/15/93/40/94/backgr10.png") repeat
}
#main-content{
min-height:450px;
}
#ipbwrapper {
width: 980px;
margin: 0 auto;
}
#navstrip a{
display:block;
height:30px;
padding:10px 10px 0 0;
background:url('http://i45.servimg.com/u/f45/16/55/88/76/second10.png') no-repeat 100% 0;
background-position:top right;
}
#navstrip{
border-bottom:1px solid #EDEDED;
border-top:1px solid #EDEDED;
}
#navstrip li{
background:none!important
}
#logostrip{
background:transparent!important;
}
#main-title h1,#main-title{
color:#5F5F5F!important;
text-shadow:#FFF 0 1px 0;
font-family:Lato,sans-serif!important;
font-size:34px!important;
font-weight:300!important;
text-shadow:white 0 1px 0;
}
#main-title{
margin-left:102px;
}
#leftNav {
margin-left:-90px;
position:absolute;
text-align:center;
}
#leftNav>div{
padding:10px 7px;
border-radius:3px 0 0 3px;
}
#leftNav>div:hover{
background:rgba(0, 0, 0, 0.03);
color:#555;
border-right:2px solid #3677E0;
}
.postprofile{
clear:initial;
float:initial;
width:100%;
margin-left:0!important;
min-height: 100px;
border-bottom: 1px solid #EAEAEA;
background:#F6F6F6;
text-shadow:white 0px 1px 0px;
}
.post-container{
margin-left:0!important;
}
head.post-header{
float:right;
}
.postprofile-details.postdetails a img{
border-radius:3px;
box-shadow: 0 0 4px black;
max-width:94px;
max-height:94px;
float:left;
margin:4px 10px 0 0;
}
.postprofile-details.postdetails img{
max-height:60px
}
.postprofile-head.post-header{
margin-left:107px;
background: transparent;
float:left;
margin-bottom:-45px;
margin-top:6px;
}
.postprofile-details.postdetails dt dd{
margin-left:300px;
float:left;
}
.postprofile-details.postdetails dt dd dd dd{
float:right;
margin-right:20px;
margin-top:-10px;
}
.post-info{
font-size:14px;
font-weight:bold;
color:#DDD;
float:right;
}
.author{
margin-left:-27px;
clear:left;
color:#448BFF;
float:left;
}
.post-footer.clearfix{
border-top:1px solid #F0F0F0;
}
.blog_cal-border{
border:1px solid #3677E0;
}
.blog_cal-content {
background:#3677E0;
}
#site-desc{
width:600px;
margin-left:85px;
color:#5F5F5F;
}
.hierarchy a{color:#3677E0!important}
textarea{
border:1px solid #3677E0!important;
border-radius:3px;
}
table.ipbtable tfoot td[colspan="2"]{
background:#DDD!important;
height:0!important;
}
.idNav{
background:#FFF;
color:#3677E0;
border:1px solid #DDD;
border-right:2px solid #3677E0;
box-shadow:rgba(0,0,0,0.06) 0 1px 6px;
}
.current-time {
top: 0;
position: absolute;
color: black;
text-align: right;
width: 964px;
padding: 10px;
}
#gfooter .footer-links{
width: 767px!important;
text-align: right;
}
.post{
border-bottom: 5px solid #3677E0!important;
}
.topic-footer.clearfix {
background:none!important;
}
textarea:focus,textarea:hover{
box-shadow:0 0 15px #3677E0;
border-color:#3677E0!important;
}
.member{
height:150px;
border:1px solid #3677E0;
}
.celldate{
border:1px solid #3677E0;
}
img.icon{
height:92px;
width:0;
opacity:.5
}
img[src="http://i43.servimg.com/u/f43/15/93/40/94/bf_new10.gif"]{
border-left:10px double #F73985;
opacity:1
}
img[src="http://i43.servimg.com/u/f43/15/93/40/94/bf_non10.gif"]{
border-left:10px double #3677E0
}
img[src="http://i43.servimg.com/u/f43/15/93/40/94/bf_loc10.gif"]{
border-left:10px double #000
}
.thin div{
color: white;
text-align: center;
font-size: 11px;
margin-left: -100px;
}
#custom_submit,input[type="file"],input[type="submit"],.button{
font-family: inherit;
font-size: 11px;
font-weight: bold;
color: white;
padding: 0 8px;
height: 29px;
min-width: 54px;
border: 1px solid #666;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-color: #3079ED;
background-color: #4D90FE;
background-image: -webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#4787ED));
background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED);
background-image: -moz-linear-gradient(top,#4D90FE,#4787ED);
background-image: -ms-linear-gradient(top,#4D90FE,#4787ED);
background-image: -o-linear-gradient(top,#4D90FE,#4787ED);
background-image: linear-gradient(top,#4D90FE,#4787ED);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#4787ed');
}
#custom_submit:hover,input[type="file"]:hover,input[type="submit"]:hover,.button:hover {
border-color: #2F5BB7;
background-color: #357AE8;
background-image: -webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#357AE8));
background-image: -webkit-linear-gradient(top,#4D90FE,#357AE8);
background-image: -moz-linear-gradient(top,#4D90FE,#357AE8);
background-image: -ms-linear-gradient(top,#4D90FE,#357AE8);
background-image: -o-linear-gradient(top,#4D90FE,#357AE8);
background-image: linear-gradient(top,#4D90FE,#357AE8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#357ae8');
}
div.pagination b{
background-color:#F73985!important;
padding:4px!important;
box-shadow:0 0 2px #F73985;
}
.pagination{
color:#FFF;
box-shadow:0 0 3px #3677E0;
}
.topictitle .pagination{
display:inline-block;
box-shadow:none;
}
.topictitle .pagination a {
background:#3677E0;
color:#FFF;
border-radius: 15px;
}
form[name="go_page"]{
border:2px solid #3677E0;
}
.row1.centered img {
margin-left: -849px;
position: absolute;
}
.row1.centered  .row1.centered  .row1 {
margin-left: 50px!important;
position: absolute;
width: 625px;
}
.row1.centered  .row1.centered  .row1  .row2.centered {
position: absolute;
margin-left: 739px;
}
.row1.centered.author {
display: inline-block;
margin-left: 37px;
position: absolute;
width: 164px;
}
.row1.centered.author  .row2.centered {
margin-left: 657px;
position: absolute;
}
.row1.lastaction {
display: inline-block;
margin-left: 485px;
margin-top: 23px;
position: absolute;
width: 400px;
}
.row1.centered.blog_icon  .row1.centered.blog_icon  .row1 {
width:100%;
position:static!important;
}
#[img]http://r26.imgfast.net/users/3115/25/32/47/smiles/177521.gif[/img] {
position: absolute;
top: 0;
background: white;
padding: 5px;
border-radius: 0 0 5px 5px;
box-shadow: 0 0 2px #000,0 0 2px #DDD;
right: 50%;
}
.codebox.contcode{
padding:5px 0 5px 0;
border:2px solid #DDD;
border-radius:10px;
max-width:680px;
box-shadow:2px 2px 5px #EBEADD
}
.codebox dt{
background:#FFF!important;
border-bottom:2px solid #3677E0;
}
.codebox dd{
border:0;
}
blockquote {
border:2px solid #DDD;
border-radius:10px;
background:#FFF;
box-shadow:2px 2px 5px #EBEADD
}
blockquote cite {
background:#FFF;
margin:0;
border-bottom:2px solid #3677E0;
padding:0;
}
.spoiler{
background:#FFF;
border:2px solid #DDD;
border-radius:10px;
box-shadow:2px 2px 5px #EBEADD
}
.spoiler dt{
background:transparent;
border-bottom:2px solid #3677E0;
color:#3677E0;
}
.spoiler>dt:after{
content:"▼ Click để xem";
float:right;
}
.ipbtable .row2 a{
position:static!important;
}
#scroll{
bottom:10px;
position:fixed;
right:8px;
}
#scroll a{
margin-bottom:2px;
display:block;
background:#448BFF;
padding:7px;
border-radius:5px;
opacity:.3;
color:white;
}
#scroll a:hover {
opacity:1;
}
.forum-desc{
width:395px;
text-align:justify;
}
.dd-textarea textarea {
border:1px solid #DDD!important;
}
.qreply .dd-textarea{
margin-left:-103px!important;
width:873px!important;
}
.qreply #text_editor_controls {
border-radius:5px 5px 0 0;
margin-bottom: -8px;
margin-left: -103px;
width:863px;
background: whiteSmoke;
border: 1px solid #DDD;
padding: 5px;
}
.qreply .button2{
margin-right:-7px!important;
border:1px solid
#DDD!important;
background-image:none!important;
padding:4px!important;
}
.qreply .button2:hover {
background:#DDD;
}
#scroll a,#custom_submit,input[type="file"],input[type="submit"],.button,textarea{
-webkit-transition:All .3s ease;
-moz-transition:All .3s ease;
-o-transition:All .3s ease;
}
/*Tùy chọn hình nền-www.FMvi.vn*/
#custom_background{
background-image:url('http://i43.servimg.com/u/f43/15/93/40/94/backgr10.png')!important;
color:#FFF;
position:relative;
padding:15px 0 15px 15px
}
#custom_background span{-moz-transition:all .2s ease-in-out 0;background:none no-repeat scroll 50% 50% #000;border-radius:7px 7px 7px 7px;box-shadow:0 1px 7px #000 inset, 0 1px 0 rgba(255,255,255,0.05), 0 0 1px rgba(255,255,255,0.35);cursor:pointer;display:block;float:left;height:90px;margin-right:15px;width:140px}
#custom_background span:hover{box-shadow:0 1px 2px #000 inset, 0 1px 0 rgba(255,255,255,0.05), 0 0 1px rgba(255,255,255,0.35)}
#bg1{background-image:url(http://i43.servimg.com/u/f43/15/93/40/94/backgr10.png)!important}
#bg2{background-image:url(http://i43.servimg.com/u/f43/15/93/40/94/bg111.png)!important}
#bg3{background-image:url(http://i43.servimg.com/u/f43/15/93/40/94/placeh10.gif)!important}
#bg4{background-image:url(http://i43.servimg.com/u/f43/15/93/40/94/previe10.jpg)!important}
#bg5{background-image:url(http://i43.servimg.com/u/f43/15/93/40/94/pic_0110.png)!important}
#custom_url{clear:left;padding-top:10px;text-align:center}
#custom_input{background:none repeat scroll 0 0 rgba(0,0,0,0.5);border:0 none;border-radius:4px 4px 4px 4px;box-shadow:0 1px 3px rgba(0,0,0,0.75) inset, 0 1px 0 rgba(255,255,255,0.15);color:#FFF;font-size:20px;height:40px;margin-left:-15px;margin-right:8px;white-space:nowrap;width:780px;padding:0 10px 0 0}
#custom_submit{
color:#FFF;
cursor:pointer;
display:inline-block;
font-size:14px;
line-height:25px;
padding:0 10px;
font-weight:400;
}
.bg1{background:url(http://i43.servimg.com/u/f43/15/93/40/94/backgr10.png) repeat fixed 50% 0 #FFF!important}
.bg2{background:url(http://i43.servimg.com/u/f43/15/93/40/94/bg111.png) repeat fixed 50% 0 #FFF!important}
.bg3{background:url(http://i43.servimg.com/u/f43/15/93/40/94/placeh10.gif) repeat fixed 50% 0 #FFF!important}
.bg4{background:url(http://i43.servimg.com/u/f43/15/93/40/94/previe10.jpg) repeat fixed 50% 0 #FFF!important}
.bg5{background:url(http://i43.servimg.com/u/f43/15/93/40/94/pic_0110.png) repeat fixed 50% 0 #FFF!important}
.bg_custom{background-attachment:fixed;background-color:#000;background-repeat:repeat}
#nav_background{
cursor:pointer;background: white;
padding:15px 5px 5px 5px;
margin:-15px 5px 5px 5px;
border-radius:0 0 5px 5px;
box-shadow:0 0 2px #000,0 0 2px #DDD;
}
#nav_background:hover{background-color:#FFF}
#nav_background:active{background-color:#E71E7B}
.popupmenu-item a img {
float:left;
}
iframe,embed,.postbody img{display:block;margin:0 auto}
.postbody img[src*='imgfast.net/users']{display:inline!important}
.toplinks linklist clearfix { display:none !important}

-B3: Tạo lần lượt các Widget theo thứ tự có nội dung như sau

*Wiget name : lefNav
*Use a table type : Không
*Widget title : leftNav
*Widget source:

Code:

<div id="leftNav">
  <div id="IndexNav">
  <a href="/"><img src="http://i45.servimg.com/u/f45/16/55/88/76/nav_ho10.png"/><br/>Trang chủ
  </a>
  </div><br/>
  <div id="ForumNav">
  <a href="/forum"><img src="http://i45.servimg.com/u/f45/16/55/88/76/nav_fo10.png"/><br/>Diễn đàn
  </a>
  </div><br/>
  <div id="PostNav">
  <a href="#Bai-Viet"><img src="http://i45.servimg.com/u/f45/16/55/88/76/nav_bl10.png"/><br/>Bài viết mới
  </a>
  </div><br/>
  <div id="MemNav">
  <a href="/memberlist"><img src="http://i45.servimg.com/u/f45/16/55/88/76/nav_me10.png"/><br/>Thành viên
  </a>
  </div><br/>
  <div id="EditNav">
  <a href="/profile?mode=editprofile"><img src="http://i43.servimg.com/u/f43/15/93/40/94/apps-s10.png"/><br/>Cài đặt
  </a>
  </div><br/>
  <div id="CalNav">
  <a href="/calendar"><img src="http://i45.servimg.com/u/f45/16/55/88/76/nav_ca10.png"/><br/>Lịch
  </a>
  </div>
</div>
 

*Wiget name : CSS Edit
*Use a table type : Có
*Widget title : (Không)
*Widget source:

Code:

<div id="">Chào bạn! {USERNAME}</div>
<span id="scroll"><a href="#top">▲</a><a href="#gfooter">▼</a></span>
<style>
#iframe {
height: 95px;
position: fixed;
top: 0;
left: 0;
opacity: 0;
width: 50px;
}
</style>

*Vui lòng không xóa các dòng ghi chú bản quyền trong CODE*
*Thay lại các link ảnh, script trong code để tranh lag*
*Mọi thắc mặc vui lòng lập topic tại đây để được giải đáp*

p/s: Mình được huynh hand ủy quyền cho share skin này vì thế không thắc mắc tại sao nhé
Mọi vấn đề về skin này đều được mình giải đáp tại đây

[mrkunvl]

like đầu nè

[Ocean Sapphire]

Like trước, test sau, skin này đẹp khỏi bàn

[handsomevip007]

Đính chính lại tên skin và nguồn gốc như trên
Trong code có chỗ hiện thì các bạn sửa thành hello nhé

[bb1303_starlight]

Skjn đơn giản nhưng đẹp.

[nightWalker]

Có ai cần bảng màu không mình chụp lên
Up cho mọi người nhé

[baoden.mango]

Đẹp miễn bàn

[nightWalker]

Up lên cho nóng lại nào, lạnh tanh vậy cà

[lynkpy]

NÓ mà punBB thì đỉnh ^^

[chupy]

NÓ mà punBB thì đỉnh ^^

skin đẹp
có punbb chứ

[lynkpy]

vậy share mình với Chupy

[Oxy]

Mình xin

[nh0kl0k]

xem

[untimo]

like

[Lùn Lì Lợm]

[dr.phuong]

xem

[MR.Rồng]

Demo đã die

[Sponsored content]