Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.

  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Thêm thanh công cụ Charm Bar trong Windows 8 vào Xenforo

Chủ đề thuộc danh mục 'Hướng dẫn - Thủ thuật Xenforo' được đăng bởi Phạm Hữu Dư, 23/4/14.

Lượt xem: 7,902

  1. Phạm Hữu Dư phamhuudu.com

    Chắc hẳn nhiều bạn đã sử dụng Windows 8 đều thấy khi rê chuột qua bên phải màn hình thì sẽ xuất hiện thanh Charm Bar. Ta có thể áp dụng thanh Charm Bar này vào website của mình. Và hôm nay mình sẽ hướng dẫn các bác áp dụng nó vào Xenforo.

    [​IMG]
    Thanh charm bar trong Windows 8​

    Khi áp dụng vào Xenforo, ta đưa chuột qua góc phải của forum thì thanh này sẽ từ từ trượt ra, và hiện các thanh công cụ, khi bỏ chuột ra chỗ khác thì nó lại từ từ ẩn vào giống hệt y chang Windows 8 luôn :D

    Tự động co dãn với mọi kích thước màn hình, cố định vị trí khi lăn chuột.

    [​IMG]
    Demo sau khi áp dụng vào forum Xenforo​

    Cách làm không hề khó mà chỉ là CSS đơn giản thôi. Nhưng trước hết các bạn cần phải tải cái source này về và up lên ngang hàng với index nhé!

    Tải về tại đây​
    [​IMG]

    Sau khi download về, giải nén và up nó lên root rồi thì ta bắt đầu vào Admincp.

    Mở template EXTRA.css thêm đoạn này vào:
    Code:
    .menu-portal{
position:fixed;
z-index:96969696;
background:transparent;
width:20px;
height:100%;
float:right;
right:0px;
top:0px;
transition: width 1s;
-moz-transition: width 1s; /* Firefox 4 */
-webkit-transition: width 1s; /* Safari and Chrome */
-o-transition: width 1s; /* Opera */
}
.menu-portal:hover{
width:100px;
height:100%;
background:#111111;
}
.menu-portal .khoi1
{height:25%;
background: url(metromenu/images/menu-portal/search.png) no-repeat;
margin-top:auto;
margin-bottom:auto;
}
.menu-portal .khoi2
{height:25%;
background:url(metromenu/images/menu-portal/share.png) no-repeat;
margin-top:auto;
margin-bottom:auto;
}
.menu-portal .khoi3
{height:25%;
background: url(metromenu/images/menu-portal/forum.png) no-repeat;
margin-top:auto;
margin-bottom:auto;
}
.menu-portal .khoi4
{height:25%;
background: url(metromenu/images/menu-portal/setting.png) no-repeat;
margin-top:auto;
margin-bottom:auto;
}
.menu-portal .khoi1:hover,.menu-portal .khoi2:hover,.menu-portal .khoi3:hover,.menu-portal .khoi4:hover
{background-color:#222222;}
    Mở template PAGE_CONTAINER
    Chèn đoạn này vào ngay dưới thẻ <head> hoặc chỗ nào bạn thích
    HTML:
    <div class="menu-portal">
<a href="index.php?search">
<div class="khoi1"></div>
</a>
<a href="{xen:link members, $visitor}">
<div class="khoi2"></div>
</a>
<a href="forum">
<div class="khoi3"></div>
</a>
<a href="account/personal-details">
<div class="khoi4"></div>
</a>
</div>
    Bạn có thể thay đổi màu sắc, hình dáng theo ý thích của mình, chúc thành công!!!

    Bài hướng dẫn được tổng hợp từ Kid - VXF​

    ...

    Xem thêm các chủ đề cùng chuyên mục

    Facebook Group Việt Designer
    Tham gia nhóm
    Facebook Fanpage Việt Designer
    Thích trang
    Phạm Hữu Dư, 23/4/14
    #1
    vanchuyenvn, Hồng Sơn và maivanthai212 thích bài viết này.
  2. vanchuyenvn

    vanchuyenvn Mới đăng kí

    Quá hay , cảm ơn thớt nhìu
    vanchuyenvn, 12/9/14
    #2
Từ khóa:

Ủng hộ diễn đàn