Công cụ giúp tùy chỉnh Header Banner trong Thesis Theme một cách nhanh nhất

Để tạo một Header Banner trong Thesis theme không phải là khó nhưng nếu không cẩn thận bạn sẽ gặp phải những lỗi rất khó sửa. Hôm nay tôi xin giới thiệu với các bạn một công cụ khá hay dùng để tạo Header Banner một cách nhanh chóng mà không sợ bị lỗi.

Bước 1: Upload banner

Upload file banner hình dùng làm header lên server bằng chương trình FTP. Nhớ ghi lại đường dẫn tuyệt đối của hình

VD: http://doublemule.com/wp-content/themes/thesis_151/custom/images/your-image-name.png

Bước 2: Dùng công cụ tự động tạo code CSS

Đường dẫn công cụ: http://www.doublemule.com/thesis-custom-css-code-robot/thesis-code-robot-clickable-banner-image.html

Dán đường dẫn hình và khai báo kích thước vào các ô tương ứng. Sau đó nhấp nút “Make My Banner Code” để tạo code.

Đoạn mã code Ví dụ được tạo ra giống như sau:

/*

MAKE A BACKUP OF YOUR CUSTOM.CSS FILE BEFORE USING THIS CODE!

Copy and paste the ouput below into your custom.css file.

Refresh your site to behold the power of the Mule Herd.

*/

/* DoubleMule Clickable Header v. 1.0 */

.custom #header
{
background: #ffffff;
padding-top: 0em;
padding-right: 0em;
padding-bottom: 0em;
padding-left: 0em;
border-top: 0em;
border-right: 0em;
border-bottom: 0em;
border-left: 0em;
margin-top: 0em;
margin-right: 0em;
margin-bottom: 0em;
margin-left: 0em;
}

.custom #header #logo a
{
display:block;
width:900px;
height:150px;
background:url(http://doublemule.com/wp-content/themes/thesis_151/custom/images/your-image-name.png) center no-repeat;
color:#000000;
text-indent: -9999px;
padding-top: 0em;
padding-right: 0em;
padding-bottom: 0em;
padding-left: 0em;
border-top: 0em;
border-right: 0em;
border-bottom: 0em;
border-left: 0em;
margin-top: 0em;
margin-right: 0em;
margin-bottom: 0em;
margin-left: 0em;
}

.custom #header #tagline
{
color:#000000;
text-indent: -9999px;
}

Bước 3: Chỉnh sửa file custom.css (Nếu bạn dùng Thesis theme thì chắc chắn bạn biết mở file custom.css ở đâu rồi nhỉ)

Copy đoạn mã code tạo được và dán vào trong file custom.css.

Lưu kết quả và refresh trình duyệt để xem kết quả! Thật là dễ dàng phải không nào! :wink:

Chúc bạn thành công

Mr. Giải Pháp Số