How to load CSS with RequireJS? - Studio-42/elFinder GitHub Wiki

Why does not customized CSS apply?

When loading elFinder using RequireJS, "css/elfinder.min.css" and "css/theme.css" are automatically loaded. However, since it is loaded after CSS to load in HTML, it looks different from the expected display.

Solutions (Example to load "themes/theme_name/css/theme.css")

Case . 1

Use client configuration cssAutoLoad to load additional CSS.

e.g.

opts = {
    cssAutoLoad : ['themes/theme_name/css/theme.css'], // Array of additional CSS URLs
    url : 'php/connector.minimal.php', // connector URL (REQUIRED)
    lang: lang                         // auto detected language (optional)
}

Case . 2

Disable cssAutoLoad and load css in html source.

opts = {
    cssAutoLoad : false, // Disable CSS auto loading
    url : 'php/connector.minimal.php', // connector URL (REQUIRED)
    lang: lang                         // auto detected language (optional)
}

In HTML source

<link rel="stylesheet" href="css/elfinder.min.css" type="text/css">
<link rel="stylesheet" href="css/theme.css" type="text/css">
<link rel="stylesheet" href="themes/theme_name/css/theme.css" type="text/css">

Case . 3

Load themes from manifests. Use client configuration themes and theme.

opts = {
    themes : { // List of themes
        'theme_name' : 'https://example.com/theme_name.json',
    },
    theme : 'theme_name', // default theme, name must be the same as in `themes` list
}

Example of theme_name.json

{
    "name": "Theme name",
    "cssurls": "https://theme-site.com/theme.min.css",
    "author": "Your name",
    "email": "[email protected]",
    "license": "MIT",
    "link": "https://theme-site.com/",
    "image": "https://theme-site.com/theme-preview.png",
    "description": ""
}