Chỉnh sửa giao diện hiển thị chi tiết tài liệu phần mềm SliMS

Edit antarmuka tampilan detail dokumen perangkat lunak SlimS


Giao diện hiển thị chi tiết thông tin tài liệu trên phần mềm quản lý thư viện SLiMS mặc định đã đẹp mắt tuy nhiên nếu bạn muốn thay đổi một chút theo nhu cầu sử dụng thì BlogITCode sẽ hướng dẫn các file để các bạn có thể thực hiện chỉnh sửa:

- Đầu tiên và quan trọng nhất là bạn nên backup source code trước khi thực hiện;

- Thay đổi vị trí, ẩn bớt các thông tin hiển thị bạn sửa trong file detail_template.php của giao diện bạn đang sử dụng (\www\slims\template\default);

bạn có thể thêm các class css để định dạng cho đẹp mắt, code định dạng css viết trong file style.css của giao diện bạn đang sử dụng (www\slims\template\default\assets\css);

- Nếu bạn muốn thêm dữ liệu hiển thị cho trang chi tiết tài liệu thì bạn phải chỉnh sửa trong file hệ thống của SliMS, cụ thể là file detail.inc.php (www\slim\lib),

Ví dụ thêm tiêu đề cho bảng dữ liệu xếp giá, xem demo bên dưới để thấy rõ

+ Hiển thị mặc định của SLiMS

Edit antarmuka tampilan detail dokumen perangkat lunak SlimS

+ Hiển thị khi đã được chỉnh sửa

Hướng dẫn trên nhằm mục đích chỉ cho các bạn khi chỉnh sửa hiển thị chi tiết thông tin tài liệu cần thực hiện ở file nào. Tùy vào nhu cầu sử dụng để tùy biến lại cho hợp lý.

* Nếu bạn muốn giao diện giống demo mà BlogITCode thực hiện thì có thể tải về các file dưới đây. 

- Chép đè file detail.inc.php vào thư mục lib (www\slim\lib);

- Chép đè file detail_template.php vào thưc mục giao diện bạn đang sử dụng (\www\slims\template\default);

- Mở file style.css (www\slims\template\default\assets\css); past đoạn code sau:

/* Custom detail */

.detail-item{

  border-bottom: 1px #ccc solid;

   padding: 15px 15px 15px 0 !important;

}

.title-item{

  font-weight: 600;

  font-size:15px;

  color: #4D3974;

  border-bottom: 2px #4D3974 solid;

  padding: 15px 15px 15px 0 !important;

  text-transform:uppercase;

}

dt{

font-weight:400;

}

.lead {

  font-size: 1rem;

  font-weight: 300;

  color:#807c7c;

}

.detail-desc{

font-style: italic

}

- Xóa cache trình duyệt để xem kết quả



Nếu bạn thấy nội dung trên blog hữu ích vui lòng chia sẻ bài viết hoặc mời BlogITCode một ly cà phê nhé!

Mới hơn Cũ hơn
Đọc tiếp: