Jump to content
IPSViet.com

Sign in to follow this  
Bim

Designers Mode: chỉnh sửa giao diện chuyên nghiệp

Recommended Posts

Bim    1,476

Ở bài viết trước mình có giới thiệu về Easy Mode cho việc chỉnh sửa giao diện một cách trực quan và dễ dàng nhất. Tuy nhiên hạn chế của Easy Mode là chỉ sửa được màu sắc, và độ rộng của giao diện, nhìn chung thì bố cục nó vẫn là giao diện mặc định của IPS. Để chỉnh sửa giao diện, can thiệp nhiều hơn vào các thành phần thì bắt buộc phải thay đổi code HTML rất nhiều. Việc này có thể làm trực tiếp trong ACP bằng chức năng "Edit HTML & CSS", vậy tại sao IPS lại thêm cái Designers Mode làm gì? Designers Mode cũng cho phép các bạn chỉnh sửa HTML, CSS của theme, và một khi nó được bật thì toàn bộ HTML, CSS sẽ được chứa đựng ở 1 thư mục themes/ (ngang hàng với conf_global.php). Nó có các ưu điểm sau:

  1. Vì nó xuất file ra thư mục themes/ cho nên có thể dùng các phần mềm hỗ trợ lập trình (IDE) như notepad++, phpstorm,... sẽ dễ dàng nhìn code hơn là edit trong ACP.
  2. Dễ dàng tìm kiếm các elements qua việc tìm nội dung trong files.
  3. Dễ dàng thêm một template bit, images hay css chỉ bằng cách thêm file mới vào đúng thư mục

Để bật Designers Mode, vào ACP -> Customization -> Themes bấm nút Designers Mode

designermode.thumb.jpg.e099e0a033925e1f8

Sau khi bật Designers Mode, một thư mục theme/ được tạo với cấu trúc thế này:

themes/

--1/

----css/

----images/

----templates/

--2/

....

1 và 2 là ID của theme, css/ chứa css, images/ chứa hình ảnh, templates/ chứa các file .phtml

Bây giờ chỉ việc chỉnh sửa giao diện theo ý bạn thôi. Sau khi làm xong thì bạn có thể tắt Designers Mode để xuất giao diện ra và share lên ipsviet :1

Share this post


Link to post
Share on other sites
zuzuzu    12

Sau khi bật nó lên click chuột phải và view thì thấy các elements nhưng phía bên phải cái đường link nó chỉ hiện vd: css.php:2171 trong khi cái thư mục themes/css nó chứa các thư mục con và hàng tá file css nhưng khi mình view nó lại chỉ hiện như vd ở trên css.php:2171, css.php:2174 ..v ..v... chứ không hiện theo kiểu vd: ipb_styles.css:644 như bản 3x nên mình thấy các elements nhưng không biết nó nằm ở css nào để edit. Nhờ Chị Bim hướng dẫn.

Share this post


Link to post
Share on other sites
admin    71

Dùng notepad++ hoặc một IDE khác tìm nội dung file (là tên element) trong thư mục theme.

  • Like 1

Share this post


Link to post
Share on other sites
Bim    1,476
Just now, tn3by said:

Cho hỏi Mod tag @ là gì vậy Bim ^^

Nó tích hợp sẵn trong IPS rồi ko cần mod gì cả.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×