Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] [Tutorial] Replace Editor icons with Font Awesome 5 icons for MyBB 1.8.21 [SCEditor]
#1
Information 
[For 1.8] - [Tutorial] Replace Editor icons with font awesome 5 for MyBB 1.8.21 [SCEditor]

Description:

A editor based on default Mybb editor using font awesome 5 icons for [SCEditor]


Introduction:

Hey all,

If you need a editor based on default Mybb editor using font awesome 5 icons, this is for you.

This is a quick and simple tutorial.  * keep in mind to make a backup of your jscripts folder.

What you will get:

[Image: New-Thread-in-My-Forum-2.png]

Requirement: MyBB 1.8.21  ( and the ability to desire to continue where this leaves off )

Instructions:

1) For the themes that will use this editor theme add this to your themes headerinclude template:

<!-- Add Font Awesome -->
<link rel="stylesheet" href="{$mybb->asset_url}/jscripts/sceditor/themes/mybb-fa5/css/all.css">


2) Download font-awesome specific files here:

Download link: http://s000.tinyupload.com/index.php?fil...6428479658

3) Upload files:

Upload path:

public_html(MyBBRoot)/jscripts/sceditor/themes/mybb-fa5/

** the download file has the correct directory structure. So think of "Upload" as your forum root directory. ( Upload = MyBBRoot )

NOTE: for this tutorial we will base it off the existing mybb.css editor theme but this can be done with any of them if desired...

4) Create file:

Filename: jquery.sceditor.mybb-fa5.css

Filepath:

public_html(MyBBRoot)/jscripts/sceditor/styles/jquery.sceditor.mybb-fa5.css

5) Edit file: jquery.sceditor.mybb-fa5.css

Fill with:
/*! SCEditor | (C) 2011-2013, Sam Clarke | sceditor.com/license */
html, body, p, code:before, table {
	margin: 0;
	padding: 0;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 14px;
	color: #333;
}

html {
	/* Needed so the cursor will be placed at the end of the content
	   when the there isn't enought content to fill the full viewport */
	height: 100%;

	/* Needed for iOS scrolling bug fix */
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

body {
	/* Needed for iOS scrolling bug fix */
	position: relative;
	overflow: auto;

	/* Needed so the cursor will be placed at the end of the content
	   when the there isn't enought content to fill the full viewport */
	min-height: 100%;
	word-wrap: break-word;
}

table, td {
	border: 1px dotted #000;

	/* Show empty cells so they can be edited */
	empty-cells: show;
}

code:before {
	font-weight: bold;
	content: 'Code:';
	display: block;
	border-bottom: 1px solid #ccc;
	padding: 4px 0 3px 0;
	margin-bottom: 10px;
}

code.phpcodeblock:before {
	content: 'PHP Code:' !important;
}

code {
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 13px !important;
	padding: 10px;
	position: relative;
	background: white;
	margin: .25em .05em 0 0;
	border: 1px solid #ccc;
	white-space: pre;
	display: block;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

.ie6 code, .ie7 code {
	margin-top: 0;
}

code:before, code {
	display: block;
	text-align: left;
}

blockquote {
	position: relative;
	background: white;
	margin: .25em .05em 0 0;
	border: 1px solid #ccc;
	padding: 10px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

blockquote cite {
	font-weight: bold;
	font-style: normal;
	display: block;
	font-size: 1em;
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;
	padding-bottom: 3px;
}

/* prevent divs from being collapsed */
div {
	min-height: 1.25em;
}

h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0;
}

ul, ol {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

img {
	max-width: 100%;
}

font[size="1"] {
    font-size: xx-small;
}

font[size="2"] {
    font-size: x-small;
}

font[size="3"] {
    font-size: small;
}

font[size="4"] {
    font-size: medium;
}

font[size="5"] {
    font-size: large;
}

font[size="6"] {
    font-size: x-large;
}

font[size="7"] {
    font-size: xx-large;
}


6) Create file:

Filename: mybb-fa5.css

Filepath:

public_html(MyBBRoot)/jscripts/sceditor/themes/mybb-fa5.css

7) Edit file:

Fill with:

/*! SCEditor | (C) 2011-2016, Sam Clarke | sceditor.com/license */
.sceditor-button div,
div.sceditor-grip {
    width: 16px;
    height: 16px
   font-family: "Font Awesome 5 Free";
   display: inline-block;
   font-weight: 900;
}

/* FA 5 images */

.sceditor-button-youtube div {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-link div:before {
   content: "\f0c1";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-unlink div:before {
   content: "\f127";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-underline div:before {
   content: "\f0cd";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-time div:before {
   content: "\f017";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-table div:before {
   content: "\f0ce";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-superscript div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-subscript div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-strike div:before {
   content: "\f0cc";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-source div:before {
   content: "\f328";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-size div:before {
   content: "\f034";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-rtl div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-right div:before {
   content: "\f038";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;  
}

.sceditor-button-removeformat div:before {
   content: "\f2ea";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;  
}

.sceditor-button-quote div:before {
   content: "\f10e";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-print div:before {
   content: "\f02f";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;  
}

.sceditor-button-pastetext div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;  
}

.sceditor-button-paste div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;  
}

.sceditor-button-outdent div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-orderedlist div:before {
   content: "\f0cb";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;  
}

.sceditor-button-maximize div:before {
   content: "\f31e";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-ltr div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;  
}

.sceditor-button-left div:before {
   content: "\f036";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-justify div:before {
   content: "\f039";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}


.sceditor-button-italic div:before {
   content: "\f033";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-indent div:before {
   content: "\f03c";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}


.sceditor-button-image div:before {
   content: "\f03e";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}


.sceditor-button-horizontalrule div:before {
   content: "\f337";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}


.sceditor-button-format div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}


.sceditor-button-font div:before {
   content: "\f031";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}


.sceditor-button-emoticon div:before {
   content: "\f118";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-email div:before {
   content: "\f1d8";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-date div:before {
   content: "\f073";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-cut div:before {
   content: "\f0c4";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-copy div:before {
   content: "\f0c5";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-color div:before {
   content: "\f53f";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-code div:before {
   content: "\f121";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-center div:before {
   content: "\f037";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-bulletlist div:before {
   content: "\f0ca";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-bold div:before {
   content: "\f032";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

div.sceditor-grip:before {
   content: "\f0b2";
   color: #333;
   font-family: "Font Awesome 5 Free";
}

.rtl div.sceditor-grip:before {
   content: "\f0b2";
   color: #333;
   font-family: "Font Awesome 5 Free";
   right: auto;
   left: 0;
}

.sceditor-container {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    position: relative;
    background: padding-box #fff;
    border: 1px solid #d9d9d9;
    font-size: 13px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #333;
    line-height: 1;
    font-weight: 700;
    height: 250px;
    border-radius: 4px
}

.sceditor-container *,
.sceditor-container :after,
.sceditor-container  {
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

.sceditor-container,
.sceditor-container div,
div.sceditor-dropdown,
div.sceditor-dropdown div {
    padding: 0;
    margin: 0;
    z-index: 3
}

.sceditor-container iframe,
.sceditor-container textarea {
    display: block;
    -ms-flex: 1 1 0%;
    -webkit-box-flex: 1;
    flex: 1 1 0%;
    line-height: 1.25;
    border: 0;
    outline: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #111;
    padding: 0;
    margin: 5px;
    resize: none;
    background: #fff;
    height: auto !important;
    width: auto !important;
    width: calc(100% - 10px) !important;
    min-height: 1px
}

.sceditor-container textarea {
    margin: 7px 5px
}

div.sceditor-dnd-cover {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, .2);
    border: 5px dashed #aaa;
    z-index: 200;
    font-size: 2em;
    text-align: center;
    color: #aaa
}

div.sceditor-dnd-cover p {
    position: relative;
    top: 45%;
    pointer-events: none
}

div.sceditor-resize-cover {
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: .3
}

div.sceditor-grip {
/*    overflow: hidden; */
    width: 16px;
    height: 16px;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 3;
    line-height: 0
}

div.sceditor-grip.has-icon {
    background-image: none
}

.sceditor-maximize {
    position: fixed;
    top: 0;
    left: 0;
    height: 100% !important;
    width: 100% !important;
    border-radius: 0;
    background-clip: padding-box;
    z-index: 2000
}

body.sceditor-maximize,
html.sceditor-maximize {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden
}

.sceditor-maximize div.sceditor-grip {
    display: none
}

.sceditor-maximize div.sceditor-toolbar {
    border-radius: 0;
    background-clip: padding-box
}

div.sceditor-dropdown {
    position: absolute;
    border: 1px solid #ccc;
    background: padding-box #fff;
    z-index: 4000;
    padding: 10px;
    font-weight: 400;
    font-size: 15px;
    border-radius: 2px;
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .2)
}

div.sceditor-dropdown *,
div.sceditor-dropdown :after,
div.sceditor-dropdown  {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

div.sceditor-dropdown a,
div.sceditor-dropdown a:link {
    color: #333
}

div.sceditor-dropdown form {
    margin: 0
}

div.sceditor-dropdown label {
    display: block;
    font-weight: 700;
    color: #3c3c3c;
    padding: 4px 0
}

div.sceditor-dropdown input,
div.sceditor-dropdown textarea {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    outline: 0;
    padding: 4px;
    border: 1px solid #ccc;
    border-top-color: #888;
    margin: 0 0 .75em;
    border-radius: 1px;
    background-clip: padding-box
}

div.sceditor-dropdown textarea {
    padding: 6px
}

div.sceditor-dropdown input:focus,
div.sceditor-dropdown textarea:focus {
    border-color: #666 #aaa #aaa;
    -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1)
}

div.sceditor-dropdown .button {
    font-weight: 700;
    color: #444;
    padding: 6px 12px;
    background: padding-box #ececec;
    border: 1px solid #ccc;
    border-radius: 2px;
    cursor: pointer;
    margin: .3em 0 0
}

div.sceditor-dropdown .button:hover {
    background: #f3f3f3;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15)
}

div.sceditor-font-picker,
div.sceditor-fontsize-picker,
div.sceditor-format {
    padding: 6px 0
}

div.sceditor-color-picker {
    padding: 4px
}

div.sceditor-emoticons,
div.sceditor-more-emoticons {
    padding: 0
}

.sceditor-pastetext textarea {
    border: 1px solid #bbb;
    width: 20em
}

.sceditor-emoticons img,
.sceditor-more-emoticons img {
    padding: 0;
    cursor: pointer;
    margin: 2px
}

.sceditor-more {
    border-top: 1px solid #bbb;
    display: block;
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    padding: 6px 0
}

.sceditor-dropdown a:hover {
    background: #eee
}

.sceditor-font-option,
.sceditor-fontsize-option,
.sceditor-format a {
    display: block;
    padding: 7px 10px;
    cursor: pointer;
    text-decoration: none;
    color: #222
}

.sceditor-fontsize-option {
    padding: 7px 13px
}

.sceditor-color-column {
    float: left
}

.sceditor-color-option {
    display: block;
    border: 2px solid #fff;
    height: 18px;
    width: 18px;
    overflow: hidden
}

.sceditor-color-option:hover {
    border: 1px solid #aaa
}

div.sceditor-toolbar {
    overflow: hidden;
    padding: 2px 2px 1px;
    background: #f7f7f7;
    border-bottom: 1px solid #c0c0c0;
    line-height: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
div.sceditor-group {
    display: inline-block;
    background: #eee;
    margin: 1px 5px 1px 0;
    padding: 1px;
    border-bottom: 1px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
.sceditor-button {
    float: left;
    cursor: pointer;
    padding: 3px 5px;
    width: 16px;
    height: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
     border:  1px solid #eee;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
.ie6 .sceditor-button, .ie7 .sceditor-button {
    float: none!important;
    display: inline;
    zoom: 1;
}
.ie6 .sceditor-button {
    padding: 0;
}
.ie6 .sceditor-button div {
    margin: 5px;
}
.ie7 .sceditor-button div {
    margin: 5px 0;
}
.sceditor-button:hover, .sceditor-button:active, .sceditor-button.active {
    background: #fff;
    /*-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2)*/border: 1px solid #ddd;
}
.sceditor-button:active {
    background: #fff;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
}
.sceditor-button.disabled:hover {
    background: inherit;
    cursor: default;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.sceditor-button, .sceditor-button div {
    display: block;
}
.sceditor-button div {
    display: inline-block;
 /*   margin: 2px 0; */
    margin: 10px 0;  
    padding: 0;
/*    overflow: hidden; */
    line-height: 0;
    font-size: 0;
    color: transparent;
}
.sceditor-button.disabled div {
    opacity: .3;
}

.sceditor-button svg {
    display: inline-block;
    height: 16px;
    width: 16px;
    margin: 2px 0;
    fill: #111;
    text-decoration: none;
    pointer-events: none;
    line-height: 1
}

.sceditor-button.disabled svg {
    fill: #888
}

.sceditor-button.has-icon div {
    display: none
}

.sceditor-button.text,
.sceditor-button.text div,
.sceditor-button.text-icon,
.sceditor-button.text-icon div,
.text .sceditor-button,
.text .sceditor-button div,
.text-icon .sceditor-button,
.text-icon .sceditor-button div {
    display: inline-block;
    width: auto;
    line-height: 16px;
    font-size: 1em;
    color: inherit;
    text-indent: 0;
}

.sceditor-button.has-icon div,
.sceditor-button.text div,
.text .sceditor-button div,
.text-icon .sceditor-button.has-icon div {
    padding: 0 2px;
    background: 0 0;
}

.sceditor-button.text svg,
.text .sceditor-button svg {
    display: none;
}

.sceditor-button.text-icon div,
.text-icon .sceditor-button div {
    padding: 0 2px 0 20px;
}

.rtl div.sceditor-toolbar {
    text-align: right;
}

.rtl .sceditor-button {
    float: right;
}

/* Additional Buttons (for MyBB) */

.sceditor-button-video div:before {
   content: "\f008";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

.sceditor-button-php div:before {
   content: "\f120";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
}

NOTE: There are some icons that I did not get around to, as this was a rather quick job just simply to get font awesome icons on the editor and is simply shared in the hopes that this will get folks started and they can "diy" / continue from where this leaves off. Any icons that I did not get to, I set the icon as ellipsis "f141" as a placeholder so folks can find those and continue from there.

8) Activate Mybb-fa5.css editor style in theme.


Ok, now that you have the base setup..., you can edit anyway you like..., here is a quick and small example:

[Image: New-Thread-in-My-Forum-3.png]

To get this you would replace Mybb-fa5.css with:

/*! SCEditor | (C) 2011-2016, Sam Clarke | sceditor.com/license */
.sceditor-button div,
div.sceditor-grip {
    width: 16px;
    height: 16px
   font-family: "Font Awesome 5 Free";
   display: inline-block;
   font-weight: 900;
}

/* FA 5 images */

.sceditor-button-youtube div {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-link div:before {
   content: "\f0c1";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-unlink div:before {
   content: "\f127";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-underline div:before {
   content: "\f0cd";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-time div:before {
   content: "\f017";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-table div:before {
   content: "\f0ce";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-superscript div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-subscript div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-strike div:before {
   content: "\f0cc";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-source div:before {
   content: "\f328";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-size div:before {
   content: "\f034";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-rtl div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-right div:before {
   content: "\f038";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;     
}

.sceditor-button-removeformat div:before {
   content: "\f2ea";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;    
}

.sceditor-button-quote div:before {
   content: "\f10e";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-print div:before {
   content: "\f02f";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;     
}

.sceditor-button-pastetext div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;     
}

.sceditor-button-paste div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px; 
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;    
}

.sceditor-button-outdent div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-orderedlist div:before {
   content: "\f0cb";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;     
}

.sceditor-button-maximize div:before {
   content: "\f31e";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-ltr div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;     
}

.sceditor-button-left div:before {
   content: "\f036";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-justify div:before {
   content: "\f039";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}


.sceditor-button-italic div:before {
   content: "\f033";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-indent div:before {
   content: "\f03c";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;  
}


.sceditor-button-image div:before {
   content: "\f03e";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}


.sceditor-button-horizontalrule div:before {
   content: "\f337";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}


.sceditor-button-format div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}


.sceditor-button-font div:before {
   content: "\f031";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}


.sceditor-button-emoticon div:before {
   content: "\f118";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-email div:before {
   content: "\f1d8";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-date div:before {
   content: "\f073";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-cut div:before {
   content: "\f0c4";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-copy div:before {
   content: "\f0c5";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-color div:before {
   content: "\f53f";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-code div:before {
   content: "\f121";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-center div:before {
   content: "\f037";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;  
}

.sceditor-button-bulletlist div:before {
   content: "\f0ca";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-bold div:before {
   content: "\f032";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;  
}

div.sceditor-grip:before {
   content: "\f0b2";
   color: #333;
   font-family: "Font Awesome 5 Free";
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;  
}

.rtl div.sceditor-grip:before {
   content: "\f0b2";
   color: #333;
   font-family: "Font Awesome 5 Free";
   right: auto;
   left: 0;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-container {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    position: relative;
    background: padding-box #fff;
    border: 1px solid #d9d9d9;
    font-size: 13px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #333;
    line-height: 1;
    font-weight: 700;
    height: 250px;
    border-radius: 4px
}

.sceditor-container *,
.sceditor-container :after,
.sceditor-container  {
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

.sceditor-container,
.sceditor-container div,
div.sceditor-dropdown,
div.sceditor-dropdown div {
    padding: 0;
    margin: 0;
    z-index: 3
}

.sceditor-container iframe,
.sceditor-container textarea {
    display: block;
    -ms-flex: 1 1 0%;
    -webkit-box-flex: 1;
    flex: 1 1 0%;
    line-height: 1.25;
    border: 0;
    outline: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #111;
    padding: 0;
    margin: 5px;
    resize: none;
    background: #fff;
    height: auto !important;
    width: auto !important;
    width: calc(100% - 10px) !important;
    min-height: 1px
}

.sceditor-container textarea {
    margin: 7px 5px
}

div.sceditor-dnd-cover {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, .2);
    border: 5px dashed #aaa;
    z-index: 200;
    font-size: 2em;
    text-align: center;
    color: #aaa
}

div.sceditor-dnd-cover p {
    position: relative;
    top: 45%;
    pointer-events: none
}

div.sceditor-resize-cover {
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: .3
}

div.sceditor-grip {
/*    overflow: hidden; */
    width: 16px;
    height: 16px;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 3;
    line-height: 0
}

div.sceditor-grip.has-icon {
    background-image: none
}

.sceditor-maximize {
    position: fixed;
    top: 0;
    left: 0;
    height: 100% !important;
    width: 100% !important;
    border-radius: 0;
    background-clip: padding-box;
    z-index: 2000
}

body.sceditor-maximize,
html.sceditor-maximize {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden
}

.sceditor-maximize div.sceditor-grip {
    display: none
}

.sceditor-maximize div.sceditor-toolbar {
    border-radius: 0;
    background-clip: padding-box
}

div.sceditor-dropdown {
    position: absolute;
    border: 1px solid #ccc;
    background: padding-box #fff;
    z-index: 4000;
    padding: 10px;
    font-weight: 400;
    font-size: 15px;
    border-radius: 2px;
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .2)
}

div.sceditor-dropdown *,
div.sceditor-dropdown :after,
div.sceditor-dropdown  {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

div.sceditor-dropdown a,
div.sceditor-dropdown a:link {
    color: #333
}

div.sceditor-dropdown form {
    margin: 0
}

div.sceditor-dropdown label {
    display: block;
    font-weight: 700;
    color: #3c3c3c;
    padding: 4px 0
}

div.sceditor-dropdown input,
div.sceditor-dropdown textarea {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    outline: 0;
    padding: 4px;
    border: 1px solid #ccc;
    border-top-color: #888;
    margin: 0 0 .75em;
    border-radius: 1px;
    background-clip: padding-box
}

div.sceditor-dropdown textarea {
    padding: 6px
}

div.sceditor-dropdown input:focus,
div.sceditor-dropdown textarea:focus {
    border-color: #666 #aaa #aaa;
    -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1)
}

div.sceditor-dropdown .button {
    font-weight: 700;
    color: #444;
    padding: 6px 12px;
    background: padding-box #ececec;
    border: 1px solid #ccc;
    border-radius: 2px;
    cursor: pointer;
    margin: .3em 0 0
}

div.sceditor-dropdown .button:hover {
    background: #f3f3f3;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15)
}

div.sceditor-font-picker,
div.sceditor-fontsize-picker,
div.sceditor-format {
    padding: 6px 0
}

div.sceditor-color-picker {
    padding: 4px
}

div.sceditor-emoticons,
div.sceditor-more-emoticons {
    padding: 0
}

.sceditor-pastetext textarea {
    border: 1px solid #bbb;
    width: 20em
}

.sceditor-emoticons img,
.sceditor-more-emoticons img {
    padding: 0;
    cursor: pointer;
    margin: 2px
}

.sceditor-more {
    border-top: 1px solid #bbb;
    display: block;
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    padding: 6px 0
}

.sceditor-dropdown a:hover {
    background: #eee
}

.sceditor-font-option,
.sceditor-fontsize-option,
.sceditor-format a {
    display: block;
    padding: 7px 10px;
    cursor: pointer;
    text-decoration: none;
    color: #222
}

.sceditor-fontsize-option {
    padding: 7px 13px
}

.sceditor-color-column {
    float: left
}

.sceditor-color-option {
    display: block;
    border: 2px solid #fff;
    height: 18px;
    width: 18px;
    overflow: hidden
}

.sceditor-color-option:hover {
    border: 1px solid #aaa
}

div.sceditor-toolbar {
    overflow: hidden;
    padding: 2px 2px 1px;
    background: #f7f7f7;
    border-bottom: 1px solid #c0c0c0;
    line-height: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
div.sceditor-group {
    display: inline-block;
    background: #eee;
    margin: 1px 5px 1px 0;
    padding: 1px;
    border-bottom: 1px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
.sceditor-button {
    float: left;
    cursor: pointer;
    padding: 3px 5px;
    width: 16px;
    height: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
     border:  1px solid #eee;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
.ie6 .sceditor-button, .ie7 .sceditor-button {
    float: none!important;
    display: inline;
    zoom: 1;
}
.ie6 .sceditor-button {
    padding: 0;
}
.ie6 .sceditor-button div {
    margin: 5px;
}
.ie7 .sceditor-button div {
    margin: 5px 0;
}
.sceditor-button:hover, .sceditor-button:active, .sceditor-button.active {
    background: #fff;
    /*-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2)*/border: 1px solid #ddd;
}
.sceditor-button:active {
    background: #fff;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
}
.sceditor-button.disabled:hover {
    background: inherit;
    cursor: default;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.sceditor-button, .sceditor-button div {
    display: block;
}
.sceditor-button div {
    display: inline-block;
 /*   margin: 2px 0; */
    margin: 10px 0;  
    padding: 0;
/*    overflow: hidden; */
    line-height: 0;
    font-size: 0;
    color: transparent;
}
.sceditor-button.disabled div {
    opacity: .3;
}

.sceditor-button svg {
    display: inline-block;
    height: 16px;
    width: 16px;
    margin: 2px 0;
    fill: #111;
    text-decoration: none;
    pointer-events: none;
    line-height: 1
}

.sceditor-button.disabled svg {
    fill: #888
}

.sceditor-button.has-icon div {
    display: none
}

.sceditor-button.text,
.sceditor-button.text div,
.sceditor-button.text-icon,
.sceditor-button.text-icon div,
.text .sceditor-button,
.text .sceditor-button div,
.text-icon .sceditor-button,
.text-icon .sceditor-button div {
    display: inline-block;
    width: auto;
    line-height: 16px;
    font-size: 1em;
    color: inherit;
    text-indent: 0;
}

.sceditor-button.has-icon div,
.sceditor-button.text div,
.text .sceditor-button div,
.text-icon .sceditor-button.has-icon div {
    padding: 0 2px;
    background: 0 0;
}

.sceditor-button.text svg,
.text .sceditor-button svg {
    display: none;
}

.sceditor-button.text-icon div,
.text-icon .sceditor-button div {
    padding: 0 2px 0 20px;
}

.rtl div.sceditor-toolbar {
    text-align: right;
}

.rtl .sceditor-button {
    float: right;
}

/* Additional Buttons (for MyBB) */

.sceditor-button-video div:before {
   content: "\f008";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-php div:before {
   content: "\f120";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #333, 0 0 5px #555; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;
}



Ok, so, say now you feel like perhaps you want to have a dark with the previous parts of the tutorial in it......

What you will get:

[Image: Post-Reply-to-testing-1.png]


You can either do this in the existing files or copy the existing files and rename those copies for this, and in this part we will rename the files so as to keep it simple and such.


Copy file: jquery.sceditor.mybb-fa5.css

and rename file: jquery.sceditor.mybb-fa5-dark.css

Edit file: jquery.sceditor.mybb-fa5-dark.css

Replace with:

/*! SCEditor | (C) 2011-2013, Sam Clarke | sceditor.com/license */
html, body, p, code:before, table {
	margin: 0;
	padding: 0;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 14px;
	color: #fff;
}

html {
	/* Needed so the cursor will be placed at the end of the content
	   when the there isn't enought content to fill the full viewport */
	height: 100%;

	/* Needed for iOS scrolling bug fix */
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

body {
	/* Needed for iOS scrolling bug fix */
	position: relative;
	overflow: auto;

	/* Needed so the cursor will be placed at the end of the content
	   when the there isn't enought content to fill the full viewport */
	min-height: 100%;
	word-wrap: break-word;
}

table, td {
	border: 1px dotted #000;

	/* Show empty cells so they can be edited */
	empty-cells: show;
}

code:before {
	font-weight: bold;
	content: 'Code:';
	display: block;
	border-bottom: 1px solid #333;
	padding: 4px 0 3px 0;
	margin-bottom: 10px;
}

code.phpcodeblock:before {
	content: 'PHP Code:' !important;
}

code {
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 13px !important;
	padding: 10px;
	position: relative;
	background: #444;
	margin: .25em .05em 0 0;
	border: 1px solid #333;
	white-space: pre;
	display: block;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

.ie6 code, .ie7 code {
	margin-top: 0;
}

code:before, code {
	display: block;
	text-align: left;
}

blockquote {
	position: relative;
	background: #444;
	margin: .25em .05em 0 0;
	border: 1px solid #333;
	padding: 10px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

blockquote cite {
	font-weight: bold;
	font-style: normal;
	display: block;
	font-size: 1em;
	border-bottom: 1px solid #333;
	margin-bottom: 10px;
	padding-bottom: 3px;
}

/* prevent divs from being collapsed */
div {
	min-height: 1.25em;
}

h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0;
}

ul, ol {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

img {
	max-width: 100%;
}

font[size="1"] {
    font-size: xx-small;
}

font[size="2"] {
    font-size: x-small;
}

font[size="3"] {
    font-size: small;
}

font[size="4"] {
    font-size: medium;
}

font[size="5"] {
    font-size: large;
}

font[size="6"] {
    font-size: x-large;
}

font[size="7"] {
    font-size: xx-large;
}


Copy file: mybb-fa5.css

and rename file: mybb-fa5-dark.css

Edit file: mybb-fa5-dark.css

Replace with:

/*! SCEditor | (C) 2011-2016, Sam Clarke | sceditor.com/license */
.sceditor-button div,
div.sceditor-grip {
    width: 16px;
    height: 16px
   font-family: "Font Awesome 5 Free";
   display: inline-block;
   font-weight: 900;
}

/* FA 5 images */

.sceditor-button-youtube div {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-link div:before {
   content: "\f0c1";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-unlink div:before {
   content: "\f127";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-underline div:before {
   content: "\f0cd";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-time div:before {
   content: "\f017";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-table div:before {
   content: "\f0ce";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-superscript div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-subscript div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-strike div:before {
   content: "\f0cc";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-source div:before {
   content: "\f328";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-size div:before {
   content: "\f034";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-rtl div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-right div:before {
   content: "\f038";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;     
}

.sceditor-button-removeformat div:before {
   content: "\f2ea";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;    
}

.sceditor-button-quote div:before {
   content: "\f10e";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-print div:before {
   content: "\f02f";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;     
}

.sceditor-button-pastetext div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;     
}

.sceditor-button-paste div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px; 
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;    
}

.sceditor-button-outdent div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-orderedlist div:before {
   content: "\f0cb";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;     
}

.sceditor-button-maximize div:before {
   content: "\f31e";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-ltr div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;     
}

.sceditor-button-left div:before {
   content: "\f036";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-justify div:before {
   content: "\f039";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}


.sceditor-button-italic div:before {
   content: "\f033";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-indent div:before {
   content: "\f03c";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;  
}


.sceditor-button-image div:before {
   content: "\f03e";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}


.sceditor-button-horizontalrule div:before {
   content: "\f337";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}


.sceditor-button-format div:before {
   content: "\f141";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}


.sceditor-button-font div:before {
   content: "\f031";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}


.sceditor-button-emoticon div:before {
   content: "\f118";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-email div:before {
   content: "\f1d8";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-date div:before {
   content: "\f073";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-cut div:before {
   content: "\f0c4";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-copy div:before {
   content: "\f0c5";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-color div:before {
   content: "\f53f";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-code div:before {
   content: "\f121";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-center div:before {
   content: "\f037";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;  
}

.sceditor-button-bulletlist div:before {
   content: "\f0ca";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-bold div:before {
   content: "\f032";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;  
}

div.sceditor-grip:before {
   content: "\f0b2";
   color: #333;
   font-family: "Font Awesome 5 Free";
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;  
}

.rtl div.sceditor-grip:before {
   content: "\f0b2";
   color: #333;
   font-family: "Font Awesome 5 Free";
   right: auto;
   left: 0;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-container {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    position: relative;
    background: padding-box #303030;
    border: 1px solid #444;
    font-size: 13px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #333;
    line-height: 1;
    font-weight: 700;
    height: 250px;
    border-radius: 4px
}

.sceditor-container *,
.sceditor-container :after,
.sceditor-container  {
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

.sceditor-container,
.sceditor-container div,
div.sceditor-dropdown,
div.sceditor-dropdown div {
    padding: 0;
    margin: 0;
    z-index: 3
}

.sceditor-container iframe,
.sceditor-container textarea {
    display: block;
    -ms-flex: 1 1 0%;
    -webkit-box-flex: 1;
    flex: 1 1 0%;
    line-height: 1.25;
    border: 0;
    outline: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #fff;
    padding: 0;
    margin: 5px;
    resize: none;
    background: #303030;
    height: auto !important;
    width: auto !important;
    width: calc(100% - 10px) !important;
    min-height: 1px;
}

.sceditor-container textarea {
    margin: 7px 5px;
}

div.sceditor-dnd-cover {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, .2);
    border: 5px dashed #ddd;
    z-index: 200;
    font-size: 2em;
    text-align: center;
    color: #ddd;
}

div.sceditor-dnd-cover p {
    position: relative;
    top: 45%;
    pointer-events: none
}

div.sceditor-resize-cover {
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: .3;
}

div.sceditor-grip {
/*    overflow: hidden; */
    width: 16px;
    height: 16px;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 3;
    line-height: 0;
}

div.sceditor-grip.has-icon {
    background-image: none;
}

.sceditor-maximize {
    position: fixed;
    top: 0;
    left: 0;
    height: 100% !important;
    width: 100% !important;
    border-radius: 0;
    background-clip: padding-box;
    z-index: 2000;
}

body.sceditor-maximize,
html.sceditor-maximize {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.sceditor-maximize div.sceditor-grip {
    display: none;
}

.sceditor-maximize div.sceditor-toolbar {
    border-radius: 0;
    background-clip: padding-box;
}

div.sceditor-dropdown.sceditor-font-picker {
	margin-top: 33px !important;
}

div.sceditor-dropdown.sceditor-color-picker {
	margin-top: 33px !important;
}

div.sceditor-dropdown.sceditor-fontsize-picker {
	margin-top: 33px !important;
}

div.sceditor-dropdown.sceditor-insertimage {
	margin-top: 33px !important;
}

div.sceditor-dropdown.sceditor-insertemail {
	margin-top: 33px !important;
}

div.sceditor-dropdown.sceditor-insertlink {
	margin-top: 33px !important;
}

div.sceditor-dropdown.sceditor-emoticons {
	margin-top: 33px !important;
}

div.sceditor-dropdown.sceditor-insertvideo {
	margin-top: 33px !important;
}

div.sceditor-dropdown.sceditor-insertcode {
	margin-top: 33px !important;
}

div.sceditor-dropdown.sceditor-insertphp {
	margin-top: 33px !important;
}

select#videotype {
	background-color: #333;
	color: #A0A0A0;
	border: 1px solid #555;
	border-radius: 0 0 0 0;
}

select#videotype a:focus {
	color: #fff;
}

div.sceditor-dropdown {
    position: absolute;
    border: 1px solid #333;
    background: padding-box #444;
    z-index: 4000;
    padding: 10px;
    font-weight: 400;
    font-size: 15px;
    border-radius: 2px;
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .2)
}

div.sceditor-dropdown *,
div.sceditor-dropdown :after,
div.sceditor-dropdown  {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

div.sceditor-dropdown a,
div.sceditor-dropdown a:link {
    color: #f1f1f1;
}

div.sceditor-dropdown form {
    margin: 0
}

div.sceditor-dropdown label {
    display: block;
    font-weight: 700;
    color: #fff;
    padding: 4px 0;
}

div.sceditor-dropdown input,
div.sceditor-dropdown textarea {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    outline: 0;
    padding: 4px;
    border: 1px solid #555;
    border-top-color: #555;
    background-color: #303030;
    margin: 0 0 .75em;
    border-radius: 3px;
    background-clip: padding-box;
    color: #fff;
}

div.sceditor-dropdown textarea {
    padding: 6px;
}

div.sceditor-dropdown input:focus,
div.sceditor-dropdown textarea:focus {
    border-color: #777 #777 #777;
    -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1)
    color: #777;
}

div.sceditor-dropdown .button {
    font-weight: 700;
    color: #fff;
    padding: 6px 12px;
    background: padding-box #333;
    border: 1px solid #555;
    border-radius: 2px;
    cursor: pointer;
    margin: .3em 0 0
}

div.sceditor-dropdown .button:hover {
    background: #555;
     border: 1px solid #444;     
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15)
}

div.sceditor-font-picker,
div.sceditor-fontsize-picker,
div.sceditor-format {
    padding: 6px 0
}

div.sceditor-color-picker {
    padding: 4px
}

div.sceditor-emoticons,
div.sceditor-more-emoticons {
    padding: 0
}

.sceditor-pastetext textarea {
    border: 1px solid #bbb;
    width: 20em;
    color: #fff;    
}

.sceditor-emoticons img,
.sceditor-more-emoticons img {
    padding: 0;
    cursor: pointer;
    margin: 2px;
}

.sceditor-more {
    border-top: 1px solid #444;
    display: block;
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    padding: 6px 0;
}

.sceditor-dropdown a:hover {
    background: #333;
}

.sceditor-font-option,
.sceditor-fontsize-option,
.sceditor-format a {
    display: block;
    padding: 7px 10px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
}

.sceditor-fontsize-option {
    padding: 7px 13px
}

.sceditor-color-column {
    float: left
}

.sceditor-color-option {
    display: block;
    border: 2px solid #333;
    height: 18px;
    width: 18px;
    overflow: hidden
}

.sceditor-color-option:hover {
    border: 1px solid #ddd;
}

div.sceditor-toolbar {
    overflow: hidden;
    padding: 2px 2px 1px;
    background: #555;
    border-bottom: 1px solid #444;
    line-height: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
div.sceditor-group {
    display: inline-block;
    background: #444;
    margin: 1px 5px 1px 0;
    padding: 1px;
    border-bottom: 1px solid #555;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
.sceditor-button {
    float: left;
    cursor: pointer;
    padding: 3px 5px;
    width: 16px;
    height: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
     border:  1px solid #444;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
.ie6 .sceditor-button, .ie7 .sceditor-button {
    float: none!important;
    display: inline;
    zoom: 1;
}
.ie6 .sceditor-button {
    padding: 0;
}
.ie6 .sceditor-button div {
    margin: 5px;
}
.ie7 .sceditor-button div {
    margin: 5px 0;
}
.sceditor-button:hover, .sceditor-button:active, .sceditor-button.active {
    background: #444;
    /*-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2)*/border: 1px solid #ddd;
}
.sceditor-button:active {
    background: #333;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
}
.sceditor-button.disabled:hover {
    background: inherit;
    cursor: default;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.sceditor-button, .sceditor-button div {
    display: block;
}
.sceditor-button div {
    display: inline-block;
 /*   margin: 2px 0; */
    margin: 10px 0;  
    padding: 0;
/*    overflow: hidden; */
    line-height: 0;
    font-size: 0;
    color: transparent;
}
.sceditor-button.disabled div {
    opacity: .3;
}

.sceditor-button svg {
    display: inline-block;
    height: 16px;
    width: 16px;
    margin: 2px 0;
    fill: #fff;
    text-decoration: none;
    pointer-events: none;
    line-height: 1
}

.sceditor-button.disabled svg {
    fill: #888
}

.sceditor-button.has-icon div {
    display: none
}

.sceditor-button.text,
.sceditor-button.text div,
.sceditor-button.text-icon,
.sceditor-button.text-icon div,
.text .sceditor-button,
.text .sceditor-button div,
.text-icon .sceditor-button,
.text-icon .sceditor-button div {
    display: inline-block;
    width: auto;
    line-height: 16px;
    font-size: 1em;
    color: inherit;
    text-indent: 0;
}

.sceditor-button.has-icon div,
.sceditor-button.text div,
.text .sceditor-button div,
.text-icon .sceditor-button.has-icon div {
    padding: 0 2px;
    background: 0 0;
}

.sceditor-button.text svg,
.text .sceditor-button svg {
    display: none;
}

.sceditor-button.text-icon div,
.text-icon .sceditor-button div {
    padding: 0 2px 0 20px;
}

.rtl div.sceditor-toolbar {
    text-align: right;
}

.rtl .sceditor-button {
    float: right;
}

/* Additional Buttons (for MyBB) */

.sceditor-button-video div:before {
   content: "\f008";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;   
}

.sceditor-button-php div:before {
   content: "\f120";
   color: #333;
   font-family: "Font Awesome 5 Free";
   font-size: 15px;
   text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ccc;
}

Have fun and continue further editing!

Final note: since this is shared as is in the hopes that folks will find it useful, edit, modify and continue with this further, please feel free to share any continuations of this via this thread....
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#2
you are awesome tutor Smile

great tutorial
Reply
#3
(08-06-2019, 03:54 PM)mujeebdgk Wrote: you are awesome tutor Smile

great tutorial


Cool beans and no worries. Big Grin  Simply glad that it may be of some interest and use. Thanks. Cool
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#4
Brilliant tutorial as always.

I have a question, i am using My insert buttons plugin to insert an hide icon on the editor.By using this tutorial, i need to use a fontawesome icon,so, i selected one and used it like this:


.sceditor-button-hide div:before {
  content: "\f065";
  color: #333;
  font-family: "Font Awesome 5 Free";
  font-size: 15px;
  text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa; 
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #ccc;
}


The icon will show up but it isn't showing up clear as the other icons on the editor.I have already tried changing the icon but it remains the same,please check the screenshot.


Thanks a lot for your time and dedication.

   
Reply
#5
I got the invite for this vintage, I will suggest using these icons from this Editor Smile
https://community.mybb.com/thread-222244.html

Thanks for updating, good work as always Smile
Reply
#6
(08-12-2019, 09:04 AM)WallBB Wrote: I got the invite for this vintage, I will suggest using these icons from this Editor Smile
https://community.mybb.com/thread-222244.html

Thanks for updating, good work as always Smile
Hey,

I am already using them with updated tutorial from that thread .

After Vintagedaddy made this new one with Fontawesome icons, i installed and tried this one too because i was curious about Fa5 icons.

Both of the tutorials are working fine, one minor problem is that icon i inserted using the My insert plugin.

Let me underline, i used a custom png with the tutorial from your thread and it was working as it should. Smile

Thanks both of you for your time and effort.

Regards.
Reply
#7
(08-11-2019, 07:02 PM)kbilly Wrote: The icon will show up but it isn't showing up clear as the other icons on the editor.I have already tried changing the icon but it remains the same,please check the screenshot.


Hmm, can you send me the link for "My insert plugin" so I can look at the css it uses to see if I can recreate your issue? Also is there any styling specific to that specific div?

ie:
.sceditor-button-hide div


?? As perhaps it is affecting...
 
.sceditor-button-hide div:before

Just a thought... though I cannot promise when I will have more free time to look further at this currently...
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#8
(08-13-2019, 01:23 AM)vintagedaddyo Wrote:
(08-11-2019, 07:02 PM)kbilly Wrote: The icon will show up but it isn't showing up clear as the other icons on the editor.I have already tried changing the icon but it remains the same,please check the screenshot.


Hmm, can you send me the link for "My insert plugin" so I can look at the css it uses to see if I can recreate your issue? Also is there any styling specific to that specific div?

ie:
.sceditor-button-hide div


?? As perhaps it is affecting...
 
.sceditor-button-hide div:before

Just a thought... though I cannot promise when I will have more free time to look further at this currently...
Here is the link

https://community.mybb.com/thread-168909.html
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)