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

VNXF.VN - 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.10782.html

snow_left_right-png.10783.html


snow_left_centre_right-png.10784.html


​

Để thêm hình ảnh bên trái, thêm vào EXTRA.css:
Mã: 
[COLOR=#032A46][FONT=Georgia]#navigation .helper {[/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]background: transparent url('@imagePath/shelley_snow_l.png') no-repeat;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]display: block;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]height: 25px;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]left: -5px;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]position: absolute;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]top: -16px;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]width: 250px;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]}[/COLOR][/FONT][/FONT][/COLOR]

Để thêm hình ảnh bên trái và bên phải, thêm vào EXTRA.css:
Mã: 
[COLOR=#032A46][FONT=Georgia]#navigation .helper {[/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]display: block;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]height: 25px;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]left: -5px;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]padding: 0px 5px;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]position: absolute;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]top: -16px;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]width: 100%;[/COLOR][/FONT][/FONT][/COLOR]

[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]/* IE8 */[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]background: url('@imagePath/shelley_snow_l.png') no-repeat;[/COLOR][/FONT][/FONT][/COLOR]

[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]/* Chrome & FF */[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]background: url('@imagePath/shelley_snow_l.png') no-repeat 0% 0%, url('@imagePath/shelley_snow_r.png') no-repeat 100% 0%;[/COLOR][/FONT][/FONT][/COLOR]

[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]/* IE6, IE7 */[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]_background: url('@imagePath/shelley_snow_l.png') no-repeat;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]}[/COLOR][/FONT][/FONT][/COLOR]

Để thêm hình ảnh bên trái, trung tâm và bên phải, thêm vào EXTRA.css:
Mã: 
[COLOR=#032A46][FONT=Georgia]#navigation .helper {[/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]display: block;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]height: 25px;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]left: -5px;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]padding: 0px 5px;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]position: absolute;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]top: -16px;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]width: 100%;[/COLOR][/FONT][/FONT][/COLOR][COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]
[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]/* IE8 */[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]background: url('@imagePath/shelley_snow_l.png') no-repeat;[/COLOR][/FONT][/FONT][/COLOR][COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]
[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]/* Chrome & FF */[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]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%;[/COLOR][/FONT][/FONT][/COLOR]

[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]/* IE6, IE7 */[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]_background: url('@imagePath/shelley_snow_l.png') no-repeat;[/COLOR][/FONT][/FONT][/COLOR]
[COLOR=#141414][FONT=Tahoma][FONT=Georgia][COLOR=#032A46]}[/COLOR][/FONT][/FONT][/COLOR]

Tải file cài tại đây: 4share.vn/f/65515d565c535155/Snow.zip

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

Nguồn: VNXF.VN​
 
  • Chủ đề
    add images to the navigation bar navigation bar thanh navigation vnxf vnxf.vn
    • Đăng nhập bằng tài khoản VFO hoặc Google

    Bài viết mới nhất

    Thống kê

    Chủ đề
    100,752
    Bài viết
    467,583
    Thành viên
    339,851
    Thành viên mới nhất
    Đông Âu

    Bài viết được quan tâm nhiều

    Top