Tự thiết kế template Joomla "made in tự tui" - phần 1

Thảo luận trong 'Templates Joomla! 1.5.x' bắt đầu bởi Lê Xuân Thành, 18/4/12.

  1. Lê Xuân Thành

    Lê Xuân Thành Staff Member

    Phần 1: Chuyển đổi html + css thành Joomla 1.5 template (convert html+css to Joomla 1.5 template)

    ....................................................................................................
    Chuẩn bị:
    1. 1 website muốn chuyển đổi thành Joomla (lấy html + css của website này bằng chrome để conver thành Joomla template)
    2. Bộ code Joomla 1.5.26 (dùng để test thử template convert)
    3. Notepad++ (công cụ chỉnh sửa file tốt nhất mình từng xài)
    4. Trình duyệt Chrome (mình thích cách kiểm tra phần tử của chrome hơn là firebug của firefox)
    Tiến hành:

    Bước 1: Chọn 1 website để thực hiện
    Trên mạng có quá nhiều website, để đơn giản chúng ta sẽ chọn 1 web dễ chút nhé!
    Hôm rồi cài cái Comment --> nghĩ ngay đến trang này:
    HTML:
    http://www.joomlatune.com/
    Bước 2: Lấy index.html + css
    - Tạo 1 folder riêng cho template sắp tạo
    - Lấy html thế nào nhỉ? Nhấn chuột phải vào trang web và chọn xem nguồn trang hoặc truy cập địa chỉ sau:
    HTML:
    view-source:http://www.joomlatune.com/
    [​IMG]



    Copy toàn bộ mã html trong này
    - Mở notepad++ lên, tạo 1 file mới rồi dán đoạn mã mới copy ở trên. Lưu lại với tên index.php

    Đã xong việc lấy html, giờ lấy css, js:
    - Nhấn chuột phải vào trang web chọn kiểm tra phần tử --> bên dưới sẽ hiện ra 2 phần: mã html tự sinh bên trái và css bên phải
    [​IMG]



    Ta chỉ quan tâm phần bên phải: có nội dung css và đường dẫn file css
    ở trang này là:
    HTML:
    http://www.joomlatune.com/templates/jt/css/template_css.css
    Nhấn vào đường dẫn đó để mở file css
    Lưu lại file này vào thư mục css bên trong thư mục template của bạn
    Như vậy ta cũng lấy được css, Tuy nhiên cách này có phần thủ công và sẽ bỏ sót nhiều css, js khác --> vậy làm sao để lấy hết được?
    Giải pháp: Mở cái lúc nãy lên
    HTML:
    view-source:http://www.joomlatune.com/
    Kéo xuống dưới ở phần này:
    [​IMG]
    (dòng 57 đến 71)
    Các bạn lưu lại hết những file này vào đúng thư mục đã tạo nhé (css thì lưu vào thư mục css, js thì lưu vào thư mục js)

    Tiếp theo là toàn bộ ảnh của template này
    Có nhiều phương pháp để lấy ảnh mình sẽ chọn 1 cách nhanh nhất mà không bị bỏ sót:
    Cũng là nhấn chuột phải vào website rồi chọn kiểm tra phần tử,
    Các bạn kéo đến cái id chưa logo rồi nhấn vào cái url của logo nó sẽ hiện ra hình sau:
    [​IMG]



    Sau đó bạn lưu tất cả các ảnh vào thư mục images của thư mục template của bạn.

    Tiếp theo:

    truy cập đường dẫn sau:

    Mã:
    http://www.joomlatune.com/templates/jt/templateDetails.xml
    Vì sao mình lại chỉ ngay ra đường dẫn này:
    - Đáng lẽ bạn nên thiết kế template ngay khi lấy được html + css theo hướng dẫn ở bài
    http://forum.joomlaviet.info/templates/2068-tu-thiet-ke-template-joomla-made-tu-tui.html
    - Nhưng website này đã là Joomla rồi nên chắc chắn đã có file templateDetails.xml, và mình chỉ cần đi đến là mở và lưu lại thôi

    Tương tự ta cũng lấy được các file sau:
    Mã:
    http://www.joomlatune.com/templates/jt/template_thumbnail.png

    Để không xãy ra sự thiếu sót: các bạn mở file templateDetails.xml ra và tìm tất cả các file được liệt kê trong đó và lưu lại

    Sau khi có đầy đủ mọi thứ các bạn nén thư mục template này lại, và cài đặt

    P/s:
    1. Bài này hơi lộn xộn chút vì được viết 2 lần, nhưng tóm gọn lại nó qua một số bước thế này
    2. Đáng lẽ mình không nên viết bài này vì thực chất bài này là "RIP template Joomla", nhưng không sao --> hãy dùng vào mục đích tốt là được

    Hy vọng các bạn hình dung được sơ lược về template Joomla
    Part 2 mình sẽ hướng dẫn chi tiết về việc chuyển 1 website bất kì không phải Joomla thành Joomla template
    e.myngoc, kinhcan.dk, minhhai130715 others thích bài này.
  2. sorry

    sorry Thành viên mới

    Bác post tiếp phần 2 cho anh em học hỏi đi ạ,hay quá :D
    Lê Xuân Thành thích bài này.
  3. Lê Xuân Thành

    Lê Xuân Thành Staff Member

    tut này còn viết chưa xong mà part 2 gì?
    hình như không có ai thích vấn đề này thì phải, hình như mọi người vẫn thích xài code share và các bản quickstart hay template có sẳn nhỉ?
    HoaiNguyen7393 thích bài này.
  4. hprobotic

    hprobotic Active Member

    Bạn muốn viết hoàn thiện cái tut này dựa trên chrome thì tốt nhất là sử dụng Google Chrome 6
    Lê Xuân Thành thích bài này.
  5. paradisesweet

    paradisesweet Thành viên mới

    ai nói vậy??? viết tiếp cho hoàn chỉnh y anh Thành, em đang dàn trang html :(
    Lê Xuân Thành thích bài này.
  6. sorry

    sorry Thành viên mới

    Em rất quan tâm mà,bác viết tiếp đi ạ,em vừa làm đc 1 cái template html đẹp mê hồn....sài quick start cũng được thôi,cơ mà nó không được tốt lắm cho dân coder chúng ta,nó làm cho chúng ta ngu đi nhiều thì phải (xin lỗi nếu có nói động tới ai ạ :D)
    Lê Xuân Thành thích bài này.
  7. nguyen1986vn

    nguyen1986vn Thành viên mới

    Bài viết sơ sài quá. Ai comment đây? viết đây đủ đi. Ví dụ: Để thêm mega menu vào thì làm sao nhỉ?
  8. kingstone

    kingstone Active Member

    Cm hay quá nhỉ, vậy biết sao bạn không đóng góp cho bài viết, người ta đã để theo part, tức là hướng dẫn từng phần, cm ra vẻ !!
    Lê Xuân Thành thích bài này.
  9. Kal-El

    Kal-El Thành viên mới

    Tớ vẫn đang chờ những phần tiếp theo. Mấy Phần trên bạn viết rất dễ hiểu nên mọi người ít comment vì không có gì thắc mắc
    Lê Xuân Thành thích bài này.
  10. Lê Xuân Thành

    Lê Xuân Thành Staff Member

    đã update xong part 1 mời mọi người góp ý

Chia sẻ trang này