2019-08-03, 03:33 AM
Pages: 1 2
2019-08-03, 08:15 AM
<-- snip -->
2019-08-04, 08:56 AM
You are simply awesome,bro.
Thankyou.
Thankyou.
2019-08-05, 07:29 PM
<-- snip -->
2019-08-10, 11:46 PM
It worked for me but my toolbar on the text editor, many of the icons were replaced by a YouTube icon for some reason
2019-08-12, 09:05 AM
(2019-08-05, 07:29 PM)vintagedaddyo Wrote: [ -> ](2019-08-04, 08:56 AM)kbilly Wrote: [ -> ]You are simply awesome,bro.
Thankyou.
Thanks & no worries.
ok, for those desiring and or those that requested it for 1.8.21, the tutorial steps should now look more like this for 1.8.21:
[Tutorial] MyBB Dark Editor for MyBB 1.8.21 [SCEditor]
Description:
A dark editor based on default MyBB editor for [SCEditor]
Introduction:
Hey all,
If you need a dark editor based on default MyBB editor, 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 is this:
(Clean, dark and very nice for dark or light themes)
Requirement: MyBB 1.8.21
Instructions:
1) Download the mybb-dark.zip and upload/extract them inside:
public_html(MyBBRoot)/jscripts/sceditor/themes/.
example:
public_html(MyBBRoot)/jscripts/sceditor/themes/mybb-dark/icons
Download: http://s000.tinyupload.com/index.php?fil...9208050741
2) Copy public_html(MyBBRoot)/jscripts/sceditor/styles/jquery.sceditor.mybb.css and rename the file jquery.sceditor.mybb-dark.css
3) Open public_html(MyBBRoot)/jscripts/sceditor/styles/jquery.sceditor.mybb-dark.css and replace the content with:
/*! SCEditor | (C) 2011-2013, Sam Clarke | sceditor.com/license */ /* jquery.sceditor.mybb-dark.css */ html, body, p, code:before, table { margin: 0; padding: 0; font-family: Tahoma, Verdana, Arial, Sans-Serif; font-size: 14px; color: #ccc; } 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: #444; 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: #444; 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; }
4) Copy public_html(MyBBRoot)/jscripts/sceditor/themes/mybb.css and rename it mybb-dark.css
5.A) Open public_html(MyBBRoot)/jscripts/sceditor/themes/mybb-dark.css and replace the content with:
/*! SCEditor | (C) 2011-2016, Sam Clarke | sceditor.com/license */ /* mybb-dark.css */ .sceditor-button div, div.sceditor-grip { background-image: url(mybb-dark/icons/famfamfam.png); background-repeat: no-repeat; width: 16px; height: 16px; } .sceditor-button-youtube div { background-image: url(mybb-dark/icons/video.png); } .sceditor-button-link div { background-position: 0 -16px; } .sceditor-button-unlink div { background-position: 0 -32px; } .sceditor-button-underline div { background-image: url(mybb-dark/icons/underline.png); } .sceditor-button-time div { background-position: 0 -64px; } .sceditor-button-table div { background-position: 0 -80px; } .sceditor-button-superscript div { background-position: 0 -96px; } .sceditor-button-subscript div { background-position: 0 -112px; } .sceditor-button-strike div { background-image: url(mybb-dark/icons/strike.png); } .sceditor-button-source div { background-image: url(mybb-dark/icons/source.png); } .sceditor-button-size div { background-position: 0 -160px; } .sceditor-button-rtl div { background-position: 0 -176px; } .sceditor-button-right div { background-image: url(mybb-dark/icons/format-right.png); } .sceditor-button-removeformat div { background-position: 0 -208px; } .sceditor-button-quote div { background-image: url(mybb-dark/icons/quote.png); } .sceditor-button-print div { background-position: 0 -240px; } .sceditor-button-pastetext div { background-position: 0 -256px; } .sceditor-button-paste div { background-position: 0 -272px; } .sceditor-button-outdent div { background-position: 0 -288px; } .sceditor-button-orderedlist div { background-position: 0 -304px; } .sceditor-button-maximize div { background-position: 0 -320px; } .sceditor-button-ltr div { background-position: 0 -336px; } .sceditor-button-left div { background-image: url(mybb-dark/icons/format-left.png); } .sceditor-button-justify div { background-image: url(mybb-dark/icons/format-fill.png); } .sceditor-button-italic div { background-image: url(mybb-dark/icons/italic.png); } .sceditor-button-indent div { background-position: 0 -400px; } .sceditor-button-image div { background-position: 0 -416px; } .sceditor-button-horizontalrule div { background-image: url(mybb-dark/icons/hr.png); } .sceditor-button-format div { background-position: 0 -448px; } .sceditor-button-font div { background-position: 0 -464px; } .sceditor-button-emoticon div { background-position: 0 -480px; } .sceditor-button-email div { background-position: 0 -496px; } .sceditor-button-date div { background-position: 0 -512px; } .sceditor-button-cut div { background-position: 0 -528px; } .sceditor-button-copy div { background-position: 0 -544px; } .sceditor-button-color div { background-position: 0 -560px; } .sceditor-button-code div { background-position: 0 -576px; } .sceditor-button-center div { background-image: url(mybb-dark/icons/format-center.png); } .sceditor-button-bulletlist div { background-position: 0 -608px; } .sceditor-button-bold div { background-image: url(mybb-dark/icons/bold.png); } div.sceditor-grip { background-position: 0 -640px; } .rtl div.sceditor-grip { background-position: 0 -650px; 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 #333; border: 1px solid #444; font-size: 13px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: #ccc; line-height: 1; font-weight: 700; height: 250px; border-radius: 4px; } .sceditor-container *, .sceditor-container :after, .sceditor-container :before { -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: #ccc; padding: 0; margin: 5px; resize: none; background: #333; 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: 10px; height: 10px; 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 :before { -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: #444; 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: #333; margin: 1px 5px 1px 0; padding: 1px; border-bottom: 1px solid #444; -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: #555; border: 1px solid #555 /*-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: #555; border: 1px solid #555; -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; 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 { background-image: url(mybb-dark/icons/video.png) } .sceditor-button-php div { background-image: url(mybb-dark/icons/php.png) }
5.B) "optional:" the tutorial so far left the dropdowns white thus not being dark and say you want them dark you can simply:
Replace with:
/*! SCEditor | (C) 2011-2016, Sam Clarke | sceditor.com/license */ /* mybb-dark.css */ .sceditor-button div, div.sceditor-grip { background-image: url(mybb-dark/icons/famfamfam.png); background-repeat: no-repeat; width: 16px; height: 16px; } .sceditor-button-youtube div { background-image: url(mybb-dark/icons/video.png); } .sceditor-button-link div { background-position: 0 -16px; } .sceditor-button-unlink div { background-position: 0 -32px; } .sceditor-button-underline div { background-image: url(mybb-dark/icons/underline.png); } .sceditor-button-time div { background-position: 0 -64px; } .sceditor-button-table div { background-position: 0 -80px; } .sceditor-button-superscript div { background-position: 0 -96px; } .sceditor-button-subscript div { background-position: 0 -112px; } .sceditor-button-strike div { background-image: url(mybb-dark/icons/strike.png); } .sceditor-button-source div { background-image: url(mybb-dark/icons/source.png); } .sceditor-button-size div { background-position: 0 -160px; } .sceditor-button-rtl div { background-position: 0 -176px; } .sceditor-button-right div { background-image: url(mybb-dark/icons/format-right.png); } .sceditor-button-removeformat div { background-position: 0 -208px; } .sceditor-button-quote div { background-image: url(mybb-dark/icons/quote.png); } .sceditor-button-print div { background-position: 0 -240px; } .sceditor-button-pastetext div { background-position: 0 -256px; } .sceditor-button-paste div { background-position: 0 -272px; } .sceditor-button-outdent div { background-position: 0 -288px; } .sceditor-button-orderedlist div { background-position: 0 -304px; } .sceditor-button-maximize div { background-position: 0 -320px; } .sceditor-button-ltr div { background-position: 0 -336px; } .sceditor-button-left div { background-image: url(mybb-dark/icons/format-left.png); } .sceditor-button-justify div { background-image: url(mybb-dark/icons/format-fill.png); } .sceditor-button-italic div { background-image: url(mybb-dark/icons/italic.png); } .sceditor-button-indent div { background-position: 0 -400px; } .sceditor-button-image div { background-position: 0 -416px; } .sceditor-button-horizontalrule div { background-image: url(mybb-dark/icons/hr.png); } .sceditor-button-format div { background-position: 0 -448px; } .sceditor-button-font div { background-position: 0 -464px; } .sceditor-button-emoticon div { background-position: 0 -480px; } .sceditor-button-email div { background-position: 0 -496px; } .sceditor-button-date div { background-position: 0 -512px; } .sceditor-button-cut div { background-position: 0 -528px; } .sceditor-button-copy div { background-position: 0 -544px; } .sceditor-button-color div { background-position: 0 -560px; } .sceditor-button-code div { background-position: 0 -576px; } .sceditor-button-center div { background-image: url(mybb-dark/icons/format-center.png); } .sceditor-button-bulletlist div { background-position: 0 -608px; } .sceditor-button-bold div { background-image: url(mybb-dark/icons/bold.png); } div.sceditor-grip { background-position: 0 -640px; } .rtl div.sceditor-grip { background-position: 0 -650px; 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 #333; border: 1px solid #444; font-size: 13px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: #ccc; line-height: 1; font-weight: 700; height: 250px; border-radius: 4px; } .sceditor-container *, .sceditor-container :after, .sceditor-container :before { -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: #ccc; padding: 0; margin: 5px; resize: none; background: #333; 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: 10px; height: 10px; 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: 2px 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); } select#videotype { background-color: #555; color: #fff; } div.sceditor-dropdown *, div.sceditor-dropdown :after, div.sceditor-dropdown :before { -webkit-box-sizing: border-box; box-sizing: border-box; } div.sceditor-dropdown a, div.sceditor-dropdown a:link { color: #fff; } div.sceditor-dropdown form { margin: 0; } div.sceditor-dropdown label { display: block; font-weight: 700; color: #f1f1f1; 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 #333; border-top-color: #888; margin: 0 0 .75em; border-radius: 1px; background-clip: padding-box; background-color: #555; border: 1 px solid #333; color: #fff; } div.sceditor-dropdown textarea { padding: 6px; } div.sceditor-dropdown input:focus, div.sceditor-dropdown textarea:focus { border-color: #888 #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: #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 #333; -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 #333; 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: #222; } .sceditor-fontsize-option { padding: 7px 13px; } .sceditor-color-column { float: left; } .sceditor-color-option { display: block; border: 2px solid #444; height: 18px; width: 18px; overflow: hidden; } .sceditor-color-option:hover { border: 1px solid #aaa; } div.sceditor-toolbar { overflow: hidden; padding: 2px 2px 1px; background: #444; 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: #333; margin: 1px 5px 1px 0; padding: 1px; border-bottom: 1px solid #444; -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: #555; border: 1px solid #555 /*-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: #555; border: 1px solid #555; -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; 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 { background-image: url(mybb-dark/icons/video.png) } .sceditor-button-php div { background-image: url(mybb-dark/icons/php.png) }
6) Go to your theme settings and select Mybb-dark editor as default editor.
Have fun!
This can also be found on the mods site: https://community.mybb.com/mods.php?acti...w&pid=1292
Thanks for updating it
2020-11-03, 04:20 AM
Editor is now tested with 1.8.24.
Enjoy
Enjoy
2021-01-30, 09:40 PM
2021-01-31, 12:14 AM
(2021-01-30, 09:40 PM)Daark Wrote: [ -> ](2019-08-12, 09:05 AM)WallBB Wrote: [ -> ]stuck at step 6, where should I go exactly?(2019-08-05, 07:29 PM)vintagedaddyo Wrote: [ -> ]6) Go to your theme settings and select Mybb-dark editor as default editor.
Home » Themes » Default <-- (yourthemename)
Quote:Editor Style *
Specify the style to be used for the MyCode editor in this theme. Editor styles can be found in the jscripts/sceditor/themes folder.
select:
Mybb-dark editor
2022-12-01, 01:05 PM
This worked immediately and looks great. Thanks for sharing!
Pages: 1 2