Mã CSS làm theme cho 360 plus

Để dùng mã CSS bạn hãy click vào "Thiết Kế", chọn "Theme", chọn chế độ tự chỉnh sửa, kéo xuống dòng "CSS". Sau đó copy những đoạn CSS mà bạn thích sau đây vào đó, thay "link ảnh" bằng link của hình bạn muốn dùng để làm nền.

 

Ảnh nền toàn blog bất động:

BODY.blog_my {BACKGROUND:url(link ảnh here) #000000 fixed;}

 

Ảnh nền Top - Bottom như 360 cũ:

#blast A, #blast A:hover{

COLOR: #;

}

body{

background:/*Màu background*/;}

 

#doc2, #doc{

background:/*Màu background*/ url( Link ảnh Top) no-repeat center top;}

 

#bd{

background:transparent url( Link ảnh Bottom) no-repeat center bottom;}

 

 

doc32 trang | Chuyên mục: CSS | Chia sẻ: dkS00TYs | Lượt xem: 2312 | Lượt tải: 1download
Tóm tắt nội dung Mã CSS làm theme cho 360 plus, để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
: nếu muốn làm trong suốt nền các module tòan bộ cần fải để code màu thành transparent, và chọn hình nền trong suốt!a. Ảnh nền theme của phần blog:Nếu để ảnh tràn toàn blog nên đặt là fixed như sau:Mã:BODY.blog_my {BACKGROUND:url(link hình) #000000 fixed;} b. Ảnh nền Bảng tin nhắn:Mã:BODY.guestbook {BACKGROUND:url(link hình) #000000 fixed;} c. Ảnh nền của bộ đếm Statistic:(Có thể thay bằng ảnh động, bạn nhớ kích thước của ảnhko nên lớn quá 30 pixels):Mã:#statistic .bd {background:#FFFFFF url(link hình);} d. Ảnh nền của phần comments:(Nên dùng ảnh màu thật nhạt, ảnh tĩnh đuôi jpg nếu ko sẽ che hết chữ):Mã:#comment_new .bd {background:#FFFFFF url(link hình);} d. Ảnh nền của phần Thư mục (tag):Có thể dùng ảnh dài, bởi tag càng nhiều nó sẽ càng dài ra:Mã:#folder .bd {background:#FFFFFF url(link hình);} e. Ảnh nền của phần lịch (cố định kích cỡ):Mã:#calendar .bd {background:#FFFFFF url( link hình);} f. Ảnh nền của trang Profiles:Mã:BODY.profile_view {BACKGROUND:url (link hình) #000000 fixed;} g. Ảnh nền trong mỗi Entry:Mã:.mod-alist-full .main-bd{background:#FFFFFF url(link hình)} h. Ảnh nền của tiêu đề mỗi Entry:Mã:.mod-alist-full .main-hd{background:#FFFFFF url(link hình)} i. Chèn hình nền vào module tự tạo:(Riêng phần này: Chèn code trực tiếp vào module đó)( Link hình link tới 1 trang khác)Mã: (Link hình không link tới trang khác)Mã: j. Ảnh nền phần tâm trạng:Mã:#mod_lifeline .rc_bd .rc_bc .bd {background:url(link hình) left top;} 4> 1 SỐ THỦ THUẬT KHÁC:Lưu ý: Tất các code này đều chèn trực tiếp vào :"Thiết kế"--> "Theme"--> "Tự chỉnh sửa theme"--> Khung "CSS"a. Canh phải tiêu đề:Mã:/* canh phải tiêu đề module */.hd .titlebar .hd h2{text-align:right;} Mục đích canh phải các tiêu đề là để thêm các icon vào bên trái mỗi module, khi đó tiêu đề sẽ không bị chồng lên icon.Thật ra canh phải tiêu đề hoàn toàn tất cả các module cũng ko hẳn là cách hay, vì tiêu đề của mỗi module có độ dài ngắn khác nhau, cho nên với module có tiêu đề ngắn nhìn ko đc hay lắm. Các bạn có thể tùy vào từng module mà canh phải hoặc canh giữa cho phù hợp, đồng thời có thể tùy chỉnh vị trí của ảnh nền cho phù hợp hơn nữa bằng cách thay đổi giá trị của 2 tham số phía sau url của ảnh:VD:Mã:background:transparent url(link hình) no-repeat XY;text-align:{left/right/center}; X là chiều thằng đứng, Y là chiều ngang tính theo đơn vị pixel.Như bình thường mọi người thường để X Y là "left top" để căn vào góc trên bên trái. Chẳng hạn giờ Ruby muốn icon chèn vào lùi vào trong (dịch sang bên phải) 5 pixels thì code là:Mã:background:transparent url(link hình) no-repeat 5px top; Nếu bạn chèn icon vào thẻ h2 còn background của title bar chèn vào class .hd thì 2 cái này hoàn toàn có thể sử dụng đồng thời, chỉ có điều là độ trong suốt của background sẽ tăng lên một chút tùy vào độ opacity của 2 ảnh icon và background.b. Thêm icon cho mỗi module: vị trí phía bên trái:/* icon các module */Mã:/* bảng thống kê */#statistic h2{background:transparent url( no-repeat left top;} Mã:/* Bài mới đăng */#article_new h2{background:transparent url( no-repeat left top;} Mã:/* Ảnh trong blog */#photo_highlight h2{background:transparent url( no-repeat left top;}.mod-comment-new .titlebar .hd h2{background:transparent url( no-repeat left top;} Mã:/* Thư mục riêng */#folder h2{background:transparent url( no-repeat left top;} Mã:/* Cập nhật ngày */#update_date h2{background:transparent url( no-repeat left top;} Mã:/* RSS */#rss_output .bd a{height:25px;background:transparent url( no-repeat left top;} Mã:/* Tìm kiếm */#search_module h2{ background:transparent url( no-repeat left top;} Mã:/* Bình luận mới nhất */#comment_new .bd ul li {background:transparent url(link ảnh) no-repeat left top;} Mã:/* Thư mục riêng */#folder .bd ul li {background:transparent url(link ảnh) no-repeat left top;} Các link ảnh các bạn có thể thay đổi bằng cái icon khác. Khuyên dùng định dạng .png với nền trong suốt cho đẹp (kích thước chuẩn là 26x26 hoặc 13x13, chọn ảnh động thì càng đẹp^^)c. Thay đổi con trỏ trên blog theo ý mình:Mã:body{cursor: x;}a:hover{cursor: y;} Trong đó x là tuỳ chọn cho con trỏ trên toàn bộ blog của bạn, y là con trỏ hiển thị khi đặt lên một liên kết, dưới đây là danh sách con trỏ được hỗ trợ:pointer crosshair n-resize w-resize ne-resize nw-resize move wait help d. Code chèn hình động khi rê chuột vào các link:/* Đoạn code này làm cho hình trái tim xuất hiện khi chuột rê vào các link trên toàn blog*/Mã:a:hover{text-decoration:none;color:#D570EE;text-decoration:none;font-weight:bold;background-image:url(link ảnh);} e. Chỉnh độ dài của 1 module tự tạo thì bạn vào CSS gõ đoạn code tương tự như sau:Mã:#user_mod_1000X .rc_bd .rc_bc .bd {height:Ypx;} Trong đó X là số thứ tự của module, từ 1 đến 10, còn Y là chiều dài của module tính theo đơn vị pixel.f. Màu nền phần chữ trong blast: #000000: là giá trị màu chữ đenMã:#blast A, #blast A:hover{COLOR:#000000;} g. Code làm trong suốt viền các moduleMã:.rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div{background:transparent url( no-repeat right bottom;}.rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:transparent url( no-repeat left bottom;}.rc_bd div.rc_bc, #subscribe_highlight .rc_bd div.rc_bc, #mod-tagged-frd-article .rc_bd div.rc_bc{background:transparent url( repeat-y right top;}.rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:transparent url( repeat-y 0% 50%;}.rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd-article .rc_ft div {background:transparent url( no-repeat right top;}.rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:transparent url( no-repeat left top;}.rc_bc .bd, #subscribe_highlight .rc_bc .bd, #mod-tagged-frd-article .rc_bc .bd {background-color:transparent;background-image:url(}#blast .rc_ft {background:transparent url( no-repeat left bottom;}#blast .rc_ft div {background:transparent url( no-repeat right bottom;} h. Khung bài viết dành cho Blog:Phần này chèn trực tiếp vào entry (đánh dấu vào ô HTML)Mã:"nội dung entry "Code để thay nền thanh tiêu đề của các module .col-150 .rc_bd .rc_bc .hd .titlebar .hd, .col-150 .rc_bd .rc_bc .hd .titlebar, .col-600 .rc_bd .rc_bc .hd .titlebar .hd, .col-600 .rc_bd .rc_bc .hd .titlebar, .row-920 .rc_bd .rc_bc .hd .titlebar .hd, .row-920 .rc_bd .rc_bc .hd .titlebar {background:transparent url( repeat-x left top;} Các bạn có thể thay link đó bằng các hình thanh tiêu đề khác :                             Code làm đồng hồ cho 360plusNếu thích thì hãy xem cách làm như sau nhé : - Đầu tiên vào trang - Sau đó Click vào Gallery . Tại đây có khá nhìu thể loại đồng hồ rất đẹp, tha hồ lựa chọn nhé - Sau khi đã ưng ý mẫu đồng hồ nào, bạn click vào View HTML fía dưới đồng hồ nhé- 1 Popup hiện ra, Bạn click vào Accept nhé.- Bạn chọn múi giờ là GT + 7 ( múi giờ Việt Nam )- Và Copy đoạn Code bên dưới .- Sau đó tạo 1 Module mới ở Blog bạn, rồi Paste đoạn Code đó vào là xongTrang trí Blast1_Đầu tiên là code làm trong suốt nền cho Blast :Code:#blast .rc div {background:transparent;}#blast .rc {background:transparent;} #blast .rc_bd div.rc_bc {background:transparent ;}#blast .rc_bd {background:transparent ;}#blast .rc_ft {background:transparent ;} #blast .rc_ft div {background:transparent ;}#blast .rc_bc .bd{background-color:transparent}_Nếu bạn đã sử dụng code này trong bài 4Làm Trong Suốt Blog Hoàn Toàn Và làm Mất Đường Viền Thì Vô Đây rồi thì thôi nếu chưa thì bỏ vào css nhá 2_làm trong suốt các đường viền quanh Blast:Nếu bạn nào có dùng Code Border cho blog, thì sẽ bị dính vài nét border ( đường viền ) vào Blast, Code sau có thể làm mất các đường viền phiền toái này :Code:#blast .rc div {background:transparent;}#blast .rc {background:transparent;} #blast .rc_bd div.rc_bc {background:transparent ;}#blast .rc_bd {background:transparent ;}#blast .rc_ft {background:transparent ;} #blast .rc_ft div {background:transparent ;}3_Tiếp theo là Code thay nền cho blastCode :
#blast .rc_bc .bd{background-color:transparent;background-image:url(Link Ảnh);}
4_Thay đổi font chữ ,màu sắc Kich Thước chữ cho câu Blast
Phần này chắc có nhiều u thắc mắc lắm nhở .Vì vậy Hôm nay viết về code cho phần blast này mình cũng cung cấp sẵn thay dổi chữ cho phần này .và bây giờ là code 
a_Đối với chữ Blast ko chèn Link : Code:
#blast .rc_bc .bd {font-weight:bold;font-style:italic;color:#mã_màu;font-size:110%;} 
b_Đối với chữ Blast có chèn link :
Code:
#blast .rc_bc .bd a{font-weight:bold;font-style:italic;color:#mã_màu;font-size:110%;}
Phần font-size:110% là thay đổi cỡ chữ bạn có thể thay lại có thể là 100% or 120% cỡ chữ mà bạn thích 5_Thay đổi viền và hình nền cho Blast Code;
#blast .rc_bc .bd{background-color:transparent;background-image:url(Link hình);}
#blast .rc_ft, #blast .rc_ft div{background:transparent no-repeat left top;}#blast .rc div {background:transparent url(Link hình) no-repeat right top;}#blast .rc {background:transparent url(Link hình) no-repeat left top;} #blast .rc_bd div.rc_bc {background:transparent url(Link hình) repeat-y right top;} #blast .rc_bd {background:transparent url(Link hình) repeat-y ;}#blast .rc_ft {background:transparent url(Link hình) no-repeat left top;}#blast .rc_ft div {background:transparent url(Link hình) no-repeat right top;}
6_Thay đổi chiều cao của Blast
Code :#blast .bd {height:556px
Vậy là xong riêng phần cho Blast rồi nhá vui lòng đọc kĩ bài viết rồi thay đổi dùm nhé1 số hình cho blast đây:
Hiệu ứng tuyết rơi#head{background:transparent url( center bottom;}#bd{background:transparent url( center bottom;} 

File đính kèm:

  • docMã CSS làm theme cho 360 plus.doc
Tài liệu liên quan