Làm theme cho my OPERA
Tuesday, 11. December 2007, 00:24:50
Để 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>, 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> và <script></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> 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ẻ,
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>, 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> và <script></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> 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ẻ,
(28%)
By Sakura1410, # 24. December 2007, 01:05:49
By anonymous user, # 18. May 2008, 15:26:45
By phansang, # 5. September 2008, 07:20:38