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é! :D :D

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 layout nà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! :D :D

Lâm Ngọc Khương

Luôn tìm tòi, thích học hỏi! Tất cả chỉ vì con đường đã chọn. Tôi yêu công nghệ thông tin! :)