Chèn logo trong Genesis Framework

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Chèn logo trong Genesis Framework

Nhiều người hỏi mình làm sao để thêm hình ảnh logo, hiển thị trong phần header của Genesis. Để thêm logo vào website, bạn hình dung cần truy cập vào trình quản lý tệp thông qua FTP. Trong blog của mình, cũng đều có nhiều bài chỉ dẫn về Genesis theme, bạn có thể tìm đọc. Tuy nhiên, trong bài này bạn cũng có thể không cần kết nối FTP mà thực hành tận gốc trong quản trị WordPress bằng cách sử dụng thư viện media và trình sửa tệp trong WordPress.

Bước 1: Tạo logo

Nếu bạn chưa có logo, cũng đều có thể sử dụng các công cụ thiết kế ảnh như photoshop. Lưu ý sử dụng kích cỡ cho thích hợp với site của bạn. Ở khung tiêu đề của child theme mặc định có kích thước là 350px x 90px, tuy vậy bạn có thể tạo kích thước lớn hơn hoặc nhỏ hơn tùy ý bạn muốn.

Bước 2: Tải logo

Bạn đã cài công cụ truyền dữ liệu FTP? Thiết lập kết nối và chuyển đến thư mục images trong thư mục child theme, bạn tải file logo đã thiết kế vào trong thư mục này.

Bước 3: Cấu hình

Để kích hoạt tùy chỉnh vùng logo, bạn truy cập cài đặt genesis và chọn ‘Image logo’ cho trường Use for blog title/logo . Thiết lập này thêm 1 class ‘.header-image’ cấp phép bạn tùy biến CSS cho vùng tiêu đề ở trong phần header của trang với một hình ảnh logo. Nếu bạn không thấy cài đặt này, có thể bạn sử dụng hình nền cho header và cài đặt này không tồn tại. Trong tương lai, mình sẽ được bài viết chỉ dẫn các bạn thêm logo với một hình nền.

Bước 4: Chỉnh sửa style.css

Bước này tùy thuộc vào child theme của bạn mà có cách sử dụng khác nhau, tùy nhiên ý tưởng là giống nhau. Trong child theme bạn tìm dòng tương tự như dưới đây trong file style.css

 /* Image Header - Partial Width ------------------------------------------------------------ */ .header-image #title-area, .header-image #title, .header-image #title a { display: block; float: left; height: 90px; overflow: hidden; padding: 0; text-indent: -9999px; width: 350px; } .header-image #description { display: block; overflow: hidden; }  

Nếu bạn chẳng thể tìm thấy các loại trên, bạn cũng đều có thể thêm chúng vào file. Đoạn mã css trên thiết kế style cho phần tiêu đề trang. Mỗi người có các cách dùng CSS khác nhau, ví dụ này mình sử dụng phần mặc định thừa kế từ Genesis.

Để hiển thị logo của bạn , chúng ta cần thiết lập hình nền sử dụng CSS cho vùng tiêu đề. Để thi hành bạn thêm dòng code sau vào style.css & hãy nhớ thay tên file logo của bạn.

 .header-image #title a { background: url( 'images/your-logo-filename.png' ) no-repeat; }  

Hãy đảm bảo sử dụng vừa kích cỡ logo, nếu logo của bạn có kích thước lớn hơn mặc định, cũng có thể có thể giảm kích thước cao hoặc dài. Chú ý: mặc định Genesis sử dụng kích cỡ rộng 350px cho phần tiêu đề trang.

Lúc này bạn truy cập lại trang web bạn sẽ nhìn thấy hình logo xuất hiện. Chúc bạn thành công.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook

Bài viết Chèn logo trong Genesis Framework được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang