Hướng dẫn tùy chỉnh nội dung menu hiệu ứng động- Digital Signage Template nâng cao

Ở bài viết trước chắc hẳn bạn đã nắm được các bước cơ bản để chỉnh sửa nội dung của một digital signage template bao gồm chỉnh sửa hình ảnh, nội dung các đoạn text. Hôm nay chúng ta sẽ tiếp tục với việc tùy chỉnh nâng cao: chỉnh sửa màu sắc, font chữ,… Nói là nâng cao bởi vì chúng ta phải dùng đến file code css. Tuy nhiên bạn không cần phải lo lắng, chỉ với những bước cơ bản dưới đây bạn hoàn toàn có thể làm chủ được nội dung template của mình mà không cần có kiến thức về lập trình.

1. Thay đổi màu chữ

Để thay đổi màu text (tên nhà hàng, tên món ăn, thức uống, …) bạn cần tác động lên file style.css (chứa trong thư mục css). Màu sắc text được định dạng bởi thuốc tính color.

Bước 1: Khi đang chạy template trên trình duyệt web, muốn thay đổi kích thước chữ của dối tượng nào nhấp phải chuột chọn inspect (hoặc tổ hợp phím Ctrl + Shift + I)

Sau đó sẽ xuất hiện đoạn màn hình sau:

Dựa vào đoạn code này, bạn có thể biết được đoạn text này đang định dạng theo class hoặc id nào (Ở đây bạn không cần quan tâm khái niệm class hay id) . Bạn chỉ cần đọc class ở thẻ div bao ngoài của đoạn text đó (như ở ví dụ trên là class=”name-left”).

Bước 2: mở file style.css (có thể mở bằng editor notepad ++)

Tìm kiếm class= “name-left” (ctrl + F, nhập “name-left” để tìm kiếm) và chỉnh sửa phần giá trị ở thuộc tính color.

Ví dụ: Gỉa sử user muốn thay đổi màu text từ màu trắng (mã màu: 000000) sang màu đỏ (mã màu: f20f0f) thì ở thuộc tính color bạn chỉ cần đổi #000000 thành #f20f0f.

Để biết mã màu bạn có thể tìm kiếm trên internet hoặc sử dụng một số phần mềm như photoshop…

Dưới đây là một trang web cung cấp mã màu mà bạn có thể tham khảo: http://www.vietsol.net/tin-tuc/chi-tiet/bang-ma-mau-cho-web-web-color-322/

Chỉ cần đổi mã màu ở thuộc tính color như hình là đã đổi được màu của text.

2. Thay đổi kích thước chữ:

Điểm nổi bật của digital signage template SeeMNS  là hỗ trợ tính năng tự động tăng giảm cỡ chữ khi thay đổi độ dài text và phụ thuộc vào kích thước được định nghĩa ban đầu.

Tuy nhiên, bạn hoàn toàn có thể thay đổi kích thước chữ theo ý muốn của mình.

Cỡ chữ được định dạng bởi thuộc tính font-size.

Tương tự như cách thay đổi màu chữ, để thay đổi cỡ chữ bạn cần xác định class nào đang định đạng cho đoạn text bạn đang cần thay đổi.

Ví dụ: để tăng cỡ chữ cho đoạn text “Lemonade” ở ví dụ trên từ 90px lên 120px thì:

Tại dòng lệnh: font-size: 90px;

Sẽ đổi thành: font-size: 120px;

Như vậy đã hoàn thành quá trình chỉnh sửa nội dung template, user chạy file demo.html hoặc index.html là có thể quan sát kết quả. 

Bạn có thể  tham khảo một số digital signage template do SeeMNS cung cấp tại website http://mns.tv/

Mọi thắc mắc xin liên hệ MNS: 093 550 0368 (En) | 097 848 1789 (Vi) | hello@mns.tv