[CSS]Trang trí cho khung quote ( trích dẫn ) của forum

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 :

Code:

blockquote {
margin: 1em 1px 1em 25px;
padding: 5px;
background: #ebeadd url("http://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ách search với từ khoá "color code"

5. Thay đổi hình nền :Chèn liê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 :

Code:

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

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

Code:

blockquote div {
margin-left: 20px;
}

Tuỳ theo hình mà bạn canh 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 nên chỉnh 20px thành 50px cho nó đẹp.


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

Code:

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;
}