Làm Skin Ăn Liền Cho Opera
Monday, 13. April 2009, 18:19:41
Xử lý xong em Cáo. Hôm nay, Pearl xin giới thiệu với mọi người thêm cách để làm điệu em O luôn. Thật ra thì Pearl thấy làm skin cho Opera tương đối đơn giản hơn. Cụ thể là skin Opera đều được đóng gói thành 1 file .zip. Trong đó sẽ chứa các folder backgrounds, icons, buttons và 1 file cấu hình skin.ini (cũng có cấu trúc tương tự CSS vậy). Cho nên việc làm skin Opera cũng gần với công việc thiết kế một template bằng CSS. Cái quan trọng là bạn cần phải biết về code dùng trong file skin.ini cũng như phải tẩn mẩn thiết kế hàng trăm graphics sẽ dùng cho skin. Tuy nhiên hôm nay Pearl sẽ không bàn tới chuyện làm toàn bộ một skin to tát như vậy. Hôm nay Pearl sẽ chỉ giới thiệu với mọi người 1 cách thức để tự làm 1 skin đơn giản mang phong cách cá nhân nhưng tất nhiên cũng không kém phần đẹp (cái này là tùy vào thẩm mỹ của từng người). Cái ý tưởng là chúng ta sẽ chỉ thay đổi background, text color cho phần đầu và chân của trình duyệt thôi. Nó hoàn toàn tương tự với phương thức của add-on Personas mà Pearl đã giới thiệu.
Theo như ý tưởng ở trên thì việc đầu tiên là chúng ta sẽ phải tìm trong file skin.ini section (có tính năng định danh như selector của CSS vậy) quy định về phần đầu và chân của trình duyệt. Section [Browser Window Skin] quy định style của các vùng bao gồm một số toolbars như Mainbar ([Mainbar Skin]), Personal Bar ([Personalbar Skin]), Tab Bar ([Pagebar Skin]), Status Bar ([Statusbar Skin]) và cả Menu ([Menu Skin]) nên sẽ thích hợp cho công việc này. Hơn nữa trong Opera cũng có một cách thức thể hiện ảnh nền rất hay là BoxTile. Theo đó ảnh nền của một section có thể được định nghĩa lên đến 9 ảnh bao gồm 4 góc, 4 cạnh và trung tâm. Cho nên chỉ với 1 section [Browser Window Skin] chúng ta hoàn toàn có thể tô vẽ thoải mái background cho 2 vị trí đã định. Vấn đề khó khăn còn lại chỉ là section [Browser Window Skin] nằm dưới các section quy định style cho Menu, Toolbars cho nên sẽ bị ảnh nền các thành phần này che mất. Để giải quyết vấn đề này thì hoặc chúng ta sẽ xóa đi phần định nghĩa ảnh nền cho các Menu, Toolbars trên. Hoặc chúng ta sẽ giảm độ mờ đục của chúng xuống. Để đơn giản và giúp skin bóng bẩy hơn Pearl sẽ chọn cách 2 là giảm độ mờ đục các ảnh này xuống.
Khởi đầu chúng ta sẽ vào thư mục skin chuẩn của Opera theo đường dẫn %ProgramFiles%/Opera/Skin (gõ trong Run hay Address Bar của Explorer). Chúng ta sẽ copy file skin chuẩn của Opera là standard_skin.zip. Mở file standard_skin.zip copy bằng WinRar (đáng lý là giải nén rồi làm nhưng hình như Opera không làm việc với các skin đóng gói bằng WinRar và cả Windows Compress nên bài hướng dẫn này Pearl sẽ làm trực tiếp từ WinRar luôn). Trong WinRar chúng ta sẽ chọn file skin.ini và bấm Ctrl + C để copy. Vẫn để nguyên cửa sổ WinRar chúng ta sẽ chuyển qua 1 thư mục nào đó bên Explorer và bấm Ctrl + V để paste file skin.ini. Mở file skin.ini này lên. Chúng ta có thể ghi chú một số thông tin về skin chúng ta đang thực hiện ở section [Info]. Sau đó chúng ta sẽ xóa đi các thuộc tính ở section [Browser Window Skin] và viết lại cho phù hợp với skin đang làm.
Nếu bạn chỉ muốn đặt một background ở phần top và 1 background ở bottom thì bạn sẽ thêm các thuộc tính sau vào section [Browser Window Skin]
[Browser Window Skin] Type = BoxTile Tile Top = Top.jpg Tile Bottom = Bottom.jpg Color = #d9dde2
Lưu ý: bạn nên chọn ảnh làm background có kích thước phù hợp. Theo Pearl thì ảnh nền ở phần đầu nên có kích thước bằng bề ngang độ phân giải hiện hành trên màn hình máy bạn và 200px cho chiều cao. Tương tự ảnh nền ở phần chân sẽ có chiều cao khoảng 100px. Nếu chiều ngang của ảnh không đủ mặc định ảnh sẽ được repeat theo phương ngang. Riêng về thuộc tính Color = #d9dde2 sẽ quy định màu nền vùng trống nếu ảnh của bạn bị hụt.
Sau khi đã chỉnh sửa các thông số trên cho file skin.ini. Chúng ta sẽ lưu lại và copy nó từ Explorer paste thẳng vô cửa sổ WinRar bằng Ctrl + V (mặc định WinRar sẽ overwrite nó lên file skin.ini cũ). Công việc tiếp theo là bạn sẽ phải copy 2 file ảnh Top.jpg và Bottom.jpg đã chuẩn bị sẵn vào file standard_skin.zip copy luôn (nằm cùng chỗ với file skin.ini). Bây giờ bạn đóng file standard_skin.zip copy lại và rename nó thành một cái tên phù hợp hơn. Chép nó lại vào thư mục skin chuẩn của Opera. Bây giờ chúng ta sẽ khởi động Opera lên và bấm Shift + F12 để mở hộp thoại Appearance lên. Trong thẻ skin chúng ta sẽ có tên skin chúng ta vừa tạo. Chọn nó và ... không thấy có chuyện gì xảy ra. Đó là do ảnh nền của các Toolbars và Menu đã che mất ảnh nền mà chúng ta vừa thực hiện ở trên rồi. Cho nên công việc kế tiếp của chúng ta sẽ làm là tìm những ảnh nền của các Toolbars, Menu này và giảm độ mờ đục của nó xuống. Các ảnh liên quan là mainbar.png, pagebar*.png và statusbar.png trong folder backgrounds. Các ảnh pagebar*.png và toolbar-hover.png trong folder buttons. Chúng ta copy các ảnh này ra ngoài như đã làm với file skin.ini rồi dùng 1 chương trình chỉnh sửa ảnh trên máy bạn có để giảm độ mờ đục xuống khoảng 30%. Chép đè toàn bộ chúng vào lại vị trí cũ. Bây giờ bạn thử khởi động lại Opera và chọn skin mới tạo xem. Bạn đã thành công rồi đó.
Nếu cảm thấy các ảnh nền làm cản trở việc hiển thị text cho các Toolbars và Menu thì bạn edit lại file skin.ini và thêm thuộc tính Text Color = #yourcolor là một mã màu bạn chọn vào trong 2 section [Browser Window Skin] và [Menu Button Skin].
Tất cả công việc chỉ có vậy. Tuy nhiên để đơn giản hơn thì Pearl đã chuẩn bị sẵn cho các bạn một file skin đóng gói đã được giảm độ mờ đục cho các ảnh nền Toolbars, Menu cũng như đã được chỉnh một số thông số cơ bản cho skin.ini. Công việc của bạn giờ đây chỉ là tải file skin mẫu này về và copy 2 file Top.jpg và Bottom.jpg đã chuẩn bị sẵn vào nữa là được.
Download Skin Sample
Ngoài ra Pearl cũng có làm một số skin theo cách này. Mọi người có thể vào đây xem và download về dùng.
) để nghĩ ra 1 kế 
đó là chế biến skin Opera từ các skin 360. Sau khi ngâm cứu Pearl đã viết 1 đoạn CSS làm core biến blog Opera thành 1 layout tương tự 360. Và tiếp theo thì kết hợp các thành phần tương quan giữa 360 và Opera lại để tạo thành 1 trình tự giống như cái skin wizard của 360 
). Chẳng những vậy trình độ CSS cũng kém hơn trước nên skin vẫn còn 1 số lỗi trên IE6 chưa thể khắc phục. Ngoài ra, skin này theo scheme silver không màu mè như những skin phong cách Á Châu trước đây của Pearl mà giống với các mẫu theme mặc định của Opera hơn. Một sự chuyển đổi phong cách 
WIDGETIZE