> For the complete documentation index, see [llms.txt](https://playground.e107sk.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://playground.e107sk.com/plugin-dev-quick-notes/how-to/rendering-a-plugin-page-without-the-site-themes-css.md). # Rendering a plugin page without the site theme's CSS Applies to: e107 v2.3+ Verified against: e107\_core/templates/header\_default.php, e107\_handlers/js\_manager.php ### The problem You have a plugin page that ships its own front-end framework — an admin-like dashboard, a member area, a booking screen — and it has to look the same on every site that installs the plugin. `e_IFRAME` gets you part of the way: it suppresses the theme's HEADER and FOOTER markup, so your page is no longer wrapped in the site's layout. But the page still **loads every stylesheet the theme registered**, because e107 builds one `` for the whole request and has no notion of "this page is not themed". The result is a page that looks right on one theme and broken on the next: your framework and the theme's Bootstrap both style `.table`, `.btn` and `.card`, and which one wins depends on the theme the site happens to run. Writing CSS overrides against that is a losing game. You cannot know which theme you are fighting, and every override you add to win one argument breaks a different site. *** ### The mechanism CSS is not emitted file by file. e107 sorts every registered stylesheet into one of six **zones**, and `header_default.php` renders the zones in the order named by the `CSSORDER` constant: ```php // e107_core/templates/header_default.php $CSSORDER = deftrue('CSSORDER') ? explode(",", CSSORDER) : array('library', 'other', 'core', 'plugin', 'theme', 'inline'); foreach($CSSORDER as $val) { $cssId = $val . "_css"; $e_js->renderJs($cssId, false, 'css'); } ``` Two things follow from those seven lines, and the second one is the useful one: 1. **The order of the zones is configurable** — which is how a plugin makes its stylesheet win over the theme's. 2. **A zone that is not in the list is never rendered at all.** Nothing else reads `CSSORDER`. Leaving a zone out does not disable the API that fills it; the files are still registered; they are simply never written to the page. #### The zones, and what puts a file in each | Zone | Filled by | Typically holds | | --------- | -------------------------------------------------- | --------------------------------------------------------- | | `library` | `$e_js->registerLibrary()`, theme `` | jQuery UI, Bootstrap, framework CSS declared by the theme | | `other` | `e107::css('url', ...)`, `$e_js->otherCSS()` | CDN links, preview theme, backward-compatibility files | | `core` | `$e_js->coreCSS()` | `e107.css` — the admin bar, message boxes | | `plugin` | `e107::css('myplugin', ...)`, `$e_js->pluginCSS()` | **your plugin's stylesheets** | | `theme` | `$e_js->themeCSS()`, `THEME_STYLE` | the site theme's `style.css` and anything it registers | | `inline` | `$e_js->inlineCSS()` | `