Tùy chỉnh header cho Genesis Childthemes

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:

#header {
	background: #000 url(images/bg-header.png) repeat-x;
	color: #fff;
	min-height: 108px;
	margin: 0 auto;
	overflow: hidden;
	width: 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:

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

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:

#header {
	background: #000 url(images/bg-header.png) repeat-x;
	color: #fff;
	height: 100px;
	margin: 0 auto;
	overflow: hidden;
}

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ó).

#header {
	background: #000 url(images/bg-header.png) repeat-x;
	color: #fff;
	height: 100px;
	margin: 0 auto;
	overflow: hidden;
}

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ó):

#title-area {
	float: left;
	overflow: hidden;
	padding: 20px 0 0 20px;
	width: 400px;
}

#title {
	font-size: 36px;
	line-height: 42px;
	margin: 0 ;
}

#title a,
#title a:hover {
	color: #FF0000;
	text-decoration: none;
	font-family: Georgia, "Times New Roman", Times, serif;
}

#description {
	color: #009933;
	font-family: Georgia, Times, 'Times New Roman', serif;
	font-size: 14px;
	font-style: italic;
}

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:

.header-image #title-area {
	background: url(images/logo.png) no-repeat;
	margin: 20px 0 0 20px;
}

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ề…

#header .widget-area {
	float: right;
	width: 550px;
	height: 60px;
	margin-top: 20px;
}

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:

#title-area {
	float: right;
	overflow: hidden;
	padding: 20px 0 0 20px;
	width: 400px;
}
#header .widget-area {
	float: left;
	width: 550px;
	height: 60px;
	margin-top: 20px;
}
.header-image #title-area,
.header-image #title,
.header-image #title a {
	display: block;
	float: right;
	height: 50px;
	overflow: hidden;
	padding: 0;
	text-indent: -9999px;
	width: 300px;
}

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!

Tùy chỉnh header cho Genesis Childthemes
5 (100%) 1 vote

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. Đạt Phạm says:

    Tiếc là em ko có dùng Genesis ! Ak em cuq có một blog đây, mới đổi chủ đề nên mới 3 bài viết hà ! {c27}

  2. Bác có thể share cho em cái skin hồi trước blog bác xài được không, em tính làm theo dạng vậy mà bác đổi skin rùi, nên bác có thể cho em cái skin cũ được không bác, em chân thành cảm ơn bác. Em mới tập tành, mong bác thương em. Cảm ơn bác. Email của em ở trên, bác có thể liên lạc với em. Cảm ơn bác lần nữa

    • Bác nói theme nào vậy bác?

      • Skin cũ ấy bác, bác làm ơn có thể share cho em được không ạ???

      • Bác đợi ít ngày nữa e share cho anh em luôn

        • Bác nói share mà hình như chưa share thì phải, chắc bác quên rùi. Mau share đi bác, em cảm ơn bác. Em pm bác lâu lắm rồi đó, xin giúp em!!!

        • Có rồi đây nhé bác

          • Cám ơn bác rất rất nhiều, em sài skin của bác nha. Mong bác đừng chửi em ăn cắp bản quyền!!! À mà bác nè, bác biết cái mã nguồn nào có thể liên kết vs facebook dc ko, ví dụ như: em làm một web lớp chẳng hạn, trong đó mọi thành viên đều có quyền đăng bài viết chia sẻ của họ lên. Nhưng cái bài đăng đó cũng được đăng lên trang facebook của họ và trang web mình giống như là fanpage lớp vậy, vẫn tương tác vs facebook dc nhưng mà ko làm trên nền facebook. Thanks bác lần cuối

  3. haviha shop says:

    bạn ơi mình làm theo hướng dẫn chỉnh rộng cột như của bạn rồi. nhưng nó ko được như ý. có 1 cái gạch đứng ở giữa content và sidebar như trong hình (ko đúng chỗ). giúp mình với!! làm sao chuyển cái gạch đấy sang bên phải một chút
    http://i272.photobucket.com/albums/jj190/tienthai/Photobucket%20Desktop%20-%20localhost/ScreenShot2013-10-24at123219PM.png

  4. cho mình hỏi để làm cái banner stable host đứng như trang của bạn thì làm như thế nào?

  5. QUỐC VIỆT says:

    Bạn Rayno ơi! làm ơn giúp mình với, mình mới làm quen với Genesis.
    Mình đang làm một Site thì bị lối thế này, độ rộng trang web không thu nhỏ lại được
    nó có thêm thanh trược phía bên dưới, mình mò đủ cách nhưng vẩn chưa được.
    Vào Genesis > theme settings > header và Remove header image thì không bị nữa.
    Nhưng remove header image thì nó không hiển thị cái LOGO.
    Làm ơn giúp mình với nhé! đang cần gấp gấp.
    Cảm ơn bạn rất nhiều.
    Site của mình đang làm là : http://www.cohoikinhdoanh.net

  6. Genesis có cao thủ rồi.

  7. Bạn có thể hướng dẫn mình chỉnh cho hình header child theme Streamline Pro lớn hết khung của nó (như những cái khác 960×110 pisxel) không ạ, hiện nó chỉ 300×60 pixel.

  8. Tế nhị tí bác vui lòng xóa comment trên dùm em, cảm ơn.

    • Cái khung màu vàng đó là logo chớ đâu phải header đâu bác, hình như theme streamline có tích hợp cài đặt ảnh header trong phần appearence mà

  9. Đúng rồi đó bác, ở phần appearence/header đó. Chỉ được vậy thôi, các child khác thì nó là 980x ** nhưng Streamline chỉ 300x** thôi.

    • Bạn thử xem lại trong file functions.php xem, e thấy kích thước header là 960x120px mà.

      add_theme_support( 'genesis-custom-header', array( 
      	'width'	=> 960, 
      	'height'	=> 120 
      ) );
  10. Ok đã chỉnh được rồi bác. Cảm ơn nhiều. Chúc năm mới có nhiều tut cho anh em nhé!

  11. Bạn cho mình hỏi site của mình: http://chungcufivestargarden.com/
    Mình muốn thay đổi background hoặc hiển thị tùy chọn background thì không có. Làm ơn chỉ cách hiển thị, menu ngang nhìn xấu quá ko bik chỉnh sửa thế nào? Thanks bạn nhiều
    Chờ hồi âm

    • Bạn mở file style.css trong themes sử dụng, tìm lớp #wrap rồi thêm thuộc tính background cho nó là được, menu ngang thì chỉnh sửa hơi phức tạp, nếu bạn biết css thì tìm lớp #nav trong file style.css mà chỉnh sửa nhé

  12. Chào bạn, mình có trang blog saotop.com, mình muốn chỉnh phần banner (mục 3 theo đánh dấu của bạn) cho nó rộng ra thì làm thế nào nhỉ. Vì nó ngắn nên banner không ra hết được. Mong bạn chỉ dẫn cho mình với nhé. Cảm ơn bạn!

  13. Bác cho em hỏi cách khắc phục lỗi ưu tiên hiển thị nội dung trong genesis với. Lỗi sảy ra ở trang chủ khi mà Featured Image bên trái nó đẩy text sang một bên phải đó . Chidtheme em đăng sài là genesis simple ( gần giống ebooksvn.com, và nhatdong.com, và cả blog của bác nữa đó nhưng mà các bác đã khắc phục dc lỗi này rùi) chỉ em với cám ơ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!