C5ZONE
CHÀO MỪNG BẠN ĐÃ GHÉ THĂM DIỄN ĐÀN C5Zone


Bạn nên đăng nhập hoặc đăng ký thì mới xem được những nội dung chính của DIỄN ĐÀN. Việc đăng nhập hoặc đăng ký làm thành viên không tốn phí gì đâu. bạn yên tâm.
Bạn cũng có thể cứ làm khách vẫn xem được một phần nội dung của Diễn đàn, nhưng bị nhiều hạn chế hạn chế ở các chuyên mục như: không xem được ảnh, không nhìn thấy link ...

< /form>< /div>< /div>
C5ZONE
CHÀO MỪNG BẠN ĐÃ GHÉ THĂM DIỄN ĐÀN C5Zone


Bạn nên đăng nhập hoặc đăng ký thì mới xem được những nội dung chính của DIỄN ĐÀN. Việc đăng nhập hoặc đăng ký làm thành viên không tốn phí gì đâu. bạn yên tâm.
Bạn cũng có thể cứ làm khách vẫn xem được một phần nội dung của Diễn đàn, nhưng bị nhiều hạn chế hạn chế ở các chuyên mục như: không xem được ảnh, không nhìn thấy link ...

< /form>< /div>< /div>
C5ZONE
Would you like to react to this message? Create an account in a few clicks or log in to continue.

C5ZONELog in

We Share


descriptionMột số tùy chỉnh css cho cập nhật SCEditor ngày 12.06.2013 EmptyMột số tùy chỉnh css cho cập nhật SCEditor ngày 12.06.2013

more_horiz
Tất cả code hướng dẫn trong bài này đều dùng CSS, bạn sử dụng code nào thì thêm nó vào cuối CSS Stylesheet.
ACP >>Display >>Pictures and Colors >>Colors >>CSS Stylesheet

Chọn màu:

Cập nhật mới cho phép chọn nhiều hơn, đến 441 màu chữ, tuy vậy, thiết kế lại khá nhỏ (10x10px). CSS dưới đây sẽ làm đặt 1 ô hiển thị màu (20x20px) khi rê chuột tại vị trí nút chọn màu.


Code:

.sceditor-color-option:hover:after{width:20px;height:20px;display:block;background:inherit;content:"
 ";position:absolute;top:-24px;left:2px;border:1px solid #FFF}





Một số tùy chỉnh css cho cập nhật SCEditor ngày 12.06.2013 13-06-11


Chọn biểu tượng vui

Trong cập nhật này, tất cả biểu tượng vui đều được thu nhỏ (15x15px), khi rê chuột đến nó sẽ hiện kích thước thật ngay bên cạnh. CSS dưới đây sẽ thêm màu nền và viền cho biểu tượng dễ nhìn hơn.


Code:

.sceditor-emoticons > div > img{background:#FFF;border:1px solid #DDD;padding:5px}




Một số tùy chỉnh css cho cập nhật SCEditor ngày 12.06.2013 13-06-10


Việc hiển thị toàn bộ biểu tượng vui khá tiện, tự căn chiều rộng, tối đa là đến mép phải trình duyệt. Đối với một số diễn đàn dùng nhiều biểu tượng thì chiều dài khung lại khá lớn và bất tiện. CSS dưới đây sẽ cố định chiều dài (200px), và hiển thị biểu tượng xem trước ở góc trên-phải khung biểu tượng vui.


Code:

.sceditor-emoticons > div{height:200px;overflow-y:scroll}
.sceditor-emoticons
 > div >
img{left:auto!important;top:-38px!important;right:-8px;background:#FFF;border:1px
 solid #DDD;padding:5px}




Một số tùy chỉnh css cho cập nhật SCEditor ngày 12.06.2013 13-06-12


Mở rộng tối đa khung soạn thảo:

Dành cho những bạn thích hiển thị 100% chiều rộng.



Code:

.sceditor-container,#textarea_content{width:100%!important}
.frm-form textarea,.frm-form iframe{width:calc(100% - 10px)!important}





CSS dưới đây chỉ là sửa lỗi kích thước các nút bbcode (nếu có) và thay đổi màu viền, bo tròn do sở thích của mình, bạn có thể bỏ qua nó nếu thấy không phù hợp.


Code:

.frm-form
[class|="sceditor"]{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;border-radius:0!important;text-align:left}
.sceditor-group,#pun-qpost .main-content.frm{border:1px solid #D1D1D1!important}




Một số tùy chỉnh css cho cập nhật SCEditor ngày 12.06.2013 13-06-13
(Ảnh chỉ mang tính chất minh họa)

Nguồn: http://ctrlc.123.st/t908-mot-so-tuy-chinh-css-cho-cap-nhat-sceditor-ngay-12062013#7993


Viết bởi baivong - http://ctrlc.123.st/

descriptionMột số tùy chỉnh css cho cập nhật SCEditor ngày 12.06.2013 EmptyRe: Một số tùy chỉnh css cho cập nhật SCEditor ngày 12.06.2013

more_horiz
Ở khung soạn thảo thường, dùng bbcode thì nó vẫn chịu ảnh hưởng của CSS diễn đàn, tuy nhiên, ở chế độ WYSIWYG thì khung soạn thảo được đặt iframe, vì thế, để thay đổi CSS bạn không thể dùng cách thông thường được, code dưới đây sẽ giúp bạn làm điều đó.

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management >> Một số tùy chỉnh css cho cập nhật SCEditor ngày 12.06.2013 AjouterCreate a new javascript
Title * : Ctrl© - Chỉnh CSS mặc định của khung soạn thảo
Placement : In all the pages
Javascript Code * :


Code:

$(window).load(function () {
   $(".sceditor-container iframe").contents().find("head").append("<style>{CSS}</style>")
});



Thay

Code:

{CSS}

trong code trên bằng CSS bạn muốn.
Lưu ý: nếu trong CSS của bạn có dấu nháy kép (") thì phải chuyển về nháy đơn (') và loại bỏ các dấu xuống dòng.

Ví dụ:

CSS của bạn:

Code:

blockquote cite:after{
   content:" đã viết:"

Thì khi đưa vào code trên sẽ là:

Code:

    $(window).load(function(){
       $(".sceditor-container iframe").contents().find("head").append("<style>blockquote cite:after{content:' đã viết:'}</style>")
    });

Một số tùy chỉnh css cho cập nhật SCEditor ngày 12.06.2013 13-06-15

Một số tùy chỉnh css cho cập nhật SCEditor ngày 12.06.2013 13-06-16

(Ảnh chỉ mang tính chất minh họa)



Viết bởi baivong - http://ctrlc.123.st/
privacy_tip Permissions in this forum:
You cannot reply to topics in this forum