Cascading Style Sheets
(CSS) – được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn
ngữ HTML và XHTML. Thay vì đặt các thẻ qui định kiểu dáng cho văn bản
HTML (hoặc XHTML) ngay trong nội dung của nó, bạn nên sử dụng CSS.
Các bước thay CSS:





Bài
viết này chia sẻ những kinh nghiệm của tôi trong quá trình xây dựng và
hoàn thiện Plus đến bây giờ, rút kết lại và chia sẻ với bạn bè, cho
những ai bắt đầu và tham khảo cho những ai đã viết blog nhưng còn chưa
hiểu biết nhiều về CSS.

Không
dài dòng, đầu tiên là việc trang trí cho cái bàn thờ của Plus (hay
thường gọi là nóc nhà). Mỗi người mỗi kiểu nhưng code tôi đưa ra hôm nay
là chung, theo sở thích của tôi, bạn nào cùng ánh mắt thẫm mĩ với tui
thì lấy về xài!




Nếu thích tạo nền cho cả ygma, giữ lại 2 thành phần tìm kiếm thì dùng code sau(chưa tối ưu CSS nha):

- Dòng đầu là cấm ko hiển thị tên blog.

- 2 dòng kế cuối là tạo border cho textbox tìm kiếm của 2 thành phần tìm kiếm.

- Dòng cuối là màu link cho ygma.

Nếu muốn menu như phía trên thì copy lại hen!

Tiếp theo, muốn làm cái banner thì dùng code sau:






#head {background:transparent url(Link_Banner) no-repeat top center;height:400px;padding:0px 0px 20px ;}




Thay
link hình vào, đổi chiều cao, chỉnh padding lại, thứ tự padding như
sau: top - phải - dưới - trái, nếu không đủ 4 cái như trên thì theo thứ
tự như vậy cho các padding, trừ 1 thông số là quy định chung cho 4 thông
số!


Tiếp theo là hình cho body, là phần tình từ các module chỗ Blast trở xuống đến đầu chỗ có phần: Kết quả bảo trợ.


Code như sau:




#bd{background:transparent url(Link_hình) no-repeat top center;;padding:0px 0px 20px 0px ;}






Rồi dưới đó là phần kế cuối: y3m, chứa phần: Kết quả bảo trợ... gì đó, sau đó cuối cùng là footer, code cũng giống như trên chỉ khác là đổi tên của nó lần lượt là: #ysm_bottom và #ft thôi.

Vậy là xong phần thân chính, giờ chuyển qua những phần nhỏ lẻ khác!


Tạo
hình cho module 150 hẹp: thường thì trong suốt hết các rc của nó,
sau đó dùng code quy định 3 phần: hd - bd - ft thôi. Đại đa số các bạn
thiết kế theme dùng cách này.


Code tham khảo phần Body:





.col-150 .rc_bd, #friendlist_module .rc_bd , #statistic .rc_bd, #update_date .rc_bd , #folder .rc_bd , #calendar .rc_bd ,
#search_module .rc_bd , #article_new .rc_bd , #subscribe_highlight .rc_bd , #comment_new .rc_bd
{background:transparent url(Link_hình) repeat-y top center;}








Phần bottom:





.col-150 .rc_ft, #friendlist_module .rc_ft , #statistic .rc_ft, #update_date .rc_ft , #folder .rc_ft , #calendar .rc_ft ,
#search_module .rc_ft, #article_new .rc_ft , #comment_new .rc_ft , #profile_highlight .rc_ft
{background:transparent url(Link_hình) no-repeat center bottom;height:45px;}




Phần top cũng giống như trên nhưng thường viết theo từng module tùy theo chức năng, thay đổi phần rc_ft bằng rc_hd là được.

Các code trên lưu ý phần rc_hd và rc_ft chỉnh chiều cao hình lại cho phù hợp!


Hình cho module 600 giữa trang chính cũng vậy, thay 150 bằng 600, tên các module lại mà thôi!


Cái khó tính nhất
là module bài viết, hiện mỗi người có 1 cách khác nhau trong thiết kế,
tui có 2 cách giới thiệu với mọi người như sau, các bạn tự coi link hình
và suy nghĩ rồi thiết kế hình giống hay tương tự như vậy nha:


Cách 01:





#article_list_module .rc_hd div{background:transparent
url(https://2img.net/h/i976.photobucket.com/albums/ae247/chantinh109/360plus/rc_hd_div.png)
100% 100% no-repeat !important;}
#article_list_module .rc_hd{background:transparent
url(https://2img.net/h/i976.photobucket.com/albums/ae247/chantinh109/360plus/rc_hd.png)
0 100% no-repeat !important;height:5px;}
#article_list_module .rc_bd{background:transparent
url(https://2img.net/h/i976.photobucket.com/albums/ae247/chantinh109/360plus/rc_bdn.png)
0 0 repeat-y !important;border-width:0
!important;border-color:transparent;}
#article_list_module .rc_bd .rc_bc{background:transparent
url(https://2img.net/h/i976.photobucket.com/albums/ae247/chantinh109/360plus/rc_bd_rc_bcn.png)
100% 0 repeat-y !important;border-width:0
!important;border-color:transparent;}
#article_list_module .rc_bd .rc_bc .bd{background:transparent
url(https://2img.net/h/i976.photobucket.com/albums/ae247/chantinh109/360plus/Nen2.png)
100% 0 repeat;}
#article_list_module .rc_ft{background:transparent
url(https://2img.net/h/i976.photobucket.com/albums/ae247/chantinh109/360plus/rc_ft.png)
0 0 no-repeat !important;}
#article_list_module .rc_ft div{background:transparent
url(https://2img.net/h/i976.photobucket.com/albums/ae247/chantinh109/360plus/rc_ft_div.png)
100% 0 no-repeat !important;}
#article_list_module .rc_bd .rc_bc .hd .titlebar{background:transparent
url(https://2img.net/h/i976.photobucket.com/albums/ae247/chantinh109/360plus/Et.png)
no-repeat left bottom;height:165px;}









Cách 02:





.col-600 .rc_hd
div{background:url(https://2img.net/h/i976.photobucket.com/albums/ae247/chantinh109/VNTeam/rc_hd_div_fix2.png)
no-repeat right bottom;height:30px;}
.col-600 .rc_ft
div{background:url(https://2img.net/h/i976.photobucket.com/albums/ae247/chantinh109/VNTeam/c600_rc_ft_div.png)
no-repeat right top;height:20px;}
.col-600
.rc_ft{background:url(https://2img.net/h/i976.photobucket.com/albums/ae247/chantinh109/VNTeam/c600_rc_ft.png)
left top;height:20px;}
.col-600 .rc_bd .rc_bc{background:transparent
url(https://2img.net/h/i976.photobucket.com/albums/ae247/chantinh109/VNTeam/c600_rc_bd_rc_bc.png)
repeat-y right top;border-style:none;}
.col-600 .rc_bd{background:#f5f5da
url(https://2img.net/h/i976.photobucket.com/albums/ae247/chantinh109/VNTeam/c600_rc_bd.png)
repeat-y left top;border:none;}

.col-600 .rc_hd {background:transparent
url(https://2img.net/h/i976.photobucket.com/albums/ae247/chantinh109/VNTeam/c600_rc_hd.png)
no-repeat left bottom;height:30px;}








Tùy khả năng thiết kế mà giao diện đẹp xấu khác nhau nha!


Rồi, tiếp tục là những cái nhỏ lẻ hơn nữa! Code trong suốt tất cả trang chính cuối bài viết sẽ gửi sau nha.


- Trong suốt tiêu đề module:





#bd .col-150 .mod_all .hd .titlebar h2,
#bd .col-600 .mod_all .hd .titlebar h2,
#bd .col-760 .mod_all .hd .titlebar h2,

#bd .row-920 .mod_all .hd .titlebar h2 {font-size:0;}








- Ngăn dòng bài viết:





.mod-alist .rc_bd .bd .more-posts ul li{border-style:none;background:transparent url(Link_hình) no-repeat bottom center;}







- Tạo hiệu ứng hover cho bài viết trên trang chính:




.mod-alist .rc_bd .bd .more-posts li:hover{background:url(Link_hình);border-width:1px;border-style:dashed;border-color:#fff;}








- Hover cho link liên kết toàn blog:




a:hover{color:#fff!important;text-shadow:0px 0px 5px 0px 0px 5px 0px 0px 5px #fff ;background-image:url(Link_hình);}








- Đổi ion:




.mod_all .rc_bd .bd ul li{list-style-type:none;margin-left:0;padding:0 0.5em 0 1.5em;}
#folder li{background:transparent url(Link_hình) no-repeat top left;}

#article_new li{background:transparent url(Link_hình) no-repeat top left;text-align:left;}
#comment_new h3,
#comment_new li{list-style-type:none;padding:0 0.5em 0 1em;background:transparent url(Link_hình) no-repeat top left;}
#comment_new li,
#statistic li{background:transparent url(Link_hình) no-repeat top left;text-align:left;}








- Trong suốt phần dưới Profile và phần y3m (phía trên footer) - code tối ưu:




#profile_highlight #profile_nav, #profile_highlight .yui3-menuitem-active,
#profile_highlight .yui3-menu-label-active, #profile_highlight .yui3-menu-label-menuvisible,
#profile_highlight .yui3-menu-corner, #profile_highlight .yui3-menu-corner div,
#profile_highlight .yui3-menu-corner-bl, #profile_highlight .yui3-menu-corner .yui3-menu-corner-tr,
#profile_highlight .yui3-menu-corner-br, #profile_highlight
#profilemorelinks
.yui3-menu-content{background:transparent;border-style:none;}
.ysm_bottom, .ysm_line, ysm_title{display:none!important;border-style:none;}
.yui3-menu-content {background:transparent !important;border-style:none;}







- Đổi link nickname thành hình động thay thế:




#profile_highlight .nickname{font-size:0;background:transparent url(Link_hình) no-repeat center bottom;height:140px;}








- Thay avata trong phần trả lời comment bằng hình khác:




.comment-reply .user{background:url(Link_hình) no-repeat top center;}
.comment-reply .user img {height:0px;}






- Code tham khảo phần comment:




#comments-listing{color:#fff;border:dashed 1px;}
#comments-listing ol li{border-top:1px dashed #fff !important;padding: 10px 5px 10px 5px;}






Code này sẽ tạo khung nét đứt phần comment,
và phần comment của khách sẽ biệt lập với phần trả lời của chủ nhà bằng
1 đường gạch đứt.

- Code tạo hiệu ứng hover cho phần comment:





.cmt-mod-alist #comments-listing ol li:hover{border-top:1px dashed
#fff;border-right:1px dashed #fff;border-left:1px dashed
#fff;border-bottom-style:dashed;border-bottom-color:#fff;border-bottom-width:1px;}








Nếu muốn thay bằng cái hình nền thì xem code background
mà thêm vô thay cho phần trong {} nha! Code trên chỉ đơn giản là tạo 1
khung nét đứt khi rê chuột mà thôi!

- Không hiển thị hình ảnh trong phần comment:


Code này hiệu dụng trong việc chống nick lạ spam hình ảnh xxx, đặc
biệt hữu dụng với những blog nổi bật (vì thường xuyên bị, vinhquanga3
cũng bị nhiều nhưng lúc trước khả năng viết CSS chưa được như bây giờ!).





#comment-list .bd ol li .comment .bd img{display:none;}







>> Dùng chung với đoạn code chống Spam Flash: #comment-list * embed{display:none;} nha.


- Không hiển thị phần "Nguồn trích dẫn + lời bình" trên trang chính:





.mod-alist .mod-alist-tagsbar .trackbacks-comment{display:none;}






- Đưa phần tóm tắt nội dung entry trên trang chính qua bên phải hình đại diện bài viết:




.more-posts .mod-alist .mod-alist-summary-bd .thumbnail{float:left;padding:0 10px 10px 10px;}
.more-posts ul li .mod-alist .mod-alist-summary-bd .content{margin-left: 153px;border: 1px dashed #00ff7f;padding: 9px;}








- Hình nền cho trang chính:




body.blog_my{background:url(Link_hình) #000000 no-repeat fixed bottom left;border-style:none;}





Màu sau hình là màu mặc định khi không có hình nền, nên để fixed để hình đứng yên khi cuộn chuột.

- Hình nền riêng cho entry (chế độ single_post):





#single_post {background:#000 url(Link_hình) no-repeat fixed top center;}







>> Chú ý: Khi không quy định hình nền bài viết chế độ single_post thì hình nền trang chính là mặc định luôn cho bài viết!



- Hình nền riêng cho mỗi trang khác:





body.blog_my_index, body.comment_listing, body.trackback_listing,
body.post_gb, body.blog_archives_folder, body.blog_archives_date,
body.blog_archives_all, body.post_rte, body.post_doodle, body.guestbook,
body.comment_list, body.subscribe_list, body.profile_view,
body.gallery, body.photo_big, body.slideshow, body.photo_upload_pc, body.photo_upload_gallery
{background:url(Link_hình) #000000 no-repeat fixed top;border-style:none;}









>> Có thể quy định hình nền riêng cho từng trang khác nhau nhưng không cần thiết như thế!

Còn đây, gởi mọi người code trong suốt toàn bộ trang chính, đã code những phần mới thay đổi:



#ygmatop,#ygmabot, .ysearch, .ysearch #ygmasrchfrm, #ygmasrchfrm fieldset, .yuimenubar .hd,
.yuimenubarnav .yuimenubaritem, .yuimenubaritemlabel, #blogsearch form,
#blogsearch .hd b, #blogsearch .hd u, #blogsearch .hd i{background:transparent;border-style:none;}
.yuimenubar{border-style:none;}

#ygmasrchfrm input, #blogsearch input{background:transparent;}

#blogsearch{display:none;}.ysearch{display:none;}

.col-150 .rc_bd .rc_bc .hd .titlebar .hd, .col-150 .rc_bd .rc_bc .hd .titlebar, .col-150 .rc_bd .rc_bc .bd,
.col-600 .rc_bd .rc_bc .hd .titlebar .hd, .col-600 .rc_bd .rc_bc .hd
.titlebar, .col-600 .rc_bd .rc_bc .bd, .col-600 .rc_bd .rc_bc .ft,
.row-760 .rc_bd .rc_bc .hd .titlebar .hd, .row-760 .rc_bd .rc_bc .hd
.titlebar, .row-760 .rc_bd .rc_bc .bd, .row-760 .rc_bd .rc_bc .ft,
.row-920 .rc_bd .rc_bc .hd .titlebar .hd, .row-920 .rc_bd .rc_bc .hd
.titlebar, .row-920 .rc_bd .rc_bc .bd, .row-920 .rc_bd .rc_bc .ft,
.cmt-mod-alist .comments-listing .hd, #comment_container li, #bd
.rte_toolbar, .mod-trackback #trackback-listing, .mod-trackback ul,
#blog_title .rc_bd .rc_bc .bd, #blast .rc_bc .bd, #blast .tail,
.pagination, #ft, #article_list_module .mod-alist-searchbox input.ipt,
#search_module input.textfield
{background:transparent;}

.rc_hd, .rc_hd div, .rc_bd, .rc_bd .rc_bc, .rc_ft, .rc_ft div{background:transparent;border-style:none;}
.cmt-mod-alist .comments-listing .bd, .mod-trackback .bd{background:transparent !important;}

.col-600 .rc_bd .rc_bc .hd .titlebar, .row-920 .rc_bd .rc_bc .hd .titlebar,
.row-760 .rc_bd .rc_bc .hd .titlebar {background:transparent;color:#FFE88B;}

#profile_highlight #profile_nav{background:none;}
#profile_highlight .yui3-menuitem-active, #profile_highlight .yui3-menu-label-active,
#profile_highlight .yui3-menu-label-menuvisible{background:none;}

#ft{background:transparent;font-size:0;}

.ysm_bottom,
.ysm_line, ysm_title{display:none!important;border-style:none;}
.yui3-menu-content {background:transparent !important;border-style:none;}

#bd .col-150 .mod_all .hd .titlebar h2 {font-size:0;}#bd .col-600 .mod_all .hd .titlebar h2 {font-size:0;}
#bd .col-760 .mod_all .hd .titlebar h2 {font-size:0;}#bd .row-920 .mod_all .hd .titlebar h2 {font-size:0;}

.blog_dummyselect .bd div, .blog_dummyselect .bd,
.yuimenu .bd {background:transparent url(https://2img.net/h/i1029.photobucket.com/albums/zz68/vinhquanga3/Plus360/hover.png);}
.first-of-type li:hover{background:transparent url(https://2img.net/h/i1029.photobucket.com/albums/zz68/vinhquanga3/Plus360/hover.png);}

#profile_highlight .yui3-menu-corner, #profile_highlight .yui3-menu-corner div,
#profile_highlight
.yui3-menu-corner-bl, #profile_highlight .yui3-menu-corner
.yui3-menu-corner-tr, #profile_highlight .yui3-menu-corner-br,
#profile_highlight #profilemorelinks .yui3-menu-content{background:transparent;border-style:none;}












>> Code trên có dư nhưng không ảnh hưởng nhiều, chưa được rút gọn tối ưu nhưng dùng hiệu quả!

Có
thể những dòng code trên chưa đáp ứng tất cả những yêu cầu nhưng giải
quyết cơ bản những vấn đề thông dụng, hiểu được những code trên thì
chúng ta có thể tự viết code mà dùng, không cần tìm code của người khác
(view page source tìm những thành phần của nó và viết ra).