CSS file in TinyMCE plugin made by myself doesn't work

Development
1

Hello guys,
I’m new here and this is my first topic (if I have the wrong section do not hesitate to correct me!).
I made this little plugin to add a dropdown menu with the same functionality of “Textboxes” default dropdown menu of tinymce. The plugin works but the style.css file is not read.
Where am I doing wrong?
The plugin is composed by 3 files: the main.php file, style.css and wdm-mce-button.js file that is in a folder called “js”.

  • FIRST FILE: TinyMCE-Button-Test-Arald.php ( themain.php file)

'<?php
/*

  • Plugin Name: TinyMCE button test Arald
  • Author: Arald
  • Text Domain: my-plugin
    */
    // hooks your functions into the correct filters
    function wdm_add_mce_button() {
    // check user permissions
    if ( !current_user_can( ‘edit_posts’ ) && !current_user_can( ‘edit_pages’ ) ) {
    return;
    }
    // check if WYSIWYG is enabled
    if ( ‘true’ == get_user_option( ‘rich_editing’ ) ) {
    add_filter( ‘mce_external_plugins’, ‘wdm_add_tinymce_plugin’ );
    add_filter( ‘mce_buttons_2’, ‘wdm_register_mce_button’ );
    }
    }
    add_action(‘admin_head’, ‘wdm_add_mce_button’);
    // register new button in the editor
    function wdm_register_mce_button( $buttons ) {
    array_push( $buttons, ‘wdm_mce_button’ );
    return $buttons;
    }
    // declare a script for the new button
    // the script will insert the shortcode on the click event
    function wdm_add_tinymce_plugin( $plugin_array ) {
    $plugin_array[‘wdm_mce_button’] = get_stylesheet_directory_uri() .’/js/wdm-mce-button.js’;
    return $plugin_array;
    }
  • SECOND FILE: style.css

.textbox.textbox–introduction .textbox__header, .bcc-box.textbox–introduction .textbox__header {
background: #4f446d;
border-top-left-radius: 0;
border-top-right-radius: 0;
color: #fff;
font-size: 0.9em;
font-style: italic;
font-weight: normal;
margin: 0;
padding: 1.7777777778em 1.7777777778em 1.7777777778em 1.7777777778em;
text-align: left;
}

.textbox.textbox–form .textbox__header, .bcc-box.textbox–form .textbox__header {
background: #4f446d;
border-top-left-radius: 0;
border-top-right-radius: 0;
color: #fff;
font-size: 0.9em;
font-style: italic;
font-weight: normal;
margin: 0;
padding: 1.7777777778em 1.7777777778em 1.7777777778em 1.7777777778em;
text-align: left;
}

.textbox.textbox–example .textbox__header, .bcc-box.textbox–example .textbox__header {
background: #4f446d;
border-top-left-radius: 0;
border-top-right-radius: 0;
color: #fff;
font-size: 0.9em;
font-style: italic;
font-weight: normal;
margin: 0;
padding: 1.7777777778em 1.7777777778em 1.7777777778em 1.7777777778em;
text-align: left;
}

.textbox.textbox–use .textbox__header, .bcc-box.textbox–use .textbox__header {
background: #4f446d;
border-top-left-radius: 0;
border-top-right-radius: 0;
color: #fff;
font-size: 0.9em;
font-style: italic;
font-weight: normal;
margin: 0;
padding: 1.7777777778em 1.7777777778em 1.7777777778em 1.7777777778em;
text-align: left;
}

.textbox.textbox–extension .textbox__header, .bcc-box.textbox–extension .textbox__header {
background: #4f446d;
border-top-left-radius: 0;
border-top-right-radius: 0;
color: #fff;
font-size: 0.9em;
font-style: italic;
font-weight: normal;
margin: 0;
padding: 1.7777777778em 1.7777777778em 1.7777777778em 1.7777777778em;
text-align: left;
}

.textbox.textbox–exercise .textbox__header, .bcc-box.textbox–exercise .textbox__header {
background: #4f446d;
border-top-left-radius: 0;
border-top-right-radius: 0;
color: #fff;
font-size: 0.9em;
font-style: italic;
font-weight: normal;
margin: 0;
padding: 1.7777777778em 1.7777777778em 1.7777777778em 1.7777777778em;
text-align: left;
}

.textbox.textbox–activity .textbox__header, .bcc-box.textbox–activity .textbox__header {
background: #4f446d;
border-top-left-radius: 0;
border-top-right-radius: 0;
color: #fff;
font-size: 0.9em;
font-style: italic;
font-weight: normal;
margin: 0;
padding: 1.7777777778em 1.7777777778em 1.7777777778em 1.7777777778em;
text-align: left;
}

.textbox.textbox–task .textbox__header, .bcc-box.textbox–task .textbox__header {
background: #4f446d;
border-top-left-radius: 0;
border-top-right-radius: 0;
color: #fff;
font-size: 0.9em;
font-style: italic;
font-weight: normal;
margin: 0;
padding: 1.7777777778em 1.7777777778em 1.7777777778em 1.7777777778em;
text-align: left;
}

body#tinymce.wp-editor h2 {
font-weight: normal;
margin-bottom: 0;
text-align: initial;
}

.textbox.textbox–introduction, .bcc-box.textbox–examples {
margin-bottom: 1.35em;
padding: 0;
border-radius: 0;
border-style: none;
border-width: 0;
color: #000;
background: #c0bdcd;
}

.textbox.textbox–form, .bcc-box.textbox–examples {
margin-bottom: 1.35em;
padding: 0;
border-radius: 0;
border-style: none;
border-width: 0;
color: #000;
background: #c0bdcd;
}

.textbox.textbox–use, .bcc-box.textbox–examples {
margin-bottom: 1.35em;
padding: 0;
border-radius: 0;
border-style: none;
border-width: 0;
color: #000;
background: #c0bdcd;
}

.textbox.textbox–extension, .bcc-box.textbox–examples {
margin-bottom: 1.35em;
padding: 0;
border-radius: 0;
border-style: none;
border-width: 0;
color: #000;
background: #c0bdcd;
}

.textbox.textbox–exercise, .bcc-box.textbox–examples {
margin-bottom: 1.35em;
padding: 0;
border-radius: 0;
border-style: none;
border-width: 0;
color: #000;
background: #c0bdcd;
}

.textbox.textbox–activity, .bcc-box.textbox–examples {
margin-bottom: 1.35em;
padding: 0;
border-radius: 0;
border-style: none;
border-width: 0;
color: #000;
background: #c0bdcd;
}

.textbox.textbox–task, .bcc-box.textbox–examples {
margin-bottom: 1.35em;
padding: 0;
border-radius: 0;
border-style: none;
border-width: 0;
color: #000;
background: #c0bdcd;
}

.textbox.textbox–example, .bcc-box.textbox–examples {
margin-bottom: 1.35em;
padding: 0;
border-radius: 0;
border-style: none;
border-width: 0;
color: #000;
background: #c0bdcd;
}

  • THIRD FILE: wdm-mce-button.js

I called classes in this way:

  • Introduction: div class = textbox textbox–introduction
  • Form: div class = textbox textbox–form
  • Example: div class = textbox textbox–example
  • Use: div class = textbox textbox–use
  • Extension: div class = textbox textbox–extension
  • Exercise: div class = textbox textbox–exercise
  • Activity: div class = textbox textbox–activity
  • Task: div class = textbox textbox–task
  • header class= textbox__header
  • h2 class= textbox__title
  • div class='textbox__content

After that I had created classes I had added this function (always in the thirn file):

function loadjscssfile(filename, filetype) {
if (filetype == “js”) { //if filename is a external JavaScript file
// alert(‘called’);
var fileref = document.createElement(‘script’)
fileref.setAttribute(“type”, “text/javascript”)
fileref.setAttribute(“src”, filename)
alert(‘called’);
} else if (filetype == “css”) { //if filename is an external CSS file
var fileref = document.createElement(“link”)
fileref.setAttribute(“rel”, “stylesheet”)
fileref.setAttribute(“type”, “text/css”)
fileref.setAttribute(“href”, filename)
}
if (typeof fileref != “undefined”)
document.getElementsByTagName(“head”)[0].appendChild(fileref)
}

Thank you for your time!