[Hỏi đáp] Dời thanh điều hướng và hiển thị viền Borde

  Bài viết hay nhất1
Hiện tại Forum em còn 2 bước nữa là "tương đối hoàn thiện" nhưng hiện đang dính 2 lỗi :

Đường viền Border quanh Forum không biết vì sao biến mất lúc trước thì không :

Lúc Trước


Hiện nay


Và mình muốn dời thanh điều hướng xuống dưới đây


Link Forum : www.hienmau.net

Ai giúp giùm phần này với , thanks !


  Bài viết hay nhất2
Code:
.pun {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-shadow: rgba(0,0,0,0.1) 0px 1px 6px;
    margin-right: 13.5%;
    padding: 0px;
    color: #424040;
}
  Bài viết hay nhất3

AnChina wrote:
Code:
.pun {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-shadow: rgba(0,0,0,0.1) 0px 1px 6px;
    margin-right: 13.5%;
    padding: 0px;
    color: #424040;
}


Không "si nhê" bạn ơi ,mình có thêm đoạn css giống vậy mà không được !
  Bài viết hay nhất4
Border: Thêm vào CSS
Code:
.pun .postmain{border: 1px solid #CCC}

Thanh điều hướng: Tìm trong overall_header
Code:
<div id="pun-head"><div class="dc_n"><p class="n_crumbs"><a class="nav" href="/forum">Trang Chủ</a>»</p></div></div>

Chuyển đoạn code ở trên lên trước <div id="page-body">
  Bài viết hay nhất5

Boom wrote:Border: Thêm vào CSS
Code:
.pun .postmain{border: 1px solid #CCC}

Thanh điều hướng: Tìm trong overall_header
Code:
<div id="pun-head"><div class="dc_n"><p class="n_crumbs"><a class="nav" href="/forum">Trang Chủ</a>»</p></div></div>

Chuyển đoạn code ở trên lên trước <div id="page-body">

Thanks ! Sau khi chèn đoạn CSS của bạn Boom thì trong bài viết đã có viền Border nhưng dưới bài viết cho đến cuối trang và trang chủ vẫn chưa xuất hiện , mình muốn cái viền Border đó kéo từ thanh điều hướng cho đến cuối trang luôn có được không ?

Đã dời đoạn mã ở overall_header nhưng thanh điều hướng vẫn chưa nhúc nhích !
  Bài viết hay nhất6
Tìm trong CSS đoạn
Code:
#page-body{margin:4px 0;width:100%}

sửa lại thành
Code:
#page-body{margin:4px 0;border: 1px solid #ddd}
Forum của bạn bị trùng code, nó có tới 2 cái <div id="page-body"> lận
  Bài viết hay nhất7

Boom wrote:Tìm trong CSS đoạn
Code:
#page-body{margin:4px 0;width:100%}

sửa lại thành
Code:
#page-body{margin:4px 0;border: 1px solid #ddd}
Forum của bạn bị trùng code, nó có tới 2 cái <div id="page-body"> lận

Tìm đoạn CSS trùng mà không thấy , mình thêm đoạn CSS của bạn thì nó hiện đường viền border bên trái trên trang chủ còn bên phải thì nó không hiện =)) .
  Bài viết hay nhất8
1. Trùng Id page-body do đó bạn chỉnh css thì cả 2 id đều thay đổi. Một là đổi lại tên id trong template. 2 là dùng css để phân biệt. Nhưng tốt nhất là đổi lại đi vì id không nên để trùng, class có thể trùng nhưng id thì không.

Bạn có thể phân biệt id page-body bao quanh forum bằng css như sau.

Code:
#pun-head + #page-body {
    padding: 5px;
}
  Bài viết hay nhất9

markai30 wrote:1. Trùng Id page-body do đó bạn chỉnh css thì cả 2 id đều thay đổi. Một là đổi lại tên id trong template. 2 là dùng css để phân biệt. Nhưng tốt nhất là đổi lại đi vì id không nên để trùng, class có thể trùng nhưng id thì không.

Bạn có thể phân biệt id page-body bao quanh forum bằng css như sau.

Code:
#pun-head + #page-body {
    padding: 5px;
}

Vẫn không tìm ra đoạn trùng mà bạn nói mình mới làm quen với CSS nên ko hiểu lắm , mình gởi đoạn CSS bạn xem chỉnh sửa hộ luôn nhé , Thanks !

Code:
.pun-crumbs{display:none}
.dc_n{border:1px solid #AAA;clear:both;width:946px;font-style:normalline-height:37px;overflow:hidden;padding:0;text-shadow:#red 0 1px 0;margin: 5px -5px 5px -0px;font-size:0;background:#fff}
.dc_n p.n_crumbs{color:#666;font-size:1.11em;line-height:1.5;margin:0px;}
.dc_n .n_crumbs a{-moz-border-radius:3px 0 0;-webkit-border-top-left-radius:3px;background:url( http://i86.servimg.com/u/f86/19/09/66/76/second20.png) no-repeat 100% 0;border-radius:3px 0 0 0;color:#0066cc!important;display:block;float:left;font-size:12px!important;height:37px;line-height:37px;margin-left:-0;outline:none;padding-left:12px!important;padding-right:17px;text-decoration:none}
.dc_n .n_crumbs a:hover{;background-position:100% -43px}#pun-info *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
#pun-info > .main-content{border:1px solid #76c4de;border-width:0 1px 1px 1px}#pun-info .starsItem{position:relative}#pun-info .starsTitle{height:26px;line-height:24px;border:1px solid #76c4de;background:#76c4de;border-width:1px 0;padding:0 10px}#pun-info .leftStats img{width:48px;height:48px}

#pun-info .leftStats{position:absolute;left:11px;top:32px;width:60px}#pun-info .rightStats{min-height:50px;border-left:1px solid #D9F0FF;padding-left:10px;word-break:break-word;max-height:200px;overflow:auto;margin:10px 10px 10px 70px}

#fa_chat_container{background:#d9f0ff;border:1px solid #556682;border-radius:3px;position:fixed;right:3px;z-index:999;overflow:hidden;min-width:500px;min-height:250px;transition:300ms}#fa_chat{border:none;width:100%;height:100%}#fa_chat_button{color:#FFF;line-height:30px;margin-left:10px;padding:0 5px;cursor:pointer}

#fa_chat_button.fa_chat_active{color:#333;background:#FFF}#textarea_content{width:900px!important}blockquote cite{background-color:transparent;background-image:url();border:0}.post-entry blockquote{background:#f5f5f5;border:1px solid #DDD;color:#333;position:relative;margin:0 0 10px 10px !important;padding:10px 15px!important}

.post-entry cite{font-size:14px;font-weight:300px;text-decoration:underline;background:url(http://i83.servimg.com/u/f83/16/58/89/73/commen10.gif) no-repeat left 2px transparent;margin:0!important;padding:0 0 3px 20px !important}

.post-entry blockquote:before{content:'';display:inline-block;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #CCC;position:absolute;top:10px;left:-10px;height:0}

.post-entry blockquote:after{content:'';display:inline-block;border-top:9px solid transparent;border-bottom:9px solid transparent;border-right:9px solid #D9F0FF;position:absolute;top:11px;left:-9px;height:0}



#fa_rss{ display:none !important }
#fa_mail{ display:none !important }
#fa_twitter{ display: !important }

a[href*="/login"]{width:100px;text-align:center}a[href*="/register"]{width:100px;text-align:center}#fa_welcome:hover,#fa_right #fa_notifications:hover,#fa_right a.rightHeaderLink:hover,#fa_right.welcome #fa_menu #fa_welcome,#fa_toolbar > #fa_right.notification > #fa_notifications{background-color:#39C!important;color:#FFF!important}#fa_right #fa_hide{background-color:transparent!important;margin-top:0!important;padding:0!important}

#fa_share a{background:url(http://i18.servimg.com/u/f18/18/45/41/65/fa_sha10.png) no-repeat 0 0 #FAFAFA!important;border-radius:25px;height:25px!important;margin:-2px 3px 0!important;width:25px!important}#fa_share a:hover{background-color:#39C!important}a#fa_fb{background-position:-50px 0!important}a#fa_fb:hover{background-position:-75px 0!important}a#fa_twitter{background-position:0 0!important}a#fa_twitter:hover{background-position:-25px 0!important}

a#fa_gp{background-position:-98px 0!important}a#fa_gp:hover{background-position:-123px 0!important}a#fa_mail{background-position:-150px 0!important}a#fa_mail:hover{background-position:-175px 0!important}a#fa_rss{background-position:-199px 0!important}a#fa_rss:hover{background-position:-224px 0!important}

#fa_search{position:relative}#fa_search #fa_magnifier{background:url(http://i18.servimg.com/u/f18/18/45/41/65/fa_sea10.png) no-repeat 0 0 #EEE!important;border:1px solid #DDD;border-left:none;border-radius:0 3px 3px 0;height:22px!important;right:0;top:3px;width:22px!important}

#fa_search #fa_magnifier:hover{background-color:#39C!important;background-position:-22px 0!important;border-color:#39C}#fa_search #fa_textarea{background:#FFF!important;border:1px solid #DDD!important;border-radius:3px 0 0 3px!important;cursor:text;font-size:12px!important;height:16px!important;margin-right:23px!important;padding:3px!important;text-indent:0!important;width:150px!important}

#fa_search #fa_textarea:focus{border-color:#39C!important;outline:none}#fa_menulist,#fa_toolbar #fa_right #notif_list{background:#FFF!important;border:1px solid #DDD!important;border-radius:3px;box-shadow:0 6px 12px rgba(0,0,0,0.175);color:#FFF!important;margin-top:18px!important}#fa_menulist:before,#fa_toolbar #fa_right #notif_list:before{content:url('http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png');position:absolute;right:10%;top:-10px}

#fa_toolbar #fa_right #notif_list li.see_all{background:#39C!important}#fa_toolbar #live_notif .fa_notification{background:#FFF!important;border:1px solid #DDD;border-bottom-width:2px;border-radius:3px!important;box-shadow:0 3px 12px rgba(0,0,0,0.175);margin-top:5px;opacity:1!important}#fa_toolbar #live_notif .fa_notification .content{background-image:url(http://i18.servimg.com/u/f18/16/89/96/68/notifi10.png)!important;color:#333!important}

#fa_toolbar #live_notif .fa_notification a{color:#39C!important}#fa_toolbar #live_notif .fa_notification a:hover{color:#333!important}#notif_unread{color:#F93;font-weight:700}#fa_notifications:hover #notif_unread,#fa_toolbar > #fa_right.notification > #fa_notifications #notif_unread{color:#FFF}#fa_hide,#fa_show{background:url(http://i18.servimg.com/u/f18/18/45/41/65/fa_arr10.png) no-repeat 0 0 transparent!important}

#fa_hide:hover{background-position:-30px 0!important}#fa_show{background-position:-60px 0!important}#fa_show:hover{background-position:-90px 0!important}.fa_avatar img{width:29px;height:29px;margin-right:20px;margin-bottom:3px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}#fa_icon{background-image:url(http://illiweb.com/fa/i/toolbar/pa0.png)!important}

#fa_right #fa_menu #fa_welcome,#fa_right.notification #fa_menu #fa_welcome{text-decoration:none}#fa_welcome,#fa_right #fa_notifications{line-height:30px;padding:0 5px;color:#FFF;text-decoration:none}




a.fa_fancybox img{cursor:pointer;cursor:-webkit-zoom-in;cursor:-moz-zoom-in}.fancybox-tmp iframe,.fancybox-tmp object{vertical-align:top;padding:0;margin:0}

.fancybox-wrap{position:absolute;top:0;left:0;z-index:920}.fancybox-skin{position:relative;padding:0;margin:0;background:#f9f9f9;color:#444;text-shadow:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}

.fancybox-opened{z-index:930}.fancybox-opened .fancybox-skin{-webkit-box-shadow:0 10px 25px rgba(0,0,0,0.5);-moz-box-shadow:0 10px 25px rgba(0,0,0,0.5);box-shadow:0 10px 25px rgba(0,0,0,0.5)}

.fancybox-outer,.fancybox-inner{padding:0;margin:0;position:relative;outline:none}.fancybox-inner{overflow:hidden}.fancybox-type-iframe .fancybox-inner{-webkit-overflow-scrolling:touch}.fancybox-error{color:#444;font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;padding:10px}.fancybox-image,.fancybox-iframe{display:block;width:100%;height:100%;border:0;padding:0;margin:0;vertical-align:top}

.fancybox-image{max-width:100%;max-height:100%}#fancybox-loading,.fancybox-close,.fancybox-prev span,.fancybox-next span{background-image:url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.png')}

#fancybox-loading{position:fixed;top:50%;left:50%;margin-top:-22px;margin-left:-22px;background-position:0 -108px;opacity:1.0;cursor:pointer;z-index:920}#fancybox-loading div{width:44px;height:44px;background:url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.gif') center center no-repeat}.fancybox-close{position:absolute;bottom:-18px;right:-18px;width:36px;height:36px;cursor:pointer;z-index:940}

.fancybox-nav{position:absolute;top:0;width:40%;height:100%;cursor:pointer;background:transparent url('http://i45.servimg.com/u/f45/17/45/19/77/blank10.gif'); -webkit-tap-highlight-color:rgba(0,0,0,0);z-index:940}.fancybox-prev{left:0}.fancybox-next{right:0}.fancybox-nav span{position:absolute;top:50%;width:36px;height:34px;margin-top:-18px;cursor:pointer;z-index:940;visibility:hidden}

.fancybox-prev span{left:20px;background-position:0 -36px}.fancybox-next span{right:20px;background-position:0 -72px}.fancybox-nav:hover span{visibility:visible}

.fancybox-tmp{position:absolute;top:-9999px;left:-9999px;padding:0;overflow:visible;visibility:hidden}#fancybox-overlay{position:absolute;top:0;left:0;overflow:hidden;display:none;z-index:910;background:#000}

#fancybox-overlay.overlay-fixed{position:fixed;bottom:0;right:0}.fancybox-title{visibility:hidden;font:normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;position:relative;text-shadow:none;z-index:950}.fancybox-opened .fancybox-title{visibility:visible}

.fancybox-title-float-wrap{position:absolute;bottom:0;right:50%;margin-bottom:-35px;z-index:930;text-align:center}.fancybox-title-float-wrap .child{display:inline-block;margin-right:-100%;padding:2px 20px;background:transparent; background:rgba(0,0,0,0.8);-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;text-shadow:0 1px 2px #222;color:#D9F0FF;font-weight:bold;line-height:24px;white-space:nowrap}

.fancybox-title-outside-wrap{position:relative;margin-top:10px;color:#D9F0FF}
.fancybox-title-inside-wrap{margin-top:10px}.fancybox-title-over-wrap{position:absolute;bottom:0;left:0;color:#D9F0FF;padding:10px;background:#000;background:rgba(0,0,0,.8)}

.updownbutton {
  position:fixed;
  bottom:200px;
  right:10px; /* replace right with left to display the buttons on the left */
  z-index:100;
}


.updownbutton img {
  filter:alpha(opacity=50);
        -khtml-opacity:0.1;
          -moz-opacity:0.1;
               opacity:0.1;
}
.updownbutton img:hover {
  filter:alpha(opacity=100);
           -khtml-opacity:1;
             -moz-opacity:1;
                  opacity:1;
}




#page-body{margin:4px 0;border: 1px solid #ccc}

.pun .postmain{border: 1px solid #CCC}



.forumtitle:hover, h2.topic-title a:hover {
  color: #FF0099!important;
}


.w2bslikebox {
  background-attachment:scroll !important;
  background-color:transparent !important;
  background-image:url(http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.pn) !important;
  background-position:0 50% !important;
  background-repeat:no-repeat no-repeat !important;
  display:block;
  float:right;
  height:260px;
  padding:0 4px 0 46px;
  position:fixed;
  right:-250px;
  top:20%;
  width:245px;
  z-index: 999;
}






.pun {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-shadow: rgba(0,0,0,0.1) 0px 1px 6px;
    margin-right: 13.5%;
    padding: 0px;
    color: #424040;
}



* {
   margin: 0px;
   padding: 0px;
   text-decoration: none!important;  
}

#pun-visit, #pun-announcement {
  display: none;
}









/* Trượt tiêu đề mỗi box */
a.forumtitle {
-moz-transition-duration: 0.1s;
-webkit-transition-duration: 0.1s;
-o-transition-duration: 0.1s;
}

a.forumtitle:hover {
margin-left: 5px;
}




div.subforums{margin:5px 10px 5px 0;padding:7px;font-size:0;-moz-column-count:2;-webkit-column-count:2;column-count:2;-moz-column-gap:10px;-webkit-column-gap:10px;column-gap:10px}
div.subforums a.gensmall{font-size:14px;display:block;float:left;clear:right;padding-left:23px;background:url(http://i86.servimg.com/u/f86/19/09/66/76/31010.png) no-repeat left center transparent;height:20px;line-height:20px;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:90%}

.post-entry img {
  max-width: 800px;
  transition: all 0.0s ease;
}
.post-entry img:hover {
  max-width: 800;
  transition: all 0.0s ease;
}





.popupWrapper {
    background-color: rgba(70, 70, 70, 0.6);
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.7);
    left: auto;
    margin: 0 auto !important;
    max-height: 700px;
    max-width: 900px;
    overflow: auto;
    padding: 4px;
    position: fixed !important;
    top: 200px;
}

















#
fieldset, img {
  border: 0;
}
.hide {
  display: none;
}
user agent stylesheetlabel {
  cursor: default;
}
.attach {
  float: right;
}
.login {
  float: right;
  margin-right: 13%;
  margin-top: 2%;
}
.login a {
  color: #6D6C6C;
  text-decoration: none;
  padding-right: 5px;
  font-size: 14px;
}
.register {
  vertical-align: top;
}
.signin {
  vertical-align: top;
}
.box-hover {
  display: inline-block;
  padding-right: 10px;
}
.main .main-head {
  background-image: none;
  background-color: #D9F0FF;
  border-bottom: 1px solid #ccc;
}
.main .main-head .page-title, .pun h2 {
  font-size: 14px;
  font-family: "arial", san-serif;
  color: #FF3366
  font-weight: 300;
}
.pun table.table td {
  background-color: #D9F0FF;
  border-color: #d3d3d3;
  border-bottom: 1px solid #d3d3d3;
}
.pun .main table td.tc2 {
  background-color: #d3d3d3;
}
.pun .main table td.tc3 {
  background-color: #D9F0FF;
  border-right:none;
  border-bottom: 1px solid #d3d3d3;
  text-align: right;
  padding-right: 10px;
  color: #5a5a5a;
  font: 14px;
  font-family: "arial", san-serif;
}
.pun table td.tcl {
  border-bottom: 1px solid #d3d3d3;
}
.pun .main-content {
  border: none;
}
.forumtitle, h2.topic-title a {
  color: #000000!important;
  text-decoration: none;
  font-weight: bold;
  font-family: "tahoma", san-serif;
  font-size: 14px;
}

.forum-info {
  padding-left: 5px;
  margin: 5px 0px 5px 0px;
}
.forum-description {
  font-size: 14px;
}
.sub-category {
  margin-top: 15px;
  color: white;
}
.sub-category a {
  font-size: 14px;
  text-decoration: none;
  font-family: "arial", san-serif;
}
.sub-category a:hover {
  color: #00CCFF !important;
}
.forum-image {
  margin-top: 15px;
}
tr.bg-hov:hover td {
  background-color:  !important;
}
#statistics {
  margin-top: -40px;
  margin-bottom: -10px;
  text-align: right !important;
  display: table;
  background: ;
  font-size: 14px;
}
#statistics a {
  color: #222 !important;
}
.statHide{
  display: !important;
}
.statsPers li span a {
  text-decoration: none !important;
}
.statsPers li > span {
  display: inline-block;
  background: #000000;
  color: #222;
  padding: 2px 6px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  margin-right: 3px;
  box-shadow: inset rgba(0,0,0,0.3) 0px 1px 2px, rgba(255,255,255,1) 0px 1px 0px;
  -webkit-box-shadow: inset rgba(0,0,0,0.3) 0px 1px 2px, rgba(255,255,255,1) 0px 1px 0px;
  -moz-box-shadow: inset rgba(0,0,0,0.3) 0px 1px 2px, rgba(255,255,255,1) 0px 1px 0px;
}
.statsPers li {
  float: left;
  color:#666;
  margin: 2px 10px;
}
.statsPers {
  list-style: none;
  display: block;
  margin: 0px auto;
  width: 100%;
}
#primary_nav {
  position:absolute;
  margin-left: -85px;
  width:85px;
  overflow:hidden;
  margin-top: 5px;
}

#primary_nav .active:after{
  background-position:0 -3px;
  top:auto;
  bottom:-2px;
}
#primary_nav a.ipbmenu img{
  margin-right:-6px;
}

.last-post {
  font-family: "arial"
  font-size: 14px;
  margin-top: 4px;
  color: #000000;
}
.last-post a {
  text-decoration: none;
}
.last-post a span {
  color: #90D3FF;!important;
}
.last-post a span:hover {
  color: #90D3FF !important;
}
div.main.paged {
  margin-bottom: 10px;
}
.pun .paged-head {
  background-color: !important;
  border: 0px !important;
}
.pun table .tcr {
  font-size: 14px;
  font-family: "arial"
  font-weight: 400;
  padding-left: 5px !important;
}
.tcr span a, .tcr span a span {
  text-decoration: ;
  font-weight: 400 !important;
}
.tcr span a:hover {
  color: #000 !important;
}
.lastpost-avatar {
  box-shadow: inset rgba(0,0,0,0.2) 0px 1px 5px, inset rgba(0,0,0,0.08) 0px 0px 0px 1px;
  -webkit-box-shadow: inset rgba(0,0,0,0.2) 0px 1px 5px, inset rgba(0,0,0,0.08) 0px 0px 0px 1px;
  -moz-box-shadow: inset rgba(0,0,0,0.2) 0px 1px 5px, inset rgba(0,0,0,0.08) 0px 0px 0px 1px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  margin-right: 10px;
}
.lastpost-avatar img {
  width: 55px;
  height: 55px;
  opacity: 1.0;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}
.guestMessage {
  background:#f9d79b;
  border:1px solid #d4a24a;
  color:#b85f1d;
  font-size:14px;
  line-height:170%;
  margin-bottom:10px;
  padding:10px;
  -webkit-box-shadow:inset #d49934 0px 1px 4px;
  -moz-box-shadow:inset #d49934 0px 1px 4px;
  box-shadow:inset #d49934 0px 1px 4px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  padding: 1em;
  font-family: "arial", san-serif;
}
.guestMessage a {
  color:#b85f1d;
  text-decoration:none;
  border-bottom:1px solid #d48041;
}

.main-box {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  background: #fafafa;
  font-size: 14px;
  font-weight: bold;
  padding: 8px;
  border-left: none;
  border-right: none;
}
.main-box ul {
  float: right;
}
.main-box ul a {
  margin: 0 5px;
  font-size: 14px;
  color: #727272 !important;
  font-family: "arial", san-serif;
  text-decoration: none;
  font-weight: 400;
}
#onlinelist {
  background: white;
  border: 0px;
  border-top:none;
}
#onlinechat {
  background: white;
  border-top: 1px solid #EEE;
  border-top:none;
}
#statistics-change {
  float: left;
  color: #727272 !important;
  font-weight: 400;
  font-family: "arial", san-serif;
  font-size: 0;
}
.users-online {
  color: #727272 !important;
  font-weight: 400;
  font-family: "arial", san-serif;
  width: 330px;
}




#user_navigation a:hover {
  background: rgba(255,255,255,0.8);
}
#user_navigation .ipsList_inline li {
  float: left;
  margin: 0;
  padding: 0;
}
.ipsList_inline>li {
  display: inline-block;
}
#inbox_link img{
  background-image:url('http://i.imgur.com/6REF008.png');
}
#inbox_link img{
  width:20px;
  height:20px;
  background-repeat:no-repeat;
  background-position:0 0;
  margin-top:-2px;
}
.topic-author {
  border-bottom: 1px solid #eaeaea;
  background: #f6f6f6;
  text-shadow: #000 0px 0px 0px;
  float: none;
  width: auto;
  text-align: left;
  position: relative;
  padding: 10px;
}
.author-img {
  display: inline-block;
}
.author-img img {
  width: 94px;
  height: 94px;
  opacity: 9.0;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  box-shadow: inset rgba(0,0,0,0.2) 0px 1px 5px, inset rgba(0,0,0,0.08) 0px 0px 0px 1px;
  -webkit-box-shadow: inset rgba(0,0,0,0.2) 0px 1px 5px, inset rgba(0,0,0,0.08) 0px 0px 0px 1px;
  -moz-box-shadow: inset rgba(0,0,0,0.2) 0px 1px 5px, inset rgba(0,0,0,0.08) 0px 0px 0px 1px;
}
.author-img img:hover {
  opacity: 1;
}
.author-info {
  display: inline-block;
  position: absolute;
  margin-top: 0px;
  font-size: 14px;
  font-family: "arial", sans-serif ;
  margin-left: 10px;
}
.topic-author h4 {
  padding-bottom: 7px;
}
.topic-author h4.username a {
  font-size: 15px;
  font-weight: bold;
  font-family: "arial", sans-serif ;
  text-decoration: none;
}
.topic-author h4.username a span {
}
.author-stats {
  display: inline-block;
  font-family: "arial", sans-serif ;
  font-size: 14px;
  color: #000000;
  margin-left: 65%;
  position: absolute;
}
.pun .postmain {
  margin: 0 !important;
}
.postfoot {
  margin-left: 700px !important;
  border-top: 1px solid #d5d5d5;
  border-bottom: 1px solid #eaeaea;
  margin-top: 30px;
}
.postfoot img {
  opacity: 2.1;
}
.postfoot img:hover {
  opacity: 2.1;
  
}
div#pun-qpost.main {
  margin: 0 !important;
  color: #000;
  font-family: "arial", sans-serif ;
}
.pun .entry-content {
  
  font-family: "arial", sans-serif ;
  font-size: 13px;
}
.post-stats {
  color: #909090 !important;
  font-family: "arial", sans-serif ;
  font-size: 15px;
  margin-left: 655px;
  margin-top: 10px;
  position: absolute;
}
.editted-message {
  display: ;
}

a[href="javascript:Pagination();"] {
  display: ;
}
.pun .paging {
  font-size: 12px;
}
.pun .paging a {
  background: #000000;
}
.pun .paging a:hover {
  background: #9AD7FF;
  color: #fff;
}
.page-number {
  color: #fff;
  font-weight: 300;
  font-size: 14px;
  margin-right: 10px;
}
.page-number strong {
  font-weight: 100 !important;
}
.titlebox {
  background:#f9f9f9;
  font-size: 12px;
  border:1px solid #e6e6e6;
  text-shadow:#1c1c1c 0px 0px 0px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  -webkit-box-shadow:inset rgba(0,0,0,0.05) 0px 1px 4px;
  -moz-box-shadow:inset rgba(0,0,0,0.05) 0px 1px 4px;
  box-shadow:inset rgba(0,0,0,0.05) 0px 1px 4px;
  padding:10px;
  overflow:none;
}
.titlebox dd {
  display:block;
}
.titlebox dava {
  float:left;
}
.titlebox dava a img {
  -moz-box-shadow:0 2px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.1);
  background:#000;
  border:1px solid #D5D5D5;
  box-shadow:0 2px 2px rgba(0,0,0,0.1);
  float:left;
  height:50px!important;
  padding:1px;
  width:50px!important
}
.titlebox dava a img:hover {
  -moz-box-shadow:0 2px 2px rgba(0,0,0,0.2);
  -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.2);
  border-color:#A1A1A1;
  box-shadow:0 2px 2px rgba(0,0,0,0.2)
}
.ipsBox_withphoto {
  margin-left: 65px;
}
.ipsType_pagetitle {
  font: 300 26px/1.4 Helvetica,Arial,sans-serif;
}
.desc.lighter, .desc.lighter.blend_links a {
  color: #000000 !important;
}
.padding-box {
  padding: 0px 10px 0px 10px;
}
.ipsBadge {
  display: inline;
}
.pun .main-head .h2, a.exthelp {
  color: #747474 !important;
}
a.exthelp {
  background-image: none !important;
}
.main .main-foot {
  background-color: #d9f0ff!important;
}
.subtitle {
  display: none;
}
.main .frm-info {
  background: transparent;
}
#pun-foot {
  display: none;
}
.frm-buttons {
  border-top: none !important;
}
#content2 {
  margin-left: 20%;
  width: 900px !important;
}
#footer_utilities {
  padding: 10px;
  font-size: 14px;
  position: relative;
}
.clear {
  clear: both;
}
.footerleft {
  float: left;
  margin-top: -20px;
}

img, .input_check, .input_radio {
  vertical-align: middle;
}
#rss_menu {
  background-color: #FEF3D7;
  border: 1px solid #ED7710;
}
#rss_menu li {
  border-bottom: 1px solid #FCE19B;
}
#rss_menu a {
  color: #ED7710;
  padding: 5px 8px;
}
.ipbmenu_content a {
  text-decoration: none;
  text-align: left;
  display: block;
  padding: 6px 10px;
}
#footer_utilities .ipsList_inline > li > a {
  margin-right: 0px;
  padding: 4px 10px;
  color: #225985;
}
#footer_utilities .ipsList_inline > li > a:hover {
  color: #328687;
}
#copyright {
  color: #747474;
  text-align: right;
  text-shadow: 0px 1px 0px white;
}
#copyright a {
  color: #848484;
  text-decoration: none;
}
#main-content .pun-crumbs {
  display: none;
}
.pun .paged-foot, .pun .paged-head {
  background-color: #D9F0FF!important;
}
.paging input {
  color: #747474 !important;
  font-family: "arial", sans-serif ;
}
.pun .main-foot .options a, .pun .main-foot .options a:link {
  color: #000000;
}
.pun-privmsg a {
  text-decoration: none !important;
}
a[href="/privmsg?folder=savebox"] {
  display: none;
}
.pun .paged-foot {
  border: none !important;
}

.ipsBadge {
  border-radius: 4px 4px 4px 4px;
  color: #000;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  height: 15px;
  line-height: 15px;
  padding: 0 5px;
  text-transform: uppercase;
  vertical-align: middle;}


.pun .paging b, .pagination b, .pagination span strong {
  border-image: none;
  border-radius: 3px;
  color: #FF0099!important;
  font-size: 15px;
  font-weight: 400!important;
  margin-left: -1px!important;
  padding: 5px 5px!important;
  visibility: visible;
  background: #9AD7FF;
  color: #FF0099;
  font-weight: ;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  padding: 1px 5px;
}
.paging a , .paging input, .pagination input {
  border-image: none;
  border-radius: 3px;
  font-size: 14px!important;
  margin: 2px;
  padding: 5px 5px!important;
  text-shadow: 0 0px 0 #FF0099;
  visibility: visible;
  color: #FF0099!important;
  display: inline-block;
  display: inline-block;
  padding: 1px 4px;
  text-decoration: none;
}

.avatartv1 img {
height: 18px;
width: 18px;
}

/* tabs-------------------------------------------------------------*/
.tabs { margin: 0; padding: 0;}
.tabs {
padding-bottom: 26px;
margin-bottom: 42px;
background: #ddd;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.tabs li { list-style: none;float: left; line-height: 30px; border-right: 1px solid #DDD; height: 30px; font-size: 14px;}
.tabs li.current {
background: #ddd;
height: 17px;
font-weight: ;
}
.mainbox { background: #F7f7f7; border: 1px solid #9DB3C5; margin-bottom: 6px; padding: 1px;}
.mainbox table { width: 100%; }






/* Fancybox */

a.fa_fancybox img{
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
}
/* general */
.fancybox-tmp iframe, .fancybox-tmp object {
  vertical-align: top;
  padding: 0;
  margin: 0;
}








  Bài viết hay nhất10

markai30 wrote:1. Trùng Id page-body do đó bạn chỉnh css thì cả 2 id đều thay đổi. Một là đổi lại tên id trong template. 2 là dùng css để phân biệt. Nhưng tốt nhất là đổi lại đi vì id không nên để trùng, class có thể trùng nhưng id thì không.

Bạn có thể phân biệt id page-body bao quanh forum bằng css như sau.

Code:
#pun-head + #page-body {
    padding: 5px;
}
\

Thanks lỗi đã được Fix xong .
You cannot reply to topics in this forum