admin hướng dẫn làm như skin 2mit.org hiện tại với

sharing. · 19 Tháng năm 2012

Admin ơi hướng dẫn tớ làm cái đường viền như thế này với cậu ý như 2mit.org hiện tại nek !

Thanks trc

ChIpKut3 · 19 Tháng năm 2012

Trước bạn up file img này : http://2mit.org/forum/images/bg.png
lên host bất kỳ chổ nào miễn là bạn nhớ đường dẫn đến nó
vd: /images/bg.png

tiếp đó bạn vào admincp -> Styles & Templates -> Style Manager -> StyleVars -> doc_Background
rồi làm tương tự như hình sau :

Background Color bạn tự chọn màu nhé

chúc bạn làm thành công !

hongoctrien · 19 Tháng năm 2012

ChIpKut3 said: ↑

Trước bạn up file img này : http://2mit.org/forum/images/bg.png
lên host bất kỳ chổ nào miễn là bạn nhớ đường dẫn đến nó
vd: /images/bg.png

tiếp đó bạn vào admincp -> Styles & Templates -> Style Manager -> StyleVars -> doc_Background
rồi làm tương tự như hình sau :

Background Color bạn tự chọn màu nhé

chúc bạn làm thành công !

Ý bạn đó là cái viền màu trắng ý
Cái này có 2 cách làm nhé, 1 là dùng hình ảnh và 2 là css. Ở đây mình hướng dẫn dùng hình ảnh cho nó nhanh.
Bạn xem file ảnh này http://2mit.org/forum/images/backgroundok.png
File ảnh này thực chất là 1 file ảnh có chiều rộng hơn độ của thân forum 1 tý (VD thân trang của 2mit là 960px thì mình tạo file ảnh có kích thước là 970px, cho nó nhô ra 2 bên ý mà), chiều cao cỡ 1-2px (cho nó lặp theo chiều dọc xuống), viền trái và phải màu trắng, ở giữa giãm opacity xuống để lấy độ mờ. Bạn có thể lấy file ảnh trên rồi chỉnh sửa lại độ rộng.

Tiếp theo, admincp -> Styles & Templates -> Style Manager -> StyleVars -> doc_Background
Chôm ảnh Chip luôn nhé

Mã màu nền
Background Color: rgb(55, 175, 255)

Cố định ảnh ở giữa, lặp từ trên xuống
Background Image: url(images/backgroundok.png) repeat-y center

ChIpKut3 · 19 Tháng năm 2012

hj mình nhầm cái ảnh
đáng lẻ ra phải up ảnh này lên nek
http://hethong04.biz/forum/images/bg.png
ko phải link này
http://2mit.org/forum/images/bg.png
tại chip làm bên forum lớp nên quen cái đừng đẫn như thế !

sunset_glow · 19 Tháng năm 2012

Chắc là khóa 5 rồi, chưa được học HTML nên chưa biết.
Bạn cứ bắt đầu từ HTML và CSS đi, khi bạn biết rồi thì thấy câu hỏi của bạn cực kỳ dể
Chúc thành công !

sharing. · 19 Tháng năm 2012

Rất cảm ơn các cậu
ak cho mình hỏi làm sao để có cái khung ( lượt xem , thích face, zingme , google ) vậy
hướng dẫn mình luôn được không

sunset_glow · 19 Tháng năm 2012

Bạn vào xem bài viết này nhé
http://2mit.org/forum/threads/42327-Nho-Admin-huong-dan-tao-cai-like-facebook-ben-slidebar

ChIpKut3 · 19 Tháng năm 2012

hongoctrien said: ↑

Thêm vào cuối showthread.css

Mã:

/*cong cu ben trai */
.side-sharebar {
    [COLOR=#0000ff][B]top: 147px;
    left: 7.8%;[/B][/COLOR]
    background-color: #EEE;
    border: 1px solid #CCC;
    border-right: none;
    position: fixed;
    -webkit-box-shadow: -6px 0 6px -6px rgba(0,0,0,0.25) inset,0 1px 0 #fff inset;
    -moz-box-shadow: -6px 0 6px -6px rgba(0,0,0,0.25) inset,0 1px 0 #fff inset;
    box-shadow: -6px 0 6px -6px rgba(0,0,0,0.25) inset,0 1px 0 #fff inset;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
    padding:0px;
}


.side-sharebar .item {
    border-bottom: 1px solid #CCC;
    -webkit-box-shadow: 0 1px 0 #fff;
    -moz-box-shadow: 0 1px 0 #fff;
    box-shadow: 0 1px 0 #fff;
    padding: 10px 2px 10px 0;
    text-align: center;
    width: 76px;
}


 .side-sharebar .item:last-child{
    border:none;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
    font-size:.8em;
    line-height:1.133em;
}




.side-sharebar .recentCount{
    display:block;
    text-align:center;
    width:58px;
    height:40px;
    padding:2px 0 0 0!important;
    background-color:#b7b7b8;
    background:none,-khtml-gradient(linear,left top,left bottom,from(#d7d8d9),to(#aaaaab));
    background:none,-moz-linear-gradient(top,#d7d8d9 0,#aaaaab 100%);
    background:none,-webkit-gradient(linear,left top,left bottom,color-stop(0,#d7d8d9),color-stop(100%,#aaaaab));
    background:none,-webkit-linear-gradient(top,#d7d8d9 0,#aaaaab 100%);
    background:none,-o-linear-gradient(top,#d7d8d9 0,#aaaaab 100%);
    background:none,-ms-linear-gradient(top,#d7d8d9 0,#aaaaab 100%);
    background:none,linear-gradient(top,#d7d8d9 0,#aaaaab 100%);
    color:#39434c;
    border:1px solid #A7A7A8;
    -webkit-box-shadow:0 1px 0 #8b8b90,0 1px 0 0 rgba(255,255,255,0.4) inset;
    -moz-box-shadow:0 1px 0 #8b8b90,0 1px 0 0 rgba(255,255,255,0.4) inset;
    box-shadow:0 1px 0 #8b8b90,0 1px 0 0 rgba(255,255,255,0.4) inset;
    -moz-text-shadow:0 1px 0 rgba(255,255,255,0.65);
    -webkit-text-shadow:0 1px 0 rgba(255,255,255,0.65);
    -khtml-text-shadow:0 1px 0 rgba(255,255,255,0.65);
    text-shadow:0 1px 0 rgba(255,255,255,0.65);
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    font-size:10px;
    font-weight:bold;
    -webkit-box-shadow:0 2px 0 #8b8b90;
    -moz-box-shadow:0 2px 0 #8b8b90;
    box-shadow:0 2px 0 #8b8b90;
    position:relative;
    margin:0 auto;
    text-decoration: none;
}

.side-sharebar .recentCount .countNumber{
    font-size:1.8em;
}

.side-sharebar .recentCount:after{
    width:0;
    height:0;
    border-top:5px solid #aaaaab;
    border-bottom:5px solid transparent;
    border-right:5px solid #aaaaab;
    display:block;
    position:relative;
    bottom:-7px;
    position:absolute;
    right:10px;
}

.side-sharebar .recentCount:before{
    width:0;
    height:0;
    border-top:5px solid #8b8b90;
    border-bottom:5px solid transparent;
    border-right:5px solid #8b8b90;
    display:block;
    position:relative;
    bottom:-8px;
    position:absolute;
    right:10px;
}


#shareBar p.recentCount{
    font-weight:bold;
}

.rqd
{
    text-align: center;
    display: block;
}
.rqd_count {
    font-family: Arial, Helvetica, sans-serif;
    font-size:12pt;
    background-image: url('../vtlai_img/rqd_count_bg.gif');
    background-repeat: no-repeat;
    background-position: center top;
    margin: 0px;
    padding: 0px;
    padding-top: 7px;
    height: 35px;
    border: 0px;
    vertical-align:middle;
}
.rqd_btn
{
    font-family: Arial, Helvetica, sans-serif;
    font-size:11px;
    display: block;
    text-decoration: none;
    padding: 3px;
    padding-left:12px;
    text-align: center;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    background-color: #eceef5;
    border: 1px solid #cad4e7;
    background-image: url('../vtlai_img/rqd_btn_bg.png');
    background-repeat: no-repeat;
    background-position: left center;
    color: #003;
    width: 50px;
    margin-left: auto;
    margin-right: auto;
}
.rqd_btn:visited,.rqd_btn:active
{
    color:#003;
}
.rqd_btn:hover
{
    border-color: #9dacce;
    color: blue;
}

Thêm vào SHOWTHREAD, trên </body>

Mã:

<!--cong cu ben trai-->

   <script type="text/javascript"
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $(window).bind("resize", function() {
            $('#noidung').toggle($(this).width() > 1300);  
        }).trigger("resize");
    });
    </script>

<menu class="shareBar side-sharebar" id="noidung">


<div class="item">


<p class="recentCount"><span class="countNumber">{vb:raw thread.views}</span><br>Lượt xem</p>


</div>


<div class="item">


<div class="item">


<iframe src="http://www.facebook.com/plugins/like.php?href=[COLOR=#0000FF][B]http://2mit.org/forum/[/B][/COLOR]{vb:link thread, {vb:raw thread}}&send=false&layout=box_count& amp;width=52&show_faces=false&action=like& amp;colorscheme=light&font=arial&height=62 " scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:52px; height:62px;" allowTransparency="true"></iframe>


</div>



</div>
<div class="item">
<a name="fb_share" type="button_count" share_url="[B][COLOR=#0000FF]http://2mit.org/forum/[/COLOR][/B]{vb:link thread}" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>  

</div>
<div class="item">
<a href="javascript:void(window.open('http://link.apps.zing.vn/share?u=[COLOR=#0000FF][B]http://2mit.org/forum/[/B][/COLOR]{vb:link thread}','','top=20, left=250,scrollbars=no,width=600,height=500')) "><img src="http://img.zing.vn/ani/skin/ani-112011/images/icon_zingme.png"></a>
</div>
<div class="item">


<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone>


<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

</div>
</menu>
<!--cong cu ben trai-->

Tự động ẩn đi đối với những máy có độ phân giải màn hình < 1300 (tức là dùng laptop mới thấy) o:-)

Bạn nào muốn thay đổi độ phân giải cần hiển thị thì thay thông số ở dòng $('#noidung').toggle($(this).width() > 1300);

Bạn Nên Chú Ý Những Dòng Mà Mình đả In Đậm Màu Xanh Nhé !

Đăng nhập hoặc Đăng ký

DIỄN ĐÀN 2MIT.ORG SẼ CHUYỂN SANG CHẾ ĐỘ READ-ONLY

admin hướng dẫn làm như skin 2mit.org hiện tại với

sharing.

ChIpKut3

hongoctrien

ChIpKut3

sunset_glow

sharing.

sunset_glow

ChIpKut3

Chia sẻ trang này

Tìm kiếm hữu ích

admin hướng dẫn làm như skin 2mit.org hiện tại với

Chia sẻ trang này