[CSS] Thay đổi button icon của thanh editor

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down

Chủ đề [CSS] Thay đổi button icon của thanh editor

Bài gửi by HelpsFMvi on Fri Mar 18, 2016 5:04 pm


Demo:

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

Hướng dẫn:

Các bạn cho đoạn này vào CSS:
Code:
.sceditor-button-bold div {
    background-image:url('http://i57.servimg.com/u/f57/18/21/41/30/b10.png') !important;
    background-position:0 !important;
}
 
.sceditor-button-italic div {
    background-image:url('http://i57.servimg.com/u/f57/18/21/41/30/i10.png') !important;
    background-position:0 !important;
}
 
.sceditor-button-underline div {
    background-image:url('http://i57.servimg.com/u/f57/18/21/41/30/u10.png') !important;
    background-position:0 !important;
}
 
.sceditor-button-strike div {
    background-image:url('http://i57.servimg.com/u/f57/18/21/41/30/s10.png') !important;
    background-position:0 !important;
}

CSS trên chỉ thay đổi cho 4 cái button như demo thôi còn các bạn muốn thay đổi toàn bộ icon trong editor thì sử dụng đoạn CSS này:
Code:
/* bold */
.sceditor-button-bold div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* italic */
.sceditor-button-italic div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* underline */
.sceditor-button-underline div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* strike */
.sceditor-button-strike div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* text align left */
.sceditor-button-left div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* text align center */
.sceditor-button-center div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* text align right */
.sceditor-button-right div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* text align justify */
.sceditor-button-justify div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* bullet list */
.sceditor-button-bulletlist div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* ordered list */
.sceditor-button-orderedlist div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* horizontal rule */
.sceditor-button-horizontalrule div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* quote */
.sceditor-button-quote div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* code */
.sceditor-button-code div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* spoiler */
.sceditor-button-faspoiler div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* hide */
.sceditor-button-fahide div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* table */
.sceditor-button-table div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* host an image */
.sceditor-button-servimg div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* insert an image */
.sceditor-button-image div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* insert a link */
.sceditor-button-link div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* youtube */
.sceditor-button-youtube div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* dailymotion */
.sceditor-button-dailymotion div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* flash */
.sceditor-button-flash div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* font size */
.sceditor-button-size div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* font color */
.sceditor-button-color div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* font family */
.sceditor-button-font div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* remove formatting */
.sceditor-button-removeformat div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* button more */
.sceditor-button-more div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* sub script */
.sceditor-button-subscript div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* super script */
.sceditor-button-superscript div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* scroll horizontal */
.sceditor-button-fascroll div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* scroll vertical */
.sceditor-button-faupdown div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* WoW */
.sceditor-button-fawow div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* random */
.sceditor-button-farand div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* emoticon */
.sceditor-button-emoticon div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* date */
.sceditor-button-date div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* time */
.sceditor-button-time div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* paste text */
.sceditor-button-pastetext div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}
 
/* switch editor mode */
.sceditor-button-source div {
    background-image:url('/myimage.gif') !important;
    background-position:0 !important;
}

Các bạn thay link ảnh của mình vào nhé ! thay link ở những đoạn này
/myimage.gif

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



Cập nhật chữ ký !!
avatar
HelpsFMvi
Ban Quản Trị FMvi
Ban Quản Trị FMvi


Số bài : 104
HelpsPoints : 3246
Likes : 31
Ngày tham gia : 10/03/2016
Trạng thái :
Online
Offline

Tuổi : 20
Location : Ninh Thuận
Google Chrome
Phpbb3

[Click để xem tài sản HelpsFMvi]

Xem lý lịch thành viên http://helps.forumvi.com

Về Đầu Trang Go down

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang

- Similar topics

 
Permissions in this forum:
Bạn không có quyền trả lời bài viết
Free forum | Nghệ thuật | Thú vui - Các bài đã đưa | © phpBB | Free forum support | Liên hệ | Report an abuse | Free blog
Stylish responsive footer | Script Tutorials