My OperaMake opera theme part.1
Monday, July 23, 2007 1:54:56 PM
Well, chắc nhiều người đã đọc qua những hướng dẫn làm theme cho blog opera của anh Phạm Lâm và chị Đan Quỳnh, và nghĩ đây sẽ là một bài thừa thãi hoặc...e hèm...ăn cắp của 2 người đó chẳng hạn. Đúng là trong quá trình tạo nên theme cho blog của mình, DoS đã phải học hỏi rất nhiều từ 2 người đó. Nhưng...học bao nhiêu vẫn chưa đủ. Dù đã đọc kỹ những hướng dẫn của 2 người trên, DoS vẫn mất hơn 1 tháng để mày mò cho ra cách làm theme hoàn toàn là của mình. Tuy nhiên, vẫn rất cảm ơn anh Phạm Lâm và chị Đan Quỳnh (hehe, chẳng biết sao cứ gọi là Dân Quỳnh thôi) đã giúp đỡ rất nhiều trong việc này ^ ^
--------------------------------------------------------------------------------------------
Phần 1 : Chỉnh sửa những gì cơ bản nhất!!!
Ở đây, những phần cơ bản nhất là :
_Background của blog - ảnh 2 bên của blog.
_Font chữ của blog.
_Banner của blog.
_Footer của blog (ảnh dưới cùng) , hoặc có thể làm thành ảnh nền của blog cũng được.
_Ảnh nền của bài viết.
_Các thanh menu
--------------------------------------------------------------------------------------------
Phần 1 : Chỉnh sửa những gì cơ bản nhất!!!
Ở đây, những phần cơ bản nhất là :
_Background của blog - ảnh 2 bên của blog.
_Font chữ của blog.
_Banner của blog.
_Footer của blog (ảnh dưới cùng) , hoặc có thể làm thành ảnh nền của blog cũng được.
_Ảnh nền của bài viết.
_Các thanh menu
--------------------------------------------------------------------------------------------
Giờ thì ta hãy bắt tay vào công việc nào
Thay đổi background của blog : bạn cần tìm thẻ mã sau (nhấn Ctrl+F để tìm) : #wrap2 { . Ở đây, bạn chèn địa chỉ ảnh bạn muốn làm nên vào : #wrap2 { Background : url(http://địa chỉ ảnh nền) left top } . Left top ở đây, có nghĩa là ảnh sẽ trải từ phía trên bên trái xuống. Nếu bạn thêm đoạn mã no-repeat vào sau left top (tất nhiên là phải trước dấu '}' đấy) thì bạn sẽ thấy nó chỉ xuất hiện ở góc trên cùng của blog (tất nhiên nói thế để thử tác dụng thôi, chứ làm thế thì xấu chết ^ ^ )
Font chữ của blog : tại sao phải thay đổi font chữ? Tại vì 1 số blog sử dụng những font mà máy tính khác không có --> khi hiển thị sẽ hiển thị không đúng mặt chữ. Bây giờ, bạn tìm thẻ mã sau : BODY { . Trong thẻ mã này bạn sẽ thấy đoạn mã 'FONT-FAMILY: '. Nếu blog của bạn hiển thị không đúng chữ, thì copy đoạn này vào : 'arial,'trebuchet ms'helvetica,sans-serif '. À quên, tiện thể, nếu màu nền của bạn chưa hợp với ảnh nền, bạn có thể chỉnh thông số ở đoạn mã 'COLOR: '
Banner của blog : tìm thẻ mã: #top . Ở mã 'background: ' , bạn chèn địa chỉ ảnh banner của bạn vào : background: url(http://địa chỉ ảnh của bạn) #000 no-repeat left bottom . Chú ý, chỗ '#000' chính là màu nền của banner, bạn có thể chỉnh lại cho phù hợp. Nếu độ cao của banner hơi cao không hiển thị hết như bạn mong muốn, bạn có thể vào mã 'width: ' để chỉnh sửa.
Footer của blog - ảnh nền của blog : cũng giống như background của blog, nhưng thẻ mã là : #wrap3 . Cái khác nhau quan trọng là, nếu sau đoạn url(http://địa chỉ ảnh footer/nền) của bạn, bạn sẽ viết thêm cái gì vào?! Nếu để nguyên không thì nó sẽ thành ảnh nền (lặp đi lặp lại khắp nền blog), còn nếu muốn thành ảnh footer, thì bạn viết thêm vào sau đó dòng 'bottom (right) no-repeat' . Ngoài ra, bạn có thể chèn thêm mã mã (viết dưới dạng #mã màu) để màu nền hợp với ảnh nền
Ảnh nền của bài viết : bạn tìm những thẻ : '.post {' và '.stickypost {' và '#firstpost {' và '#lastpost {' (theo thứ tự là : bài viết (bình thường), bài viết được chú ý, bài viết đầu tiên và bài viết cuối cùng) . Bạn tìm sửa ở mã 'background' , chèn thêm đoạn 'url(http://địa chỉ ảnh nền bài viết)' vào. Ngoài ra, bạn có thể chỉnh thêm ở mã 'Color' để màu nền phù hợp với ảnh nền của bài viết.
Các thanh menu : ở trong opera có những thanh menu sau (có thể không phải, nhưng cứ nói đại
) : thanh Opera Community (ở đầu trang, để log in/log out và truy cập quyền quản lý cá nhân), thanh menu Blog (truy cập các thành phần của Blog như Blog/Photo/Link...), các thanh tag, thanh nền của lịch và Get Opera (cái để mà down trình duyệt Opera ấy)_Thanh Opera Community : thanh này rất nhỏ, chắc chẳng ai muốn chỉnh sửa gì nhiều, ngoài màu sắc của nó. Nhưng đã viết thì viết cho hết vậy. Bạn hãy tìm thẻ mã '#topbar {' . Chỉnh ở mã 'background' . Bạn có thể chỉnh 'transparent' hoặc chỉnh '#mã màu' cho thanh này. Nếu cần, bạn có thể chèn link ảnh vào. Điều này tuỳ bạn, DoS thấy không cần thiết lắm. Well, còn chèn thế nào thì cũng giống như cách chèn ảnh như DoS đã hướng dẫn. Ngoài ra, các bạn còn có thể vào mã '#topbar A {' và'#topbar A:hover {' (một cái hiển thị lúc bình thường, một cái hiển thị lúc để chuột vào) để chỉnh sửa màu chữ trên thanh này.
_Thanh menu Blog : như đã giới thiệu, chắc các bạn cũng biết cái thanh này trên banner để làm gì rồi đúng không? Ở blog của DoS sẽ không thấy đâu vì DoS đã cho nó transparent rồi, chỉ có mấy chữ thôi. Chỉnh sửa thì tìm thẻ mã sau : '#menu A {' và '#menu A:hover {' và '#menu A#selected {' (trạng thái bình thường, trạng thái lúc đưa chuột vào và trạng thái khi chọn) . Ở thẻ '#menu A {' và '#menu A:hover {' , tìm mã 'background' để sửa chữa. Nếu có hình nào đẹp, thích hợp với banner thì đưa link vào. Không thì transparent luôn cho nhanh
. Ngoài ra, tìm mã 'Color' để chỉnh sửa màu chữ tuỳ theo trạng thái._Các thanh tag : cái này chia ra làm 2 phần : phần tiêu đề của tag và nền của tag. Nói về phần tiêu đề trước. Tìm các thẻ mã '#side H2 {' và '#side CAPTION {' và '#side H2.feedheader {' và '#side A#calendarmonth:hover {' , chỉnh sửa ở phần 'background', như thế này background: url(http://địa chỉ ảnh nền) #mã màu no-repeat left top . Thích thì tinh chỉnh thêm. Tiếp theo là về phần nền của tag. Lúc này tìm thẻ '.sidebox .pad {' và '#calendar {' . Chỉnh sửa ở mã 'background' như thế này background: url(http://địa chỉ ảnh) # mã màu. Lưu ý, phần Lịch (Calendar) là phần riêng rẽ với các tag khác, nên nếu muốn, có thể chỉnh sửa 2 phần khác nhau theo ý thích.
_Phần tag down opera : phần này chẳng muốn chỉnh sửa gì. Nếu muốn không hiển thị, thì copy đoạn mã sau #side #getopera { display: none}
------------------------------------------------------------------------------------------
Kinh nghiệm : như mọi người thấy, việc chỉnh sửa chủ yếu ở phần này là chỉnh sửa ảnh ở background và chỉnh sửa màu. Vậy thì ta hãy tập trung xét đến những vấn đề đó.
Background :Trước hết hãy nói tới cấu trúc của mã background. Nó thường có cấu trúc như sau :
Background : url(http://địa chỉ ảnh) #(mã màu) right (hoặc left) bottom (hoặc top) repeat (hoặc repeat-x hoặc repeat-y hoặc no-repeat)
url(http://địa chỉ ảnh) : cái này để hiển thị hình ảnh.
right, left, bottom, top : vị trí xuất phát của ảnh nếu có quá trình lặp, không thì sẽ là vị trí của ảnh)
repeat : lặp toàn bộ, nhưng không cần lắm vì nếu không viết thì quá trình tương tự cũng xảy ra.
repeat-x hoặc repeat-y : chỉ lặp theo chiều ngang(-x) hoặc chỉ chiều dọc (-y)
Tất nhiền, ngoài ra thì còn 1 số mã nữa mà DoS...không hiểu. Vậy nên cũng chẳng dám chỉnh sửa. Nếu bạn nào hiểu thì cứ việc, còn amateur như DoS thì chỉ nên chỉnh sửa những phần trên thôi ^ ^
Ngoài ra, nếu bạn không muốn hiển thị hình ảnh mà muốn nó trong suốt thông với hình nền dưới (đỡ tốn công máy load ảnh lâu ^ ^ ) thì chỉ cần thế này 'background: transparent' .
Mã màu : mã màu ở đây được sử dụng hệ thống màu BGR (Blue-Green-Red) gồm 6 chữ số (có thể viết gọn) . Ai biết tin học thông thạo thì biết cái này chắc ^ ^ . Cái này thật ra cũng không khó khăn lắm, có thể dùng Photoshop để tra mã màu (từ ảnh copy màn hình). Hoặc vào đây để tra mã màu.
H2Uh2uforever # Thursday, October 4, 2007 9:36:00 AM
H2Uh2uforever # Thursday, October 4, 2007 9:40:57 AM
komired_3c3 # Thursday, October 4, 2007 2:32:40 PM
komired_3c3 # Thursday, October 4, 2007 2:33:54 PM