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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,981
Được Like
11,328
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

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom