Tìm hiểu CSS 360 Plus của yahoo phần 2

Chia sẻ: Sdfasfs Sdfsdfad | Ngày: | Loại File: PDF | Số trang:8

Thêm vào BST

Báo xấu

63
lượt xem 6
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

/* Chèn hình nền cho module hình ảnh*/ #gallery_list .titlebar .hd h2{background:url(Link ảnh) no-repeat left top;}

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Tìm hiểu CSS 360 Plus của yahoo phần 2

Ebook CSS 360plus ver 1.0 {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;} /* Bài mới đăng */ #article_new .titlebar .hd {background:url(Link ảnh) no-repeat left top;} /* Ảnh trong blog */ #photo_highlight .titlebar .hd {background:url(Link ảnh) no-repeat left top;} /* Ảnh trong bình luận mới nhất*/ .mod-comment-new .titlebar .hd {background:url(Link ảnh) no-repeat left top;} /* Thư mục riêng */ #folder .titlebar .hd {background:url(Link ảnh) no-repeat left top;} /* Chèn hình nền cho module hình ảnh*/ #gallery_list .titlebar .hd h2{background:url(Link ảnh) no-repeat left top;} /*Blog iu thích*/ #subscribe_highlight .titlebar .hd h2{background:url(Link ảnh) no-repeat left top;} /*Blog về tôi*/ #mod-tagged-frd-article .titlebar .hd h2{background:url(Link ảnh) no-repeat left top;} /* Cập nhật ngày */ #update_date .titlebar .hd {background:url(Link ảnh) no-repeat left top;} /* RSS */ #rss_output .titlebar .bd a{height:25px;background:url(Link ảnh) no-repeat left top;} /* Tìm kiếm */ #search_module .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;} hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com
Ebook CSS 360plus ver 1.0 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 Changtraiiudoi@ymail.com 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;} /* Chèn hình nền cho module Thống Kê của plus*/ #statistic .rc_bd .rc_bc .bd {background:url(Link ảnh) top right repeat;} /* Chèn hình nền cho module Blog yêu thích*/ #subscribe_highlight .rc_bd .rc_bc .bd {background:url(Link ảnh) top right repeat;} /* Modun hình ảnh*/ #gallery_list .rc_bd .rc_bc .bd {background:url(Link ảnh) top right repeat;} hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com
Ebook CSS 360plus ver 1.0 /* Chèn hình nền cho module Lịch*/ #calendar .rc_bd .rc_bc .bd {background:url(Link ảnh) top right repeat;} /*Ảnh biểu diễn cho .mod-relatives, và đây là code*/ .mod-relatives .bd {background:transparent url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/trongsuot/ppppppppppp -1.png) repeat left !important;} người viết Changtraiiudoi@ymail.com 12. Tạo nút Home div.backhomtbtn a.backtomyblog {background:url(http://i280.photobucket.com/albums/kk193/datablog/210738home_icon_-1.png) no-repeat center;height:48px;} Thay height là chiều cao của ảnh người viết NoA 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 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com
Ebook CSS 360plus ver 1.0 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;} #mod_lifeline .list td a.blog_em o_25_3{height:45px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/emotio nicons3s.gif) no-repeat -50px 0;} #mod_lifeline .list td a.blog_emo_25_4{height:45px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/emotio nicons3s.gif) no-repeat -75px 0;} ... (tương tự cho các khung tâm trạng nhỏ "không Quan trọng" còn lại) #mod_lifeline .list td a.blog_emo_50_1{height:85px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/emotio nicons3copy.gif) no-repeat 0 0;} #mod_lifeline .list td a.blog_emo_50_2{height:85px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/emotio nicons3copy.gif) no-repeat -50px 0;} #mod_lifeline .list td a.blog_emo_50_3{height:85px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/emotio nicons3copy.gif) no-repeat -100px 0;} ... tương tự cho các khung tâm trạng lớn "Quan trọng" còn lại. #mod_lifeline .list table {height:90px;} -Dùng từng file ảnh cho từng tâm trạng: #mod_lifeline .list td a.blog_emo_50_1{background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/icons/yenta4- emoticon-0027.gif) no-repeat 0 0;} #mod_lifeline .list td a.blog_emo_50_2{background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/icons/yenta4- emoticon-0037.gif) no-repeat 0 0;} #mod_lifeline .list td a.blog_emo_50_3{background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/icons/yenta4- emoticon-0046.gif) no-repeat 0 0;} hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com
Ebook CSS 360plus ver 1.0 ... tương tự cho các khung còn lại. Chú ý trình tự các khung tâm trạng là: 1. Hớn hở; 2. Ngạc nhiên; 3. Hài lòng; 4. Buồn lắm; 5. Cô đơn; 6. Giả nai; 7. Bệnh; 8. Vui vẻ; 9. Khoái chí; 10. Mệt m ỏi; 11. Thất vọng; 12. Giận dữ; Người viết hienhoang74@yahoo.com /* Code thay đổi icon tâm trạng, changtraiiudoi@ymail.com lấy từ blog: Simplex, các bạn có thể copy và dán luôn*/ #mod_lifeline .list td a.blog_emo_25_1{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09 .png) no-repeat 0 0;} #mod_lifeline .list td a.blog_emo_25_2{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09 .png) no-repeat 0 -25px;} #mod_lifeline .list td a.blog_emo_25_3{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09 .png) no-repeat 0 -50px;} #mod_lifeline .list td a.blog_emo_25_4{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09 .png) no-repeat 0 -75px;} #mod_lifeline .list td a.blog_emo_25_5{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09 .png) no-repeat 0 -100px;} #mod_lifeline .list td a.blog_emo_25_6{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09 .png) no-repeat 0 -125px;} #mod_lifeline .list td a.blog_emo_25_7{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamt rang09 .png) no-repeat 0 -150px;} #mod_lifeline .list td a.blog_emo_25_8{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09 .png) no-repeat 0 -175px;} #mod_lifeline .list td a.blog_emo_25_9{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09 .png) no-repeat 0 -200px;} #mod_lifeline .list td a.blog_emo_25_10{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang0 9.png) no-repeat 0 -225px;} #mod_lifeline .list td a.blog_emo_25_11{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang0 9.png) no-repeat 0 -250px;} #mod_lifeline .list td a.blog_emo_25_12{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang0 9.png) no-repeat 0 -275px;} #mod_lifeline .list td a.blog_emo_50_1{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09 -50.png) no-repeat 0 0;} #mod_lifeline .list td a.blog_emo_50_2{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09 -50.png) no-repeat 0 -50px;} hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com
Ebook CSS 360plus ver 1.0 #mod_lifeline .list td a.blog_emo_50_3{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09 -50.png) no-repeat 0 -100px;} #mod_lifeline .list td a.blog_emo_50_4{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09 -50.png) no-repeat 0 -150px;} #mod_lifeline .list td a.blog_emo_50_5{background:url(http://i461.photobucket.com/albums/q q334/changtraiiudoiblog/beta/tamtrang09 -50.png) no-repeat 0 -200px;} #mod_lifeline .list td a.blog_emo_50_6{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09 -50.png) no-repeat 0 -250px;} #mod_lifeline .list td a.blog_emo_50_7{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09 -50.png) no-repeat 0 -300px;} #mod_lifeline .list td a.blog_emo_50_8{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtra ng09 -50.png) no-repeat 0 -350px;} #mod_lifeline .list td a.blog_emo_50_9{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09 -50.png) no-repeat 0 -400px;} #mod_lifeline .list td a.blog_emo_50_10{background:url(http://i 461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang0 9-50.png) no-repeat 0 -450px;} #mod_lifeline .list td a.blog_emo_50_11{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang0 9-50.png) no-repeat 0 -500px;} #mod_lifeline .list td a.blog_emo_50_12{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang0 9-50.png) no-repeat 0 -550px;} .mod-alist-full .main-hd h1 em, .mod-alist-titlebar-1 h2 a em, .mod-alist-titlebar h2 a em, .mod-alist-brief table a em, #myblog-article-compose, #mood li em{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09.png) no- repeat;} /* hết*/ 14. Hình nền tiêu đề bài viết Code: hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com
Ebook CSS 360plus ver 1.0 .mod-alist-full .main-hd{background:url(http://i289.photobucket.com/albums/ll215/rainnysunday/sexy35.jpg) fixed 50% 30%;} người viết Uyen My 15. Hình nền Modun bài viết Code: .hd .titlebar .hd h2{text-align:center;} .mod-alist-full .main-bd{background:url(LINK HINH);} hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com
Ebook CSS 360plus ver 1.0 người viết Uyen My 16. Code toolbar phần comment .rte_toolbar {background:#d7d7d7 url(link Hinh) repeat -x top;border-left:1px solid #0448f6;border-top:1px solid #0448f6;border-right:1px solid #0448f6;height:89px;} /*chieu cao cua hinh*/ người viết Nhóc khỉ blog 17. Ảnh nền tổng số trang, cuối modun bài viết .mod-comment-new .pagination, .mod-alist-summary .pagination, .mod-alist-full .pagination{background:transparent url(Link ảnh);} người viết Changtraiiudoi@ymail.com 18. Code làm hình nền trang comment .cmt-mod-alist #comments-listing .extend-hd {background:transparent;} .cmt-mod-alist #comments-listing .extend-bd .alist-comment, .mod-alist-full .alist-comment ul {background:transparent;} .mod-alist-full .alist-comment li {background:#ffffee url(http://i289.photobucket.com/albums/ll215/rainnysunday/background.jpg) no-repeat top left;border-top:2px inset #ffffff;border-left:2px inset #ffffff;border-right:2px inset #ffffff;} hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com