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

Ebook CSS 360plus ver 1.0

&
.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

&

#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

&
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

&

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

&
#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

&
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

&
#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ếm ^^

code3:

#blog_masshead .bd form .btn{border:none;width:60px;height:77px;background:url(Link Button) no-repeat 0
0;cursor:pointer;}

Sau khi tìm đc 1 button tìm kiếm vừa ý khi thay link các bạn nhớ thay luôn kick thước width + height đúng với link
button nha

=========================================
Phần 4: Thay Đổi Background và làm chữ nhấp nháy

Code 4:

#blog_masshead{font-size:12px;color:#ccc;background:url(link hình) repeat-x 0 5px;height:Xpx;}
#blog_masshead a{color:A;text-decoration:blink;}

X : Chiều cao của ảnh
A: Mã Màu Chữ

Lưu Ý : bạn nên xếp code theo thứ tự mình đã viết nhá mất công bị đè hình lên nhau tùm lum á
người viết Uyen My

Ebook CSS 360plus ver 1.0

&

26. Thêm hoặc thay đổi icon trong các modun có sẵn và tạo đường viền ngăn cách

Thêm hoặc thay đổi icon trong các modun có sẵn và tạo đường viền ngăn cách:
/*Blog iu thích*/
#subscribe_highlight rc_bd .rc_bc .bd ul li
{background:url( no-repeat center

left;border-top:1px dotted #D1CFCF;}
/*Thư mục*/
#folder rc_bd .rc_bc .bd ul li {background:url(Link ảnh) no-repeat center left;border-top:1px dotted #D1CFCF;}
/*Bình luận mới nhất*/