Mã CSS làm theme cho 360 plus potx

32 339 0
Mã CSS làm theme cho 360 plus potx

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

1. Mã CSS làm theme cho 360 plus! :D Để 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;} Chèn hình nền cho cái module thông tin cá nhân (module chứa avatar): #profile_highlight_module .rc_bd .rc_bc {background:url(link ảnh here) #653e16 top right repeat;} Chèn hình nền cho module fiendlist: #friendlist_module .rc_bd {background:url(link ảnh here) #653e16 top right repeat;} Chèn hình nền cho module Bài Mới: #article_new .rc_bd .rc_bc {background:url(link ảnh here) #653e16 top right repeat;} Chèn hình nền cho module Thư Mục Riêng: #folder .rc_bd .rc_bc {background:url(link ảnh here) #653e16 top right repeat;} Chèn hình nền cho module Comment mới: #comment_new .rc_bd .rc_bc {background:url(link ảnh here) #653e16 top right repeat;} Chèn hình nền cho module Thống Kê của plus #statistic .rc_bd .rc_bc {background:url(link ảnh here) #653e16 top right repeat;} Chèn hình nền cho module Blog yêu thích #subscribe_highlight .rc_bd .rc_bc {background:url(link ảnh here) #653e16 top right repeat;} Chèn hình nền cho module tự tạo, gồm 10 module từ 10001 => 10010, thay số tương ứng với module tự tạo mà bạn muốn thay nền: #user_mod_10001 .rc_bd .rc_bc{background:url(link ảnh here) #653e16 top right repeat;} Chèn hình nền cho module Lịch #calendar .rc_bd .rc_bc {background:url(link ảnh here) #653e16 top right repeat;} Đ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 blog: a:hover {text-decoration:none; color:#D570EE; text-decoration:none; font-weight:bold; background-image:url(Link ảnh here);} Chọn 1 trong các mẫu ưng ý dưới đây mà bạn thích để thêm vào "Link ảnh here", khi rê chuột vào sẽ hiện hình đó: Làm đường viền các module trong suốt: .rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div{background:transparent url(http://nktpro.com/360plus/rc_ne.png) no-repeat right bottom;} .rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:transparent url(http://nktpro.com/360plus/rc_nw.png) 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(http://nktpro.com/360plus/rc_e.png) repeat-y right top;} .rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:transparent url(http://nktpro.com/360plus/rc_w.png) repeat-y 0% 50%;} .rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd-article .rc_ft div {background:transparent url(http://nktpro.com/360plus/rc_se.png) no-repeat right top;} .rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:transparent url(http://nktpro.com/360plus/rc_sw.png) 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(http://nktpro.com/360plus/transparent_bg.png);} #blast .rc_ft {background:transparent url(http://nktpro.com/360plus/blast-sw.png) no- repeat left bottom;} #blast .rc_ft div {background:transparent url(http://nktpro.com/360plus/blast-se.png) no- repeat right bottom;} Chèn hình nền cho tựa đề Entry: .mod-alist-full .main-hd{background:#FFFFFF url(link ảnh here)} Chèn hình nền cho nội dung Entry: .mod-alist-full .main-bd{background:#FFFFFF url(link ảnh here)} Thay hình nền cho tất cả các tựa đề module: #article_list_module .rc_bd .rc_bc .hd, .hd .titlebar .hd, #friendlist_module .hd, .mod- relatives .titlebar, .col-150 .rc_bd .rc_bc .hd .titlebar .hd, .col-150 .rc_bd .rc_bc .hd .titlebar { background:transparent url(Link ảnh here) repeat; } Thay hình nền cho tất cả các nội dung của module phụ (các module nhỏ, module con): .col-150 .rc_bd .rc_bc .bd /* JW */ {background:transparent url(Link ảnh here);color:#FFFFFF;} Code chèn hình thay nút trang chủ Code: div.backhomtbtn a.backtomyblog {background:url(Thay link bên dưới Vào đây) no- repeat;height:98px;} 98 la` chiều cao của hinh` Tùy mỗi hình mà bạn chọn ấn định kích thước Height cho phù hợp nhá Còn đây là một số mẫu sưu tầm được bạn nào thích thì xài nhá bạn không thích thì có thể đưa hình khác vào cũng được nếu như muốn cách lấy link : chuột phải chọn properties -> coppy adress -> pase vào css cách lấy chiều cao : chuột phải chọn properties -> side ( vd : 40x50px -> chiều cao :50) Thủ Thuật làm biến mất Tên Module !! Trong lúc thiết kế Blog hầu như blogger nào cũng sử dụng thêm vài Module tự tạo để chèn ảnh, nhạc hay các đọan Video yêu thích Hoặc 1 số Blog lại muốn bỏ hết các đường viền, các nền tiêu đề theo ý thích của mình. Nhưng khổ nỗi lại không thể bỏ được cái dòng chữ ghi tên Blog Điều này có thể phá vỡ bố cục 1 số Blog. Tuy nhiên, vẫn có cách xóa dòng chữ tên Blog đi, còn làm thế nào thì mời các bạn xem tiếp nhé . 1> Đầu tiên là dành cho Module tự tạo : o Đối với Module tự tạo, đầu tiên các bạn phải xác định xem số thứ tự Module ( Module tự tạo 1, module tự tạo 2 ) o Sau đó thay vào tên Module tự tạo là : #user_mod_1000x ( x là số thứ tự Module đó). Ví dụ: Đối với Module tự tạo số 1 : #user_mod_10001 o Sau khi đã xác định xong tên Module tự tạo, các bạn thay vào đọan Code dưới đây và paste vào CSS nhé Code: #user_mod_1000X h2{color:transparent} 2> Đối với Module sẵn có : Ít ai muốn làm mất tên Module sẵn có lắm, tuy nhiên mình cũng post cho 1 số bạn nếu muốn thì dùng nhé : a- Module Profile : Code: #profile_hightlight h2{color:transparent} Thay đổi màu chữ và link tại một số Module trong blog [Update] Bài viết thường xuyên sử dụng đến phần thay đổi mã màu, tức là bạn sẽ phải thay dòng chữ #mã_màu thành mã màu HEX phù hợp, vì thế nếu bạn nào còn chưa biết thay mã màu phù hợp mình thích thì nên qua Bài Này để lấy mã màu nhé ! 1 - Thay đổi màu chữ và link cho toàn bộ Blog : a ) Màu chữ : Nếu bạn muốn thay đổi một lần toàn bộ chữ trong Blog thì dùng Code này nhé, nên đặt ở đầu CSS hoặc đâu cũng được. Nhưng nếu bạn đã sử dụng Code thay màu chữ một số phần khác thì những Code đó sẽ vẫn còn tác dụng đó . Code: body{color: #mã_màu} b ) Màu Link: Bạn nên đặt gần cuối CSS nhé !! Code: a{color: #mã_màu} 2 - Màu chữ và Link cho Blast : a - Chữ : Code: #blast .rc_bc .bd{color: #mã_màu} b - Link : Code: #blast .rc_bc .bd a{color: #mã_màu} 3 - Blog Tôi Thích : Phần này có lẽ nhiều bạn thắc mắc lắm nhỉ [IMG]file:///C:/DOCUME%7E1/lEt %27sgO%21/LOCALS%7E1/Temp/msohtml1/01/clip_image001.gif[/IMG]? a - Màu chữ : Code: #subscribe_highlight .rc_bc .bd p{color: #mã_màu;} b - Màu Link : Code: #subscribe_highlight .rc_bc .bd a{color: #mã_màu;} 4 - Blog về Tôi : Đây cũng là Module được nhiều bạn thắc mắc [IMG]file:///C:/DOCUME%7E1/lEt %27sgO%21/LOCALS%7E1/Temp/msohtml1/01/clip_image002.gif[/IMG] a - Màu chữ : Code: #mod-tagged-frd-article .bd li ins a{color: #mã_màu;} b - Màu Link : Code: #mod-tagged-frd-article .bd a{color: #mã_màu;} 5 - Màu chữ, link trong comment : Để thay màu sắc chữ và link trong ô comment các bạn có thể dùng Code sau : Code #comment_container * a {color:#ma_mau;} #comment_container * .content {color:#ma_mau;} #comments-listing * ins {color:#ma_mau;} o #ma_mau : là màu link. o #ma_mau : là màu chữ o #ma_mau : là màu của dòng : "cách đây fút" 6 - Module "Bài viết về bạn hoặc Tag có tên bạn" : a - Màu chữ : Code: .mod-relatives-1 .bd li a{color: #mã_màu;} b - Màu Link : Code: .mod-relatives-1 .bd li ins{color: #mã_màu;} 7 - Màu chữ Tiêu đề bài viết : Theo yêu cầu một số bạn nên mình cũng post thêm phần này : Code: #article_list_module .rc_bd .rc_bc .bd .main-bd .mod-alist .mod-alist-titlebar-1 a{color: #mã_màu;} 1. I. Code làm trong suốt nền và tiêu đề các module chính và module phụ 1. Đoạn code sau sẽ làm trong suốt nền cho các module chính và phụ ở blog bạn Code: .col-150 .rc_bd .rc_bc .bd {background:transparent;} .col-600 .rc_bd .rc_bc .bd {background:transparent;} .row-920 .rc_bd .rc_bc .bd {background:transparent;} Chú thích: thông số 150 là cho module nhỏ, 600 là module chính to (ví dụ như mục bài viết của bạn), và 920 là module to nhất trong blog bạn, nếu bạn ko muốn module nào trong suốt thì bỏ cái dòng làm trong suốt của module đó đi. 2. Còn đây là code làm nền tiêu đề module trong suốt Code: .col-150 .rc_bd .rc_bc .hd .titlebar .hd,.col-150 .rc_bd .rc_bc .hd .titlebar{background:transparent;} .col-600 .rc_bd .rc_bc .hd .titlebar .hd,.col-600 .rc_bd .rc_bc .hd .titlebar{background:transparent;} .row-920 .rc_bd .rc_bc .hd .titlebar .hd,.row-920 .rc_bd .rc_bc .hd .titlebar{background:transparent;} II. Đối với module tự tạo 1. Code làm trong suốt nền tiêu đề: Code: #user_mod_1000X .rc_bd .rc_bc .hd .titlebar .hd,#user_mod_1000X .rc_bd .rc_bc .hd .titlebar{background:transparent;} 2. Code làm trong suốt nền module: Code: #user_mod_1000X .rc_bd .rc_bc .bd {background:transparent;} III. Code làm trong suốt một số module khác 1. Module tâm trạng Code: #mod_lifeline div.bd, #mod_lifeline div.rc_bc {background:transparent! important;} 2. Module friendlist Code: #friendlist_module .rc_bd .rc_bc .hd .titlebar .hd{background:transparent;} 3. Làm trong suốt blast Code: #blast .rc_bc .bd{background:transparent;} #blast .rc_ft, #blast .rc_ft div{background:transparent no-repeat left top;} #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 ;} 4. Làm trong module tên blog Code: #blog_title .bd{background:transparent} 5. Làm trong suốt tổng số trang (dưới entry, không biết phải gọi là module gì) Code: .mod-alist-summary .pagination, .mod-alist-full .pagination{background:transparent} 6. Làm trong suốt nền cmm (khung bình luận của bài viết) Code: .cmt-mod-alist #comments-listing .extend-hd, .cmt-mod-alist #comments- listing .extend-bd .alist-comment {background:none;} .alist-comment #comment_container *, .cmt-mod-alist #comments- listing , .cmt-mod-alist #comments-listing .alist-comment {background:none;} Chú thích: Code này chỉ nên sử dụng khi blog bạn thiên về một background lớn bao quát toàn blog, và thiên về sử dụng trong suốt các module 7. Làm trong suốt viền các module Code: #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 ;} Chắc là đủ rồi nhỉ ! Chú ý ngoài các cách trên, không nhất thiết bạn phải làm trong suốt cho toàn bộ module trong blog bạn, thay vào đó các bạn chỉ cần làm trong suốt một số module cần thiết, nó cũng không kém phần độc đáo đâu IV. Cách làm trong suốt nâng cao Phần này các bạn có thể không cần phải đọc 1. Làm trong suốt phần đầu trang của blog, một số người gọi là black box Thường thì cái này làm trong suốt cũng được và ko làm trong suốt cũng được, như mình là cứ để nguyên thôi Code: #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{background:transparent;} #blog_masshead .bd{background:transparent;} #blog_masshead{background:transparent} 2. Làm trong suốt footer của blog Là phần dưới cùng của blog, có ghi bản quyền, các bạn có thể làm trong suốt nó nếu các bạn không thích Code: #footer .ft .provider p, #footer .ft .info p, #footer .ft .rights p, #footer .ft .privacy p, #footer .ft .disclaimer p, #footer .ft .provider h4, #footer a, .rights, #footer {font-size:0px;color:transparent;} [...]... url(http://nktpro.com/36 0plus/ rc_sw.png) 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(http://nktpro.com/36 0plus/ transparent_bg.png);} #blast rc_ft {background:transparent url(http://nktpro.com/36 0plus/ blast-sw.png) no-repeat left bottom;} #blast rc_ft div {background:transparent url(http://nktpro.com/36 0plus/ blast-se.png)... #000000: là giá trị màu chữ đen Mã: #blast A, #blast A:hover{ COLOR:#000000;} g Code làm trong suốt viền các module Mã: rc div, #subscribe_highlight rc div, #mod-tagged-frd-article rc div{background:transparent url(http://nktpro.com/36 0plus/ rc_ne.png) no-repeat right bottom;} rc, #subscribe_highlight rc, #mod-tagged-frd-article rc {background:transparent url(http://nktpro.com/36 0plus/ rc_nw.png) no-repeat... bottom; height: X px;} /* Code làm top và bottom như blog 360* / Mã: #blast A, #blast A:hover{ COLOR: #; } body{ background:/*Màu background*/;} #doc2, #doc{ background:/*Màu background*/ url(link file ảnh của top theme ) no-repeat center top;} #bd{ background:transparent url(link file ảnh của bottom theme ) no-repeat center bottom;} c Theme nền cố định (1 hình duy nhất): Nền theme sẽ khác (a.) 1 chút,... div.rc_bc{background:transparent url(http://nktpro.com/36 0plus/ rc_e.png) repeat-y right top;} rc_bd, #subscribe_highlight rc_bd, #mod-tagged-frd-article rc_bd {background:transparent url(http://nktpro.com/36 0plus/ rc_w.png) repeat-y 0% 50%;} rc_ft div, #subscribe_highlight rc_ft div, #mod-tagged-frd-article rc_ft div {background:transparent url(http://nktpro.com/36 0plus/ rc_se.png) no-repeat right top;} rc_ft,... border="0" alt="Ruby"> (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;}... 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à... nào để trong suốt (trước khi nhảy vào làm trong suốt nền hoàn toàn) Bạn có thể hiệu chỉnh riêng Module : “Thiết kế” >“Bài viết mới”: chỉnh độ mờ nhạt, nền màu phù hợp với chữ viết 2> BACKGROUND CHUNG CHO CÁC MODULE: (Chèn code vào khung "CSS" ) a Module chính (phần module ở giữa): ** Màu nền Module chính: Chèn đoạn code dưới đây vào ô CSS : + Ảnh nền là trong suốt: Mã: col-600 rc_bd rc_bc bd {background:transparent;}... {background:transparent;} 3> BACKGROUND RIÊNG CHO TỪNG MODULE: **Notes: 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)... dưới đây và ô CSS : (link ảnh nền: chèn link ảnh nền mà bạn đã up lên web) Mã: /* hình nền cho toàn blog */ BODY.blog_my {BACKGROUND:url(link ảnh) #000000 fixed;} //Thông số fixed là để làm nền đứng yên không chuyển động theo thanh cuộn rất hợp với nền dạng partern Nếu không thích bạn có thể loại bỏ thông số này! Chọn “Lưu”, hoặc nhấn F5 để load Blog 1 hoặc 2 lần, blog sẽ hiển thị Theme d Bố trí lại... itlebar/25.gif http://i118.photobucket.com/albums/o itlebar/26.jpg http://i118.photobucket.com/albums/o itlebar/27.gif http://i118.photobucket.com/albums/o itlebar/28.jpg Code làm đồng hồ cho 36 0plus Nếu thích thì hãy xem cách làm như sau nhé : - Đầu tiên vào trang http://www.clocklink.com/ - 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 . 1. Mã CSS làm theme cho 360 plus! :D Để dùng mã CSS bạn hãy click vào "Thiết Kế", chọn " ;Theme& quot;, chọn chế độ tự chỉnh sửa, kéo xuống dòng " ;CSS& quot;. Sau. phần thay đổi mã màu, tức là bạn sẽ phải thay dòng chữ #mã_ màu thành mã màu HEX phù hợp, vì thế nếu bạn nào còn chưa biết thay mã màu phù hợp mình thích thì nên qua Bài Này để lấy mã màu nhé. . Code: body{color: #mã_ màu} b ) Màu Link: Bạn nên đặt gần cuối CSS nhé !! Code: a{color: #mã_ màu} 2 - Màu chữ và Link cho Blast : a - Chữ : Code: #blast .rc_bc .bd{color: #mã_ màu} b - Link : Code: #blast

Ngày đăng: 03/07/2014, 08:20

Từ khóa liên quan

Tài liệu cùng người dùng

Tài liệu liên quan