including custom css file

[crnogorac081]

Hello,

I am working on a backend theme and modules and what I cant figure out is how to load different css module from modules theme folder.

Here is the situation:

When DefaultTheme is loaded, and the module from backend is in use (for example MyModule), the css files are loaded

MyModule/backend.css which points to

Code: [Select]

@charset "utf-8 ";
@import url("themes/default/css/default.css");

When I change backend theme to NewBackendTheme, and MyModule is in use,

it still loads css from MyModule/themes/default/css/default.css  instead MyModule/themes/NewBackendTheme/css/default.css

I even tried in NewBackendTheme -> header.htt to add

Code: [Select]

<script>
/* inserted by header.htt {WB_VERSION} */
var WB_URL = '{WB_URL}';
var WB_REL = '{WB_REL}';
var THEME_URL = '{THEME_URL}';
var THEME = '{THEME}';
var TEMPLATE = '{TEMPLATE}';
var LANGUAGE = '{LANGUAGE}';
var ADMIN_URL = '{ADMIN_URL}';
var EDITOR = '{EDITOR}';
var LANGUAGE = '{LANGUAGE}';

var SECTION_NAME = '{SECTION_NAME}';
var isBootstrap = true;
</script>
<style>
:root {
--backend-theme: '{THEME}';
}
</style>

and in MyModule/backend.css to change to this

Code: [Select]

@charset "utf-8 ";
@import url("themes/var(--backend-theme)/css/default.css");

but it is not working as it sees this as string and not variable.

Did you find solution for this ?

[sternchen8875]

Answer to your question: No, i dont have a solution for that....

... but some questions about this

When I change backend theme to NewBackendTheme, and MyModule is in use,

it still loads css from MyModule/themes/default/css/default.css  instead MyModule/themes/NewBackendTheme/css/default.css

/themes/default is a path inside of the module folder and has nothing to do with the used BackendTheme.

default is here to see as a fallback and the name "default" has nothing to do with the name of the backend theme.
but let me write a little more about this...

the idea behind this new structure in the modules: you've a standard folder (called = "default") for every parts of the module design, means: the templates, the css, js, own languages, own backend_body or own jquery etc.
the name ="default" means here, it is in connection with the standard theme or template, defined in the WB-Settings and named as default_theme or default_template in the database and in the core files.

if you set in the page settings from a single page with this module "MyModule" a different frontend template, not the as standard (or default) defined template, the SimpleCommandDispat cher (under /modules) make's a copy from the folder /MyModule/default and name it like the used frontend-template or as example, if you've a frontend-template with the name ="spring", the dispatcher build a copy from the folder /modules/MyModule/templates/default and call it /modules/MyModule/templates/spring. This give the possibility, to build a special design for this frontend-template and also the possibility, to work in different pages (with this module as section) with different frontend templates in these sections.

I'm not sure, but i mean, we've the same procedure also for the backend in the past, but it change in the last wb-versions, because, it was not needed, if you use only one backend theme. i'll look at this in the next days

P.S.: somebody ask me about the w3.css in the folders of my modules, it's not needed, because, WB use the w3.css everywhere in the backend. i use "my w3.css" in the modules, dont know, what happend, if we have a new BackendTheme....

[sternchen8875]

some additional info's after a test

the copy-function (descriped in my last posting) works also for backend-themes. if you set this new backend-theme as default in wb-settings, you can use all the path's from the "old" DefaultTheme like THEME_PATH or THEME_URL.

now your problem: what you need, is a possibility, to set the path from the backend.css in the module-folder from your Module to the correct backend-theme-folder under modules/MyModule/themes
Best solution (in my eyes) is a hard-coded path in the dispatcher (like the language-files).
Maybe, we can work on a solution for the next WB_Version in a couple of weeks or days, i dont know

My solution for that problem at the moment is a call from the used css-file in the backend_body.js
Here, i can use the path from the active backend-theme directly from the SimpleCommandDispat cher and defined in the PHP-Files in my cmd-folder from this module. it works like your code in the top.
the values from the words inside the brackets are defined in every used php-file from this module with a output and this code with the script... is written in every twig-file

Code: [Select]

<script>
    /* inserted by modify.twig */
    var {{ ADDONNAME }} = {
        WB_URL : "{{ WB_URL }}",
        AddonUrl : "{{ ADDONURL }}/",
        AddonThemeUrl : "{{ MODULE_THEME_URL }}",
......
MODULE_THEME_URL is the $sAddonThemeUrl from the dispatcher

and in the backend_body.js

Code: [Select]

$(document).ready(function() {
    $.insert(WBMEMBERS.AddonThemeUrl + "/css/backend_default.css");
WBMEMBERS is in this case the Module-name, also defined in the php-files with

Code: [Select]

            'ADDON_NAME'                        => strtolower($sAddonName),
            'ADDONNAME'                         => strtoupper($sAddonName),
works fine for me, maybe, you can try it

[crnogorac081]

Hi,

I tested this and a bit improved code

In module overview.php or coresponding file add

Code: [Select]

// Load css / js files from theme files
$sPath = $sAddonThemePath.'/*{css,js}/*.{css,js}';
$aFiles = glob($sPath, GLOB_BRACE);
$aThemeScripts = [];
foreach ($aFiles as $sFilePath) {

if (\is_readable($sFilePath)) {
$aThemeScripts[] = str_replace($oReg->AppPath, $oReg->AppUrl, $sFilePath);
}
}
$aTplData['THEME_SCRIPTS'] = json_encode($aThemeScripts);

then in overview.twig

Code: [Select]

<script>

(function() {
  "use strict";

let aThemeScripts = {{ THEME_SCRIPTS }};
if (aThemeScripts){

let createScript = (url) => {
return new Promise(function(resolve, reject) {

let scriptData;
if (url.endsWith('.js')) {
scriptData = document.createElement('script');
scriptData.type = 'text/javascript';
scriptData.async = false;
scriptData.src = url;
}
if (url.endsWith('.css')) {
scriptData= document.createElement('link');
scriptData.href = url;
scriptData.type = 'text/css';
scriptData.rel = 'stylesheet';
}

scriptData.onload = () => {
resolve(url);
};
scriptData.onerror = () => {
reject(url);
};

document.body.appendChild(scriptData);
});
};

let aScript = aThemeScripts;

let promiseData = [];
aScript.forEach(function(url) {
promiseData.push(createScript(url));
});
Promise.all(promiseData).then(function() {
// console.log('The required scripts are loaded successfully!');
}).catch(function(sData) {
// console.log(sData + ' failed to load!');
});

}

})();
</script>