Editor toolbar button icon styling

[Paul B]

Brogan submitted a new resource:

Editor toolbar button icon styling - (Font) Awesome!

This simple guide will explain how to style the editor toolbar button icons.

The use of the browser inspector (F12 -> Elements) will be necessary to identify the id and data names ... or good guesswork.

If we check the code for the standard toolbar we see this in the browser inspector:

Read more about this resource...

 

[Kruzya]

Styling with data-cmd can be used also without !important, if we're increase our selector weight. For example, we can specify interested HTML-tag.

.fr-box button
{
    &[data-cmd="bold"] i
    {
        color: orange;
    }

    &[data-cmd="fontSize"] i
    {
        color: red;
    }
}

And also this don't colorize dropdown content:

 

[Paul B]

Yes, I'm aware of that, but the CSS I provided is much simpler to understand for those who aren't familiar with less.

 

[Paul B]

Brogan updated Editor toolbar button icon styling with a new update entry:

How to use Font Awesome icons as editor toolbar buttons

A simple reference for how to use Font Awesome icons as editor toolbar buttons for custom bb codes.

Read the rest of this update entry...

 

[hello2029]

If anyone has made any edits to the complete code, please be kind enough to share it for others to refer to and learn from.

 

[e-Dewan]

I would appreciate your full CSS code to get the colorful icons as well. Could you paste it in a comment at https://xenforo.com/community/resources/editor-toolbar-button-icon-styling.8248/ ? It's much easier to edit code than have to write it from scratch.

If you mean the buttons of the text editor toolbar here is my customized code:

/Editor toolbar button icon styling/
[data-cmd="uwSmilie"]
{
color: orange !important;
}

[data-cmd="clearFormatting"]
{
color: red !important;
}

[data-cmd="fontSize"]
{
color: green !important;
}

[data-cmd="paragraphFormat"]
{
color: black !important;
}

[data-cmd="insertLink"]
{
color: #FF8F42 !important;
}

[data-cmd="xfQuote"]
{
color: #C99700 !important;
}

[data-cmd="undo"]
{
color: #F25E0D !important;
}

[data-cmd="redo"]
{
color: #F25E0D !important;
}

[data-cmd="bold"]
{
color: #43464B !important;
}

[data-cmd="textColor"]
{
color: #AD4EB1 !important;
}

[data-cmd="insertImage"]
{
color: #3A0FFF !important;
}

[data-cmd="insertVideo"]
{
color: #008AD8 !important;
}

[data-cmd="xfInsertGif"]
{
color: #A500FF !important;
}
/Editor toolbar button icon styling/

but be aware that I have some icons may be you do not have. (e.g: uwSmile and xfInsertGif ...)

 

[hello2029]

If you mean the buttons of the text editor toolbar here is my customized code:

but be aware that I have some icons may be you do not have. (e.g: uwSmile and xfInsertGif ...)

I am extremely grateful! Forever love

 

[hello2029]

but be aware that I have some icons may be you do not have. (e.g: uwSmile and xfInsertGif ...)

--> Where can I buy these? I just want to be like you.

 

[e-Dewan]

--> Where can I buy these? I just want to be like you.

[UW] Smileys Bar add-on is deleted and no longer available here >> https://xenforo.com/community/threads/uw-smileys-bar-deleted.166705/

 

[hello2029]

Dear @e-Dewan

Could you kindly provide me with the name of this add-on?

xfInsertGif.

Thank you very much.

 

[TPerry]

Dear @e-Dewan

Could you kindly provide me with the name of this add-on?

xfInsertGif.

Thank you very much.

Think it's a "default" in XF if you have it in your menu. It's shown as the GIF button in the bar.

 

[hello2029]

Think it's a "default" in XF if you have it in your menu. It's shown as the GIF button in the bar.

I don't see this function. Does it need to be turned up somewhere?

Edited:
Have found it. Thank you very much my friends.

 

[TPerry]

I don't see this function. Does it need to be turned up somewhere?

No.. as I said, it appears to be a BASE XF option in the 2.2.x line if you have the GIF option enabled in the XF editor menu options.



As you found.. you DO have to enable the option in the ACP for GIPHY support.

 

[hello2029]

It looks very beautiful, I can't stop looking at it. Thank you very much for everything.

 

[MaximilianKohler]

Grey:

/* Editor toolbar button icon styling */

[data-cmd="clearFormatting"]
{
color: red !important;
}

[data-cmd="bold"]
{
color: #000099 !important;
}

[data-cmd="fontSize"]
{
color: green !important;
}

[data-cmd="strikeThrough"]
{
color: black !important;
}

[data-cmd="paragraphFormat"]
{
color: #bc6103 !important;
}

[data-cmd="xfList"]
{
color: #00b3b3 !important;
}

[data-cmd="insertLink"]
{
color: #3A0FFF !important;
}

[data-cmd="xfQuote"]
{
color: #7e4002 !important;
}

[data-cmd="xfInlineSpoiler"]
{
color: cadetblue !important;
}

[data-cmd="xfSpoiler"]
{
color: #8ac7db !important;
}

[data-cmd="undo"]
{
color: brown !important;
}

[data-cmd="redo"]
{
color: brown !important;
}

[data-cmd="textColor"]
{
color: purple !important;
}

[data-cmd="insertImage"]
{
color: cadetblue !important;
}

[data-cmd="xfMedia"]
{
color: #008AD8 !important;
}

[data-cmd="insertVideo"]
{
color: #008AD8 !important;
}

/* End editor toolbar button icon styling */

Dark:

/* Editor toolbar button icon styling */

[data-cmd="clearFormatting"]
{
color: red !important;
}

[data-cmd="bold"]
{
color: #f2f2f2 !important;
}

[data-cmd="fontSize"]
{
color: green !important;
}

[data-cmd="paragraphFormat"]
{
color: purple !important;
}

[data-cmd="xfList"]
{
color: #00b3b3 !important;
}

[data-cmd="insertLink"]
{
color: #008AD8 !important;
}

[data-cmd="xfQuote"]
{
color: #7e4002 !important;
}

[data-cmd="xfSpoiler"]
{
color: #9999ff !important;
}

[data-cmd="xfInlineSpoiler"]
{
color: cadetblue !important;
}

[data-cmd="undo"]
{
color: brown !important;
}

[data-cmd="redo"]
{
color: brown !important;
}

[data-cmd="textColor"]
{
color: #AD4EB1 !important;
}

[data-cmd="insertImage"]
{
color: DarkGoldenRod !important;
}

[data-cmd="xfMedia"]
{
color: purple !important;
}

[data-cmd="insertVideo"]
{
color: #008AD8 !important;
}

/* End editor toolbar button icon styling */

/* Quote color from blue to brown. Original is #4079b5 */
.fr-view blockquote {
  border-left: 3px solid #7e4002;
}

 

[MaximilianKohler]

@Ozzy47 just released an addon that does this easier: https://xenforo.com/community/resources/ozzmodz-editor-icon-styling.9376/ - the default there looks pretty good.