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

Add images to the navigation bar - Thêm hình ảnh vào thanh navigation 1.0

Chủ đề thuộc danh mục 'Hướng dẫn - Thủ thuật Xenforo' được đăng bởi PCO, 12/4/16.

Lượt xem: 1,944

  1. PCO Thành viên cấp 2

    Add images to the navigation bar - Thêm hình ảnh vào thanh navigation 1.0

    Điều này sẽ cho phép bạn thêm đến 3 hình ảnh trên cùng của thanh điều hướng chỉ bằng cách thêm mã có liên quan vào EXTRA.css như được giải thích dưới đây.

    Bạn sẽ cần phải thay đổi các thuộc tính cho phù hợp với hình ảnh bạn sử dụng.

    Bạn cũng sẽ cần phải thay đổi đường dẫn hình ảnh nếu bạn không đặt chúng trong thư mục gốc của thư mục kết hợp với style của bạn. Các đường dẫn hình ảnh cho mỗi style được thiết lập trong ACP -> Style Properties -> General -> Settings: Path to Images.

    Nếu bạn muốn sử dụng những hình ảnh tương tự cho nhiều style thì thay đổi đường dẫn trong các mã dưới đây, ví dụ 'styles/default/shelley_snow_l.png' và tải lên các hình ảnh vào thư mục style mặc định.

    Lưu ý rằng nếu bạn sử dụng một hình ảnh chồng lên thanh điều hướng quá nhiều thì điều này sẽ ảnh hưởng xấu đến khả năng nhấp vào tab điều hướng. Đó là đề nghị để giữ chồng chéo đến dưới 30% chiều cao của thanh.

    Hướng dẫn dưới đây là thêm vào những hình ảnh tuyết:

    dCgisUa.png g57rOA2.png
    mREGqFM.png
    Để thêm hình ảnh bên trái, thêm vào EXTRA.css:
    Code:
    #navigation .helper {
    background: transparent url('@imagePath/shelley_snow_l.png') no-repeat;
    display: block;
    height: 25px;
    left: -5px;
    position: absolute;
    top: -16px;
    width: 250px;
    }
    Để thêm hình ảnh bên trái và bên phải, thêm vào EXTRA.css:
    Code:
    #navigation .helper {
    display: block;
    height: 25px;
    left: -5px;
    padding: 0px 5px;
    position: absolute;
    top: -16px;
    width: 100%;
    
    /* IE8 */
    background: url('@imagePath/shelley_snow_l.png') no-repeat;
    
    /* Chrome & FF */
    background: url('@imagePath/shelley_snow_l.png') no-repeat 0% 0%, url('@imagePath/shelley_snow_r.png') no-repeat 100% 0%;
    
    /* IE6, IE7 */
    _background: url('@imagePath/shelley_snow_l.png') no-repeat;
    }
    Để thêm hình ảnh bên trái, trung tâm và bên phải, thêm vào EXTRA.css:
    Code:
    #navigation .helper {
    display: block;
    height: 25px;
    left: -5px;
    padding: 0px 5px;
    position: absolute;
    top: -16px;
    width: 100%;
    
    /* IE8 */
    background: url('@imagePath/shelley_snow_l.png') no-repeat;
    
    /* Chrome & FF */
    background: url('@imagePath/shelley_snow_l.png') no-repeat 0% 0%, url('@imagePath/shelley_snow_c.png') no-repeat 50% 0%, url('@imagePath/shelley_snow_r.png') no-repeat 100% 0%;
    
    /* IE6, IE7 */
    _background: url('@imagePath/shelley_snow_l.png') no-repeat;
    }
    Tải file cài tại đây: [LOCK]http://4share.vn/f/65515d565c535155/affiliate/2518799[/LOCK]

    Chúc các bạn thành công.

    Nguồn: VNXF.VN

    ...
    Phạm Hữu Dư thích bài viết này

Ủng hộ diễn đàn