CSS trong thiết kế Comment toolbar

Sau 2 bài entry hướng dẫn bạn ứng dụng CSS trong thiết kế blog 360plus thông qua hình nền (background) và đường viền module (border). Giờ xin giới thiệu bạn bài tiếp theo về ứng dụng CSS trong thiết kế Thanh công cụ hỗ trợ comment (Comment toolbar). Bạn để ý mỗi lần viết Lời bình cho Bài viết hay viết Tin nhắn (Comments), sẽ đều thấy có một thanh công cụ ở phía trên khoảng trống comment, gồm nhiều menusđịnh dạng văn bản khác nhau (Font, Size, Colour, Image, Aligment...). Thay vì có một thanh công cụ đơn điệu, nền xám mặc định, bạn có thể tự tạo cho blog của mình một thanh công cụ lung linh, đa màu sắc hay trên nền những bức tranh, hình ảnh nào đó mà bạn yêu thích...

Bạn vẫn theo các bước đi thuộc lòng đầu tiên này nhé: Click vào tab THIẾT KẾ => Xuất hiện cửa sổ và click THEME => Xuất hiện cửa sổ tiếp theo và chọn CHẾ ĐỘ TỰ CHỈNH SỬA và click TIẾP => Sang cửa sổ tiếp theo và có vùng CSS trống ở dưới, là nơi điền Code vào.

Giờ thì xin bạn ghi nhớ Code sau này để ứng dụng và tùy chỉnh Comment toolbar nhé:

.rte_toolbar {
background:#d7d7d7 url(http://abc) repeat-x top;
border-left:1px solid #0448f6;
border-top:1px solid #0448f6;
border-right:1px solid #0448f6;
height:mnppx;}

(Trong đó: http://abc là đường link hình ảnh, mnp là kích thước của hình (pixel).
Việc chọn kiểu hình ảnh và kích thước hình phù hợp cũng không kém phần quan trọng để bạn có được một Comment toolbar đẹp như ý)

Bạn hãy thực hành ngay nhé, để thấy được điều thú vị trên Comment toolbar mà 360plus mang đến. Và có nhiều ứng dụng hay nữa, sẽ bổ sung đến các bạn sau.