[Hỏi đáp] Làm đẹp khung trích dẫn

  Bài viết hay nhất1
Mình muốn có một khung trích dẫn như hình bên dưới:


Khung trích dẫn của mình bị lỗi mất phần mũi nhọn phía trên bên trái và hình 2 khung trích dẫn nhỏ bị nick của thành viên được trích dẫn đè lên.


Rất mong nhận được sự giúp đỡ của các bạn để mình có một khung trích dẫn đẹp như của DEVs. Xin chân thành cảm ơn.
  Bài viết hay nhất2
Vô CSS, tìm .post-entry cite, đổi padding: 0 0 3px 20px; thành padding: 0 0 3px 20px !important;
Tìm .post-entry blockquote, đổi margin: 0 0 10px 10px; thành margin: 0 0 10px 10px !important;
  Bài viết hay nhất3
cho mình xin cách làm như thế dc ko
  Bài viết hay nhất4
Bước 1: Xóa dấu nháy và cái nền xám của Khung Quote mặc định.


Thêm vào CSS:

Code:
/*Xóa dấu nháy, màu nền và khung của Quote */
blockquote cite {background-color: transparent; background-image: url(); border: 0;}

Bước 2: Thay cái khung bao quanh hình chữ nhật của Khung Quote mặc định.


Thêm vào CSS:

Code:
/* Thay thế khung Quote mặc định */
.post-entry blockquote {background: #FFF;border: 1px solid #DDD;color: #333;position: relative;margin: 0 0 10px 10px !important;padding: 10px 15px!important;}
.post-entry cite{font-size:13px;font-weight:700;text-decoration:underline;background:url(//i83.servimg.com/u/f83/16/58/89/73/commen10.gif) no-repeat left 2px transparent;margin:0!important;padding:0 0 3px 20px !important;}
.post-entry blockquote:before {content: '';display: inline-block;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-right: 10px solid #CCC;position: absolute;top: 10px;left: -10px;height: 0;}
.post-entry blockquote:after {content: '';display: inline-block;border-top: 9px solid transparent;border-bottom: 9px solid transparent;border-right: 9px solid #fff;position: absolute;top: 11px;left: -9px;height: 0;}

Ghi chú: Có thể thay thế mã màu trong .post-entry blockquote để có được Khung trích dẫn phù hợp với forum của bạn
  Bài viết hay nhất5

@Panda wrote:
Bước 1: Xóa dấu nháy và cái nền xám của Khung Quote mặc định.



Thêm vào CSS:

Code:
/*Xóa dấu nháy, màu nền và khung của Quote */
blockquote cite {background-color: transparent; background-image: url(); border: 0;}

Bước 2: Thay cái khung bao quanh hình chữ nhật của Khung Quote mặc định.


Thêm vào CSS:

Code:
/* Thay thế khung Quote mặc định */
.post-entry blockquote {background: #FFF;border: 1px solid #DDD;color: #333;position: relative;margin: 0 0 10px 10px !important;padding: 10px 15px!important;}
.post-entry cite{font-size:13px;font-weight:700;text-decoration:underline;background:url(//i83.servimg.com/u/f83/16/58/89/73/commen10.gif) no-repeat left 2px transparent;margin:0!important;padding:0 0 3px 20px !important;}
.post-entry blockquote:before {content: '';display: inline-block;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-right: 10px solid #CCC;position: absolute;top: 10px;left: -10px;height: 0;}
.post-entry blockquote:after {content: '';display: inline-block;border-top: 9px solid transparent;border-bottom: 9px solid transparent;border-right: 9px solid #fff;position: absolute;top: 11px;left: -9px;height: 0;}

Ghi chú: Có thể thay thế mã màu trong .post-entry blockquote để có được Khung trích dẫn phù hợp với forum của bạn

Cảm ơn bạn nhé
You cannot reply to topics in this forum