"Bảng nổi" của hunghsmn đây

[hunghsmn]

Bôi đen chọn đoạn văn bản rồi bấm một phát được thế này đây.

[You must be registered and logged in to see this image.]

Hehe! Bỏ code lên đây sợ các pro cười, Vậy nên Ai cần thì mô tả cho kỹ: hình gì, màu nền, màu viền bóng ... Mình sẵn sáng phục vụ theo ý thích riêng từng người.

Chú ý: Chắc chắn về kỹ thuật không được như của các pro.

[Zero]

bác hùng đã sáng chế ra cái mới ròi

[ligerv]

bác hùng post code lên cho cháu với dc không ah . cũng tò mò về cái này

[hunghsmn]

bác hùng post code lên cho cháu với dc không ah . cũng tò mò về cái này

Được, để bác post lên đây luôn, đứa nào cười bác thì hở mười cái răng
CSS:

Code:

.bangnoi {
padding:10px;
border-top : 1px solid #FFD7C4;
border-right : 4px solid #0075EA;
border-bottom : 4px solid #0075EA;
border-left : 1px solid #FFD7C4;
background-color: #FFFFE8;

 -moz-border-radius-bottomright: 10px;
 -khtml-border-radius-bottomright: 10px;
 -webkit-border-bottom-right-radius:10px;

 -moz-border-radius-topleft: 10px;
 -khtml-border-radius-topleft: 10px;
 -webkit-border-top-left-radius:10px;

 -moz-border-radius-bottomleft: 10px;
 -khtml-border-radius-bottomleft: 10px;
 -webkit-border-bottom-left-radius:10px;

 -moz-border-radius-topright: 10px;
 -khtml-border-radius-topright: 10px;
 -webkit-border-top-right-radius:10px;
}

Tìm trong posting_bod:

Code:

      <button class="{BUTTON_WYSI_STYLE}" id="text_editor_cmd_switchmode" type="button" title="{SWITCH_EDITOR_MODE}"><img src="{PATH_IMG_FA}i/switch_wysiwyg.gif" alt="{SWITCH_EDITOR_MODE}" /></button> 

Chèn tiếp vào sau đó đoạn này:

Code:

<button class="button2" onmouseover="helpline('Tạo nền nổi cho văn bản')" onclick="bbfontstyle('[table class = bangnoi ][tr][td][img]http://i29.servimg.com/u/f29/13/89/26/52/icon0110.gif[/img][/td][td]','[/td][/tr][/table]');return false" type="button"><img src="http://i26.servimg.com/u/f26/14/26/60/46/icon0610.gif"></button> 

Ghi chú:
- cái nút bấm này thô quá: [You must be registered and logged in to see this image.] đứa nào vẽ đẹp thì cho bác
- Muốn sửa màu nền, màu viền, độ dày bòng, độ bo tròng góc... thì sửa CSS

[namulaw]

hay! vote cho bác Hùng, nhìn khá đẹp

[Sét]

vote cho bác nè...được ạ.

[IceFox]

Cháu sẽ ứng dụng bảng này của bác

[hunghsmn]

Cháu sẽ ứng dụng bảng này của bác

Cần chỉnh gì thì nói nhé, bác nói CSS bác kém là kém hơn các bạn kia chứ cũng không đến nỗi nào đâu

[IceFox]

vâng, cháu thấy cái bảng thì ổn rồi nhưng không biết phối màu sao cho nó hợp. Bác thử tìm màu khác phối lại thử xem. Làm cho nó có hiệu ứng 3D một tí

[mkkpro199x]

bác hung có cách nào để cho chỉ có mod và admin bảng nổi được không ?

[[k]u[b]in]

đẹp đấy bác hùng ơi. Vote cho bác

[hunghsmn]

vâng, cháu thấy cái bảng thì ổn rồi nhưng không biết phối màu sao cho nó hợp. Bác thử tìm màu khác phối lại thử xem. Làm cho nó có hiệu ứng 3D một tí

Thắc mắc này của cháu rất hay, chắc nhiều người cũng giống thắc mắc này. Bây giờ bác chép lại code CSS vào đây rồi kém theo chú thích ý nghĩa của từng dòng lệnh để mọi người tùy ý chỉnh:

Code:

.bangnoi {
padding:10px;                                /* khoảng từ chữ đến biên của  bảng */
border-top : 1px solid #FFD7C4;      /* đường viền trên: dày 1px, kiểu solid, mã màu  cam */
border-right : 4px solid #0075EA;    /* đường viền phải dày 4px kiểu solid, mã màu xanh đậm */
border-bottom : 4px solid #0075EA;  /* đường viền dưới dày 4px kiểu solid, mã màu xanh đậm */
border-left : 1px solid #FFD7C4;      /* đường viền trái dày 4px kiểu solid, mã màu cam */
background-color: #FFFFE8;          /* Màu nền */

 -moz-border-radius-bottomright: 10px;    /* Bo tròn góc dưới phải với độ bo 10px */
 -khtml-border-radius-bottomright: 10px;  /* Bo tròn góc dưới phải với độ bo 10px */
 -webkit-border-bottom-right-radius:10px;  /* Bo tròn góc dưới phải với độ bo 10px */

 -moz-border-radius-topleft: 10px;            /* Bo tròn góc trên trái  với độ bo 10px */
 -khtml-border-radius-topleft: 10px;          /* Bo tròn góc trên trái  với độ bo 10px */
 -webkit-border-top-left-radius:10px;        /* Bo tròn góc trên trái  với độ bo 10px */

 -moz-border-radius-bottomleft: 10px;      /* Bo tròn góc dưới phải với độ bo 10px */
 -khtml-border-radius-bottomleft: 10px;    /* Bo tròn góc dưới phải với độ bo 10px */
 -webkit-border-bottom-left-radius:10px;  /* Bo tròn góc dưới phải với độ bo 10px */

 -moz-border-radius-topright: 10px;        /* Bo tròn góc trên phải phải với độ bo 10px */
 -khtml-border-radius-topright: 10px;      /* Bo tròn góc trên phải phải với độ bo 10px */
 -webkit-border-top-right-radius:10px;      /* Bo tròn góc trên phải phải với độ bo 10px */
}


Thực ra để bo tròn 4 góc đều nhau như trên thì chỉ cần 2 dòng sau đây:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
Nhưng bác viết đến 12 dòng là có ý nghĩa khác: để các cháu có thể linh động bo 4 góc không đều nhau. Ví dụ cháu thử tăng độ bo của góc trên trái và trên phải lên 50 xem. Khi đó kết quả sẽ như hình sau: [You must be registered and logged in to see this image.] Nói chung là cháu có thể bóp méo cái bảng đó thành hình than, hình thoi, thậm chí hình tròn cũng được.

CSS còn nhiều điều thú vị lắm, từ từ bác học đến đâu sẽ chỉ lại các cháu. Khi các cháu hiểu và vận dụng sáng tạo theo ý riêng thì càng thú vị hơn.

bác hung có cách nào để cho chỉ có mod và admin bảng nổi được không ?

Không có cách nào đâu, chỉ có mẹo vặt là dấu cái nút đó đi chỗ nào đó ví dụ như thay cái ảnh nút bấm đó chỉ bằng một dấu cấm thôi, thì không ai để ý, bác mới nghĩ vậy thôi, thử coi! À có một cách là bấm vào nút insert table , ô thứ nhất gõ 1, ô thứ 2 gõ 2. Sau đó trong thẻ table gõ thêm vào class=bangnoi, trong thẻ td thứ nhất chèn vào ảnh biểu tượng gì đó, còn td thứ 2 thì viết văn bản. Đó là làm thủ công, bác nói thì dài chứ viết chẳng mấy chốc đâu nhưng phải thạo bbcode.

Thôi, để mọi người xài với sao thích vậy ?

[baivong]

Để cho mod và admin có bảng nổi thì bao quanh nút bấm bằng thẻ

Code:

<span class="hidenote"></span>

Sau đó tạo một forum widget nội dung thế này:

Code:

<style>.hidenote{display:none;}</style>

và phân quyền cho mem và guest

[IceFox]

Cháu đã sửa lại code của bác hùng. Cháu thêm 2 hiệu ứng shadow cho nó bắt mắt hơn:

Code:

.bangnoi {
padding:10px;
background-color: #FFF380;
  -webkit-box-shadow: 3px 4px 7px #999;
  -moz-box-shadow: 3px 4px 7px #999;

 -moz-border-radius-bottomright: 10px;
 -khtml-border-radius-bottomright: 10px;
 -webkit-border-bottom-right-radius:10px;

 -moz-border-radius-topleft: 10px;
 -khtml-border-radius-topleft: 10px;
 -webkit-border-top-left-radius:10px;

 -moz-border-radius-bottomleft: 10px;
 -khtml-border-radius-bottomleft: 10px;
 -webkit-border-bottom-left-radius:10px;

 -moz-border-radius-topright: 10px;
 -khtml-border-radius-topright: 10px;
 -webkit-border-top-right-radius:10px;
}

Demo:

Code:

http://www.trithuctrevn.tk/t200-topic#364

[hunghsmn]

- Hoang hô baivong đã chia sẻ
- Hoan hô Herokid thông minh

Bác bổ sung thêm: Các cháu có thể định dạng riêng cho văn bản bên trong bảng. Nghĩa là làm cho nó không giống văn bản bên ngoài. Ví dụ: chèn thêm code như trong hình vào CSS thì sẽ được như hình:

[You must be registered and logged in to see this image.]

( Trong hình thiếu một dấu chấm phảy ở hàng trên cùng)

[khanhloc1210]

cái posting_bod ở đâu vậy bác

[batonchinsu]

ACP => Display => Templates => Post & Tin nhắn => Posting_body

[Mr.Win™]

Cái này đúng là thứ em đang tìm !
để làm thử nhé !!!
Tks bác

[vlt]

[You must be registered and logged in to see this image.] ui trùi ui. cái chi đây?
thích quá. [You must be registered and logged in to see this image.]
vlt sẽ chôm đem về làm của gia bảo nhà 4all. [You must be registered and logged in to see this image.]
thankiu bác hùng nhiều thiệt nhiều. [You must be registered and logged in to see this image.]
vlt mà được như bác thui thì sướng quá. hehe [You must be registered and logged in to see this image.]

[Mr.Win™]

Sao em tìm không ra cái đoạn code trong Posting _ body mà anh đưa vậy !!!
Help với !!!

[IceFox]

Để cho mod và admin có bảng nổi thì bao quanh nút bấm bằng thẻ

Code:

<span class="hidenote"></span>

Sau đó tạo một forum widget nội dung thế này:

Code:

<style>.hidenote{display:none;}</style>

và phân quyền cho mem và guest

baivong hướng dẫn chi tiết được ko. Đọc ko hỉu

[Mr.FR]

Để cho mod và admin có bảng nổi thì bao quanh nút bấm bằng thẻ

Code:

<span class="hidenote"></span>

Sau đó tạo một forum widget nội dung thế này:

Code:

<style>.hidenote{display:none;}</style>

và phân quyền cho mem và guest

baivong hướng dẫn chi tiết được ko. Đọc ko hỉu

đại khái là bạn tạo cái widget có các thuộc tính css đó rồi phân quyền widget đó cho MOD với Admin thôi ! còn muốn cả forum dùng thì cho vào css luôn cũng được, khi viết bài muốn dùng thì dùng thẻ span hoặc div gọi nó ra, hoặc dùng trong class cũng được !

[IceFox]

À đã hiểu

[Lollipop]

Cái này cháu đang tìm bấy lâu nay.
Voted ^^

[batonchinsu]

Để cho mod và admin có bảng nổi thì bao quanh nút bấm bằng thẻ

Code:

<span class="hidenote"></span>

Sau đó tạo một forum widget nội dung thế này:

Code:

<style>.hidenote{display:none;}</style>

và phân quyền cho mem và guest

Sao em làm rồi mà nó vẫn hiện ra với mọi mem nhỉ?

[Lollipop]

Vừa mới lượn một phát ở c3z. Cháu thấy cái icon này của họ có vẻ đẹp [You must be registered and logged in to see this image.]

[thienan]

Sao em tìm không ra cái đoạn code trong Posting _ body mà anh đưa vậy !!!
Help với !!!

Bạn có thể đặt đoạn Code đó sau đoạn này cũng được nè:

Tìm đoạn Code này:

Code:

<button class="button2" id="text_editor_cmd_switchmode" type="button" title="{SWITCH_EDITOR_MODE}"><img src="{PATH_IMG_FA}i/switch_wysiwyg.gif" alt="{SWITCH_EDITOR_MODE}" /></button> 

Xem hình:
[You must be registered and logged in to see this image.]

[girl_jolly]

Hay quá!

Àh! Cháu hỏi thêm là làm sao để đặt bảng đó ở giữa bài viết vậy các bác

[nguyenvu90]

Hay quá!

Àh! Cháu hỏi thêm là làm sao để đặt bảng đó ở giữa bài viết vậy các bác

Bạn thêm đoạn align=center vào trong code của bác: Thành thế này

Code:

<button class="button2" onmouseover="helpline('Tạo nền nổi cho văn bản')" onclick="bbfontstyle('[table align=center class = bangnoi ][tr][td][img]http://i29.servimg.com/u/f29/13/89/26/52/icon0110.gif[/img][/td][td]','[/td][/tr][/table]');return false" type="button"><img src="http://i26.servimg.com/u/f26/14/26/60/46/icon0610.gif"></button>

[ThaiKeyboard]

Bác Hùng vô địch, bác Hùng muôn năm!!!
Bác ơi! Nó không hiện trên khung trả lời nhanh hả bác!

[Sponsored content]