Tài liệu Thiết kế Yahooplus

c hiện thị từ trên xuống dưới (top) bottom Ảnh được hiện thị từ dưới lên right -Căn phải left -Căn trái repeat -Lặp từ trái qua phải, từ trên xuống dưới no-repeat -Không lặp repeat-x lặp theo chiều ngang repeat-y -Lặp theo chiều học background:transparent -Dùng làm trong suốt hoàn toàn background:#FHJDFH -Chèn màu vào background:URL(Link ảnh) -Chèn ảnh vào background:transparent url(link ảnh) viết giản lược thành background:URL(Link ảnh) !important -Khi qui định thuộc tính nào !important, thuộc tính đó sẽ không bị khi đè 04. Ảnh nền tất cả các trang Code trên đặt ảnh nền trên tất cả các trang mà blog360plus cho phép đặt ảnh nền: 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 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com người viết Vũ Nguyễn 06. Modun tên blog Code xóa modun tên bài viết: #blog_title{height:0px;} Code chỉnh sửa phông và màu chữ: #blog_title .bd h2{ text-align:left;font-size:16px;color:#FFFFFF;} /*Chỉnh tên blog*/ #blog_title .rc_bc .bd{text-align:center;font-size:14px;color:#FFFFFF;} /*Chỉnh nội dung mô tả blog*/ người viết Changtraiiudoi@ymail.com 07. Modun blast 1.1 Đầu tiên bạn copy và paste code này vào để trong suốt nền Tên Blog và Blast : /* Lam Trong Suot Nen Module Ten Blog va Module Blast */ #blog_title .bd, #blast .rc_bc .bd{background-color:transparent;background- image:url(} /* link hinh nen cua blast nay co the thay doi*/ 1.2 Tiếp theo là đoạn Code cho Blast biến thành màu xanh trong suốt: /* Border cua Blast trong suot*/ #blast .rc div {background:url( no- repeat right bottom;} #blast .rc {background:url( blue.png) no-repeat left bottom;} #blast .rc_bd div.rc_bc {background:url( repeat-y right top;} #blast .rc_bd {background:url( repeat- y;} #blast .rc_ft {background:url( no-repeat left bottom;} #blast .rc_ft div {background:url( no-repeat right bottom;} /* Ket Thuc*/ người viết Vũ Nguyễn 2.1 Đẩy Khung lời chào (modul Blast) dịch xuống dưới một chút không bị chồng lên Khung tiêu đề (module Blog_title). Đẩy Khung lời chào (modul Blast) dịch xuống dưới một chút không bị chồng lên Khung tiêu đề (module 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 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com #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 hienhoang74@yahoo.com 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( left bottom no-repeat;} #blast .rc div {height:20px; background:url( right bottom no-repeat;} #blast .rc_bd {background:#ffffff url(} #blast .rc_bd .rc_bc {background:url( no- repeat bottom left;} #blast .rc_bd .rc_bc .bd {font-size:18px;border- top:none;height:65px;background:url( n_th-1.gif) no-repeat right bottom;} Ảnh sản phẩm của code Ps: Các bạn thay 2 link ảnh cuối cùng trong code (2 đoạn code cuối), tức là code in nghiêng dưới đây bằng những bức ảnh khác, lưu ý đến font-size:16px; border-top:none; height: Chiều cao, độ dài ảnh, tính bằng px; Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com #blast .rc_bd .rc_bc {background:url( no- repeat bottom left;} #blast .rc_bd .rc_bc .bd {font-size:18px; border-top:none; height:65px; background:url( no-repeat right bottom;} người viết hienhoang74@yahoo.com 08. Chỉnh sửa chữ trong tiêu đề Làm mất chữ trên tiêu đề và làm mất tiêu đề. #user_mod_1000X .rc_bd .rc_bc .hd .titlebar, #user_mod_1000X .rc_bd .rc_bc .hd .titlebar h2{ height:0;font-size:0;} Chỉ sử dụng font-size:0 nếu muốn mất chữ trên tiêu đề Với 1 tiêu đề, các bạn có thể đặt phông chữ, chỉnh cỡ chữ, căn lề: #user_mod_1000X .rc_bd .rc_bc .hd .titlebar .hd h2{font-size:13px;font-style:italic;color:#3395c8;text- align:center;} Căn chứ trên tiêu đề: .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 Changtraiiudoi@ymail.com 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( 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 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com {background:url( 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;} Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com 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;} Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com /* 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( repeat left !important;} người viết Changtraiiudoi@ymail.com 12. Tạo nút Home div.backhomtbtn a.backtomyblog {background:url( 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 Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com 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( nicons3s.gif) no-repeat 0 0;} #mod_lifeline .list td a.blog_emo_25_2{height:45px;background:url( nicons3s.gif) no-repeat -25px 0;} #mod_lifeline .list td a.blog_emo_25_3{height:45px;background:url( nicons3s.gif) no-repeat -50px 0;} #mod_lifeline .list td a.blog_emo_25_4{height:45px;background:url( 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( nicons3copy.gif) no-repeat 0 0;} #mod_lifeline .list td a.blog_emo_50_2{height:85px;background:url( nicons3copy.gif) no-repeat -50px 0;} #mod_lifeline .list td a.blog_emo_50_3{height:85px;background:url( 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( emoticon-0027.gif) no-repeat 0 0;} #mod_lifeline .list td a.blog_emo_50_2{background:url( emoticon-0037.gif) no-repeat 0 0;} #mod_lifeline .list td a.blog_emo_50_3{background:url( emoticon-0046.gif) no-repeat 0 0;} Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com ... 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( .png) no-repeat 0 0;} #mod_lifeline .list td a.blog_emo_25_2{background:url( .png) no-repeat 0 -25px;} #mod_lifeline .list td a.blog_emo_25_3{background:url( .png) no-repeat 0 -50px;} #mod_lifeline .list td a.blog_emo_25_4{background:url( .png) no-repeat 0 -75px;} #mod_lifeline .list td a.blog_emo_25_5{background:url( .png) no-repeat 0 -100px;} #mod_lifeline .list td a.blog_emo_25_6{background:url( .png) no-repeat 0 -125px;} #mod_lifeline .list td a.blog_emo_25_7{background:url( .png) no-repeat 0 -150px;} #mod_lifeline .list td a.blog_emo_25_8{background:url( .png) no-repeat 0 -175px;} #mod_lifeline .list td a.blog_emo_25_9{background:url( .png) no-repeat 0 -200px;} #mod_lifeline .list td a.blog_emo_25_10{background:url( 9.png) no-repeat 0 -225px;} #mod_lifeline .list td a.blog_emo_25_11{background:url( 9.png) no-repeat 0 -250px;} #mod_lifeline .list td a.blog_emo_25_12{background:url( 9.png) no-repeat 0 -275px;} #mod_lifeline .list td a.blog_emo_50_1{background:url( -50.png) no-repeat 0 0;} #mod_lifeline .list td a.blog_emo_50_2{background:url( -50.png) no-repeat 0 -50px;} Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com #mod_lifeline .list td a.blog_emo_50_3{background:url( -50.png) no-repeat 0 -100px;} #mod_lifeline .list td a.blog_emo_50_4{background:url( -50.png) no-repeat 0 -150px;} #mod_lifeline .list td a.blog_emo_50_5{background:url( -50.png) no-repeat 0 -200px;} #mod_lifeline .list td a.blog_emo_50_6{background:url( -50.png) no-repeat 0 -250px;} #mod_lifeline .list td a.blog_emo_50_7{background:url( -50.png) no-repeat 0 -300px;} #mod_lifeline .list td a.blog_emo_50_8{background:url( -50.png) no-repeat 0 -350px;} #mod_lifeline .list td a.blog_emo_50_9{background:url( -50.png) no-repeat 0 -400px;} #mod_lifeline .list td a.blog_emo_50_10{background:url( 9-50.png) no-repeat 0 -450px;} #mod_lifeline .list td a.blog_emo_50_11{background:url( 9-50.png) no-repeat 0 -500px;} #mod_lifeline .list td a.blog_emo_50_12{background:url( 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( no- repeat;} /* hết*/ 14. Hình nền tiêu đề bài viết Code: Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com .mod-alist-full .main-hd{background:url( 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);} Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com 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( no-repeat top left;border-top:2px inset #ffffff;border-left:2px inset #ffffff;border-right:2px inset #ffffff;} Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com .mod-alist-full .alist-comment .comment-ctnr {background:repeat-y top right;} Các bạn nhớ chỉnh sửa size hình để toàn comment có được theme đồng nhất nhé người viết Uyen My 19. Ảnh nền phần tiêu đề bài viết và nick comment Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com #article_list_module .rc_bd .rc_bc h2{background:url( repeat left top;} người viết Uyen My 20. Thay đổi tag bài viết Code: .mod-alist-tagsbar {background:url(link hình) no-repeat center;height:Apx;} A: thay đổi height = chiều cao của ảnh..(nên thay đúg height để hình đc đẹp hơn) người viết Nhóc khỉ blog 21. Ngăn dòng bài viết Xoá đường ngăn dòng .mod-alist-summary .main-bd li{border-top:none} Thay đường ngăn dòng bằng Hình Ảnh .mod-alist-summary .main-bd li{border-top:none;background:url(Link Ảnh) no-repeat bottom;} Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Hình ảnh ngăn dòng này chỉ suốt hiện khi bạn không để hiện thị bài viết đầu tiên, tức để hiện thị tên bài viết hoặc hiện thị nội dung tóm tắt bài viết. người viết w-dephia 22. Xóa đường viền /* No Border cho cac module*/ #friend-list .rc div, #friendlist_module .rc div, .rc div,.col-150 .rc div {background:transparent;} #friend-list .rc, #friendlist_module .rc, .rc,.col-150 .rc {background:transparent;} #friend-list .rc_bd div.rc_bc, #friendlist_module .rc_bd div.rc_bc, .rc_bd div.rc_bc,.col-150 .rc_bd {background:transparent;} #friend-list .rc_bd, #friendlist_module .rc_bd, .rc_bd,.col-150 .rc_bd div.rc_bc {background:transparent;} #friend-list .rc_ft div, #friendlist_module .rc_ft div, .rc_ft div, .col-150 .rc_ft div {background:transparent;} #friend-list .rc_ft, #friendlist_module .rc_ft, .rc_ft, .col-150 .rc_ft {background:transparent;} /* Ket Thuc*/ Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Vào thiết kế chọn Theme, chế độ tự sửa,copy đoạn code này vào CSS Lưu ý: Bạn cần kiểm tra xem trong CSS của bạn có sử dụng đoạn code nào liên quan đến viền của module không để tránh gây xung đột và trồng chéo lên nhau. người viết co0l.l0ve'sblog 23. Tạo đường viên trong suốt #friend-list .rc div, #friendlist_module .rc div, .rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div {background:url( no- repeat right bottom;} #friend-list .rc, #friendlist_module .rc, .rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:url( no-repeat left bottom;} #friend-list .rc_bd div.rc_bc, #friendlist_module .rc_bd div.rc_bc, .rc_bd div.rc_bc, #subscribe_highlight .rc_bd div.rc_bc, #mod-tagged-frd-article .rc_bd div.rc_bc {background:url( repeat-y right top;} #friend-list .rc_bd, #friendlist_module .rc_bd, .rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:url( repeat-y;} #friend-list .rc_ft div, #friendlist_module .rc_ft div, .rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd- article .rc_ft div {background:url( 2.png) no-repeat right top;} Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com #friend-list .rc_ft, #friendlist_module .rc_ft, .rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:url( no-repeat left top;} #blast .rc_ft {background:url( no-repeat left bottom;} #blast .rc_ft div {background:url( no-repeat right bottom;}#blast .rc_bc .bd{background-color:transparent;background- image:url(} #blast .rc_bc .bd {font-style:italic;color:#000000;} theo 360themes.com 24. Thiết kế Modun Profile 1> Code cho Module Profile : Đầu tiên là Code cho Mod này : Code: #profile_highlight .rc {background:url(Link ảnh Trên) no-repeat left bottom;height:X px} #profile_highlight .rc_ft {background:url(Link Ảnh Dưới) no-repeat left top;height: Y px} #profile_highlight .rc_bd {background:url(Link ảnh Giữa) repeat-y top;} #profile_highlight .rc_bd div.rc_bc, #profile_highlight .rc_ft div, #profile_highlight .rc div,#profile_highlight .rc_bd .rc_bc .bd {background:transparent;} Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Các đọan Link ảnh trên, dưới và ở giữa các bạn phải thay ảnh đúng vị trí vào cho phù hợp nhé. Còn Height: ở đây, muốn hiện chiều cao của ảnh 100% bạn phải thay X px, Y px bằng đúng kích thước chiều cao của ảnh . Muốn xem chiều cao của ảnh, chỉ việc Right Click vào ảnh chọn Properties, chuyển sang thẻ Sumary, nhìn vào dòng Height là có thể thấy được ảnh cao bao nhiêu. 2> Ảnh : Ở đây, mình chia sẻ một số cách làm ảnh như sau : Bước 1 : Đầu tiên bạn thiết kế một ảnh với kích thước 150 x 300 px. Bước 2 : Sau đó cắt ảnh đó ra làm 3 phần (Dùng Photoshop hoặc PhotoScape cũng được) Phần đầu : Cắt với kích thuớc 150 x (50-60 px) . Phần giữa : Phần này các bạn nên làm sao mà có thể lặp lại được, vì vậy chỉ nên cắt từ 150 x 5 px thôi. Phần cuối : Cắt phần này tùy ý, đây là phần phía dưới cùng Bước 3 : Sau khi đã cắt xong ảnh, việc cuối cùng là up ảnh lên host, và thay link ảnh vào đọan Code đã cho. Cuối cùng là wăng code vào CSS thôi . người viết w-dephia 25. Trang trí nóc nhà Yahoo! 360plus Trước mọi người chỉ chú trọng đến thay đổi mọi vật dụng trong ngôi nhà 360 plus của chúng ta....chắc ít bạn để ý đến là "mái nhà" cũng có thể trang trí theo phong cách riêng của mỗi người Cũng ko có ji là cao siêu.....ở đây chỉ có 1 số đoạn code làm trong suốt hình nền của "mái nhà" chúng ta (tạm gọi là mái nhà nhá ...^^...ko bik gọi là ji nữa ) đây chỉ là cơ bản thui...tùy theo phong cách mỗi người mà trang trí sao cho đẹp là đc ùi Phần 1: Làm Trong Suốt Các Đường Viền Code 1: Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com #blog_masshead .rc{background:transparent;} #blog_masshead .rc div{background:transparent;} #blog_masshead .rc_bd{background:transparent;} #blog_masshead .rc_bc{background:transparent;} #blog_masshead .rc_ft{background:transparent;} #blog_masshead .rc_ft div{width:100%;height:4px;background:transparent;} #blog_masshead .bd{clear:both;padding:6px 0 0 5px;height:30px; margin:3px 2px 0 2px !important;*margin:0px 2px 0 2px;background:transparent;} Đoạn code trên để làm cho các viền trong suốt .....(ở đây Khỉ cho nó trng suốt còn bạn nào muốn chèn ảnh khác zô cũng đc ^^ càng hay ) ========================================= Phần 2:Thay Đổi Thanh Công Cụ Code 2: #blog_masshead .menu.mr a{background-image:url( 2.png);} #blog_masshead .menu .rc_w{float:left;width:5px;height:27px;background:url( k/360plus/masshead-menu-1.png) no-repeat 0 0;} #blog_masshead .menu .rc_e{float:left;width:5px;height:27px;background:url( k/360plus/masshead-menu-1.png) no-repeat right top;} #blog_masshead .menu.ml a{background:url( no- repeat;} Ở đây Khỉ đã giảm Opacity của thanh công cụ xuống để cho nó trong suốt mờ mờ ^^ ( bạn có thể tự vẽ 1 thanh công cụ cho riêng mình ) ====================================== Phần 3: Thay Đổi Button Tìm ki