Ebook CSS 360plus ver 1.0

[email protected] & [email protected]
Welcome to Changtraiiudoi’s Blog & HaTim’s Blog Hỏi đáp – Đóng góp Check for updatas

Code css cho Yahoo! 360plus
Về Ebook CSS 360plus ver 1.0
Giới thiệu về CSS và cách chèn code css
Ý nghĩa của các code trong việc viết code css
Ảnh nền tất cả các trang
Theme 2 mảnh Top - Bottom
Modun tên blog
Modun blast
Chỉnh sửa chữ và phông trong tiêu đề
Đặt ảnh nền cho tiều đề
Thay và thêm icon cho tiều đề modun
Ảnh nền cho modun
Tạo nút Home
Thay icon tâm trạng
Hình nền tiêu đề bài viết
Hình nền Modun bài viết
Code toolbar phần coment
Ảnh nền tổng số trang, cuối modun bài viết
Làm hình nền trang comment
Làm ảnh nền phần tiêu đề bài viết và nick comment
Thay đổi tag bài viết
Ngăn dòng bài viết
Xóa đường viền
Tạo đường viên trong suốt
Thiết kế Modun Profile
Trang trí nóc nhà Yahoo! 360plus


Đầu tiên bạn vô phần Thiết Kế ~~> Theme ~~> Chế độ tự chỉnh sửa ~~> Click nút Tiếp ~~> Hiện ra cái khung
có bảng màu, kéo xuống dưới thấy chữ CSS, bên cạnh đó có cái khung cho điền text. Đó là phần điền CSS. Ebook CSS 360plus ver 1.0

[email protected] & [email protected]

03. Ý nghĩa của các code trong việc viết code css
Trang trí các Khung kiểu liệt kê : Khung Thống kê (#statistic), Bài viết mới (#article_new), Lời bình mới
(#comment_new), Thư mục (#folder)...
Ở các khung này ngoài lớp để đặt ảnh của nền ra (.bd), chúng ta còn 2 lớp để đặt ảnh nữa là (ul -lớp bao gồm 1
khối liệt kê) và (li - lớp bao gồm từng dòng liệt kê). Lớp (li) thường đã được dùng để tạo 1 icon đầu dòng cho
mỗi liệt kê. (Ví dụ lệnh: #article_new .bd ul li {background:transparent
url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/images03/orange_book_open.gif) no-repeat
center left;} dùng để tạo 1 hình quyển sách nhỏ trước mỗi tiêu đề bài viết mới)
Ở các khung Bài viết mới, Thư mục, Bạn bè chỉ có 1 lớp (ul), riêng ở khung Lời bình mới có thể có nhiều hơn 1
lớp (bằng số bài có lời bình mới được hiện ra).
Ảnh đặt tại lớp (ul) sẽ ở trên ảnh đặt tại lớp (.bd) do vậy nếu muốn nhìn thấy ảnh của lớp (.bd) thì không được tô
màu lớp (ul). Ở đây, lệnh HEIGHT được sử dụng để tăng chiều cao của khung cho thích hợp với ảnh đặt thêm
vào. Ví dụ code CSS trang trí khung Thống Kê của tôi:
#statistic .rc_bd .rc_bc .bd
{background:#ffffee url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/Background/05bgc.gif);}
Lệnh trên là chọn màu nền và ảnh nền của lớp .bd (trong ví dụ này ảnh nền đã che hết màu nền, đưa vào chi để
minh họa)
#statistic .rc_bd .rc_bc .bd ul
{height:400px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/5.gif) no-repeat bottom
left;}
Lệnh tiếp theo này là để thay đổi chiều cao của phần liệt kê (cũng là của khung) và chọn 1 ảnh để ở phần phía

Danh sách các trang có thể đặt hình nền:

body.blog_my
body.profile_view
body.comment_list
body.blog_my_index
body.comment_listing
body.trackback_listing
body.blog_archives_folder
body.blog_archives_date
body.blog_archives_all
body.post_rte
body.post_doodle
body.guestbook
body.subscribe_list
body.post_gb
body.gallery
body.photo_big
body.slideshow
body.photo_upload_pc
body.photo_upload_gallery

Màu link và màu khi di chuột đến link:
a{color:#6F5F06;}
a:hover{color:#FF0000;}

.rc, .rc div : dùng để tạo đường viền trên đỉnh
.rc_bd, .rc_bd .rc_bc: dùng để tạo đường viền 2 bên trái phải
.rc_ft, .rc_ft div: dùng để tạo đường viền dưới đáy


Body.profile_view, body.blog_my, body.guestbook, body.comment_list, body.comment_list, body.blog_my_index,
body.slideshow, body.blog_archives_folder, body.comment_listing, body.trackback_listing, body.post_doodle,
body.guestbook, body.blog_archives_date, body.blog_archives_all, body.post_rte, body.subscribe_list,
body.post_gb, body.gallery, body.photo_big, body.photo_upload_pc, body.photo_upload_gallery
{background:url(Link ảnh) repeat top fixed;}
Lưu ý: Repeat là lặp ảnh từ trái qua phải, từ trên xuống dưới. Ta có thể thay thành repeat-x để lặp từ trái qua
phải, lặp theo chiều ngang. Thay thành repeat-y để lặp theo chiều dọc, từ trái qua phải.
Khi ta thêm: left thì ảnh sẽ được lặp từ trái qua phải, right thì ảnh lặp từ bên phải qua trái. Them top để ảnh được
hiện thị từ trên xuống, thay top bằng bottom để ảnh hiện thị từ dưới lên. Thêm fixed để anh ko chuyển động
(đứng im) khi ta kép trang (cuôn trang) blog.
Các bạn có thể tách từ code viết giản lược, viết gộp trên để mỗi trang có một ảnh nền riêng. Ví dụ như ảnh nền
trang chính blog thì dùng code này:
Body.blog_my { background:url(Link ảnh) repeat top fixed;}
theo 360themes.com

05. Theme 2 mảnh Top – Bottom
body{background:#cc99ff;}
/* Màu nền của theme, nên thay đổi trùng với màu ảnh nền để tăng tính thẩm mỹ cho theme*/

#doc2, #doc{background:#cc99ff url(Link ảnh Top) no-repeat center top;}
/* mau nen cua theme va link hinh top-theme nay thay doi duoc*/

#bd{background:url(Link ảnh Bottom) no-repeat center bottom;}
Ebook CSS 360plus ver 1.0

[email protected] & [email protected]
người viết Vũ Nguyễn

06. Modun tên blog
Code xóa modun tên bài viết:

Blog_title). Để làm như vậy, bạn có thể sử dụng code sau:
#blog_title .ft {height:10px;background:transparent}
#blog_title .rc_ft {height:10px}
#blog_title .rc_ft div{height: 10px}
#blast .rc{height:10px}
Ebook CSS 360plus ver 1.0

[email protected] & [email protected]
#blast .rc div{height:10px}
Ảnh trước khi dùng code Ảnh sau khi dùng code

Ps: Khuyến cáo nên dùng đủ 5 code trên, phòng trường hợp gây lỗi khi ta dùng một số code khác.
người viết [email protected]
2.2 Thêm ảnh, tạo ảnh động trong Khung Blast
Đây là code thêm ảnh, tạo ảnh động trong Khung Blast:
#blast .rc {background:transparent url(http://sg.yimg.com/i/vn/blog/i/blog/rc_nw.gif) left bottom no-repeat;}
#blast .rc div
{height:20px;
background:url(http://sg.yimg.com/i/vn/blog/i/blog/rc_ne.gif) right bottom no-repeat;}
#blast .rc_bd
{background:#ffffff url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/background2/bg_2a.jpg);}
#blast .rc_bd .rc_bc
{background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/dividers/5807a4tbnh2qdv.gif) no-
repeat bottom left;}
#blast .rc_bd .rc_bc .bd
{font-size:18px;border-
top:none;height:65px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/images/4pypso

.hd .titlebar .hd h2{text-align:center;}
Thay center bằng right hoặc left để căn phải, căn trái chữ.
người viết [email protected]

09. Đặt ảnh nền cho tiều đề modun
/*Ảnh nền của tiêu đề 10 modun tự tạo*/
#user_mod_10001 .rc_bd .rc_bc .hd, .hd .titlebar .hd, #user_mod_10002 .rc_bd .rc_bc .hd, .hd .titlebar .hd,
#user_mod_10003 .rc_bd .rc_bc .hd, .hd .titlebar .hd, #user_mod_10004 .rc_bd .rc_bc .hd, .hd .titlebar .hd,
#user_mod_10005 .rc_bd .rc_bc .hd, .hd .titlebar .hd, #user_mod_10006 .rc_bd .rc_bc .hd, .hd .titlebar .hd,
#user_mod_10007 .rc_bd .rc_bc .hd, .hd .titlebar .hd, #user_mod_10008 .rc_bd .rc_bc .hd, .hd .titlebar .hd,
#user_mod_10009 .rc_bd .rc_bc .hd, .hd .titlebar .hd, #user_mod_10010 .rc_bd .rc_bc .hd, .hd .titlebar .hd
{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/12-10-200810-03-57CH.png)
repeat-x left top;height:28px;}
/*Ảnh nền của Tiêu đề mỗi modun có sẵn */
#mod-alist-fullDrag .rc_bd .rc_bc .hd .titlebar, #mod-edit-bar .rc_bd .rc_bc .hd .titlebar, #mod-alist-searchbox
.rc_bd .rc_bc .hd .titlebar, #mod-alist-pagination .rc_bd .rc_bc .hd .titlebar, #rss_output .rc_bd .rc_bc .hd
.titlebar, #mod-tagged-frd-article .rc_bd .rc_bc .hd .titlebar, #feature_link .rc_bd .rc_bc .hd .titlebar, #gallery_list
.rc_bd .rc_bc .hd .titlebar, #gb_msg .rc_bd .rc_bc .hd .titlebar, #mod-friend-list-all .rc_bd .rc_bc .hd .titlebar,
#profile_info .rc_bd .rc_bc .hd .titlebar
Ebook CSS 360plus ver 1.0

[email protected] & [email protected]
{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/12-10-200810-03-57CH.png)
repeat-x left top;height:28px;}
Các bạn có thể thay height là chiều cao của ảnh
người viết Vũ Nguyễn

10. Thay và thêm icon cho tiều đề modun
/* Bảng thống kê */
#statistic .titlebar .hd {background:url(Link ảnh) no-repeat left top;}


/* Modun tự tạo*/
#user_mod_1000X .titlebar .hd {background:url(Link ảnh) no-repeat left top;}
Ebook CSS 360plus ver 1.0

[email protected] & [email protected]

Các bạn thay x từ 1 đến 10, x là tên thứ tự của modun. Chiều cao của link ảnh là 26px, bạn có thể thêm
height:28px để chỉnh sửa lại chiều cao của tiêu đề, ví dụ như ta được code sau #search_module .titlebar .hd
{background:url(Link ảnh) no-repeat left top;height:28px;}

người viết [email protected]

11. Ảnh nền cho modun
/* Chèn hình nền cho cái module thông tin cá nhân bao gồm avartar */
#profile_highlight_module .rc_bd .rc_bc .bd {background:url(Link ảnh) top right repeat;}

/* Modun tâm trạng*/
#mod_lifeline div.bd, #mod_lifeline div.rc_bc {background:url(Link ảnh) !important;}

/* Chèn hình nền cho module fiendlist */
#friendlist_module .rc_bd .bd {background:url(Link ảnh) top right repeat;}
/* Chèn hình nền cho module Bài Mới */
#article_new .rc_bd .rc_bc .bd {background:url(Link ảnh) top right repeat;}

/* Chèn hình nền cho module Thư Mục Riêng*/
#folder .rc_bd .rc_bc .bd {background:url(Link ảnh) top right repeat;}

/* Chèn hình nền cho module Comment mới*/
#comment_new .rc_bd .rc_bc .bd {background:url(Link ảnh) top right repeat;}

13. Thay icon tâm trạng
Cách thay đổi Icons trong Module Tâm trạng:
Như mọi người đã biết Icons tâm trạng trong 360 plus thực ra là 2 files ảnh ( kích thước ảnh lớn 50x600, ảnh
nhỏ: 25x300) được đặt ở các vị trí có độ cao khác nhau để làm nền cho các khung tâm trạng. Ảnh nhỏ làm nền
khung tâm trạng trong bài viết và trên module Tâm trạng khi bài viết không được đánh dấu là "Quan trọng". Ảnh
lớn làm nền khung tâm trạng trên module Tâm trạng khi bài viết được đánh dấu là "Quan trọng". Kích thước
khung tâm trạng của ảnh nhỏ là 25x25, của ảnh lớn là 50x50 (đơn vị pixels). Nếu các bạn đã từng viết code
CSS để trang trí lại trang 360 plus thì chắc hẳn biết rằng một số lệnh bị hạn chế không dùng được ở đây, một
Ebook CSS 360plus ver 1.0

[email protected] & [email protected]
trong những lệnh đó là WIDTH dùng để thay đổi chiều rộng, may mắn là lệnh HEIGHT dùng để thay đổi chiều
cao vẫn dùng được.
Dựa trên những đặc điểm trên, chúng ta có thể thay đổi được như sau:
- Thay đổi 2 file ảnh để có những hình khác nhau (như mọi người vẫn làm)
- Thay đổi chiều cao của khung nền để ảnh tâm trạng có thể cao hơn không bị hạn chế là 50 px nữa. Điều này
cho phép bạn chọn được nhiều ảnh đẹp hơn và dễ dàng hơn trong việc thiết kế file ảnh. (Ví dụ minh họa: trang
blog hoa hậu Bạc Liêu)
- Không nhất thiết phải dùng 2 files ảnh có kích thước cố định 25x300 và 50x600; bạn có thể dùng 12 file ảnh
cho 12 icons tâm trạng khác nhau (có chiều rộng không quá 50, chiều cao thoải mái). Điều này cho phép bạn
không mất công thiết kế file ảnh nếu bạn không thạo, ngoài ra bạn có thể chọn file ảnh động cho Icons tâm trạng
của mình (ví dụ minh họa: trang blog của tôi).
Dưới đây là code CSS minh họa cho từng phần:
- Thay đổi chiều cao:
#mod_lifeline .list td
a.blog_emo_25_1{height:45px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/emotio
nicons3s.gif) no-repeat 0 0;}
#mod_lifeline .list td
a.blog_emo_25_2{height:45px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/emotio
nicons3s.gif) no-repeat -25px 0;}