When I build Concrete5 themes, I like to put all of my CSS files inside one subdirectory. However, this is complicated by the "typography.css" file that the TinyMCE WYSIWYG editor uses, because by default it always looks in your theme's top-level directory.

If you're running Concrete5.6 or higher, there is an easy way to override the core system's default behaviour and have it look inside your "css" directory instead. This technique also allows you to use a different name for the file (for example, I like to call mine "tinymce.css" to make it clear that it is only for TinyMCE, and not limited to typographic styles).

To change the name and location of this file, you need to override the getThemeEditorCSS() function in the core system's PageTheme model. Note that this override only works in Concrete5.6 or higher! To do so, add a new file called "page_theme.php" to your site's top-level /models/ directory (not /concrete/models). In that file, paste the following code:

<?php defined('C5_EXECUTE') or die(_("Access Denied."));

/* Override core model so TinyMCE editor looks for /css/tinymce.css instead of typography.css */

class PageThemeEditableStyle extends Concrete5_Model_PageThemeEditableStyle {}
class PageThemeEditableStyleFont extends Concrete5_Model_PageThemeEditableStyleFont {}
class PageThemeFile extends Concrete5_Model_PageThemeFile {}

class PageTheme extends Concrete5_Model_PageTheme {
    public function getThemeEditorCSS() {
        $theme_dir = $this->ptURL . '/';
        $css_file = 'css/tinymce.css'; //<--change this as needed
        return $theme_dir . $css_file;
    }
}

The key line in that code is $css_file = 'css/tinymce.css'; -- change this if you want a different filename or location. For example, if you want to keep the name typography.css, then change that line to $css_file = 'css/typography.css';. If you want to name the file peanut-butter-and-jelly.css and keep it at the top-level of your theme directory, then change that line to $css_file = 'peanut-butter-and-jelly.css';.