WebsiteBaker Community Forum
WebsiteBaker Support (2.13.x) => Modules => Topic started by: crnogorac081 on May 02, 2023, 02:44:52 PM
-
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
@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
<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
@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 ?
-
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....
-
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
<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
$(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
'ADDON_NAME' => strtolower($sAddonName),
'ADDONNAME' => strtoupper($sAddonName),
works fine for me, maybe, you can try it
-
Hi,
I tested this and a bit improved code
In module overview.php or coresponding file add
// 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
<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>