Adding custom js and css in a child template J5

Roland_S · Post by **Roland_S** » Tue Sep 03, 2024 8:55 am

Can I hijack this question?
I am working on a new Joomla 5 Page and use a cassiopeia child template.
there i have a css and a js folder with my user.css respectively user.js files
CSS is working fine
But the user.js is not recognized
When I put my individual JS Code in the template.js of the parent template it works fine. Problem is, it's not update-proof.
What am I missing?
Is there any place I have to enter the user.js of my child-template for it to work?

ghazal · Post by **ghazal** » Tue Sep 03, 2024 11:16 am

user.css should be in:
/media/templates/site/cassiopeia_my_child_template/css/user.css

user.js should be in:
/media/templates/site/cassiopeia_my_child_template/js/user.js

Roland_S · Post by **Roland_S** » Tue Sep 03, 2024 11:40 am

joomla5_child-template_structure.png

Thanks for the reply.
That's exactly what I did. But the "user.js" (resp. the "user.min.js" have no effect on the page.

Roland_S · Post by **Roland_S** » Tue Sep 03, 2024 11:41 am

@AMurray: sorry for hijacking the other post, it will not happen again. And thanks for creating a separate one

ghazal · Post by **ghazal** » Tue Sep 03, 2024 12:33 pm

In this file:
/templates/cassiopeia/joomla.asset.json
NB: it belongs to cassiopeia, but is applied to its child too.

Check this:

Code: Select all

{
      "name": "template.user",
      "description": "The name of a file where a user can add their own javascript",
      "type": "script",
      "uri":  "user.js",
      "dependencies": [
        "template.active"
      ]
    },

and change user.js to user.min.js in

Code: Select all

"uri":  "user.js",

I am not sure you can duplicate this to implement both files though.
And I guess you'll have to rename the file in cassiopeia parent folder as well.

Roland_S · Post by **Roland_S** » Tue Sep 03, 2024 1:07 pm

Thanks for the help!
I tried it as described, but still, my JS is only working, when put in the template.js.

BUT, i found a solution that worked for me in another forum:
I put my JS Code in the user.js in this bracket:

Code: Select all

document.addEventListener("DOMContentLoaded", function(){
/* MY CODE */
});

now it works

ghazal · Post by **ghazal** » Tue Sep 03, 2024 3:04 pm

Well, this has nothing to do with joomla and the location/naming of js files.
This has to do with the placement of js files in between <head> </head>, which is the default placement of js files in joomla, and the necessary correction in the js script.

Webdongle · Post by **Webdongle** » Thu Sep 05, 2024 3:40 am

Please provide a screenshot of the file structure not a section of one

The Joomla! Forum™

Adding custom js and css in a child template J5

Adding custom js and css in a child template J5

Re: Adding custom js and css in a child template J5

Re: Adding custom js and css in a child template J5

Re: Adding custom js and css in a child template J5

Re: Adding custom js and css in a child template J5

Re: Adding custom js and css in a child template J5

Re: Adding custom js and css in a child template J5

Re: Adding custom js and css in a child template J5