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

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:

​

​

Để 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​