Tùy chỉnh bề rộng cho Genesis Childthemes

Chào các bạn, trong thời gian qua có khá nhiều bạn hỏi mình về cách tùy chỉnh giao diện trên các childthemes của Genesis. Đây là một việc khá đơn giản đối với các bạn đã biết về css. Hôm nay mình sẽ bắt đầu viết loạt bài hướng dẫn các bạn sử dụng css để thiết kế lại giao diện cho blog của mình. Bài viết chỉ dành cho các bác không chuyên, bác nào pro rồi thì vui lòng không đọc phần tiếp theo Victory. Trong quá trình viết bài mình sẽ thực hiện trên theme Copyblogger, các theme khác có thể thực hiện tương tự. Tất cả các tùy chỉnh bạn đều thực hiện trên file style.css. Bài viết đầu tiên mình sẽ trình bày cách tùy chỉnh độ rộng của theme.

Trước tiên bạn cần xác định được cấu trục của theme như hình dưới đây:

cau truc

Cấu trúc của theme bao gồm phần header, nav, subnav, phần nồi dung chính dạng 2 cột content-sidebar, phần footer-widget và phần footer. Để thay đổi độ rộng của theme, ta cần thây đổi thuộc tính width của tất cả các phần này.

1. Độ rộng header:

Bạn tìm trong file style.css đoạn:

#header .wrap {
	margin: 0 auto;
	width: 960px;
}

Bạn sẽ thay đổi kích thước 960px trong thuộc tính width bằng kích thước mà bạn muốn. Chẳng hạn mình tăng nó lên thành 1060px:

#header .wrap {
	margin: 0 auto;
	width: 1060px;
}

Bây giờ, bạn lưu lại và kiểm tra kết quả:

width headerNhư bạn thấy, phần header đã được mở rộng ra so với lúc trước.

2. Độ rộng nav và subnav

Bạn sẽ làm tương tự như đối với phần header, ta sẽ tìm hai lớp #nav .wrap và #subnav .wrap để thay đổi độ rộng của nó.

#nav .wrap {
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	margin: 0 auto;
    text-shadow: -1px -1px #8e1e03;
	width: 1060px;
}
#subnav .wrap {
	background-color: #222;
	color: #fff;
	margin: 10px auto;
	overflow: hidden;
	width: 1060px;
}

Xem lại kết quả:

nav subnav

3. Độ rồng phần nội dung

Mình định nghĩa phần nội dung ở đây bao gồm 2 phần là contentsidebar. Đây có lẽ là phần mà nhiều bạn gặp khó khăn nhất. Trước tiên bạn thay đổi độ rộng của ID inner từ 960px lên 1060px.

#inner {
	margin: 10px auto;
	overflow: hidden;
	width: 1060px;
}

inner

Tiếp theo, ta sẽ mở rộng phần content và phần sidebar để thu hẹp khoảng cách như bạn thấy bên trên. Để làm được điều này, bạn cần xác định được bạn đang sử dụng kiểu layout nào:

layout

Ở đây mình sử dụng kiểu layout là content-sidebar nên để chỉnh độ rộng phần content mình sẽ tìm lớp .content-sidebar #content:

.content-sidebar #content,
.sidebar-content #content {
	width: 700px;
}

Mình đã tăng độ rộng của phần content từ 630px lên 700px.

Tiếp theo ta chỉnh độ rộng của phần sidebar, ta sẽ tìm lớp .sidebar và tăng độ rộng của nó lên 330px:

.sidebar {
	display: inline;
	float: right;
	font-size: 13px;
	line-height: 20px;
	text-shadow: 1px 1px #fff;
	width: 330px;
}

content-sidebar

4. Độ rộng footer-widget và footer

Để chỉnh độ rộng phần footer-widget, ta tìm đoạn sau:

#footer-widgets .wrap {
    margin: 0 auto;
    width: 960px;
}

Tăng độ rộng từ 960px lên thành 1060px:

#footer-widgets .wrap {
    margin: 0 auto;
    width: 1060px;
}

Nhưng khi bạn tăng độ rộng này lên thì khoảng cách giữa 3 cột widget lại tăng lên:

footer-widget

Ta sẽ giãm khoảng cách này xuống bằng cách tăng độ rộng của các cột này từ 300px lên 333px lên:

.footer-widgets-1 {
    float: left;
    padding: 0 20px 0 0;
    width: 333px;
}

.footer-widgets-2 {
    float: left;
    width: 333px;
}

.footer-widgets-3 {
    float: right;
    width: 333px;
}

Cuối cùng, ta sẽ chỉnh độ rộng phần footer, ta sẽ chỉnh thuộc tính width của id #footer .wrap:

#footer .wrap {
	margin: 0 auto;
	width: 1060px;
}

Như vậy là bạn đã hoàn tất việc tùy chỉnh độ rộng cho theme của mình. Chúc các bạn thành công!

Đánh giá bài viết này

Chú ý - WordPress Hosting 1$/tháng - miễn phí tên miền

Bạn có biết GoDaddy đang có khuyến mãi WordPress hosting chỉ còn 1$/tháng kèm theo một tên miền .COM .NET .ORG miễn phí. Hãy đăng ký ngay để tiết kiệm chi phí nhất nhé.
Xem ngay

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nếu thấy bài viết trên blog có ích cho bạn, hãy đăng ký nhận tin qua email để cập nhật bài viết mới nhanh nhất và thỉnh thoảng nhận quà bất ngờ!

Comments

  1. thank bác . save lại ngay . khi cần lôi ra dùng {c20} {c20}

  2. Thank a nhìu nhìu…!! rất hay ạ..!! ^.^!

  3. tai game ai la trieu phu says:

    Cảm ơn bác. Hy vọng sẽ có nhiều tut về genesis cho blogger việt.

  4. A hay qua!

  5. Hoang Thien says:

    Chuẩn..đang vật lộn với child theme của nó..tks cậu {c1}

  6. Viet Trade Online says:

    Mình đang dùng cái Metro pro không biết chỉnh thế nào, đã thử mà hình như làm sai chỗ nào đó nên chưa được

  7. Sao chỉnh sủa được rồi mà trang chủ nó không thây đổi nhỉ, chỉ trang post mới thay đổi.

  8. Mình muốn thêm khoảng 4 ảnh tự chạy slide trong khoảng giữa của nav và subnav thì làm thế nào? Cảm ơn bạn.

  9. Chào bạn, thêm của mình hỗ trợ 2 menus.. Mình muốn tạo thêm một thanh menu ngang nữa như phần nav và subnav giống của bạn thì làm thế nào? Xin cảm ơn.

  10. thanks bác. mình sử dụng 2 cột slidebar em muốn chỉnh lại kích thước cho cột slidebar 1 nhỏ đi và cột sliderbar 2 lớn lên. e cũng chỉnh sửa kích thước 2 cột ah bác!

  11. Sao mình chỉnh mà ra xem nó chẳng thay đổi gì cả? nản ghê

  12. Thanks, mình đang sài theme child Genesis mình chỉnh độ rộng các phần đã ổn chỉ có phần hình nền sau phần Copyright Footer và Header mình tùy chỉnh không được mình muốn chỉnh cho màu nền phía sau rộng bằng trang, Có thể coi giúp mình không website: http://datnenbinhphuoc.com

  13. Sài theme còn tùy vào dịch vụ như thế nào nữa bạn ak!

  14. Cho mình hỏi cách tùy chỉnh độ cao của Header, của mình nó cao quá làm cái Logo ở giữa nằm lửng lơ, mình muốn thu hẹp lại cho nó sát với Logo.

    Thanks!

  15. Cho mình hỏi, mình muốn chỉnh màu và thu nhỏ nav, subnaz và header của theme magazine pro thì chỉnh thế nào ạ>
    cảm ơn bạn

Gửi bình luận

Lưu ý: Không sử dụng keyword để thay cho tên của bạn, hãy sử dụng tên thật. Cảm ơn bạn đã tham gia bình luận trên blog!