You are not connected. Please login or register

  1. ☆SimonFounder

    ☆Simon
    Giới tính :
    Nam
    Số bài viết :
    205
    Tham gia :
    20/01/2012
    [Code] Tạo viền nền forum CSS đơn giản Flag_r10Hiệ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:
    • 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>
    Cách 2: Tạo khung viền dọc 2 bên
    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">
    và thêm vào đằng trước nó một trong 2 code sau:
    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;">
    2 - Viền dọc:
    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>
    bằng code sau:
    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
  2. Trà MyModerators

    Trà My
    Số bài viết :
    17
    Tham gia :
    11/02/2012
    ohm! Tks Laughing

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 
  • Free forum | ©phpBB | Free forum support | Báo cáo lạm dụng | Thảo luận mới nhất
© 2012 Zone-A7
FM PunBB - Rip by Simon