The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Change default sceditor buttons

View previous topic View next topic Go down

Solved Change default sceditor buttons

Post by Luffy on 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?

Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Change default sceditor buttons

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

Hi Very Happy

Do you mean appearance and all that?

Regards,
Pizza Boi

Pizza Boi
Hyperactive

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

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Change default sceditor buttons

Post by Luffy on 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






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Change default sceditor buttons

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

PizzaBoi is using others Very Happy

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 on 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
Hyperactive

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

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Change default sceditor buttons

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

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

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 on April 27th 2014, 6:35 pm

Hi Very Happy

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

Regards,
Pizza Boi

Pizza Boi
Hyperactive

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

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Change default sceditor buttons

Post by Luffy on April 27th 2014, 6:47 pm

that hides the buttons completely






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Change default sceditor buttons

Post by Pizza Boi on 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
Hyperactive

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

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Change default sceditor buttons

Post by Luffy on April 27th 2014, 6:55 pm

oh ok..






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Change default sceditor buttons

Post by Pizza Boi on 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
Hyperactive

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

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Change default sceditor buttons

Post by Luffy on 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.






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Change default sceditor buttons

Post by Pizza Boi on 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
Hyperactive

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

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Change default sceditor buttons

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Change default sceditor buttons

Post by Luffy on April 28th 2014, 8:56 am

Works Perfectly!
Thanks

***SOLVED!***






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Change default sceditor buttons

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

You're welcome I love you

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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