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

<<< Kết nối với Giải Pháp Số trên Facebook >>>

thesis-theme

Để 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

thesisbanner1

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ố

email


Admin Blog GiaiPhapSo.Info | Với tôi: "Sống là để trải nghiệm và chia sẻ đam mê!" Facebook | Twitter | Linked In | Google+

Advertisement

15 phản hồi tới “Công cụ giúp tùy chỉnh Header Banner trong Thesis Theme một cách nhanh nhất”

  1. Misao

    Oct 13. 2009

    Hay quá. Thx bác GPS! Có cái này thì ai cũng làm được rồi. :)

    Reply to this comment
  2. Tinh

    Oct 15. 2009

    Cái này chẳng qua cũng là cách xác định độ rộng, cao cho banner, chứ banner thực sự vẫn phải do mình design bác ạ. Như vậy title e là dễ làm anh em hiểu nhầm :D Thanks anyway :love:

    Reply to this comment
  3. Mr. Giải Pháp Số

    Oct 15. 2009

    :D Cám ơn bác Tỉnh đã góp ý!
    Đúng là Title có vấn đề, sorry bà con! =]

    Reply to this comment
    • Fere

      Feb 08. 2012

      Hay là mình chuyển sang làm tổng hợp số $ kiếm được trong tuần rồi dtanoe cho 5 người comment đầu tiên nhỉ . Cái này tớ phải thử mới đc

      Reply to this comment
  4. nam

    Oct 27. 2009

    Co minhf hoi la sao theme thesis này toàn có độ rộng quá vậy nhỉ?màn hình phân giả 1024×768 mà vẫn phải kéo ngang…Có thể chỉnh nhỏ lại trong panel dc ko?và tại sao mặc định theme lại thế?Thanks

    Reply to this comment
    • MrGiaiPhapSo

      Oct 27. 2009

      Bạn vào “Thesis Design Options”, trong mục “Site Layout” Bạn có thể tùy chỉnh layout và kích thước của nó. Bạn cộng tất cả kích thước vào mà 1024px=< thì nó sẽ hiển thị tốt trên độ phân giải màn hình 1024×768!

      Chịu khó mò mẫm tiếp nhé! :p

      Reply to this comment
  5. nam

    Oct 27. 2009

    Thanks…Cachs tạp đường viền xung quanh sitebar,post homepage and single post sao Dũng nhir?
    Tiện thể mình đưa ser 1.6b lên đây nhé:
    http://www.mediafire.com/?jnzhyjjmgd3

    Reply to this comment
  6. Thương Sinh

    Feb 11. 2010

    Viết thêm nữa đi bác ơi, :D Em chưa đã cơn thèm :p

    Reply to this comment
  7. TBTarc

    Nov 10. 2010

    Bác GPS cho hỏi có cách nào chèn quảng cáo vào header của thesis không ? 8)

    Reply to this comment
  8. Janice

    Feb 08. 2012

    Bác cứ đùa, ppayal mở cửa cho vn rồi, cần gì mua acc nữa, mua nó limit rồi biết gỡ làm sao

    Reply to this comment
  9. Jamie

    Feb 09. 2012

    Vụ dtaabase bị ảnh hưởng server đó (của bác SEO TIP comment dưới đây).

    Reply to this comment

Gửi một phản hồi

Facebook

Twitter

Google Plus