Phần 2 : Thiết kế nền entry cho Blog.
Về phần Entry này mình sẽ nói rõ hơn vì nó rất là quan trọng để tạo ra ngôi nhà đẹp hơn cho các bạn, vì phần này chúng ta thiết kế phải phù hợp với màu sắc của Theme..Về màu sắc phải phối hợp màu sao cho phù hợp với Theme..với mình thì những Theme được làm màu sáng thì nên chọn màu sáng và những Theme được làm màu tối thì nên chọn màu tối một chút cho nền Entry...Tùy vào cách thiết kế của mỗi người, nói chung chúng ta nên phối màu sao cho dễ nhìn một chút và dao diện dễ thuyết phục với khách ghé thăm, hình ảnh dễ nhìn , bài viết dễ đọc đó cũng sẽ tạo ra một Blog đẹp cho các bạn rồi...Với theme này mình sẽ chọn tiếp màu trắng và viền xám để làm nền cho Entry...
Kích thước khi xem Blog ngoài trang chủ chuẩn nhất cho nền entry này là 620px,nhưng khi vào xem thì nó sẽ Full ra 750px.. Nên phần này bạn lưu ý một chút về Code...nên 2 Code này sẽ phần nào giúp bạn trong thiết kế chuẩn hơn ..Các bạn có thể thay kích thước tùy ý của mình để phù hợp với kích thước của Entry...
TÙY CHỈNH ĐỘ RỘNG CHO NỀN ENTRY
.mod-alist-summary, .mod-alist-brief, .mod-alist-full {float:left;padding:10px 10px 10px 0px;width:620px;}
#friend-list {width:620px;}
THAY ĐỔI KIỂU HIỂU THỊ BÀI VIẾT
.col-600 .mod_all .rc_bd .rc_bc{width:600px;padding:0px 0px 0px 20px;}
Và cũng như cách cắt Theme , các bạn cắt ra làm 3 phần cho Theme.
Nền Entry đầu :
Nền Entry giữa :
Nền Entry cuối:
Code chung cho chúng ta sữ dụng :
#article_list_module .rc_hd {background:transparent url(link ảnh) no-repeat scroll center top;height:Xpx;}
#article_list_module .rc_bd {background:transparent url(link ảnh) repeat scroll center;}
#article_list_module .rc_ft {background:transparent url(link ảnh) no-repeat scroll center top;height:Xpx;}
Code chung cho phần Nền Entry khi lick vào xem bài viết :
#single_post #article_list_module .rc_hd {background:transparent url(link ảnh) no-repeat scroll center top;height:Xpx;}
#single_post #article_list_module .rc_bd {background:transparent url(link ảnh) repeat scroll center;}
#single_post #article_list_module .rc_ft {background:transparent url(link ảnh) no-repeat scroll center top;height:Xpx;}
Thay link ảnh vào chữ màu đỏ
Thay kích thước chiều cao vào X màu xanh
Phần 3 : " Thiết kế nền Module "
Với phần thiết kế module nhỏ này cũng là phần quan trọng để trang trí cho ngôi nhà của mình...vẫn là với thiết kế theo 3 mảnh.
Nền đầu module :
Nền giữa Module
Nền cuối module
Code Thay cho phần nền module :
Code giữa module :
.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 ,
#user_mod_1000x .rc_bd ,
#comment_new .rc_bd {background:transparent url(link ảnh) repeat-y top center;}
Code cuối module :
.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 ,
#user_mod_1000x .rc_ft {background:transparent url(linkảnh) no-repeat center top;height:Xpx;}
Code đầu module :
Code cho tất cả các module :
.col-150 .rc_hd ,
#article_new .rc_hd ,
#folder .rc_hd ,
#calendar .rc_hd ,
#statistic .rc_hd ,
#friendlist_module .rc_hd ,
#comment_new .rc_hd ,
#profile_highlight .rc_hd {background:transparent url(linkảnh) no-repeat center top;height:Xpx;}
Code cho từng phần đầu module :
.col-150 .rc_hd ,
#article_new .rc_hd {background:transparent url(link ảnh) no-repeat center top;height:Xpx;}
#folder .rc_hd {background:transparent url(link ảnh) no-repeat center top;height:Xpx;}
#calendar .rc_hd {background:transparent url(link ảnh) no-repeat center top;height:Xpx;}
#statistic .rc_hd {background:transparent url(link ảnh) no-repeat center btop;height:Xpx;}
#friendlist_module .rc_hd {background:transparent url(link ảnh) no-repeat center top;height:Xpx;}
#comment_new .rc_hd {background:transparent url(link ảnh) no-repeat center top;height:Xpx;}
#profile_highlight .rc_hd {background:transparent url(link ảnh) no-repeat center top;height:Xpx;}
Thay link ảnh vào chữ màu xanh
X là giá trị chiều cao của ảnh .
#user_mod_1000x : thay X bằng giá trị từ 1-10..
Thế là chúng ta đã hoàn thành phần chính của Blog rùi... Và tiếp tục đến với những phần nhỏ và phần phụ của Blog..Tất cả bây giờ là các bạn phải hoàn chỉnh trong Code Blog của mình .
Về phần trong suốt chúng ta sữ dụng code này nhé :
TRONG SUOT TRANG CHINH{}
.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,
#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,
.captchaContentBox{background:transparent;border-style:none;}
.cmt-mod-alist .comments-listing .bd, .mod-trackback .bd{background:transparent !important;}
TRONG SUOT TRANG PHU {}
Trang profile
#profile_info .bd,
#profile_info th{background:transparent !important;}
Trang Album {}
#gallery_list .rc_bc .bd,
#gallery_list .rc_bc .bd .actionbar,
#gallery_list .rc_bc .bd .actionbar .bd,
#gallery_list .rc_bc .bd .actionbar .hd,
#gallery_list .rc_bc .bd .actionbar button,
#gallery_list .rc_bc .hd .titlebar .hd select {background:transparent;}
Trang Xem Hình Trong Album {}
#photo_enlarge .rc_bc .bd,
#photo_enlarge .ft,
#blog_compose .rc_bd .rc_bc .bd .actionbar .bd button,
#photo_enlarge
#photo_comment_list,
#photo_enlarge
#photo_comment_list .bd,
#photo_enlarge .rte_fieldset,
#photo_enlarge .photo-comment
{background:transparent;}
TRANG BAN BE {}
#friend-list .mod-tag-friend-list,
#friend-list .mod-tag-friend-list .ft,
#friend-list .mod-tag-friend-list .bd{background:transparent !important;}
TRONG SUOT VIEN MODULE TU TAO {}
#user_mod_10001 .rc_hd div,
#user_mod_10001 .rc_hd,
#user_mod_10001 .rc_bd,
#user_mod_10001 .rc_bd div.rc_bc,
#user_mod_10001 .rc_ft,
#user_mod_10001 .rc_ft div,
#user_mod_10002 .rc_hd div,
#user_mod_10002 .rc_hd,
#user_mod_10002 .rc_bd,
#user_mod_10002 .rc_bd div.rc_bc,
#user_mod_10002 .rc_ft,
#user_mod_10002 .rc_ft div,
#user_mod_10003 .rc_hd div,
#user_mod_10003 .rc_hd,
#user_mod_10003 .rc_bd,
#user_mod_10003 .rc_bd div.rc_bc,
#user_mod_10003 .rc_ft,
#user_mod_10003 .rc_ft div,
#user_mod_10004 .rc_hd div,
#user_mod_10004 .rc_hd,
#user_mod_10004 .rc_bd,
#user_mod_10004 .rc_bd div.rc_bc,
#user_mod_10004 .rc_ft,
#user_mod_10004 .rc_ft div,
#user_mod_10005 .rc_hd div,
#user_mod_10005 .rc_hd,
#user_mod_10005 .rc_bd,
#user_mod_10005 .rc_bd div.rc_bc,
#user_mod_10005 .rc_ft,
#user_mod_10005 .rc_ft div,
#user_mod_10006 .rc_hd div,
#user_mod_10006 .rc_hd,
#user_mod_10006 .rc_bd,
#user_mod_10006 .rc_bd div.rc_bc,
#user_mod_10006 .rc_ft,
#user_mod_10006 .rc_ft div,
#user_mod_10007 .rc_hd div,
#user_mod_10007 .rc_hd,
#user_mod_10007 .rc_bd,
#user_mod_10007 .rc_bd div.rc_bc,
#user_mod_10007 .rc_ft,
#user_mod_10007 .rc_ft div,
#user_mod_10008 .rc_hd div,
#user_mod_10008 .rc_hd,
#user_mod_10008 .rc_bd,
#user_mod_10008 .rc_bd div.rc_bc,
#user_mod_10008 .rc_ft,
#user_mod_10008 .rc_ft div,
#user_mod_10009 .rc_hd div,
#user_mod_10009 .rc_hd,
#user_mod_10009 .rc_bd,
#user_mod_10009 .rc_bd div.rc_bc,
#user_mod_10009 .rc_ft,
#user_mod_10009 .rc_ft div,
#user_mod_10010 .rc_hd div,
#user_mod_10010 .rc_hd,
#user_mod_10010 .rc_bd,
#user_mod_10010 .rc_bd div.rc_bc,
#user_mod_10010 .rc_ft,
#user_mod_10010 .rc_ft div
{background:transparent;color:none;border-width:0px;}
TRONG SUOT NEN MODULE TU TAO {}
#user_mod_10001 .rc_hd,
#user_mod_10001 .rc_bd,
#user_mod_10001 .rc_ft,
#user_mod_10002 .rc_hd,
#user_mod_10002 .rc_bd,
#user_mod_10002 .rc_ft,
#user_mod_10003 .rc_hd,
#user_mod_10003 .rc_bd,
#user_mod_10003 .rc_ft,
#user_mod_10004 .rc_hd,
#user_mod_10004 .rc_bd,
#user_mod_10004 .rc_ft,
#user_mod_10005 .rc_hd,
#user_mod_10005 .rc_bd,
#user_mod_10005 .rc_ft,
#user_mod_10006 .rc_hd,
#user_mod_10006 .rc_bd,
#user_mod_10006 .rc_ft,
#user_mod_10007 .rc_hd,
#user_mod_10007 .rc_bd,
#user_mod_10007 .rc_ft,
#user_mod_10008 .rc_hd,
#user_mod_10008 .rc_bd,
#user_mod_10008 .rc_ft,
#user_mod_10009 .rc_hd,
#user_mod_10009 .rc_bd,
#user_mod_10009 .rc_ft,
#user_mod_10010 .rc_hd,
#user_mod_10010 .rc_bd,
#user_mod_10010 .rc_ft
{background:transparent no-repeat center bottom;}
XOA BO TIEU DE MODULE TU TAO{}
#user_mod_10001 h2{display:none;}
#user_mod_10002 h2{display:none;}
#user_mod_10003 h2{display:none;}
#user_mod_10004 h2{display:none;}
#user_mod_10005 h2{display:none;}
#user_mod_10006 h2{display:none;}
#user_mod_10007 h2{display:none;}
#user_mod_10008 h2{display:none;}
#user_mod_10009 h2{display:none;}
#user_mod_10010 h2{display:none;}
Trong suot noc nha{}
#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;}
#ygmatop, #ygmabot, .blog_dummyselect {display:none;}
.yuimenubar .bd ul.first-of-type #yui-gen0{background:transparent;}
.yuimenubar{padding:35px 40px;width:480px;background:transparent;}
.yuimenubarnav .yuimenubaritem{border:none;}
#blogsearch {display:none;}
#ysm_bottom {display:none;}
#ygma{background:transparent;height:0px;}
.yuimenubarnav .yuimenubaritem {border-right:none;border-color:#f105bc;}
.yuimenubaritemlabel {border:none;}
.first-of-type a, #ygmatop a, .ygmabg, #ygmasrchbtn{color:#ffffff;}
.first-of-type li:hover{background:transparent;}
.blog_dummyselect .bd div, .blog_dummyselect .bd, .yuimenu .bd {background:transparent;}
.first-of-type a:hover{color:#020467;text-decoration:none;}
.menu .bd, .yuimenu ul{border-style:dashed;border-color:#ffffff;}
#ygmatop, #ygmabot, .blog_dummyselect {display:none;}
.yuimenubaritemlabel-selected a{color:#7e00ff!important;}
.rc_hd, .rc_hd div, .rc_bd, .rc_bd .rc_bc, .rc_ft, .rc_ft div{background:transparent;border-style:none;}
.blog_dummyselect .bd div, .blog_dummyselect .bd, .yuimenu .bd {background:transparent url(http://cA4.upanh.com/10.777.14916202.FXN0/trongsuot.png);color:#ff0054;}
#blogsearch span.btn .ygmasrchbtn {display:none;}
.ygmasrchquery {display:none;}
TRONG SUOT PHAN PROFILE{}
#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;}
Demo :
Đến đây các bạn đã hoàn chỉnh Theme của mình rồi, còn một số Code trang trí phụ các bạn tự tìm hiểu và tham khảo nhé... Chúc các bạn thành công và có một ngôi nhà đẹp .