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

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 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.