No Code Attached Yet
avatar iamrobert
iamrobert
12 Oct 2023

I'm trying to make a custom j4 administrator template - but I am unable to get Web Assets to show the CSS or JS of the new template.

Steps to reproduce the issue

  1. Change ATUM template.xml to <inheritable>0</inheritable>
  2. Copy the ATUM template with a new name, "test"
  3. In the administrator/test/joomla.asset.json rename atum to test
  4. In the index.php, replace:
$wa->usePreset('template.test.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
    ->useStyle('template.active.language')
    ->useStyle('template.user')
    ->addInlineStyle(':root {
		--hue: ' . $matches[1] . ';
		--template-bg-light: ' . $this->params->get('bg-light', '#f0f4fb') . ';
		--template-text-dark: ' . $this->params->get('text-dark', '#495057') . ';
		--template-text-light: ' . $this->params->get('text-light', '#ffffff') . ';
		--template-link-color: ' . $this->params->get('link-color', '#2a69b8') . ';
		--template-special-color: ' . $this->params->get('special-color', '#001B4C') . ';
	}');

$wa->registerStyle('template.active', '', [], [], ['template.test.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')]);
  1. Switch to your test default template.

I've tried with my own custom template as well.

Expected result

  1. Expect it to look identical to the ATUM template with the CSS and JS files

Actual result

  1. THE CSS and JS files are missing

If we begin to add the full URL in the joomla.asset.json:

{
    "name": "template.test.ltr",
    "description": "The css file to be used when the site is left to right (LTR).",
    "type": "style",
    "uri": "media/templates/administrator/test/css/template.min.css",  
    "dependencies": [
        "fontawesome"
    ]
},

The template file will show, but Font Awesome and Joomla custom elements output to the wrong directory:

/media/vendor/fontawesome-free/css/fontawesome.min.css
/media/vendor/joomla-custom-elements/css/joomla-alert.min.css

ATUM outputs to:

/media/templates/administrator/atum/css/vendor/fontawesome-free/fontawesome.min.css?2464813a5b080100d427b8bdbd12fcaa

System information (as much as possible)

PHP: 8.0.28
Joomla: Joomla! 4.3.4 Stable

Additional comments

avatar iamrobert iamrobert - open - 12 Oct 2023
avatar joomla-cms-bot joomla-cms-bot - change - 12 Oct 2023
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 12 Oct 2023
avatar dgrammatiko
dgrammatiko - comment - 12 Oct 2023

Change ATUM template.xml to <inheritable>0</inheritable>

That WON'T work!!!
If you want to remove the child templates then you have to also move all the files from media/templates/administrator/test to administrator/templates/test BUT it's not recommended as this is the legacy way of doing templates...

avatar iamrobert
iamrobert - comment - 13 Oct 2023

@dgrammatiko Thanks - that solved my issue. ?

Quick follow-up: Is there a streamlined way to shorten the directory path for asset folders? The current one feels like a maze:

media/templates/administrator/template_name/scss/

Compared to the old, simpler route:

administrator/templates/template_name/css/

Would love to hear any advice for making this less cumbersome. Cheers!

avatar dgrammatiko
dgrammatiko - comment - 13 Oct 2023

Quick follow-up: Is there a streamlined way to shorten the directory path for asset folders?

If it's a template css/js you can referencing it directly, ie:
This template.min.css is equal to this media/templates/administrator/template_name/css/template.min.css. So the media/templates/administrator/template_name/css is the base (relative) path for css files and media/templates/administrator/template_name/js is the base (relative) path for javascript files

avatar iamrobert iamrobert - change - 13 Oct 2023
Status New Closed
Closed_Date 0000-00-00 00:00:00 2023-10-13 15:08:53
Closed_By iamrobert
avatar iamrobert iamrobert - close - 13 Oct 2023

Add a Comment

Login with GitHub to post a comment