Phạm Lê Hoàng

Test offline cho skin của Blog Opera (English)

Saturday, April 28, 2007 2:20:56 AM

(Nguồn : Blog's Đan Quỳnh )

Hồi mới học HTML, tôi cứ tưởng phải upload tất cả hình ảnh vào host thì mới xem được trang HTML

Hậu quả là có một ngày bão tuyết, ở nhà thì wireless network không thể connect được, tôi đã phải lội bộ dưới trời tuyết dày đặc để đến trường. Cũng may tôi là Fulbright scholar

nên security guard mới mở cửa cho tôi vào văn phòng

Khi bắt đầu mò mẫm cách trang trí Blog Opera, tôi đã có kinh nghiệm test offline các trang HTML

Nhưng... sao không thể làm được

Hậu quả là tôi phải đăng ký thêm một tài khoản ở Opera dùng để test skin mới

hu hu... và tiền Internet tăng một cách chóng mặt (ba Đan Quỳnh cằn nhằn quá trời, nhưng nhờ vậy mà có lý do đổi package

).

Vừa rồi, Khánh Quang chỉ cho tôi biết lý do tôi không test offline cho skin Opera được

Hì hì... mắc cỡ thiệt

vì tôi đã từng edit một webset sử dụng CSS thành trang web của tôi mà

Anyway, từ đây về sau sẽ không mất thời gian ngồi chờ connect to my opera và không tốn thêm nhiều tiền Internet (mặc dù bây giờ xài ít thì cũng trả bấy nhiêu rồi

).

* * *

Trước tiên, bạn tạo một folder trong ổ cứng của bạn. Tất cả các hình ảnh để trang trí cho blog của bạn đều được lưu trong folder này. Sau đó bạn dùng menu save as, hoặc save page as để lưu các trang HTML hiển thị blog của bạn vào folder vừa tạo, ví dụ trang blog, trang lưu trữ bài viết - Archive, trang hình ảnh - Photos,... Bạn cũng cần lưu file main.css vào folder này.

Tiếp theo, bạn mở các file HTML và tìm đoạn mã sau (nằm trong phần head):

<link rel="stylesheet" href="http://files.myopera.com/username/user.css" type="text/css" media="screen,projection,print" />
<link rel="stylesheet" href="/community/css/users/2/main.css" type="text/css" media="screen,projection,print" />

Lưu ý: username là tên của bạn, ví dụ của tôi là danquynh; số 2 tương ứng với theme mặc định mà bạn chọn để chỉnh sửa. Trường hợp bạn không sử dụng theme mặc định của Opera (có nghĩa là bạn lưu với option "only use my custom style sheet") thì bạn sẽ không thấy đoạn mã có chứa main.css trong các file HTML. Bạn cần chỉnh lại đoạn mã này như sau:

<link rel="stylesheet" href="user.css" type="text/css" media="screen,projection,print" />
<link rel="stylesheet" href="main.css" type="text/css" media="screen,projection,print" />

Có nghĩa là bạn bỏ đường dẫn cho hai file main.css và user.css.

Bạn mở notepad và gõ vào những đoạn mã mà bạn muốn thay đổi so với theme mặc định, như hình nền, banner, footer,... và save với tên là user.css.

Lưu ý trong file user.css này bạn cũng không chỉ đường dẫn cho các file hình ảnh, mà chỉ ghi tên hình ảnh thôi. Ví dụ, trong theme dành cho Blog Opera của bé, đoạn mã dành cho banner là:

#top2 {
BORDER-TOP: #555 1px solid;
PADDING-LEFT: 15px;
BACKGROUND: url(banner.gif) right top;
HEIGHT: 183px;
}

Khi đã hoàn tất file user.css, bạn mở các trang HTML bằng trình duyệt web để xem kết quả. Nếu đã vừa ý, bạn sẽ upload hình ảnh vào host (My Account/ Files) và thay đường dẫn (url) cho các file hình ảnh trong file user.css. Cuối cùng bạn paste toàn bộ nội dung của file user.css vào ô Enter CSS trong My Account/ Design/ Change Design.

Chúc bạn thành công!