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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,694
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:

snow_left.png


snow_left_right.png


snow_left_centre_right.png

Để thêm hình ảnh bên trái, thêm vào EXTRA.css:
Mã:
#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:
Mã:
#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:
Mã:
#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;
}

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


Nguồn: xenforo.com​
 

Đính kèm

  • Snow.zip
    5.5 KB · Lượt xem: 9

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mobile: 0906081284

Zalo: 0988488096

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom