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

Như các bạn đã biết, mặc định theme Genesis Childthemes có bề rộng các phần header, nav, subnav, content, sidebar,… rất nhỏ. Điều này làm cho bài viết của bạn cũng hạn chế theo. Cấu trúc theme như hình bên dưới.

Giờ mình sẽ hướng dẫn các bạn Tùy chỉnh bề rộng cho Genesis Childthemes theo các phần như trên nhé!

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.

Để chỉnh sửa thì bạn cần mở file style.css của theme ra (Mình đang thực hiện trên theme Copyblogger). Sau đó thực hiện theo các bước bên dưới:

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ả:

Như 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ả:

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à content và sidebar. Đâ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;

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 layoutnào:

Ở đâ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;

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:

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!

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