The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Change default sceditor buttons

4 posters

Go down

Solved Change default sceditor buttons

Post by TheCrow April 27th 2014, 1:11 pm

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

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Change default sceditor buttons

Post by Pizza Boi April 27th 2014, 6:15 pm

Hi Very Happy

Do you mean appearance and all that?

Regards,
Pizza Boi
Pizza Boi
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

Back to top Go down

Solved Re: Change default sceditor buttons

Post by TheCrow April 27th 2014, 6:20 pm

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
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Change default sceditor buttons

Post by J0k3R^ April 27th 2014, 6:28 pm

PizzaBoi is using others Very Happy
J0k3R^
J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Change default sceditor buttons

Post by Pizza Boi April 27th 2014, 6:28 pm

Hi Very Happy

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 Wink.

Regards,
Pizza Boi


Last edited by Pizza Boi on April 27th 2014, 6:34 pm; edited 1 time in total
Pizza Boi
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

Back to top Go down

Solved Re: Change default sceditor buttons

Post by J0k3R^ April 27th 2014, 6:30 pm

thanks pizza i wanted change these buttons too. Very Happy
btw, answer my topics  lol!
J0k3R^
J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Change default sceditor buttons

Post by Pizza Boi April 27th 2014, 6:35 pm

Hi Very Happy

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

Regards,
Pizza Boi
Pizza Boi
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

Back to top Go down

Solved Re: Change default sceditor buttons

Post by TheCrow April 27th 2014, 6:47 pm

that hides the buttons completely
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Change default sceditor buttons

Post by Pizza Boi April 27th 2014, 6:50 pm

Marios94 wrote:that hides the buttons completely

Hi Very Happy

Yes, but not the space they're in Smile . You have to refill that space again Wink , 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 Smile .

Regards,
Pizza Boi
Pizza Boi
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

Back to top Go down

Solved Re: Change default sceditor buttons

Post by TheCrow April 27th 2014, 6:55 pm

oh ok..
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Change default sceditor buttons

Post by Pizza Boi April 27th 2014, 6:58 pm

Hi Very Happy

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
Pizza Boi
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

Back to top Go down

Solved Re: Change default sceditor buttons

Post by TheCrow April 27th 2014, 7:15 pm

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.
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Change default sceditor buttons

Post by Pizza Boi April 27th 2014, 7:22 pm

Hi Very Happy

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

Regards,
Pizza Boi
Pizza Boi
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

Back to top Go down

Solved Re: Change default sceditor buttons

Post by Ange Tuteur April 28th 2014, 8:26 am

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. Wink

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. Very good
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Change default sceditor buttons

Post by TheCrow April 28th 2014, 8:56 am

Works Perfectly!
Thanks

***SOLVED!***
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Change default sceditor buttons

Post by Ange Tuteur April 28th 2014, 9:05 am

You're welcome I love you

Topic solved and archived
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum