css & js in custom template not working:

[SocketPup]

I am trying to add my own template to my Joomla project. So far what I've done is the following:

* Created a folder for the template.
* Added index.php & templateDetails.xml, plus the css & js files
* Included all the files in the .xml document like so:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 3.0//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/3.0/template.dtd">
<extension type="template" version="3.9" client="site" method="upgrade">
    <name>GardenTemplate</name>
    <creationDate>March 2024</creationDate>
    <author>F.P</author>
    <version>1.0</version>
    <description>My Custom Joomla Template</description>
    <files>
        <filename>index.php</filename>
	<filename>css/style.css</filename>
    	<filename>js/script.js</filename>
        <!-- Add other files here if needed -->
    </files>
</extension>

* Zipped everything and installed in Joomla admin as extension.
* Set the new template as default.

The markup itself is being displayed, but the css and js doesn't work for some reason. I tried clearing the cache in both the browser & in Joomla Admin, but it doesn't seem to fix anything.

What causes this and how can I solve it?

[Per Yngve Berg]

Mod. Note: Relocated the Topic to the Templates for J5 Forum.

You must load the kjs and css files in your template using web assets. The xml file is only for copying the files during installation.

[SocketPup]

Mod. Note: Relocated the Topic to the Templates for J5 Forum.

You must load the kjs and css files in your template using web assets. The xml file is only for copying the files during installation.

Thanks for the reply. I have done the following:

* In templateDetails.xml, changed to the following:

Code: Select all

<files>
    <filename>index.php</filename>
    <filename>templateDetails.xml</filename>
    <folder>css</folder>
    <folder>js</folder>
    <css>css/style.css</css>
    <script>js/script.js</script>
</files>

Then, in index.php, added this:

Code: Select all

<?php
// Load Joomla's document object
$doc = JFactory::getDocument();

// Output a debug message
var_dump("Adding CSS file");

// Load CSS file
$doc->addStyleSheet(JUri::base() . 'templates/gardentemplate/css/style.css');
?>

After installing the template, string(15) "Adding CSS file" is shown at the top of the document. However, the css still doesn't work (I also tried clearing the cache again)

[Pavel-ww]

After installing the template, string(15) "Adding CSS file" is shown at the top of the document. However, the css still doesn't work (I also tried clearing the cache again)

Hi. You should use Web Asset Manager ($wa). This is how it should look like in index.php

2.jpg

Tip: Use Cassiopea's index.php like example

[SocketPup]

After installing the template, string(15) "Adding CSS file" is shown at the top of the document. However, the css still doesn't work (I also tried clearing the cache again)

Hi. You should use Web Asset Manager ($wa). This is how it should look like in index.php

2.jpg

Tip: Use Cassiopea's index.php like example

Thank you for the suggestion. So in my template, I added a joomla.asset.json file. In that file, I added this code:

Code: Select all

{
  "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
  "name": "Gardentemplate",
  "version": "4.0.0",
  "description": "This file contains assets used by gardentemplate",
  "license": "GPL-2.0-or-later",
  "assets": [
    {
      "name": "mystyle",
      "type": "style",
      "uri": "style.css"
    }
  ]
}

The css file is located in css/style.css of my template folder.

Then, in index.php, I added this:

Code: Select all

<?php

$wa  = $this->getWebAssetManager();


$wa->useStyle('mystyle');

?>

From what I read up on, this should work, but it doesn't. What am I missing?

[SocketPup]

If anyone else comes across this issue, the above solution worked, only I had to also add the following in my index.php:

<jdoc:include type="metas" />
<jdoc:include type="styles" />

[pl71]

OK, better start with a working template (like Cassiopeia) and modify it as per your suits.