admin/Studio-42-elFinder
1
0
Fork 0
mirror of https://github.com/Studio-42/elFinder synced 2026-06-08 12:37:09 +00:00
Code Issues Packages Projects Releases Wiki Activity
Page: How to load CSS with RequireJS
Pages
3rd party connectors, plugins, modules Adding file description to Properties dialog 2.1 Adding file description to Properties dialog Adding new column to list view in 2.1 Advisory about vulnerability of CVE 2018 9109 and CVE 2018 9110 Automatically load language Basic Authentication Example Build and compress elFinder from source Client Server API 2.0 Client Server API 2.1 Client configuration options 2.1 Client configuration options Client event API Common issues Connector configuration options 2.1 Connector configuration options Create dialog with custom context menu command Custom context menu command Custom search function Disable real file path from being shown Getting encoded hash from the path HOWTOs by external sites Home How to get OAuth token How to load CSS with RequireJS Install Integration with CKEditor (jQuery UI dialog mode) Varian 2 (change url) Integration with CKEditor (jQuery UI dialog mode) Integration with CKEditor 4 (jQuery UI dialog mode) Integration with CKEditor 4 Integration with CKEditor 5 Integration with CKEditor Integration with CodeIgniter Integration with Codeigniter 2 Integration with Multiple Summernote (fixed functions) Integration with TinyMCE 3.x Integration with TinyMCE 4.x Integration with elRTE 1.x Logging Multiple Roots Node.js connector Simple file permissions control Using custom editor to edit files within elfinder Using elFinder 2.x UI with 1.x connector Using toast() to display popup notifications in 2.1
Clone
3
How to load CSS with RequireJS
GioCC edited this page 2026-02-18 17:33:59 +01:00
Table of Contents

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": "optional@email.com",
    "license": "MIT",
    "link": "https://theme-site.com/",
    "image": "https://theme-site.com/theme-preview.png",
    "description": ""
}