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

[CPFounder]

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á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 :

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 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) :

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.

[eDDy sMjle]

cái này phpbb2 xài được hông ??

[keyby]

cái này phpbb2 xài được hông ??

có
tìm đoạn
.quote
sau đó tìm
background-color
đổi thành
background:#ffffff url(link ảnh)
Em chỉ biết làm thế này thui chớ chưa biết căn chữ thế nào

về màu chữ trong khung quote thì tìm color: và thay mã màu vào tìm trong
Ví dụ của em là color: #04a74c
.quote đó nhá không lại sai thì bảo em chỉ sai

Nên cop CSS ra chỗ khác trước khi đổi (sợ mấy anh làm sai :shock:)

[hoanggiang92]

chiỉnh hộ em lun với

[Sponsored content]