Hello. I want to change the default sceditors buttons.
The Bold, Italic, Underline, Strike buttons.
Only these 4.
How can i do it?

Hi

Do you mean appearance and all that?

Regards,
Pizza Boi

i want to change these buttons with others. i found other buttons that look different and i want to replace them with the new ones.

http://prntscr.com/3dysyt

PizzaBoi is using others

Hi

Well then, the first thing you can do is pretty much make all of them hidden for awhile.

Code:

a.sceditor-button.sceditor-button-bold, a.sceditor-button.sceditor-button-italic, a.sceditor-button.sceditor-button-underline, a.sceditor-button.sceditor-button-strike {
  visibility: hidden;
}

And then put a code like this above it:

Code:

a.sceditor-button.sceditor-button-bold {
  background-image:url (IMG LINK);
  padding: #px #px #px #px;
  border: style;
  border-radius: #px #px #px #px;
  margin: #px #px #px #px;
  background-color:
}

Add z-index if it's not placed on top and for the rest of the button, you have to add them manually.

@Joker: I'll post a tutorial about them when I can .

Regards,
Pizza Boi

thanks pizza i wanted change these buttons too.
btw, answer my topics  

Hi

Don't worry, I'll get to it .

Regards,
Pizza Boi

that hides the buttons completely

Marios94 wrote:that hides the buttons completely

Hi

Yes, but not the space they're in . You have to refill that space again , that's why I told you to post the new buttons on a higher position than the visibility: hidden;

Like what Joker said, I have that in my forum and that's the method I did .

Regards,
Pizza Boi

oh ok..

Hi

Try experimenting more with this (I'm still checking the other topics I wanna solve) and I'll get back to this one as soon as I'm through.

Regards,
Pizza Boi

the links dont work though.
and also what code is higher than visibility:hidden despite visibility:visible ?
if i set it to visibility:visible, it shows me the default button instead of the one i gave it.

Hi

I sent you a code regarding how I changed my appearances in my chat box. Please pattern over it.

Regards,
Pizza Boi

Pizza boi,

You can just replace the inner div's background image. There is no need to hide the default button. This way you can style all the buttons as you wish using the .sceditor-button class.

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;
}

The CSS above should replace the old images with a new image. Just swap the images with the URL of your image and you should be good.

Works Perfectly!
Thanks

***SOLVED!***

You're welcome

Topic solved and archived