Hướng dẫn thiết kế Theme Module cột nhỏ

http://i474.photobucket.com/albums/rr106/simplexshare/body/body1.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body10.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body11.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body12.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body13.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body14.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body15.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body16.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body17.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body2.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body3.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body4.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body5.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body6.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body7.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body8.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body9.png

Code của phần dưới (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 ,
#subscribe_highlight .rc_ft ,
#comment_new .rc_ft {background:transparent url(Link Hình) no-repeat center top;height:17px;}




Các mẫu BOTTOM để bạn lựa chọn : (copy và thay vào phần Link Hình)
(bạn nên chọn phần body và phần bottom giống màu nhau)

http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom1.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom10.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom11.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom12.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom13.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom14.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom15.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom16.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom17.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom2.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom3.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom4.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom5.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom6.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom7.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom8.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom9.png

Code của phần Head (Tên tiêu đề)


.col-150 .rc_bd  .rc_bc .hd .titlebar .hd ,
#friendlist_module .hd .titlebar .hd   ,
#statistic .hd .titlebar .hd  ,
#update_date .hd .titlebar .hd   ,
#folder .hd .titlebar .hd   ,
#calendar .hd .titlebar,
#search_module .hd .titlebar .hd   ,
#article_new .hd .titlebar .hd   ,
#subscribe_highlight .hd .titlebar .hd {background:transparent url(Link Hình Head Nhỏ);}

/* Head Lớn (Bình Luận Mới Nhất) */
#comment_new .hd .titlebar .hd {background:transparent url(Link Hình Head Lớn);}


Các mẫu HEAD để bạn lựa chọn : (copy và thay vào phần Link Hình)
- Bởi vì Head và phần Top phải tương ứng với nhau nên trước mắt mình chỉ có 1 mẫu Head. Bạn thay link vào head lớn và head nhỏ. Head lớn dành cho các module nào có tên dài đến 2 hàng.

http://i474.photobucket.com/albums/rr106/simplexshare/head/head.png



http://i474.photobucket.com/albums/rr106/simplexshare/head/head_H.png

Code của phần TOP (Phần Trên Cùng)

.col-150 .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#article_new .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#search_module .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#calendar .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#folder .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#update_date .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#statistic .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#friendlist_module .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#comment_new .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#subscribe_highlight .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#user_mod_10001 .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}


Code áp dụng chung (lấy phần này hoặc lấy phần trên, không được lấy cả 2)


.col-150 .rc,
#article_new .rc ,
#search_module .rc ,
#calendar .rc,
#folder .rc ,
#update_date .rc,
#statistic .rc ,
#friendlist_module .rc ,
#comment_new .rc ,
#subscribe_highlight .rc ,
#user_mod_10001 .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}



Các mẫu TOP để bạn lựa chọn : (copy và thay vào phần Link Hình)
- Các bạn có thể chọn bất cứ mẫu TOP nào mình thích, miễn sao nó hợp lý là được.
- Ở phần code dùng chung, chỉ cần sử dụng 1 link duy nhất, tất cả các module trong cột nhỏ đều được áp dụng.

http://i474.photobucket.com/albums/rr106/simplexshare/Top/search1.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/search2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/search3.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/search4.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/search5.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/search6.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic10.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic11.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic3.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic4.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic5.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic6.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic7.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic8.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic9.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/thongtin.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/time.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/update_date.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/update_date2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/update_date3.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/update_date4.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/update_date5.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/aminal2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/animal1.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/animal2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/animal3.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/animal4.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/animal5.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/animal6.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/animal7.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/animal8.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/animal9.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/book.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/book2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/calendar2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/calendar3.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/calendar4.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/calendar5.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/camera.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/camera2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/carlendar1.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/clock.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/clock2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/comment_new2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/comment_new3.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/comment_new4.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/comment_new_top.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/commpass.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/download_browser_top.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/favorite.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/favorite2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/favorite3.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder10.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder11.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder12.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder13.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder14.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder15.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder16.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder17.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder18.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder19.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder3.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder4.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder5.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder6.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder7.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder8.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder9.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/photo.png



Code chỉnh sửa
- Phần code này bắt buộc phải có
- Code này sẽ làm cho các module ở cột nhỏ phù hợp với cách thiết kế hiện tại
- Bạn đừng thay đổi bất cứ cái gì trong phần này, chỉ việc copy và Paste


.col-150 .rc_bd div.rc_bc,
.col-150 .rc_ft div,
.col-150 .hd .titlebar,
.col-150 .rc div,
.col-150 .rc_bd  .rc_bc .bd  {background:transparent;}

#comment_new .rc_bd div.rc_bc,
#comment_new .rc_ft div,
#comment_new .hd .titlebar,
#comment_new .rc div,
#comment_new .rc_bd  .rc_bc .bd  {background:transparent;}

#subscribe_highlight .rc_bd div.rc_bc,
#subscribe_highlight .rc_ft div,
#subscribe_highlight .hd .titlebar,
#subscribe_highlight .rc div,
#subscribe_highlight .rc_bd  .rc_bc .bd  {background:transparent;}
#subscribe_highlight .hd .titlebar .hd   {height:27px;}

#article_new .rc_bd div.rc_bc,
#article_new .rc_ft div,
#article_new .hd .titlebar,
#article_new .rc div,
#article_new .rc_bd  .rc_bc .bd  {background:transparent;}

#search_module .rc_bd div.rc_bc,
#search_module .rc_ft div,
#search_module .hd .titlebar,
#search_module .rc div,
#search_module .rc_bd  .rc_bc .bd  {background:transparent;}

#calendar .rc_bd div.rc_bc,
#calendar .rc_ft div,
#calendar .rc div,
#calendar .hd .titlebar .hd  ,
#calendar .rc_bd  .rc_bc .bd  {background:transparent;}

#folder .rc_bd div.rc_bc,
#folder .rc_ft div,
#folder .hd .titlebar,
#folder .rc div,
#folder .rc_bd  .rc_bc .bd  {background:transparent;}

#update_date .rc_bd div.rc_bc,
#update_date .rc_ft div,
#update_date .hd .titlebar,
#update_date .rc div,
#update_date .rc_bd  .rc_bc .bd  {background:transparent;}

#statistic .rc_bd div.rc_bc,
#statistic .rc_ft div,
#statistic .hd .titlebar,
#statistic .rc div,
#statistic .rc_bd  .rc_bc .bd  {background:transparent;}

#friendlist_module .rc_bd div.rc_bc,
#friendlist_module .rc_ft div,
#friendlist_module .hd .titlebar,
#friendlist_module .rc div,
#friendlist_module .rc_bd  .rc_bc .bd  {background:transparent;}

#user_mod_10003 .rc_bd div.rc_bc,
#user_mod_10003 .rc_ft div,
#user_mod_10003 .hd .titlebar,
#user_mod_10003 .rc div,
#user_mod_10003 .rc_bd  .rc_bc .bd  {background:transparent;}

#user_mod_10002 .rc_bd div.rc_bc,
#user_mod_10002 .rc_ft div,
#user_mod_10002 .hd .titlebar,
#user_mod_10002 .rc div,
#user_mod_10002 .rc_bd  .rc_bc .bd  {background:transparent;}

#user_mod_10001 .rc_bd div.rc_bc,
#user_mod_10001 .rc_ft div,
#user_mod_10001 .hd .titlebar,
#user_mod_10001 .rc div,
#user_mod_10001 .rc_bd  .rc_bc .bd  {background:transparent;}

#calendar .hd .titlebar .hd h2 {font-size:15px;color:#FFFFFF;}
#calendar .bd table {height:118px;background:transparent;}
#calendar .titlebar,
#calendar .titlebar .bd a:hover{color:#FFFFD0;}
#calendar .hd,
#calendar .titlebar .bd a {background:transparent;font-weight:bold;font-size:12px;color:#FF0000;}




Xong .... Bạn có thể download mẫu CSS tại đây  (mở ra, copy và paste ... xem trước coi nó ra sao)