Trang trí cho khung trích dẫn (quote) của diễn đàn cho phpBB3

by **CPFounder** 10/2/2010, 6:08 am

CHUẨN BỊ :
1. Đọc bài viết đầu tiên trong BOX này.
2. Sao lưu nếu đã có chỉnh sửa trước đó.
3. Xem thêm kiến thức bổ trợ về background ( có thể search trên google hoặc xem ở topic Background)

TIẾN HÀNH:
1. Vào css style sheet Tìm đến đoạn :
(Sẽ khác chỗ màu sắc và hình nền tuỳ forum)
Cơ bản :

blockquote {
margin: 1em 1px 1em 25px;
padding: 5px;
background: #ebeadd url("https://2img.net/i/fa/prosilver/quote.gif") 6px 8px no-repeat;
border: 1px solid #DBDBCE;
font-size: 0.95em;
margin: 1em 1px 1em 25px;
overflow: hidden;
}
blockquote div {
margin-left: 20px;
}

2. Tìm 1 hình ưng ý làm nền cho quote , ví dụ ở giupdo EA dùng hình Trang trí cho khung trích dẫn (quote) của diễn đàn cho phpBB3 Lyric_bg

với nền trắng và lặp hình theo cột y để ra dạng giống như cuốn sổ.
Có rất nhiều hình tuỳ sự sáng tạo trong tìm kiến và ứng dụng của các bạn sao cho phù hợp forum các bạn. Mình sẽ post lên nếu tìm được các mậu quote khác (cái này dạo forum đảm bảo có :Vỗ tay: )

3. Xoá đi chữ no-repeat.
Thêm dòng background-repeat: repeat-y; vào dưới dỏng background: #ebeadd... tốt nhất nên chọn hình lặp lại theo chiều dọc để có thể tuỳ biến với độ dài của quote.
4. Thay đổi màu nền : chỉ cần đổi mã màu từ #ebeadd thành mã màu mong muốn. Có thể xem mã màu bằng cáchchinhphuc.info search với từ khoá "color code"

5. Thay đổi hình nền :Chèn chinhphuc.infoliên kết hình đã chọn ở bước 2 vào chỗ https://2img.net/i/fa/prosilver/quote.gif . trường hợp giupdo sau khi chèn vào sẽ ra như sau :

background: #ffffff url("http://www.vietnhim.com/webimages/lyric_bg.gif") 6px 8px;

6. Canh lề lại : Thay đổi số margin

blockquote div {
margin-left: 20px;
}

Tuỳ theo hình mà bạn canhchinhphuc.info sao cho chữ nằm trọn vẹn trong khung.
Trong trường hợp hình lớn thì chỉnh số càng lớn.
Do hình mình chọn nó to chinhphuc.infonên chỉnh 20px thành 50px cho nó đẹp.

Sau khi đã chỉnh sửa ( hiện ra quote y chang forum giupdo) :

blockquote {
margin: 1em 1px 1em 25px;
padding: 5px;
background: #ffffff url("http://www.vietnhim.com/webimages/lyric_bg.gif") 6px 8px;
background-repeat: repeat-y;
border: 1px solid #DBDBCE;
font-size: 0.95em;
margin: 1em 1px 1em 25px;
overflow: hidden;
}
blockquote div {
margin-left: 50px;
}

:bulgyeyes: vậy là trang trí xong cho quote, nhớ submit rồi mới xem nhé. chúc các bạn thành công! Mọi thắc mắc có thể hỏi tại đây.
chinhphuc.info

Tác giả