[TUT] Trang trí khung quote và code

[Zero]

Demo:

Dành cho Punbb
Display >> Color >> CSS >> Cho đoạn css này vô

Code:

.postmain blockquote {
    background: url("http://i44.servimg.com/u/f44/15/64/85/86/quote10.gif") no-repeat scroll 0 0 #FDF9F9; /*Background và màu nền*/
    border-color: #E7BABA; /*Màu đường viền*/
    border-style: solid; /*Style đường viền*/
    border-width: 1px 1px 1px 20px;
    color: #C25252; /*Màu chữ*/
    margin: 10px 0 10px 10px;
    overflow: auto;
    padding: 28px 10px 10px;
    width: 90%;
}
.postmain blockquote:hover {
    background: url("http://i44.servimg.com/u/f44/15/64/85/86/quote-13.gif") no-repeat scroll 0 0 #FFFFFF; /*background và màu nền khi rê chuột vào*/
}

.codebox {
      background: url("http://i44.servimg.com/u/f44/15/64/85/86/code10.gif") no-repeat scroll 0 0 #F5F8FA; /*Background và màu nền*/
    border-color: #D7E8F0; /*Màu đường viền*/
    border-style: solid; /*Style đường viền*/
    border-width: 1px 1px 1px 20px;
    color: #000000; /*Màu chữ*/
    font: 13px/16px 'Courier New',Courier,monospace; /*style của chữ*/
    margin: 10px 0 10px 10px;
    max-height: 500px;
    min-height: 16px;
    overflow: auto;
    padding: 28px 10px 10px;
    width: 90%;
}
.codebox:hover {
    background: url("http://i44.servimg.com/u/f44/15/64/85/86/code-h10.gif") no-repeat scroll 0 0 #FFFFFF;
/*background và màu nền khi rê chuột vào*/}

Dành cho phpbb2
Display >> Color >> CSS >> Cho đoạn css này vô

Code:

.quote {
    background: url("http://i44.servimg.com/u/f44/15/64/85/86/quote10.gif") no-repeat scroll 0 0 #FDF9F9; /*Background và màu nền*/
    border-color: #E7BABA; /*Màu đường viền*/
    border-style: solid; /*Style đường viền*/
    border-width: 1px 1px 1px 20px;
    color: #C25252; /*Màu chữ*/
    margin: 10px 0 10px 10px;
    overflow: auto;
    padding: 28px 10px 10px;
    width: 90%;
}
.quote:hover {
    background: url("http://i44.servimg.com/u/f44/15/64/85/86/quote-13.gif") no-repeat scroll 0 0 #FFFFFF; /*Background và màu nền khi rê chuột vào*/
}

.code {
    background: url("http://i44.servimg.com/u/f44/15/64/85/86/code10.gif") no-repeat scroll 0 0 #F5F8FA; /*Background và màu nền*/
    border-color: #D7E8F0; /*Màu đường viền*/
    border-style: solid; /*Style đường viền*/
    border-width: 1px 1px 1px 20px;
    color: #000000; /*Màu chữ*/
    font: 13px/16px 'Courier New',Courier,monospace; /*style của chữ*/
    margin: 10px 0 10px 10px;
    max-height: 500px;
    min-height: 16px;
    overflow: auto;
    padding: 28px 10px 10px;
    width: 90%;
}
.code:hover {
    background: url("http://i44.servimg.com/u/f44/15/64/85/86/code-h10.gif") no-repeat scroll 0 0 #FFFFFF; /*background và màu nền khi rê chuột vào*/
}

Lưu ý: Mình đã ghi chú trong css dành cho newbie, mấy bạn muốn chỉnh sửa gì thì vào trong đó đọc nhá

[nightWalker]

Đẹp . Lấy xài ngay .

[martha.jones01]

đẹp, xin luôn

[Zero]

đẹp mà sao ko click cái vậy mấy bạn

[gaubon]

đã vote , có người khen đẹp mà vote - kia

[nhp]

đẹp thế bác zero

[sangls11]

gút, vốte cho cái

[Cyhitmen]

Hay lắm >.<

[Sấm]

Anh củng đem về xài nốt

[handsomevip007]

Vote cho bác Zero Hứa hẹn chút nữa sẽ tung hàng cạnh tranh

[phutu01]

cái này dung phpbb2 không được chả tác dụng gì cả

[IceFox]

Đẹp lắm! Rất xì tai

[hunghsmn]

cái này dung phpbb2 không được chả tác dụng gì cả

Đúng! VÌ nó không hiểu .postmain blockquote, .postmain blockquote:hover , .codebox và .codebox:hover
Vậy thì bạn cho nó vào trong cái mà nó hiểu. Ví dụ: code sau đây bác chủ để trong .postmain blockquote thì bạn mang về để trong .quote {....} ( tức là thay cho nội dung .quote {.....} đang có của bạn)

Code:

    background: url("http://i44.servimg.com/u/f44/15/64/85/86/quote10.gif") no-repeat scroll 0 0 #FDF9F9;
    border-color: #E7BABA;
    border-style: solid;
    border-width: 1px 1px 1px 20px;
    color: #C25252;
    margin: 10px 0 10px 10px;
    overflow: auto;
    padding: 28px 10px 10px;
    width: 90%;

Bạn thử xem nào!

CÒn đoạn sau đây của bác chủ, hoặc là bạn thay chứ none bằng thứ gì đó. VÍ dụ:
-moz-border-bottom-colors: none; thì sửa lại là -moz-border-bottom-colors: #FF0000;
hoặc không thì vứt cả đoạn này đi đừng có xài vì nó là ...none. Đã none thì để vô làm gì:

Code:

  -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;

Mình chỉ làm ví dụ cho thẻ quote để bạn ngẫm nghĩ thôi.
Bạn cũng có thể sửa lại kích thước, màu sắc, hình ảnh, đường viền theo ý bạn chứ không nhất thiết phải giống y chang bác chủ.

Cám ơn chủ topic , mình chỉ giúp các bạn mở mang thêm chút mà thôi. Mẫu này cũng đẹp. Nhưng mình vẫn thích kiểu ..."bảng nổi" hơn, khi nào chán thì mình lại thay bằng kiểu này.

[Zero]

cho none để newbie dễ thêm bớt chỉnh sửa ấy mà tính vô nói thêm vụ css phpbb2 mà bác nói rồi thì để cháu bố sung vô bài viết thêm

[hau_ja_ja]

chèn cái của bác hunghs.... vào phpbb2 như thế nào đây.

[hunghsmn]

cho none để newbie dễ thêm bớt chỉnh sửa ấy mà

Bác hiểu ý cháu. Đúng là cháu nói rõ hơn đi. Memb ở đây có bạn mới quá không hiểu đâu. Xem bác nói vậy rồi mà hau_ja_ja còn hỏi nè:

chèn cái của bác hunghs.... vào phpbb2 như thế nào đây.

[hau_ja_ja]

tại vì cháu kiến thức nông cạn nên không biết chèn vào trong chỗ nào của phpbb2.

[phutu01]

cái này dung phpbb2 không được chả tác dụng gì cả

Đúng! VÌ nó không hiểu .postmain blockquote, .postmain blockquote:hover , .codebox và .codebox:hover
Vậy thì bạn cho nó vào trong cái mà nó hiểu. Ví dụ: code sau đây bác chủ để trong .postmain blockquote thì bạn mang về để trong .quote {....} ( tức là thay cho nội dung .quote {.....} đang có của bạn)

Code:

    background: url("http://i44.servimg.com/u/f44/15/64/85/86/quote10.gif") no-repeat scroll 0 0 #FDF9F9;
    border-color: #E7BABA;
    border-style: solid;
    border-width: 1px 1px 1px 20px;
    color: #C25252;
    margin: 10px 0 10px 10px;
    overflow: auto;
    padding: 28px 10px 10px;
    width: 90%;

Bạn thử xem nào!

CÒn đoạn sau đây của bác chủ, hoặc là bạn thay chứ none bằng thứ gì đó. VÍ dụ:
-moz-border-bottom-colors: none; thì sửa lại là -moz-border-bottom-colors: #FF0000;
hoặc không thì vứt cả đoạn này đi đừng có xài vì nó là ...none. Đã none thì để vô làm gì:

Code:

  -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;

Mình chỉ làm ví dụ cho thẻ quote để bạn ngẫm nghĩ thôi.
Bạn cũng có thể sửa lại kích thước, màu sắc, hình ảnh, đường viền theo ý bạn chứ không nhất thiết phải giống y chang bác chủ.

Cám ơn chủ topic , mình chỉ giúp các bạn mở mang thêm chút mà thôi. Mẫu này cũng đẹp. Nhưng mình vẫn thích kiểu ..."bảng nổi" hơn, khi nào chán thì mình lại thay bằng kiểu này.

chèn như thế nó sẽ 0 có dạng khung của table (trích dẫn nằm trong khung quote)

như mấy cái hình trên thì nghĩ chèn được punb thôi

[hunghsmn]

Không sao hết , cứ từ từ rồi biết, hồi mới chơi ai cũng vậy thôi.
Bác nói rõ hơn: với Phpbb2 không có .postmain blockquote mà có .quote vì vậy mang phần nội dung của .postmain blockquote thay vào chỗ nội dung của .quote (.quote đã có sẵn trong CSS rồi, nhưng nội dung mặc định của nó khác). Phần nội dung là phần nằm giữa dấu { và dấu }.

Thôi cái này để chủ topic nói tiếp.

phutu01: kiểm tra lại đi vì bác đã kiểm nghiệm rồi mới nói

[hunghsmn]

Mới thử lại trong forum thử nghiệm đây, xem thử có giống không ?PHPBB2 đấy: bác chie chép một ít dòng trong code của cháu thôi, không chép hết đâu:

Code:

http://tinhthuong.forum.st/t154-topic#828

[handsomevip007]

Sao thấy bên này đông khách quá vậy. Qua đây quảng cáo xí
Khung Quote+Spoiler+Hide đẹp dạng A14IPSS-GA đây
http://diendan.chinhphuc.info/t18451-topic
P/s: Bác Hùng qua xem cho cháu với

[hunghsmn]

Không có chuyện gì viết spam chơi.

Thử sửa vài con số xem sao ( trong một forum thử nghiệm khác):

Code:

http://niemvui.123.st/t93-topic#362

Hix, sửa thêm chút nữa chắc giống với cái ..."bảng nổi" mình đang dùng.

Xem lại thì không giống. Của chủ topic chữ trích dẫn nắm bên trong. nhưng mà cái này là phpbb2.

[baivong]

Mấy Code mình viết lúc nào cũng có người bảo style tệ, chả hiểu vì sao, dù mình thấy rất hợp con mắt.
Các pro CSS có thể hỗ trợ mình vấn đề này không?

[hunghsmn]

Thần gió ơi ví dụ cái nào "tệ" nhất cho xem thử . Mình nghĩ trong ái tệ nhất đó thế nào mình cũng ăn cắp được cái hay.

[Ryn]

có code cho phpbb2 chưa vậy

[baivong]

Thần gió ơi ví dụ cái nào "tệ" nhất cho xem thử . Mình nghĩ trong ái tệ nhất đó thế nào mình cũng ăn cắp được cái hay.

Mời bác: http://diendan.chinhphuc.info/t18472-topic#119547

[Zero]

Đã thêm vào css dành cho phpbb2 và hướng dẫn chi tiết. Ai phàn nàn về việc không sử dụng được trên invision và phpbb3 thì vui lòng comment bên dưới, mình sẽ cập nhật thêm

[Cáo Già Đeo Nơ]

Mình muốn khung code nó ngắn bớt lại thì làm sao bạn?

Tại nó dài quá làm vỡ khung skin của mình.

[hunghsmn]

@GameMaster72:

Thêm max-width: 600px; vào .code là được.
Lệnh này có nghĩa là: Chiều rộng tối đa là 600px.

Điều này có thể áp dụng cho cà khung .quote và nhiều nơi khác nữa.

Bây giờ mình đố bạn:
Muốn qui định chiều rộng tối thiểu thì sao ?
Tương tự muốn qui định chiều cao tối đa, chiều cao tối thiểu thì sao ?

[Cáo Già Đeo Nơ]

@GameMaster72:

Thêm max-width: 600px; vào .code là được.
Lệnh này có nghĩa là: Chiều rộng tối đa là 600px.

Điều này có thể áp dụng cho cà khung .quote và nhiều nơi khác nữa.

Bây giờ mình đố bạn:
Muốn qui định chiều rộng tối thiểu thì sao ?
Tương tự muốn qui định chiều cao tối đa, chiều cao tối thiểu thì sao ?

Hi vậy chỉ cần thay width thành Height đúng không bác ?
Max thì đổi thành Min

Cháu thông minh từ bé

[Sponsored content]