Hiện nay, để làm viền trong suốt, cách dùng phổ biến là dùng ảnh trong suốt. Phương pháp này có ưu điểm là hiển thị tốt trên mọi trình duyệt.
Ví dụ: Ảnh nền 4all - [You must be registered and logged in to see this link.]
Nhược điểm:
Sẵn tiện có một bạn nhờ mình làm viền nên mình viết dẫn luôn, tạm thời thì dò trên google vẫn chưa tìm thấy hướng dẫn dạng này.
Hướng dẫn chung:
Cách 1: Tạo khung viền toàn bộ
Demo: [You must be registered and logged in to see this link.]
Hướng dẫn cho punBB:
ACP >> Display >> Templates >> Ganeral >> overall_header:
Bước 1: Tìm:
1 - Viền khung:
Bước 2: Thêm vào trước:
Chú ý: Thay đổi thuộc tính width theo chiều rộng forum bạn
Nếu muốn tăng/giảm độ dày của viền thì thay đổi thuộc tính padding
Ví dụ: Ảnh nền 4all - [You must be registered and logged in to see this link.]
Nhược điểm:
- Khó thay đổi: Để làm được ảnh nền này, bạn cần có vốn nho nhỏ về photoshop, tuy nhiên trên mạng thì ảnh nền dạng này cũng không hiếm.
- Cố định: Chiều rộng của forum sẽ phải cố định khi dùng ảnh nền này, đối với desktop tỉ lệ 4:3 thì phần cuối trang sẽ mất ảnh nền (Nếu tỷ lệ ảnh không phù hợp).
Sẵn tiện có một bạn nhờ mình làm viền nên mình viết dẫn luôn, tạm thời thì dò trên google vẫn chưa tìm thấy hướng dẫn dạng này.
Hướng dẫn chung:
Cách 1: Tạo khung viền toàn bộ
- Code:
<div style="border-style: solid; border-color: rgb(137, 137, 137); border-radius: 5px; border-width: 2px; background-color: rgba(255, 254, 254, 0); box-shadow: 3px 3px 7px 2px; padding: 10px; width: 968px; margin: 10px auto;">
<!-- Nội dung cần viền -->
</div>
- Code:
<div style="border-style: solid; border-color: rgb(137, 137, 137); border-width: 0pt 2px; background-color: rgba(255, 254, 254, 0); box-shadow: 3px 3px 7px 2px; padding: 0 10px; width: 968px; margin: 0 auto;">
<!-- Nội dung cần viền -->
</div>
Demo: [You must be registered and logged in to see this link.]
Hướng dẫn cho punBB:
ACP >> Display >> Templates >> Ganeral >> overall_header:
Bước 1: Tìm:
- Code:
<div class="pun">
1 - Viền khung:
- Code:
<div style="border-style: solid; border-color: rgb(137, 137, 137); border-radius: 5px; border-width: 2px; background-color: rgba(255, 254, 254, 0); box-shadow: 3px 3px 7px 2px; padding: 10px; width: 968px; margin: 10px auto;">
- Code:
<div style="border-style: solid; border-color: rgb(137, 137, 137); border-width: 0pt 2px; background-color: rgba(255, 254, 254, 0); box-shadow: 3px 3px 7px 2px; padding: 0 10px; width: 968px; margin: 0 auto;">
Bước 2: Thêm vào trước:
- Code:
</body>
- Code:
</div>
Chú ý: Thay đổi thuộc tính width theo chiều rộng forum bạn
- Code:
width: 968px;
Nếu muốn tăng/giảm độ dày của viền thì thay đổi thuộc tính padding
- Code:
padding: 10px;
Viết bởi baivong