Chào các bạn, tiếp theo loạt bài viết hướng dẫn tùy chỉnh cho các childtheme Genesis bằng css, bài viết hôm nay mình sẽ trình bày cách tùy chỉnh cho phần header bao gồm tùy chỉnh độ rộng, thay đổi ảnh nền header, thay đổi logo, tùy chỉnh phần header-widget…Và tất nhiên theme mình sử dụng vẫn là Copyblogger. Dưới đây là cấu trúc phần header:

header edit

Phần 1 là toàn bộ phần header, phần 2 là bần title và description của blog, phần 3 là phần header-widget.

Điều chỉnh kích thước header

Phần này đã được đề cập ở bài viết trước, tuy nhiên lúc đó ta chỉ mới mở rộng phần header wrap, bây giờ ta sẽ thu hẹp phần header lại cho bằng với phần nội dung. Ta có hai cách làm:

Cách thứ nhất ta sẽ theme thuộc tính width cho id #header và đặt cho nó độ rộng là 1060px:

Ta sẽ được kết quả như thế này:

edit header width

Cách thứ hai, ta có thể thêm thuộc tính width cho id #wrap:

Với cách này thì phần menu cũng sẽ bị thu hẹp lại.
edit header width 2

Ngoài ra ta còn có thể điều chỉnh độ cao của header bằng cách thêm thuộc tính height và id #header. Mặc định của theme Copyblogger sử dụng thuộc tính min-height để đặt chiều cao tối thiếu của header, ta có thể sữa lại để đặt chiều cao cố định:

Thay đổi ảnh nền cho header

Để làm việc này, trước tiên bạn cần chuẫn bị một ảnh nền tên là bg-header.png và đặt vào thư mục images của theme để thay cho ảnh nền mặc định của theme (nếu đã có). Tiếp theo ta sẽ thêm thuộc tính background vào id #header (nếu chưa có).

edit header background

Thay đổi logo cho blog

Ở đây bạn có hai kiều hiển thị là image logo hoặc dynamic text, bạn có thể chuyển đổi giữa hai kiểu hiễn thị này bằng cách vào Genesis > theme settings > header và thay đổi mục Use for site title/logo.

Đối với kiểu dynamic text, bạn cần phải vào Settings > General và điền title cho blog vào mục Site Title và mô ta blog ở mục Tagline.

edit header title

Ta sẽ theme một số lớp css để chỉnh cho title và description (hoặc thay đổi nếu đã có):

Ta sẽ được như thế này:

edit header title 2

Đối với kiểu image logo, bạn cần chuẫn bị một ảnh logo kích thước khoảng 300 x 50 tùy theo ý của bạn, đặt vào thư mục images của theme.

Ta sẽ thêm một lớp css sao để hiễn thị ảnh logo:

Kết quả đạt được:

edit header title 3

Tùy chỉnh phần header-widget

Tất cả các tùy chỉnh của phần này, bạn sẽ thực hiện trên các thuộc tính của lớp #header .widget-area như thay đổi kích thước, khoảng cách đến các lề…

Ngoài ra nếu muốn bạn có thể hoán đổi vị trí của phần logo và phần header-widget cho nhau bằng cách thay đổi thuộc tính float của hai phần này:

edit header title 4

Trên đây là một số kĩ thuật nhỏ giúp tùy biến cho khu vực header trên các childthemes Genesis, hy vọng nó sẽ giúp ích được cho bạn. Chúc bạn thành công!

Leave a Reply

Your email address will not be published. Required fields are marked *

Đăng ký nhận tin khuyến mãi

Đăng ký nhận tin khuyến mãi

Không bỏ lở những khuyến mãi Hosting - Domain - WordPress Themes - WordPress Plugins hấp dẫn nhất!

 

Bạn đã đăng ký thành công!