Phạm Lê Hoàng

Tạo Skin cho Blog Opera từ theme Yahoo 360o

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

Nhiều người nói với tôi là rất thích skin Color of Life mà tôi edit lại từ theme Yahoo 360^o của Antoniblue. Một số người nói rằng nhìn rất pro, một số người khác bảo giống theme Yahoo

Ờ, nhìn cũng giống theme Yahoo thật

Bạn so sánh thử nhé

Yahoo 360^o Bloggers có hẳn một kho themes tại http://360themes.com

Tại sao Opera Bloggers không take advantage of nguồn tài nguyên đó nhỉ?

Tôi sẽ giúp bạn một mẹo nhỏ để biến theme Yahoo thành Skin Opera

Trước tiên, bạn download file user.css và hình nền của Yahoo 360^o (thường có hai files: top và bottom). Bạn cũng cần tạo thêm một số hình ảnh để làm nền cho sidebox. Tôi thường dùng Gradient Tool trong photoshop để tạo. Bạn cũng có thể sử dụng Brush để làm cho đẹp hơn. Bạn nên lấy mã màu trong link download hình nền Yahoo để tạo hình ảnh cho cùng tone. Bạn hãy upload tất cả hình ảnh này vào host của bạn (My Account/ Files).

Kế tiếp, bạn mở file user.css bằng notepad, và tìm đoạn mã sau:

body {
background:transparent url(http://files.myopera.com/danquynh/color/bg.jpg) top center repeat-x;
margin:0;
padding:0;
font-family: arial,'trebuchet ms',helvetica,sans-serif;
font-size:13px;
line-height:145%;
text-align:center;
color:#111;
}

#wrap1 {
padding-top: 20px;
BACKGROUND: url(http://files.myopera.com/danquynh/color/wrap1a.jpg) top center no-repeat;
}

#wrap2 {
BACKGROUND: url(http://files.myopera.com/danquynh/color/wrap2.jpg) bottom center no-repeat;
}

#wrap3 {
background:transparent;
border:#0089fd double;
margin:0 auto;
width:758px !important;
padding-left:10px;
padding-right:10px;
padding-bottom:100px;
}

#topbar1 {
background:#c0e6ff url(http://files.myopera.com/danquynh/color/topbar.jpg) top center no-repeat;
color:#0089fd;
height:32px;
overflow:hidden;
line-height:24px;
}

Bạn hãy nhìn vào ảnh minh họa cho Skin Opera:

- Body là nền chính của trang blog. Tôi dùng Gradient Tool để tạo một ảnh nền có màu xanh nhạt dần đến trắng.

- Wrap1 là phần hiển thị banner.

- Wrap2 là phần hiển thị footer.

- Wrap3 là phần hiển thị toàn bộ nội dung của trang blog (trong khung).

- Topbar1 là phần hiển thị menu log in (Opera Powered).

Bạn hãy thay đường dẫn cho các hình ảnh (phần in đậm) trong đoạn mã trên lần lượt wrap1 là top và wrap2 là bottom của theme Yahoo mà bạn có. Nếu bạn không thích hình ảnh tràn ra ngoài khung thì trước khi upload, bạn resize sao cho chiều ngang (width) của ảnh là 778px. Hình nền của body và topbar1 thì bạn có thể tự tạo, hoặc chỉ cần lấy mã màu của theme Yahoo và điều chỉnh mã background, ví dụ:

body {
background:#ffffff;
margin:0;
padding:0;
font-family: arial,'trebuchet ms',helvetica,sans-serif;
font-size:13px;
line-height:145%;
text-align:center;
color:#111;
}

Trong đoạn mã trên tôi dùng màu nền là màu trắng. Bạn thay bằng màu phù hợp với hình nền của theme Yahoo. Bạn có thể dùng tên màu bằng tiếng Anh hoặc mã màu.

Nếu bạn không thích đường viền bao quanh trang blog, bạn có thể bỏ đoạn mã border (in đậm) trong wrap3.

Sau đó, bạn thay hình ảnh cho các sidebox, hình nền cho tiêu đề bài viết,... bằng những hình ảnh mà bạn tạo cho phù hợp với theme Yahoo. Bạn vui lòng xem post Thay đổi background Blog Opera và Trang trí lại sidewrap của Blog Opera để tìm những đoạn mã thích hợp để chỉnh sửa, kể cả màu chữ, màu link,... Cuối cùng, bạn paste toàn bộ nội dung đã chỉnh sửa vào ô Enter CSS (xem thêm post Thay đổi giao diện Blog Opera trong 10 phút) và save với option "only use my custom style sheet".

Hãy cùng tạo ra nhiều skins đẹp và chia sẻ cho mọi người nhé!

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

Test offline cho skin của Blog Opera (English)Tạo playlist và broadcast trên blog