Làm theme cho myOPERA
Thursday, 12. April 2007, 19:08:09
Dạo này mình bận quá, dự án sắp sửa vào cuộc đua nước rút, nên cũng không có thời gian tán hươu vượn nhiều, chỉ có anime là vẫn xem đều, mèo vẫn ôm ấp hàng ngày ^__^ Đêm nay hơi buồn.. ngủ. Tự nhiên muốn viết về cách làm theme cho opera theo cách của mình, viết thì sẽ xong đi làm.
Để làm theme cho OPERA, bạn phải biết CSS. Nếu không biết CSS, thì việc thay đổi theme cho nó cũng rất đơn giản với việc copy & paste CSS người khác đã làm sẵn cho bạn. Tuy nhiên, rất nhiều người muốn tự tay và sửa đổi làm chứ ko muốn dùng theme đã phổ biến.
Mục đích
Một website tốt (thôi gọi là webpage) phải là page có nội dung có nội dung dễ xem, ko gây mỏi mắt và có dấu ấn riêng của người làm ra. Đứng trên phương diện 1 người phát triển web, mình nghĩ vấn đề dễ nhìn là ưu tiên hàng đầu sau đó mới đến cái cá nhân của mình. Trong vấn đề dễ nhìn thì chủ yếu là độ tương phản giữa chữ và nền - làm sao để chữ dễ đọc nhất.
Tiếp theo là tính tương thích, website phải xem tốt ít nhất trên các trình duyệt phổ biến sau: IE6(39.8%), Firefox(31.2%), IE7(16.4%), Opera(1.5%). Mozilla, Safari chia sẻ mỗi thứ ~1.5% còn lại là trình duyệt nhỏ lẻ khác. Nguồn.
Công cụ
HTML/CSS editor: mình sử dụng Adobe (macromedia) DreamWeaver để làm HTML/CSS. Tuy nhiên Adobe Golive với tối giản plugin cũng rất đáng được lưu tâm vì khả năng viết CSS = GUI của Golive cực mạnh. Tuy nhiên Golive viết HTML và xử lý chung ko mạnh lắm. Ngoài ra bạn có thể dùng các trình khác, thậm chí chỉ cần notepad. Frontpage không nên sử dụng.
Browser: Bạn chuẩn bị IE6, Firefox và Opera là đủ. IE7 có nhiều cải tiến về render - có thể coi là 1 sự dung hoà giữa Firefox/Opera và IE6. Hãy chỉnh cho IE6 là Primary browser, FF là Secondary hoặc ngược lại.
Cấu trúc theme của MyOpera
Bạn được quyền sửa 1 file là user.css để sửa theme của myOpera. Điểm đặc biệt của myOpera là nó cho phép bạn tải file bất kỳ lên thư mục riêng của mình. Các file sau khi tải lên sẽ có URL dạng: hxxp://files.myopera.com/username/*foldername*/*filename* và file CSS để bạn sửa đổi sẽ được lưu tại hxxp://files.myopera.com/username/user.css. Vì vậy khi làm việc với file CSS này, hãy sử dụng URL ở dạng tương đối (relative) để chỉ ra hình ảnh mình cần làm việc.
Các file và hình "thuộc tính system" của Opera được lưư tại hxxp://my.opera.com/community/* vì vậy khi bạn save trang MyOpera của mình ở dạng .html và 1 folder đi kèm sẽ bị thiếu các file tại đây (do CSS chỉ URL sai), gây lỗi hiển thị khi xem offline. Chỉ IE7 có khả năng save thành 1 file tích hợp mới ko bị lỗi này. Vậy nên công việc quan trọng của quá trình làm theme này là khắc phục lỗi này để làm CSS tại ổ cứng chứ ko phải làm CSS online.
Ok, go for it!
- Bạn hãy tạo 1 folder trên máy của mình, VD tên là "myopera". Đặt nó ở đâu cũng được.
- Tạo 1 file là user.css trong folder đó.
- Lên trang myOpera của bạn, chọn lấy 1 theme có sẵn để sửa nó. Có 2 loại là có sidebar và không có sidebar. Bạn hãy chọn loại mình thích.
- Trong phần custom CSS, hãy chọn không sử dụng CSS riêng.
- Lên trang myopera cuả mình, vào blog, R.click và chọn "view page source", Ctrl+A sau đó Cltr+C để copy toàn bộ đoạn source HTML.
- Vào thư mục "myopera" bạn đã tạo, tạo 1 file là "blog.html" chẳng hạn, mở nó ra và paste đoạn source HTML kia vô.
Chỉnh sửa HTML source
1. Tìm đoạn chứa "main.css" trong cặp thẻ <head> </head>, nó sẽ có dạng <link rel="stylesheet" href="/community/css/users/2/main.css" type="text/css" media="screen,projection,print" />, bạn copy đoạn
/community/css/users/2/main.css, paste nó vào thanh address của trình duyệt và viết thêm my.opera.com vào trước để trở thành my.opera.com/community/css/users/2/main.css.
Enter hoặc nhấn GO để mở file CSS đó. Copy toàn bộ trang CSS và paste nó vào file "user.css" bạn đã tạo trước đó. Chú ý số sau phần my.opera.com/community/css/users/ tuỳ thuộc vào theme bạn đã chọn trước đó.
2. Dùng trình sửa HTML/CSS, mở file "blog.html" bạn vừa tạo, format lại hàng và cột cho dễ nhìn (nếu editor làm được) và bắt đầu sửa các phần sau trước khi "sờ" vào CSS:
- Tìm tất cả các đoạn chứa /community/ và thay bằng hxxp://my.opera.com/community/ (thay hxxp bằng http).
- Tìm tất cả các đoạn chứa src="/ và thay bằng src="http://my.opera.com/
- Trong thẻ <head>, bạn xoá hoặc biến nó thành comment (thêm ở cuối) đoạn <link rel="stylesheet" href="/community/css/users/2/main.css" type="text/css" media="screen,projection,print" /> và <script type="text/javascript" src="/community/js/myopera-hitslink.js"></script>. Mục đích của việc này để giảm tải và tăng tốc quá trình preview trang web đang xây = CSS của bạn.
- Thêm đoạn <link rel="stylesheet" href="user.css" type="text/css" media="screen,projection,print" /> vào cuối cặp thẻ <head> </head>.
Chuẩn bị cấu trúc folders
- Tạo một folder con trong folder myOpera của bạn để chứa ảnh sẽ làm theme.
- Xong. Công việc bây giờ của bạn là sửa CSS từ CSS sẵn có của myOpera và nhớ copy ảnh cần dùng vào folder chứa ảnh bên trên.
- Cần preview, hãy preview file .html bạn save trên ổ cứng. Nó sẽ tải 1 ít file trên myOpera xuống, vậy nên bạn đừng ngắt internet ^^"
- Sau khi sửa CSS xong xuôi, bạn tạo folder tên giống như folder chứa ảnh trên máy của mình, upload toàn bộ ảnh đã dùng vào đó. Paste toàn bộ CSS trong file "user.css" vào mục "custom CSS" và chọn use my custom CSS only.
- Cần sửa file CSS cho HTML nào nữa, bạn lặp lại quá trình trên. Nghe có vẻ dài, nhưng làm rồi thì cũng rất nhanh thôi.
Ưu & khuyết
Ưu điểm 1 là cách này sẽ lưu giữ trang myOpera của bạn để preview 1 cách chính xác nhất với đầy đủ hình ảnh và các CSS quan trọng. Điều này rất cần thiết để bạn xây CSS cho trang myOpera của mình một cách chính xác.
Ưu điểm 2 là các file cần lưu trữ trên ổ cứng ít, ko lằng nhằng. Source HTML lấy trực tiếp.
Nhược điểm là preview hơi chậm, do phải đọc thông tin 1 chút trên net (chủ yếu là các hình thuộc "hệ thống", kỉu như ảnh friend, ảnh cá nhân, hình sticky, edit-post,... etc)
Ok, chúc bạn có một cuộc vật lộn dzui dzẻ, hehe ^___^
(10%)
WIDGETIZE
Miss_ruby # 16. April 2007, 12:33
danquynh # 19. April 2007, 05:12
Anonymous # 3. July 2007, 09:12
kho hieu hog biet lam sao duoc ca
Ngọc Đăng pro # 6. August 2007, 12:25
Ngọc Đăng pro # 6. August 2007, 12:25
an_xinh # 9. November 2007, 11:51
koko_saraki # 2. December 2007, 05:22
Anonymous # 3. December 2007, 06:36
Ờ được !!!
hoangviethung # 5. December 2007, 21:04
steavenle # 23. January 2008, 20:03
wingoflove # 23. March 2008, 19:16
small_angel # 12. April 2008, 13:44
Anonymous # 11. May 2008, 02:16
sao minh la kohng duoc theo nhung gi ban chi dan
lavier_090 # 18. August 2008, 02:39
tranquyvinhpro # 1. November 2008, 11:31
Anonymous # 22. January 2009, 14:35
cái uses jì đó lấy đâu thía
leiqiu # 2. June 2009, 06:45
nookun # 3. June 2009, 14:43
ltnaltna # 6. June 2009, 14:35
HChris # 14. June 2009, 15:29
Anonymous # 19. June 2009, 13:55
hiu chet lien
ltnaltna # 21. June 2009, 14:58
Anonymous # 24. June 2009, 20:05
ban viet hay va day du day de minh vat lon voi no nhe cam on nhe
Hieukhin261 # 26. July 2009, 15:15
dssclub # 14. August 2009, 02:33
buzzann # 30. August 2009, 05:04
perang # 10. September 2009, 03:29