Hướng dẫn tùy chỉnh giao diện Init Live Search khi tắt CSS mặc định

Hướng dẫn tùy chỉnh giao diện Init Live Search (v1.6+)

Init Live Search hỗ trợ 3 cách tùy biến giao diện frontend, phù hợp với mọi cấp độ người dùng – từ cơ bản đến chuyên nghiệp:

1. Chọn preset giao diện dựng sẵn

Vào Cài đặt → Init Live Search, bạn sẽ thấy tuỳ chọn Frontend CSS Style gồm 4 lựa chọn:

• Default (modal-style) – giao diện mặc định
• Full Screen Overlay – tìm kiếm toàn màn hình (style-full.css)
• Top Bar – thanh tìm kiếm nổi dạng Spotlight (style-topbar.css)
• None – tắt toàn bộ CSS, để bạn tự viết lại từ đầu

Chọn giao diện phù hợp và nhấn Lưu thay đổi để plugin tự áp dụng style tương ứng.

Lưu ý: bạn có thể tự tạo style mới bằng cách override file CSS trong theme, hoặc tắt tất cả để tự build UI riêng.

2. Override CSS bằng file trong theme

Đặt file tại đường dẫn sau:

wp-content/themes/your-theme/init-live-search/style.css

Nếu bạn chọn preset là “None (disable all built-in CSS)”, plugin sẽ kiểm tra và tự động load file init-live-search/style.css từ theme (nếu có).

3. Tắt toàn bộ CSS và tự viết lại giao diện

Đây là lựa chọn mạnh mẽ cho dev muốn full control.

Bật chế độ “No CSS”

Chọn None (disable all built-in CSS) trong phần Frontend CSS Style → lưu thay đổi.

Lúc này, Init Live Search sẽ không enqueue bất kỳ CSS nào, giúp bạn tự tạo mọi thứ từ đầu (tại style.css của theme).

4. Cấu trúc HTML cơ bản

Khi modal mở, bạn sẽ thấy cấu trúc như sau:

<div id="ils-modal" class="dark">
  <div class="ils-overlay"></div>
  <div class="ils-content">
    <div class="ils-inner">
      <button class="ils-search"></button>
      <button class="ils-close"></button>
      <input class="ils-input" type="text" />
      <div class="ils-suggestions">
        <span class="ils-suggest-pill active">Từ khóa gợi ý</span>
      </div>
      <div class="ils-results">
        <a class="ils-item" href="#">
          <div class="ils-thumb"><img src="thumb.jpg" /></div>
          <div class="ils-meta">
            <div class="ils-title">Tiêu đề kết quả</div>
            <div class="ils-info">12/12/2025 · Bài viết</div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

5. Mẹo khi viết lại giao diện

• Dùng scope #ils-modal để tránh đè global CSS
• Dùng biến CSS như --ils-bg, --ils-color để hỗ trợ theme tối/sáng
• Đặt chiều rộng modal tại .ils-content (max-width: 720px)
• Responsive bằng @media (max-width: 600px) hoặc tùy ý
• Nếu dùng Tailwind: bạn có thể custom plugin hoặc đặt prefix để không xung đột class

6. CSS tham khảo

Bạn có thể copy file style.css của plugin, tinh chỉnh lại hoặc viết mới hoàn toàn theo nhu cầu. Dưới đây là một đoạn ví dụ đơn giản:

#ils-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
}
#ils-modal.open {
  display: block;
}
.ils-content {
  background: #fff;
  max-width: 720px;
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
}
.ils-input {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #ccc;
}
.ils-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #eee;
}
.ils-title {
  font-weight: bold;
}

Kết luận

Init Live Search được thiết kế để “mở”, cho phép bạn kiểm soát hoàn toàn phần giao diện.

Bạn có thể chọn preset nhanh chóng, override bằng CSS riêng hoặc viết lại từ đầu – tất cả đều hỗ trợ tối đa khả năng tùy biến.

Hãy tận dụng điều đó để tạo nên trải nghiệm tìm kiếm đồng bộ, hiện đại và hiệu quả cho website của bạn.